/* Theme Name: lala Aasha Theme Theme URI: Author: the WordPress team Author URI: Description: Version: 1.0 Tags: */ /* -------------------------------------------------- reset -------------------------------------------------- */ *, ::before, ::after { box-sizing: border-box;} html { line-height: 1.15; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent;} body { margin: 0;} main { display: block;} p, table, blockquote, address, pre, iframe, form, figure, dl { margin: 0;} h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; margin: 0;} ul, ol { margin: 0; padding: 0; list-style: none;} dd { margin-left: 0;} hr { box-sizing: content-box; height: 0; overflow: visible; border-top-width: 1px; margin: 0; clear: both; color: inherit;} pre { font-family: monospace, monospace; font-size: inherit;} address { font-style: inherit;} a { background-color: transparent; text-decoration: none; color: inherit;} abbr[title] { text-decoration: underline dotted;} code, kbd, samp { font-family: monospace, monospace; font-size: inherit;} small { font-size: 80%;} sub, sup { line-height: 0; position: relative; vertical-align: baseline;} svg, img, embed, object, iframe { vertical-align: bottom;} /* Forms */ /* ============================================ */ button, input, optgroup, select, textarea { -webkit-appearance: none; appearance: none; background: transparent; padding: 0; margin: 0; border-radius: 0; color: inherit; font: inherit; text-align: inherit; text-transform: inherit; vertical-align: middle; } button, [type="button"], [type="reset"], [type="submit"] { cursor: pointer;} button:disabled, [type="button"]:disabled, [type="reset"]:disabled, [type="submit"]:disabled { cursor: default;} :-moz-focusring { outline: auto;} select:disabled { opacity: inherit;} option { padding: 0;} fieldset { margin: 0; padding: 0; min-width: 0;} legend { padding: 0;} progress { vertical-align: baseline;} textarea { overflow: auto;} [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto;} [type="search"] { outline-offset: -2px;} [type="search"]::-webkit-search-decoration { -webkit-appearance: none;} ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit;} [type="number"] { -moz-appearance: textfield;} label[for] { cursor: pointer;} details { display: block;} summary { display: list-item;} [contenteditable]:focus { outline: auto;} table { border-color: inherit; border-collapse: collapse;} td, th { vertical-align: top; padding: 0;} /* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0;} .slick-list:focus { outline: none;} .slick-list.dragging{ cursor: pointer; cursor: hand;} .slick-slider .slick-track, .slick-slider .slick-list{ -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block;} .slick-track:before, .slick-track:after { display: table; content: '';} .slick-track:after { clear: both;} .slick-loading .slick-track { visibility: hidden;} .slick-slide { display: none; float: left; height: 100%; min-height: 1px;} [dir='rtl'] .slick-slide { float: right;} .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none;} .slick-slide.dragging img { pointer-events: none;} .slick-initialized .slick-slide { display: block; outline: none;} .slick-loading .slick-slide { visibility: hidden;} .slick-vertical .slick-slide{ display: block; height: auto;} .slick-arrow.slick-hidden { display: none;} .slick-arrow{ width: 50px; height: 50px; position: absolute; top: 50%; transform: translateY(-50%); background: none; border: none; border-radius: 50%; z-index: 100; border: solid 1px #f00; text-indent: -9999em; outline: none; } .slick-prev { left: 0px;} .slick-next { right: 0px;} .slick-arrow:before{ position: absolute; content: ''; display: block; width: 80%; height: 10px; top: 50%; left: 50%; transform: translate(-50%,-50%); background: #eee;} .slick-prev:before {} .slick-next:before {} /** Dots */ .slick-dotted.slick-slider{} .slick-dots { display: block; width: 100%; padding: 20px 0; margin: 0; font-size: 0; text-align: center;} .slick-dots li { position: relative; display: inline-block; width: 20px; height: 10px; padding: 0; cursor: pointer;} .slick-dots li button { line-height: 0; display: block; width: 10px; height: 10px; margin: 0 auto; cursor: pointer; color: transparent; border: 0; border-radius: 50%; outline: none; background: #C6BFB9; } .slick-dots li button:hover, .slick-dots li button:focus{ outline: none;} .slick-dots li.slick-active button { background: #9A8A7D;} @media (max-width: 481px) { } html{ height: -webkit-fill-available; } body{ min-height: 100vh; min-height: -webkit-fill-available; } /* font-style -------------------------------------------------- */ body { width: 100%; /* font-family: "Noto Sans JP", "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif;*/ font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif; font-size: 15px; *font-size:small; *font:x-small; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.fixed { position: fixed;} input, textarea {font-family: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif;} .min { font-family: "游明朝", "Yu Mincho", "YuMincho", serif;} ::selection{ background: #feffaf; color: #000;} ::-moz-selection{ background: #feffaf; color: #000;} a { color:#002159; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px;} a:link { color:#002159;} a:visited{ color:#002159;} a:hover { color:#002159;} a:active { color:#002159;} em{ font-style: normal;} /* utility -------------------------------------------------- */ .cf{ clear: both;} .cf:after{ content: ''; display: block; clear: both;} @media (max-width: 641px) { } /* common -------------------------------------------------- */ .wrap { width: 100%; overflow: hidden;} .btn-back { width: 80%; max-width: 260px; margin: 0 auto;} .btn-back a { position: relative; display: block; padding-right: 30px; border: solid 1px #707070; color: #000; text-align: center; text-decoration: none; transition: 0.3s ease;} .btn-back a span { position: relative; display: inline-block; padding: 15px 20px; background: #fff; z-index: 2; transition: 0.3s ease;} .btn-back a:after { content: ''; display: block; width: 130px; height: 8px; position: absolute; top: 35%; right: 20px; z-index: 1; background-image: url('data:image/svg+xml;utf8,'); background-size: auto 100%; background-repeat: no-repeat; background-position: 100% 50%; } .btn-back a:hover, .btn-back a:hover span { background: #EDEDED;} .note {} .note ul { width: 100%; font-size: 0px;} .note ul li { font-size: 12px;} #otherbrands {} #otherbrands .inner-sct { padding: 60px 0;} #otherbrands .ctn { width: 90%; max-width: 1000px; margin: 0 auto;} #otherbrands .ctn.all { max-width: 1200px;} #otherbrands .ctn ul { display: flex; justify-content: space-between; font-size: 0; text-align: center;} #otherbrands .ctn ul li { width: 32%; padding: 0 15px; vertical-align: top;} #otherbrands .ctn.all ul li { width: 25%; padding: 0 10px;} #otherbrands .ctn ul li a { display: block; display: block; width: 100%; height: 100%; background: #fff; border-radius: 20px; box-shadow: 0 3px 6px rgba(0,0,0,0.16); overflow: hidden; color: #000; text-decoration: none; transition: 0.3s ease; } #otherbrands .ctn ul li dl {} #otherbrands .ctn ul li dl dt {} #otherbrands .ctn ul li dl dt span { display: block;} #otherbrands .ctn ul li dl dt span img { width: 100%;} #otherbrands .ctn ul li dl dd.logo { padding: 25px 0 18px;} #otherbrands .ctn ul li dl dd.logo img { width: 52%; max-width: 150px; } #otherbrands .ctn ul li dl dd.txt { padding: 0px 30px 18px; font-size: 14px; text-align: left;} #otherbrands .ctn ul li dl dd.txt span { display: block; margin-bottom: 24px; font-size: 17px; text-align: center;} #otherbrands .ctn ul li a:hover { opacity: 0.7;} @media (max-width: 1001px) { #otherbrands .ctn.all ul li { width: 50%;} } @media (max-width: 801px) { #otherbrands .ctn ul li { padding: 0 8px;} #otherbrands .ctn.all ul li { padding: 0 6px;} } @media (max-width: 641px) { #otherbrands .inner-sct { padding: 40px 0;} #otherbrands .ctn { width: 88%;} #otherbrands .ctn ul { display: block;} #otherbrands .ctn ul li { display: block; width: 100%; padding: 15px 0;} #otherbrands .ctn.all ul li { width: 100%;} #otherbrands .ctn ul li a { border-radius: 12px;} #otherbrands .ctn ul li dl dd.logo { padding: 20px 0 10px;} #otherbrands .ctn ul li dl dd.txt span { margin-bottom: 12px;} } #recruit-bnr { background: url('/images/aside/bg-recruit.jpg') no-repeat 50% 50% / cover;} #recruit-bnr .inner { padding: 80px 0;} #recruit-bnr .ctn { display: flex; align-items: center; justify-content: space-around; width: 92%; max-width: 1000px; margin: 0 auto;} #recruit-bnr .ctn .txt { width: 48%;} #recruit-bnr .ctn .txt h3 { margin-bottom: 30px;} #recruit-bnr .ctn .txt h3 img { width: 100%; max-width: 450px;} #recruit-bnr .ctn .txt p { color: #fff; font-size: 15px; letter-spacing: 0.1rem; line-height: 2.2;} #recruit-bnr .ctn .link { width: 48%;} #recruit-bnr .ctn .link a { display: block; padding: 6px; background: rgba(255,255,255,0.8); border-radius: 200px; color: #000; font-size: 15px; letter-spacing: 0.1rem; line-height: 1; text-align: center; text-decoration: none; transition: 0.3s ease; } #recruit-bnr .ctn .link a span { display: block; padding: 50px 0 30px; background: #fff; border-radius: 200px; box-shadow: 0 3px 6px rgba(0,0,0,0.16);} #recruit-bnr .ctn .link a span em { display: block;} #recruit-bnr .ctn .link a span em.eng { margin-bottom: 15px; color: #717c7d; font-size: clamp(24px,3.5vw,35px); font-weight: 300; letter-spacing: 0.2rem;} #recruit-bnr .ctn .link a:hover { opacity: 0.5;} @media (max-width: 801px) { #recruit-bnr .ctn .link a span { padding: 30px 0 20px;} } @media (max-width: 641px) { #recruit-bnr .inner { padding: 60px 0;} #recruit-bnr .ctn { display: block; width: 88%;} #recruit-bnr .ctn .txt { width: 100%; margin-bottom: 40px;} #recruit-bnr .ctn .link{ width: 100%;} #recruit-bnr .ctn .link a { font-size: 12px;} #recruit-bnr .ctn .link a span em.eng { margin-bottom: 10px;} } @media (max-width: 481px) { #recruit-bnr .ctn .link a { padding: 4px;} #recruit-bnr .ctn .link a span em.eng { margin-bottom: 6px;} } .side-faq { position: fixed; right: 0; top: 50%; transform: translateX(80px); transition: 0.4s linear 0.5s;} .side-faq a { display: block; width: 40px; padding: 12px 0px; padding-right: 8px; background: #000; color: #fff; font-size: 14px; text-align: center; text-decoration: none; writing-mode: vertical-rl; } .side-faq.show { transform: translateX(0px)} .fix-sp { display: none; position: fixed; left: 0; bottom: 0px; width: 100%; z-index: 100; visibility: hidden; opacity: 0;} .fix-sp ul { font-size: 0; text-align: center;} .fix-sp ul li { display: inline-block; width: 50%; font-size: 16px;} .fix-sp ul li a { display: block; width: 100%; padding: 25px 0; color: #fff; text-decoration: none;} .fix-sp ul li.exp a:before { content: ''; display: inline-block; width: 16px; height: 21px; margin-right: 8px; vertical-align: middle; background-image: url('data:image/svg+xml;utf8,'); background-size: 100% auto; background-repeat: no-repeat; background-position: 100% 50%; } .fix-sp ul li.exp a span { display: inline-block; vertical-align: middle;} .fix-sp ul li.reserve a { color: #fff;} .fix-sp ul li.reserve a:before { content: ''; display: inline-block; width: 16px; height: 21px; margin-right: 8px; vertical-align: middle; background-image: url('data:image/svg+xml;utf8,'); background-size: 100% auto; background-repeat: no-repeat; background-position: 100% 50%; } .fix-sp ul li.reserve a span { display: inline-block; vertical-align: middle;} @media (max-width: 641px) { .fix-sp { display: block; visibility: visible; opacity: 1;} } @media (max-width: 481px) { .fix-sp ul li a { padding: 20px 0;} } aside.sns ul { font-size: 0; text-align: center;} aside.sns ul li { display: inline-block; padding: 0 20px;} aside.sns ul li a { display: inline-block; transition: 0.3s ease;} aside.sns ul li a svg { width: auto; height: 30px;} aside.sns ul li a:hover { opacity: 0.5;} @media (max-width: 481px) { aside.sns ul li { padding: 0 16px;} aside.sns ul li a svg { height: 24px;} } aside.ft-follow { padding: 30px 0; background: #3c3c3c;} aside.ft-follow p { color: #fff; font-family: 'Lexend Peta', sans-serif; font-size: 20px; font-weight: 700; line-height: 1; text-align: center;} aside.ft-follow p span { display: inline-block; margin-right: 20px; vertical-align: middle;} aside.ft-follow p a { display: inline-block; width: 27px; margin: 0 6px; vertical-align: middle;} aside.ft-follow p a svg { fill: #fff; vertical-align: middle;} /* Header -------------------------------------------------- */ #hd { position: fixed; left: 0; top: 0; z-index: 99; width: 100%; background: #fff;} #hd .inner-hd { width: 94%; margin: 0 auto; } #hd .hd-ctn { display: flex; justify-content: space-between; align-items: center; padding-right: 60px; transition: 0.3s linear; opacity: 0;} #hd.show .hd-ctn { opacity: 1;} #hd .hd-logo { width: 25%;} #hd .hd-nav { width: 75%;} #hd .hd-logo h1 a { display: block; width: 100%; max-width: 180px;} #hd .hd-logo h1 a img { width: 100%; transition: 0.3s ease;} #hd .hd-logo h1 a:hover img { opacity: 0.6;} #hd .hd-nav ul { font-size: 0px; text-align: right;} #hd .hd-nav ul li { display: inline-block; vertical-align: middle; font-size: 15px; font-weight: 300; letter-spacing: 0.1rem; line-height: 1;} #hd .hd-nav ul li.exp { margin-left: 15px;} #hd .hd-nav ul li a { position: relative; display: block; padding: 40px 25px; color: #000; text-decoration: none; transition: 0.3s ease;} #hd .hd-nav ul li.exp a { padding: 34px 15px 42px; color: #fff;} #hd .hd-nav ul li.exp a:before { content: ''; display: inline-block; width: 18px; height: 24px; margin-right: 8px; vertical-align: text-bottom; background-image: url('data:image/svg+xml;utf8,'); background-size: 100% auto; background-repeat: no-repeat; background-position: 100% 50%; } #hd .hd-nav ul li.exp a span { display: inline-block; vertical-align: text-bottom;} #hd .hd-nav ul li.reserve a { padding: 34px 15px 42px; color: #fff;} #hd .hd-nav ul li.reserve a:before { content: ''; display: inline-block; width: 18px; height: 24px; margin-right: 8px; vertical-align: text-bottom; background-image: url('data:image/svg+xml;utf8,'); background-size: 100% auto; background-repeat: no-repeat; background-position: 100% 50%; } #hd .hd-nav ul li.reserve a span { display: inline-block; vertical-align: text-bottom;} #hd .hd-nav ul li a:hover { color: #7f7f7f;} @media (max-width: 1201px) { #hd .hd-nav ul li a { padding: 30px 18px;} #hd .hd-nav ul li.exp a, #hd .hd-nav ul li.reserve a { padding: 24px 10px 28px;} } @media (max-width: 1001px) { #hd .hd-nav ul li { font-size: 14px;} #hd .hd-nav ul li.exp { margin-left: 10px;} #hd .hd-nav ul li a { padding: 30px 6px;} #hd .hd-nav ul li.exp a, #hd .hd-nav ul li.reserve a { padding: 25px 8px 29px;} #hd .hd-nav ul li.exp a:before { width: 14px; height: 20px;} #hd .hd-nav ul li.reserve a:before { width: 14px; height: 20px;} } @media (max-width: 801px) { #hd .hd-ctn { padding:28px 0px 20px;} #hd .hd-logo { width: 34%; margin: 0 auto;} #hd .hd-logo h1 a { margin: 0 auto;} #hd .hd-nav { display: none;} } @media (max-width: 481px) { } #hd .hd-fit { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 10px 0; padding-right: 100px;} #hd .hd-fit .hd-logo { width: 30%;} #hd .hd-fit .hd-nav { width: 70%;} #hd .hd-fit .hd-nav ul.left { text-align: left;} #hd .hd-fit .hd-nav ul li a { padding: 10px 20px;} #hd .fit-trial { position: absolute; top: 0; right: 80px; width: 65px;} #hd .fit-trial a { position: relative; display: block; padding: 15px 0 5px; background: #c5a600; color: #fff; font-size: 18px; font-weight: 700; letter-spacing: 0.2rem; line-height: 1.2; text-align: center; text-decoration: none; } #hd .fit-trial a:before, #hd .fit-trial a:after { content: ''; display: block; width: 0px; height: 0px; border: solid 15px transparent; position: absolute; bottom: -18px; z-index: 1;} #hd .fit-trial a:before{ left: 0; border-left: solid 35px #c5a600; border-top: solid 15px #c5a600;} #hd .fit-trial a:after { right: 0; border-right: solid 35px #c5a600; border-top: solid 15px #c5a600;} #hd .fit-trial a span { position: relative; z-index: 2;} #hd .fit-trial a:hover { opacity: 0.8;} #hd .fit-mypage { display: block; width: 52px; padding-top: 6px; position: absolute; right: 0px; top: 6px;} #hd .fit-mypage a { position: relative; display: block; padding-top: 15px; color: #000; line-height: 1.2; text-align: center;} #hd .fit-mypage a svg { width: 25px; margin: 0 auto;} #hd .fit-mypage a svg path {fill: transparent; stroke: #424242; stroke-width: 2px;} #hd .fit-mypage a svg polygon { fill: #424242;} #hd .fit-mypage a span { display: block; width: 100%; position: absolute; left: 0; top: 0; font-size: 10px; font-weight: 700; text-align: center; transform: scale(0.85); } @media (max-width: 1001px) { } @media (max-width: 801px) { #hd .hd-fit { padding:10px 60px;} #hd .hd-fit .hd-logo { width: 100%;} #hd .fit-trial { right: auto; left: 0; width: 55px;} #hd .fit-trial a { padding: 10px 0 4px; font-size: 15px;} #hd .fit-mypage { padding-top: 2px;} } @media (max-width: 481px) { #hd .hd-fit h1 a { max-width: 120px;} #hd .fit-trial a { padding: 8px 0 2px; font-size: 14px;} #hd .fit-mypage { padding-top: 0px; width: 50px; top: 6px; right: -10px;} #hd .fit-mypage a { padding-top: 12px;} #hd .fit-mypage a svg { width: 20px;} #hd .fit-mypage a span { transform: scale(0.5);} } #hd .hd-school { position: relative; padding: 10px 0; padding-right: 180px;} #hd .school-logo {} #hd .school-logo h1 { font-size: 14px;} #hd .school-logo h1 a { display: inline-block; width: 50%; max-width: 140px; margin-right: 18px; vertical-align: middle;} #hd .school-logo h1 a img { width: 100%;} #hd .school-logo h1 span { display: inline-block; max-width: 200px; vertical-align: middle;} #hd .school-logo h1 span br { display: none;} #hd .hd-consult { position: absolute; top: 0; right: 70px; width: 100px;} #hd .hd-consult a { position: relative; display: block; padding: 15px 0 5px; background: #c5a600; color: #fff; font-size: 16px; font-weight: 700; letter-spacing: 0.1rem; line-height: 1.2; text-align: center; text-decoration: none; } #hd .hd-consult a:before, #hd .hd-consult a:after { content: ''; display: block; width: 0px; height: 0px; border: solid 15px transparent; position: absolute; bottom: -18px; z-index: 1;} #hd .hd-consult a:before{ left: 0; border-left: solid 50px #c5a600; border-top: solid 15px #c5a600;} #hd .hd-consult a:after { right: 0; border-right: solid 50px #c5a600; border-top: solid 15px #c5a600;} #hd .hd-consult a span { position: relative; z-index: 2;} #hd .hd-consult a:hover { opacity: 0.8;} @media (max-width: 1001px) { } @media (max-width: 801px) { #hd .hd-school { padding-right: 120px;} #hd .school-logo h1 { font-size: 10px;} #hd .school-logo h1 a { margin-right: 10px;} #hd .hd-consult { width: 80px; right: 50px;} #hd .hd-consult a { padding: 12px 0 4px; font-size: 13px; letter-spacing: 0.05rem;} } @media (max-width: 481px) { #hd .school-logo h1 a { max-width: 120px;} #hd .school-logo h1 span br { display: block;} } .menu-btn { position: fixed; left: 0; top: 0; z-index: 201; width: 100%; transition: 0.3s linear; opacity: 0;} .menu-btn.show { opacity: 1;} .menu-btn .outer { position: relative; width: 98%; margin: 0 auto;} .menu-btn .menu-trig { position: absolute; right: 0; top: 8px; width: 88px; height: 88px;} .menu-btn .menu-trig div.inner{ position: relative; width: 100%; height: 100%; cursor: pointer;} .menu-btn .menu-trig div.open { position: relative; width: 100%; height: 100%; cursor: pointer;} .menu-btn .menu-trig div.open:after { content: 'MENU'; display: block; width: 100%; position: absolute; left: 0; bottom: 20px; font-size: 10px; font-family: "Josefin Sans", sans-serif; font-optical-sizing: auto; line-height: 1; text-align: center; transition: 0.2s linear; } .menu-btn .menu-trig div span { display: block; width: 25px; height: 1px; background: #000; position: absolute; left: 50%; opacity: 1;} .menu-btn .menu-trig div.open span:nth-of-type(1) { top: 22px; transform: translate(-50%, 0);} .menu-btn .menu-trig div.open span:nth-of-type(2) { top: 31px; transform: translate(-50%, 0); transition: 0.2s linear;} .menu-btn .menu-trig div.open span:nth-of-type(3) { top: 40px; transform: translate(-50%, 0);} .menu-btn .menu-trig div.open { animation: 0.5s menu-scale-2 ease forwards;} .menu-btn .menu-trig.active div.open { animation: 0.5s menu-scale-1 ease forwards;} .menu-btn .menu-trig div.close { position: absolute; top: 18px; left: 0; width: 100%; height: 100%; cursor: pointer; transform: scale(0.0); animation: 0.5s menu-scale-1 ease forwards;} .menu-btn .menu-trig div.close span:nth-of-type(1) { top: 20px; transform: translate(-50%, 0) rotate(45deg);} .menu-btn .menu-trig div.close span:nth-of-type(2) { top: 20px; transform: translate(-50%, 0) rotate(-45deg);} .menu-btn .menu-trig.active div.close { animation: 0.5s menu-scale-2 ease forwards;} @keyframes menu-scale-1 { 0%{ transform: scale(1.0);} 100%{ transform: scale(0.0);} } @keyframes menu-scale-2 { 0%{ transform: scale(0.0);} 100%{ transform: scale(1.0);} } @media (max-width: 1201px) { .menu-btn .menu-trig { top: 0px; width: 80px; height: 80px;}} } @media (max-width: 1001px) { .menu-btn .menu-trig { top: 0px;} } @media (max-width: 801px) { .menu-btn .menu-trig { top: 10px;} .menu-btn .menu-trig div span { width: 30px;} .menu-btn .menu-trig div.open:after { content: none;} .menu-btn .menu-trig div.open span:nth-of-type(1) { top: 32px;} .menu-btn .menu-trig div.open span:nth-of-type(2) { top: 42px;} .menu-btn .menu-trig div.open span:nth-of-type(3) { top: 52px;} .menu-btn .menu-trig div.close { top: 0px;} .menu-btn .menu-trig div.close span:nth-of-type(1) { top: 42px;} .menu-btn .menu-trig div.close span:nth-of-type(2) { top: 42px;} } @media (max-width: 481px) { .menu-btn .menu-trig { top: 3px; width: 60px; height: 60px;} } #open-menu { position: fixed; left: 0; top: 0px; width: 100%; opacity: 0; visibility: hidden; transition: 0.4s linear; opacity: 0;} #open-menu.open { visibility: visible; opacity: 1; z-index: 200;} #open-menu .inner { position: relative; padding: 24px 0 90px; background: #eee;} #open-menu .menu-ctn { width: 94%; max-width: 1200px; margin: 0 auto;} #open-menu .aside { padding: 0 64px;} #open-menu .aside ul { font-size: 0; text-align: right;} #open-menu .aside ul li { display: inline-block; padding: 0 6px; font-size: 15px; line-height: 1;} #open-menu .aside ul li a { display: block; width: 150px; padding: 14px 0; color: #000; text-align: center; text-decoration: none;} #open-menu .aside ul li.exp a { color: #fff;} #open-menu .aside ul li.exp a:before { content: ''; display: inline-block; width: 14px; height: 18px; margin-right: 8px; vertical-align: text-bottom; background-image: url('data:image/svg+xml;utf8,'); background-size: 100% auto; background-repeat: no-repeat; background-position: 100% 50%; } #open-menu .aside ul li.exp a span { display: inline-block; vertical-align: text-bottom;} #open-menu .aside ul li.reserve a { color: #fff;} #open-menu .aside ul li.reserve a:before { content: ''; display: inline-block; width: 14px; height: 18px; margin-right: 8px; vertical-align: text-bottom; background-image: url('data:image/svg+xml;utf8,'); background-size: 100% auto; background-repeat: no-repeat; background-position: 100% 50%; } #open-menu .aside ul li.reserve a span { display: inline-block; vertical-align: text-bottom;} #open-menu .menu-flex { display: flex; justify-content: space-between; padding-top: 60px;} #open-menu .menu-logo{ width: 16%;} #open-menu .menu-nav { width: 80%;} #open-menu .menu-logo p a { display: block; width: 100%; max-width: 190px;} #open-menu .menu-logo p a img { width: 100%;} #open-menu .menu-nav.w900 { max-width: 900px;} #open-menu .menu-nav .flex { display: flex; width: 100%;} #open-menu .menu-nav .flex .w25 { width: 25%; max-width: 250px;} #open-menu .menu-nav .flex .w30 { width: 30%; max-width: 300px;} #open-menu .menu-nav .flex .w32 { width: 32%; max-width: 300px;} #open-menu .menu-nav .flex .w40 { width: 40%; max-width: 350px;} #open-menu .menu-nav .flex .w50 { width: 50%; max-width: 400px;} #open-menu .menu-nav .flex ul { font-size: 0px;} #open-menu .menu-nav .flex ul li { margin-bottom: 32px; font-size: 15px; line-height: 1;} #open-menu .menu-nav .flex ul li:last-child { margin-bottom: 0;} #open-menu .menu-nav .flex ul li a { display: block; padding: 6px 0 4px; color: #000; font-weight: 300; letter-spacing: 0.16rem; text-decoration: none; transition: 0.3s ease;} #open-menu .menu-nav .flex ul li a:hover { opacity: 0.5;} #open-menu .menu-nav .flex ul li ul.area1 { padding-top: 24px;} #open-menu .menu-nav .flex ul li ul.area1 li { display: block; width: 100%; margin-bottom: 6px; font-weight: 400;} #open-menu .menu-nav .flex ul li ul.area2 { padding-top: 24px;} #open-menu .menu-nav .flex ul li ul.area2 li { display: inline-block; width: 50%; vertical-align: top; margin-bottom: 0;} #open-menu .menu-nav .flex ul li ul.area2 li dl {} #open-menu .menu-nav .flex ul li ul.area2 li dl dt { margin-bottom: 18px; color: #776F6B;} #open-menu .menu-nav .flex ul li ul.area2 li dl dt span { font-weight: 300; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;} #open-menu .menu-nav .flex ul li ul.area2 li dl dd { margin-bottom: 10px; font-size: 14px; font-weight: 400;} #open-menu .menu-nav .flex ul li ul.area2 li dl dd:last-child { margin-bottom: 0;} #open-menu .menu-nav .flex ul li dl.course { } #open-menu .menu-nav .flex ul li dl.course dt { margin-bottom:6px; font-size: 16px; font-weight: 700;} #open-menu .menu-nav .flex ul li dl.course dd { position: relative; padding: 4px 0; padding-left: 15px; font-size: 14px;} #open-menu .menu-nav .flex ul li dl.course dd:before { content: ''; display: block; width: 6px; height: 1px; background: #fff; position: absolute; left: 0; top: 1.2em;} #open-menu .menu-nav .flex ul li ul.sns { padding-bottom: 30px; text-align: center;} #open-menu .menu-nav .flex ul li ul.sns li { display: inline-block; width: 30%; max-width: 50px; margin: 0;} #open-menu .menu-nav .flex ul li ul.sns li a { display: block; width: 40px; margin: 0 auto;} #open-menu .menu-nav .flex ul li ul.sns li a.fb, #open-menu .menu-nav .flex ul li ul.sns li a.insta { width: 28px;} #open-menu .menu-nav .flex ul li ul.sns li a svg { width: 100%; fill: #fff;} #open-menu .menu-nav .flex ul li a.link-consult { display: block; width: 100%; max-width: 160px; margin: 0 auto; padding: 12px 0; background: #fff; color: #3c3c3c; text-align: center;} #open-menu aside.sns { display: none;} #open-menu .menu-side { position: absolute; right: 0; bottom: 40px; transform: translateX(80px); transition: 0.4s linear 0.5s;} #open-menu .menu-side a { display: block; width: 40px; padding: 12px 0px; padding-right: 8px; background: #000; color: #fff; font-size: 14px; text-align: center; text-decoration: none; writing-mode: vertical-rl; } #open-menu.open .menu-side { transform: translateX(0px)} @media (max-width: 1001px) { #open-menu .menu-flex { padding-top: 40px;} } @media (max-width: 801px) { #open-menu .inner { position: relative; padding: 0px;} #open-menu .scroll { width: 100%; max-height: 100svh; overflow-y: scroll;} #open-menu .menu-ctn { width: 88%; padding: 20px 0 40px;} #open-menu .aside ul { text-align: center;} #open-menu .aside ul li { width: 50%; font-size: 14px;} #open-menu .aside ul li a { width: 100%; max-width: 180px; margin: 0 auto; padding: 12px 0;} #open-menu .menu-flex { display: block; padding: 40px 0;} #open-menu .menu-logo{ width: 100%; display: none;} #open-menu .menu-nav { width: 88%; margin: 0 auto;} #open-menu .menu-nav .flex { display: block;} #open-menu .menu-nav .flex .w25 { width: 100%; max-width: 480px;} #open-menu .menu-nav .flex .w32 { width: 100%; max-width: 480px;} #open-menu .menu-nav .flex .w50 { width: 100%; max-width: 480px;} #open-menu .menu-nav .flex .nav-1 { width: 100%; max-width: 480px; margin: 0 auto 20px;} #open-menu .menu-nav .flex .nav-2 { width: 100%; max-width: 480px; margin: 0 auto 20px;} #open-menu .menu-nav .flex .nav-3 { width: 100%; max-width: 480px; margin: 0 auto;} #open-menu .menu-nav .flex ul li { margin-bottom: 20px;} #open-menu .menu-nav .flex ul li ul.area1 li { margin-bottom: 8px;} #open-menu .menu-nav .flex ul li ul.area2 li dl dd { margin-bottom: 8px;} #open-menu aside.sns { display: block;} } @media (max-width: 481px) { #open-menu .menu-ctn { padding: 40px 0;} #open-menu .aside { padding: 24px 0px;} #open-menu .aside ul { text-align: center;} #open-menu .aside ul li.exp a:before { vertical-align: middle;} #open-menu .aside ul li.exp a span { vertical-align: middle;} #open-menu .aside ul li.reserve a:before { vertical-align: middle;} #open-menu .aside ul li.reserve a span { vertical-align: middle;} #open-menu .menu-flex { padding-top: 8px;} #open-menu .menu-nav .flex .nav-1 { margin-bottom:12px;} #open-menu .menu-nav .flex .nav-2 { margin-bottom:20px;} #open-menu .menu-nav .flex ul li { margin-bottom: 10px;} #open-menu .menu-nav .flex ul li a { display: block; padding: 8px 0;} #open-menu .menu-nav .flex ul li ul.area1 { padding-top: 10px;} #open-menu .menu-nav .flex ul li ul.area1 li { margin-bottom: 6px; font-size: 13px;} #open-menu .menu-nav .flex ul li ul.area1 li a { padding: 6px 0;} #open-menu .menu-nav .flex ul li ul.area2 { padding-top: 18px;} #open-menu .menu-nav .flex ul li ul.area2 li { display: block; width: 100%; padding: 8px 0;} #open-menu .menu-nav .flex ul li ul.area2 li dl dt { margin-bottom: 18px;} #open-menu .menu-nav .flex ul li ul.area2 li dl dd { margin-bottom: 6px; font-size: 13px;} #open-menu .menu-nav .flex ul li ul.area2 li dl dd a { padding: 6px 0;} #open-menu .menu-nav .flex ul li ul.sns { padding: 20px 0;} #open-menu .menu-nav .flex ul li a.link-consult { max-width: 200px;} #open-menu aside.sns .inner { padding: 20px 0;} } /* Footer -------------------------------------------------- */ #ft .inner-ft { padding: 20px 0;} #ft aside.sns .inner { padding: 40px 0;} #ft .ft-ctn { display: flex; justify-content: space-between; width: 94%; max-width: 1200px; margin: 0 auto; padding: 50px 0;} #ft .ft-logo { width: 23%;} #ft .ft-nav { width: 74%;} #ft .ft-nav.w800 { max-width: 800px;} #ft .ft-logo h3 a { display: block; width: 100%; max-width: 180px;} #ft .ft-logo h3 a img { width: 100%;} #ft .ft-logo h3 a:hover { opacity: 0.5;} #ft .ft-nav .flex { position: relative; display: flex; width: 100%;} #ft .ft-nav .flex .w25 { width: 25%;} #ft .ft-nav .flex .w30 { width: 30%;} #ft .ft-nav .flex .w32 { width: 32%;} #ft .ft-nav .flex .w40 { width: 40%;} #ft .ft-nav .flex .w50 { width: 50%;} #ft .ft-nav .flex .sp-w30 { width: 30%;} #ft .ft-nav .flex ul { font-size: 0px;} #ft .ft-nav .flex ul li { margin-bottom: 32px; font-size: 15px; line-height: 1;} #ft .ft-nav .flex ul li:last-child { margin-bottom: 0;} #ft .ft-nav .flex ul li a { display: block; padding: 6px 0 4px; color: #000; font-weight: 300; letter-spacing: 0.2rem; text-decoration: none; transition: 0.3s ease;} #ft .ft-nav .flex ul li a:hover { opacity: 0.5;} #ft .ft-nav .flex ul li ul.area1 { padding-top: 20px;} #ft .ft-nav .flex ul li ul.area1 li { width: 100%; margin-bottom: 10px; font-size: 14px; font-weight: 400; letter-spacing: 0.2rem;} #ft .ft-nav .flex ul li ul.area2 { padding-top: 20px;} #ft .ft-nav .flex ul li ul.area2 li { display: inline-block; width: 50%; vertical-align: top; margin-bottom: 0;} #ft .ft-nav .flex ul li ul.area2 li dl {} #ft .ft-nav .flex ul li ul.area2 li dl dt { margin-bottom: 24px; font-weight: 300; letter-spacing: 0.2rem;} #ft .ft-nav .flex ul li ul.area2 li dl dt span { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px;} #ft .ft-nav .flex ul li ul.area2 li dl dd { margin-bottom: 10px; font-size: 14px; font-weight: 400;} #ft .ft-nav .flex ul li ul.area2 li dl dd:last-child { margin-bottom: 0;} #ft .ft-nav .flex ul li dl.course dt { margin-bottom: 24px; color: #fff;} #ft .ft-nav .flex ul li dl.course dd { margin-bottom: 10px; font-size: 14px; font-weight: 400;} #ft .ft-nav .flex ul li dl.course dd:last-child { margin-bottom: 0;} #ft .ft-nav .flex ul li a.consult { padding: 15px 0; background: #c5a600; color: #fff; font-size: 16px; text-align: center;} #ft .ft-aside { padding: 30px 0;} #ft .ft-aside ul { font-size: 0; text-align: center;} #ft .ft-aside ul li { display: inline-block; padding: 0 20px; font-size: 12px; line-height: 1; border-left: solid 1px #000; vertical-align: middle;} #ft .ft-aside ul li:first-child { border-left: none;} #ft .ft-aside ul li a { color: #000; text-decoration: none;} #ft .ft-aside ul li a:hover { text-decoration: underline;} #ft .ft-aside ul li.logo { padding-right: 50px;} #ft .ft-aside ul li.logo a{ display: block; width: 120px; } #ft .ft-aside ul li.logo img { width: 100%;} #ft .ft-aside ul li.rect { padding-right: 50px;} #ft .ft-aside ul li.rect a{ display: block; width: 60px; } #ft .ft-aside ul li.rect img { width: 100%;} #ft .copyright { text-align: center;} #ft .copyright p { font-size: 12px;} @media (max-width: 801px) { #ft .ft-ctn { display: block;} #ft .ft-logo { width: 100%; margin-bottom: 40px;} #ft .ft-nav { width: 100%;} #ft .ft-nav .flex { flex-wrap: wrap;} } @media (max-width: 641px) { #ft .ft-ctn { width: 88%;} #ft .ft-logo h3 a { margin: 0 auto;} #ft .ft-nav .flex { display: block;} #ft .ft-nav .flex .sp-right { position: absolute; right: 0; top: 0;} #ft .ft-nav .flex .sp-w30 { position: absolute; right: 0; top: 0; width: 38%;} #ft .ft-nav .flex .w25 { width: 50%;} #ft .ft-nav .flex .w30 { width: 60%; padding-top: 20px;} #ft .ft-nav .flex .w32 { width: 50%;} #ft .ft-nav .flex .w40 { width: 60%;} #ft .ft-nav .flex ul li { margin-bottom: 16px;} #ft .ft-nav .flex ul li ul.area2 { padding-top: 10px;} #ft .ft-nav .flex ul li ul.area2 li { display: block; width: 100%; padding: 9px 0;} #ft .ft-nav .flex ul li ul.area2 li dl dt { margin-bottom: 16px;} } @media (max-width: 481px) { #ft aside.sns .inner { padding: 20px 0;} #ft .ft-logo h3 a { max-width: 150px;} #ft .ft-aside ul li { padding: 0 8px;} #ft .ft-aside ul li.logo { display: block; width: 100%; margin-bottom: 30px; padding-right: 10px;} #ft .ft-aside ul li.logo a{ width: 100px; margin: 0 auto;} #ft .ft-aside ul li.rect { padding-right: 30px;} #ft .ft-aside ul li.rect a{ width: 40px;} #ft .ft-ctn { padding: 20px 0 40px;} #ft .ft-nav .flex .nav-1{ margin-bottom: 18px;} #ft .ft-nav .flex ul li { margin-bottom: 18px;} #ft .ft-nav .flex ul li ul.area2 li dl dd { margin-bottom: 6px; font-size: 13px;} #ft .ft-nav .flex ul li dl.course dt { margin-bottom: 12px;} #ft .ft-nav .flex ul li dl.course dd { margin-bottom: 6px;} #ft .ft-nav .flex ul li a.consult { padding: 10px 0; font-size: 13px;} #ft .copyright p { font-size: 10px;} }