@charset "utf-8";
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap');
@import url('css/remodal.css');
@import url('css/slick.css');

/* ==========================================
    # reset
============================================= */

html, body, footer, header,
div, section, article, aside, nav,
object, iframe, video, address, img,
h1, h2, h3, h4, h5, h6, p,
small, strong, b, i, span,
dl, dt, dd, ol, ul, li,
table, tr, th, td, form, label {
    font-size: 100%;
    vertical-align: baseline;
    border: 0;
    outline: 0;
    background: transparent;
    margin: 0;
    padding: 0;
}

body {
    line-height: 1;
}

footer, header, div, section, article, aside, nav {
    display: block;
}

a {
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    margin: 0;
    padding: 0;
}

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

input, select, textarea, img, th, td {
    vertical-align: middle;
}

ul, dl, ol {
    list-style: none;
}

/* ==========================================
    # 共通設定
============================================= */

* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-appearance: none;
            appearance: none;
    -webkit-text-size-adjust: 100%;
            text-size-adjust: none;
}

html,
body {
  height: 100%;
}

body {
    font-family: 'Zen Maru Gothic', Meiryo, sans-serif;
    font-size: clamp(16px, 1vw, 20px);
    font-weight: 500;
    font-feature-settings: "palt";
    color: var(--baseC);
    line-height: 2;
    background: #fff;
}

@media (width < 840px) {

body {
    font-size: 2.4vw;
}

}

@media (width < 480px) {

body {
    font-size: 3.8vw;
}

}

h1, h2, h3, h4, h5, h6, strong, th {
    font-weight: 700;
}

a {
    color: #05d;
    text-decoration: none;
    transition: .3s;
}

a:hover {
    text-decoration: underline;
}

a:hover img {
    opacity: .6;
}

img, video, object {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
    border: none;
    transition: .3s;
}

table {
    table-layout:fixed;
}

table th,
table td {
    vertical-align: middle;
}

/* ==========================================
    # 変数
============================================= */

:root {
/* color */
    --baseC: #444;
    --halfC: #888;
    --accentC: #e70;
    --subC: #fa0;
    --thinC: #fff8eb;
}

/* ==========================================
    # ヘッダー
============================================= */

header {
    width: 100%;
    padding: 1.5em;
    position: fixed;
    z-index: 9999;
    transition: .3s;
}

header h1 {
    width: 16.8%;
    min-width: 260px;
    max-width: 310px;
    float: left;
}

header h1 img {
    display: block;
}

header h1 .type {
    display: none;
}

header.tiny {
    background: #fff;
}

@media (width > 1080px) {

header.tiny {
    width: calc(100% - 3em);
    margin: 1em 1.5em;
    padding: 0;
    transition: .3s;
    border-radius: 10px;
    box-shadow: 0 0 2em rgba(0,0,0,.1);
    overflow: hidden;
}

header.tiny h1 {
    width: 14%;
    min-width: 208px;
    max-width: 250px;
    margin: 0 .2em;
    padding: .5em;
}

header.tiny h1 .logo {
    display: none;
}

header.tiny h1 .type {
    display: block;
}

}

@media (width < 840px) {

header {
    padding: .75em;
}

header.tiny h1 .logo-hdr {
    display: none;
}

header.tiny h1 .logo {
    display: block;
}

header h1 {
    width: 38%;
    min-width: auto;
    max-width: auto;
}

}

@media (width < 480px) {

header {
    padding: .5em .75em;
}

header h1 {
    width: 60%;
}

}

/* ==========================================
    # ナビゲーション
============================================= */

#global-nav {
    float: right;
}

#global-nav ul {
    overflow: hidden;
}

#global-nav ul li {
    margin: 0 0 0 2em;
    padding: .25em 0;
    float: left;
}

#global-nav ul li a {
    display: block;
    color: #fff;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    padding: .75em 0;
}

#global-nav ul li a:hover {
    color: var(--accentC);
}

#global-nav ul li.nav-contact a {
    color: #fff;
    background: var(--accentC);
    padding: .75em 2em;
    border-radius: 3em;
}

#global-nav ul li.nav-contact a:hover {
    background: var(--subC);
}

@media (width < 1080px) {

#global-nav ul li {
    display: none;
}

#global-nav ul li:last-child {
    display: block;
}

}

@media (width < 480px) {

#global-nav ul li {
    margin: 0;
}

#global-nav ul li.nav-contact a {
    font-size: 90%;
    padding: .8em 1.2em;
}

}

/* ==========================================
    # 追従時
============================================= */

@media (width > 1080px) {

.tiny #global-nav ul li {
    margin: 0;
    padding: 0;
}

.tiny #global-nav ul li a {
    font-size: 90%;
    color: var(--baseC);
    padding: 1em;
}

.tiny #global-nav ul li a::before {
    display: inline-block;
    content: "";
    border: 5px solid transparent;
    border-left: 5px solid var(--accentC);
    margin: 0 .25em 0 0;
    position: relative;
    transition: .3s;
}

.tiny #global-nav ul li a:hover {
    color: var(--accentC);
}

.tiny #global-nav ul li a:hover::before {
    border-left: 5px solid var(--subC);
}

.tiny #global-nav ul li.nav-contact a {
    color: #fff;
    padding: 1em 2em;
    border-radius: 0;
}

.tiny #global-nav ul li.nav-contact a::before {
    display: none;
}

.tiny #global-nav ul li.nav-contact a {
    margin: 0 0 0 .5em;
}

}

/* ==========================================
    # フッター
============================================= */

footer {
    font-size: 13px;
    border-top: 1px dashed #ddd;
    background: url(images/ftr-bg.png) repeat-x center bottom / auto 12%;
    padding: 8% 8% 10%;
    position: relative;
    overflow: hidden;
}

footer dl {
    display: table;
}

footer dl dt,
footer dl dd {
    display: table-cell;
    vertical-align: middle;
}

footer dl dt {
    padding: 0 3em 0 0;
}

footer dl dd {
    padding: 0 0 0 3em;
    border-left: 1px solid;
}

footer dt a {
    display: block;
    margin: 0 0 1em;
}

footer dd p::before {
    display: inline-block;
    width: 1.5em;
    text-align: center;
    font-family: FontAwesome;
    color: var(--subC);
    margin: 0 .5em 0 0;
}

.ftr-corp::before {
    content: "\f1ad";
}
.ftr-name::before {
    content: "\f015";
}
.ftr-address::before {
    content: "\f3c5";
}
.ftr-tel::before {
    content: "\f095";
}
.ftr-mail::before {
    content: "\f0e0";
}
.ftr-capa::before {
    content: "\e537";
}
.ftr-time::before {
    content: "\f017";
}
.ftr-holi::before {
    content: "\f073";
}

footer dd p a {
    color: var(--baseC);
    text-decoration: underline;
}

footer dd p a:hover {
    color: var(--halfC);
    text-decoration: none;
}

.ftr-copyright {
    margin: 1em 0 0;
}

.ftr-copyright::before {
    font-family: FontAwesome;
    content: "\f1f9";
    margin: 0 .5em 0 0;
}

.butterfly {
    width: 120px;
    height: auto;
    position: absolute;
    left: 2%;
    bottom: 2%;
    z-index: 9999;
}

@media (width < 840px) {

footer {
    text-align: center;
    padding: 12% 0 16%;
}

footer dl {
    display: block;
    margin: 0;
}

footer dl dt,
footer dl dd {
    display: block;
    padding: 0;
}

footer dl dt {
    margin: 0 0 10px;
}

footer dl dd {
    border-left: none;
}

footer dt a {
    display: inline-block;
    width: 200px;
    margin: 0 0 5px;
}

.butterfly {
    width: 100px;
    left: 1%;
    bottom: 1%;
}

}

@media (width < 480px) {

footer {
    font-size: 3.0vw;
    padding: 16% 0 20%;
}

footer dl dt a {
    width: 50%;
}

.butterfly {
    width: 80px;
    left: 1%;
    bottom: 0;
}

}

/* ==========================================
    #
============================================= */

section {
    padding: 6em 0;
}

@media (width < 840px) {

section {
    padding: 6em 0;
}

}

/* # Wrap
============================ */

.wrap {
    width: min(100% - 3em, 1280px);
    margin-inline: auto;
    position: relative;
}

/* ==========================================
    #
============================================= */

.remodal .clip {
    position: absolute;
    top: -35px;
    left: calc(50% - 130px);
}

form {
    width: 800px;
    margin: 2em auto 0;
}

form dl {
    display: table;
    width: 100%;
    background: #fff;
    margin: 5px 0;
}

form dl dt,
form dl dd {
    display: table-cell;
    font-size: 16px;
    vertical-align: middle;
    text-align: left;
    padding: 5px;
}

form dl dt {
    width: 30%;
    font-weight: 600;
}

form dl dt span {
    display: inline-block;
    color: #fff;
    font-size: 12px;
    margin: 0 10px 0 0;
    padding: 2px 10px;
    border-radius: 3px;
}

form dl dt span.must {
    background: var(--accentC);
}

form dl dt span.any {
    background: #aaa;
}

form input,
form textarea {
    width: 100%;
    font-family: 'Zen Maru Gothic', Meiryo, sans-serif;
    font-size: 16px;
    border: 2px solid #ddd;
    padding: 1em;
    outline: none;
    border-radius: 5px;
}

form textarea {
    height: 160px;
}

form .submitWrap {
    text-align: center;
    margin: 1em 0 0;
}

form button {
    display: inline-block;
    width: 360px;
    color: #fff;
    font-family: 'Zen Maru Gothic', Meiryo, sans-serif;
    font-size: 20px;
    text-align: center;
    text-decoration: none;
    border: none;
    background-color: #2a3;
    background: linear-gradient(#3b4, #081);
    padding: 1em 0;
    position: relative;
    top: 0;
    border-radius: 8px;
    transition-duration: 0.3s;
    cursor: pointer;
    text-shadow: 2px 2px 4px rgba(0,0,0,.2);
    box-shadow: 0 5px 0 #060;
}

form button:hover {
    color: #fff;
    background-color: #4c5;
    box-shadow: 0 0 0 #060;
    top: 5px;
}

form button::after {
    display: block;
    content: "";
    width: 10px;
    height: 10px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    position: absolute;
    top: calc(50% - 5px);
    right: 1em;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transition-duration: 0.3s;
}

form button:hover::after {
    right: .75em;
    transition-duration: 0.3s;
}

@media (width < 840px) {

.remodal .clip {
    width: 140px;
    position: absolute;
    top: -22px;
    left: calc(50% - 70px);
}

.remodal h2 {
    margin: 1em 0;
}

form {
    width: 100%;
}

form dl {
    display: block;
    width: 100%;
}

form dl dt,
form dl dd {
    display: block;
}

form dl dt {
    width: 100%;
}

form dl dd {
    width: 100%;
}

form button {
    font-size: 18px;
}

}

@media (width < 480px) {

form button {
    width: 90%;
    font-size: 16px;
}

}

/* ==========================================
    #
============================================= */

h2 {
    font-size: clamp(28px, 1.9vw, 36px);
    line-height: 1;
    text-align: center;
}

.tip {
    color: #e70;
    font-size: clamp(16px, 1vw, 18px);
    font-weight: 600;
    text-align: center;
    line-height: 1;
    margin: 0 0 1em;
}

.tip::first-letter {
    color: #fa0;
}

@media (width < 840px) {

h2 {
    font-size: 4.2vw;
}

.tip {
    font-size: 2.6vw;
}

}

@media (width < 480px) {

h2 {
    font-size: 6vw;
}

.tip {
    font-size: 3.8vw;
}

}

/* ==========================================
    #
============================================= */

#mainvisual {
    color: #fff;
    text-align: center;
    height: 100%;
    background: url(images/mv-bg_01.jpg) no-repeat center center / cover;
}

#mainvisual p {
    font-size: clamp(40px, 3.2vw, 58px);
    letter-spacing: .06em;
    line-height: 1;
    margin: 1em 0 .5em;
}

#mainvisual p span {
    display: inline-block;
    border: 4px solid;
    padding: .2em 1em .32em;
    border-radius: 5px;
}

#mainvisual a {
    color: #fff;
    text-decoration: underline;
}

#mainvisual a:hover {
    color: var(--accentC);
    text-decoration: none;
}

@media (width < 840px) {

#mainvisual p {
    font-size: 5.4vw;
}

#mainvisual p span {
    border: 3px solid;
    padding: .4em 1em .52em;
}

}

@media (width < 480px) {

#mainvisual p {
    font-size: 7.4vw;
}

#mainvisual p span {
    border: 2px solid;
    padding: .5em 1em .64em;
}

}

.scroll_down {
    position: absolute;
    bottom: 8vh;
    right: 50%;
    animation: arrowmove 1s ease-in-out infinite;
}

.scroll_down a {
    width: 24px;
    height: 24px;
    color: #fff;
    text-decoration: none;
    position: absolute;
    left: -24px;
    bottom: 30px;
}

.text {
    display: block;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 2px;
    margin-top: 70px;
    margin-left: -14px;
}

.arrow {
  position: absolute;
  width: 28px;
  height: 5px;
  opacity: 0;
  transform: scale3d(0.5, 0.5, 0.5);
  animation: move 3s ease-out infinite;
}

.arrow:first-child {
    animation: move 3s ease-out 1s infinite;
}

.arrow:nth-child(2) {
    animation: move 3s ease-out 2s infinite;
}

.arrow:before,
.arrow:after {
    content: '';
    width: 51%;
    height: 100%;
    background: #fff;
    position: absolute;
    top: 0;
}

.arrow:before {
    left: 0;
    transform: skew(0deg, 30deg);
}

.arrow:after {
    width: 50%;
    right: 0;
    transform: skew(0deg, -30deg);
}

@keyframes move {
  25% { opacity: 1; }
  33% { opacity: 1; transform: translateY(30px); }
  67% { opacity: 1; transform: translateY(40px); }
  100% { opacity: 0; transform: translateY(55px) scale3d(0.5, 0.5, 0.5); }
}

/* ==========================================
    #
============================================= */

#usp {
    background: var(--thinC);
    overflow: hidden;
}

.slick-arrow_prev,
.slick-arrow_next {
    width: 80px;
    height: 80px;
    text-align: center;
    line-height: 80px!important;
    position: absolute;
    top: 50%;
    color: #fff;
    font-size: 40px;
    cursor: pointer;
    z-index: 10;
    border-radius: 50%;
}

.slider .slick-arrow_prev,
.slider .slick-arrow_next {
    background: rgba(0,0,0,.5);
    transition-duration: .3s;
}

.slick-arrow_prev {
    left: 4%;
    padding: 0 3px 0 0;
}

.slick-arrow_next {
    right: 4%;
    padding: 0 0 0 3px;
}

.slider .slick-arrow_prev:hover,
.slider .slick-arrow_next:hover {
    background: var(--accentC);
    transition-duration: .3s;
}

ul.slider {
    margin: 3em 0 0;
}

ul.slider li.slider-item {
    padding: 1em;
}

.panel {
    background: #fff;
    padding: 3em;
    border-radius: 1em;
    box-shadow: 4px 4px 12px rgba(255, 170, 0, .1)
}

.panel img {
    display: block;
    margin: 0 auto 2em;
    border-radius: 5px;
}

.panel h3 {
    font-size: clamp(20px, 1.3vw, 24px);
    margin: 0 0 1em;
}

.panel h3 span {
    display: inline-block;
    color: #fff;
    background: var(--accentC);
    margin: 0 .5em 0 0;
    padding: 0 .54em;
    border-radius: 3em;
}

@media (width < 840px) {

.slick-arrow_prev,
.slick-arrow_next {
    width: 60px;
    height: 60px;
    line-height: 60px!important;
    font-size: 30px;
}

.slick-arrow_prev {
    left: 6%;
}

.slick-arrow_next {
    right: 6%;
}

.panel {
    padding: 2em;
}

.panel h3 {
    font-size: 3.0vw;
}

}

@media (width < 480px) {

.slick-arrow_prev,
.slick-arrow_next {
    font-size: 24px;
}

.slick-arrow_prev {
    left: -30px;
    text-align: right;
    padding: 0 .5em 0 0;
}

.slick-arrow_next {
    right: -30px;
    text-align: left;
    padding: 0 0 0 .5em;
}

.panel h3 {
    font-size: 4.4vw;
}

}

/* ==========================================
    #
============================================= */

#schedule {
    background: url(images/schedule-bg_01.svg) no-repeat center bottom / 100% auto;
}

#schedule ul {
    display: flex;
    margin: 3em auto 0;
}

#schedule ul li {
    flex: 1;
    padding: 1em;
}

@media (width < 840px) {

#schedule ul li {
    padding: .5em;
}

}

@media (width < 480px) {

#schedule ul {
    flex-direction: column;
    margin: 1em auto 0;
}

#schedule ul li {
    padding: 2em .5em 0;
}

}

/* ==========================================
    #
============================================= */

#think {
    text-align: center;
    background: var(--thinC);
}

#think h2 + div {
    margin: 2em auto 0;
}

#think .link {
    margin: 2em auto 0;
}

#think .link a {
    display: block;
    width: 460px;
    color: #fff;
    background: #05d;
    margin: 0 auto .5em;
    padding: 1em 0;
    position: relative;
    border-radius: .5em;
}

#think .link a::after {
    display: block;
    content: "";
    width: 10px;
    height: 10px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    margin-top: -5px;
    position: absolute;
    top: 50%;
    right: 2em;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

#think .link a:hover {
    opacity: .8;
    text-decoration: none;
}

@media screen and (max-width: 480px) {

#think .link a {
    width: 80%;
}

#think .link a::after {
    width: 6px;
    height: 6px;
    margin-top: -3px;
}

}

/* ==========================================
    #
============================================= */

#image {
    padding: 6em 0 0;
}

#image ul {
    display: flex;
    margin: 4em 0 0;
}

#image ul li {
    flex: 1;
}

@media (width < 840px) {

#image ul {
    flex-direction: column;
}

}

/* ==========================================
    #
============================================= */

#map {
    text-align: center;
    background: var(--thinC);
}

#map .access {
    margin: 2em 0 0;
}

#map img {
    display: block;
    margin: 1em 0 0;
}

/* ==========================================
    #
============================================= */

::-webkit-input-placeholder {
    color:#ccc;
}

/* # サブページ共通
============================ */

#formSubPage {
    font-size: 16px;
    background: #fff;
}

.formWrap {
    max-width: 640px;
    text-align: center;
    margin: 0 auto;
    padding: 40px 0;
}

.form_icon {
    margin: 0 0 20px;
}

.form_icon img {
    width: 80px;
}

.form_title {
    font-size: 24px;
    font-weight: 600;
    margin: 10px 0;
}

.form_back {
    margin: 20px 0 0;
}

.form_back input[type="button"],
.form_back a {
    display: inline-block;
    width: 240px;
    color: #fff;
    font-family: 'Noto Sans Japanese', Meiryo, sans-serif;
    font-size: 16px;
    line-height: 1.4;
    text-decoration: none;
    border: none;
    background: #222;
    padding: 1em;
    cursor: pointer;
    border-radius: 5px;
    transition-duration: 0.3s;
}

.form_back input[type="button"]:hover,
.form_back a:hover {
    background: #555;
    transition-duration: 0.3s;
}

@media screen and (max-width: 800px) {

#formSubPage {
    font-size: 14px;
}

.formWrap {
    padding: 40px 20px;
}

.form_icon img {
    width: 60px;
}

.form_title {
    font-size: 20px;
}

}

/* # 確認ページ
============================ */

#formConfirm form {
    margin: 20px 0;
}

#formConfirm form table {
    width: 100%;
    border: 1px solid;
    margin: 20px 0;
}

#formConfirm form table th,
#formConfirm form table td {
    border-bottom: 1px solid;
    padding: 10px;
}

#formConfirm form table th {
    width: 34%;
    font-weight: 600;
    border-right: 1px dashed;
    background: #f7f7f7;
}

#formConfirm form table td {
    width: 66%;
    text-align: left;
}

@media screen and (max-width: 800px) {

#formConfirm form {
    padding: 0;
}

#formConfirm form table th {
    width: 100%;
    text-align: left;
    border-bottom: 1px dashed;
    border-right: none;
    float: left;
}

#formConfirm form table td {
    width: 100%;
    float: left;
}

#formConfirm form table tr:last-child td {
    border-bottom: none;
}

}

/* # エラーページ
============================ */

.error_list {
    margin: 20px auto;
}

.error_messe {
    color: #e44;
    border: 4px solid #eee;
    background: #fafafa;
    margin: 10px 0;
    padding: 10px 1em;
    border-radius: 5px;
}

.error_messe::before {
    font-family: FontAwesome;
    content: "\f071";
    margin: 0 .5em 0 0;
}

@media screen and (max-width: 800px) {

.error_messe {
    text-align: left;
    margin: 8px 0;
}

}

/* # CVページ
============================ */

.thanks_messe p {
    margin: 1em 0;
    text-align: left;
}

.thanks_tel {
    text-align: center;
    line-height: 1.4;
    background: #f7f7f7;
    margin: 20px auto;
    padding: 20px;
    border-radius: 10px;
}

.thanks_tel strong {
    display: block;
    font-size: 32px;
    font-weight: 800;
}

.thanks_tel strong::before {
    font-family: FontAwesome;
    content: "\f095";
    color: #fff;
    font-size: 80%;
    background: #2a3;
    margin: 0 .5em 0 0;
    padding: .1em .5em;
    position: relative;
    top: -3px;
}

.thanks_tel span {
    font-size: 14px;
    font-weight: 500;
}

@media screen and (max-width: 800px) {

.thanks_tel strong {
    font-size: 26px;
}

.thanks_tel span {
    font-size: 12px;
}

}