/* Adobe Fonts（旧 Typekit）から DIN 2014  */
@import url("https://use.typekit.net/fdm0kgm.css");
/* Google Fonts から BIZ UDPGothic  */
@import url('https://fonts.googleapis.com/css2?family=BIZ+UDPGothic&display=swap');
/* noto sans */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');

:root {
    --blue: #291F7B;
}


/* ベースリセット */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0;}
html { font-size: clamp( 15px, 4vw, 16px); line-height: 1.5; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}
body { font-family: 'BIZ UDPGothic', sans-serif; color: #333; background-color: #fff; line-height: 1.8; letter-spacing: 1px;}
main { min-height: 50vh;}
img { max-width: 100%; width: 100%; height: auto; display: block;}
ul,
ol { list-style: none;}
a { color: inherit; text-decoration: none; display: inline;}
a.line { color: #4D9CF8; text-decoration: underline;}
a:hover { opacity: 0.8;}

/* ----------------- */
/* common */
/* ----------------- */
.color-blue { color: var(--blue);}
.alC { text-align: center;}

/* レスポンシブ */
.pc { display: inherit;}
.sp { display: none;}

@media only screen and (max-width:768px) {
 .pc { display: none; }
 .sp { display: block; }
}


body {
    background-image: url(../images/index/back-ground-image-01.png), 
                      url(../images/index/back-ground-image-02.png);
                      background-position: top, bottom;
                      background-size: cover;
                      background-repeat: no-repeat, no-repeat;
                      background-attachment: fixed, fixed;
}


.inner { max-width: 1100px; margin: 0 auto;}

.title-wrap { position: relative; text-align: center; width: fit-content; margin: 0 auto; padding-bottom: 2em;}
.title-large { font-size: clamp(2.4em, 3vw, 3.2em); color: #4D9CF8; font-family: 'DIN 2014', sans-serif; font-weight: 600; line-height: 1; letter-spacing: 2px; display: block; }
.title-small { font-size: 1.1em; color: var(--blue); display: block; }


section { padding: 50px 10px;}
section .flex-box { display: flex; gap: 1.5em;}
section .flex-box:not(:last-child) { margin-bottom: 1.5em;}
section .flex-box .service-item { flex: 1;}
section .flex-box .service-item a { width: 100%;}

@media only screen and (max-width:768px) { 
    section { padding: 50px 10px;}
    section .flex-box { flex-direction: column;}
}


/* .button-wrap */
.button-wrap { display: flex; gap: 1.5em; justify-content: center;  margin-top: 1.5em;}
.button-wrap > * { white-space: nowrap; color: #fff; font-weight: bold; font-size: 1.1em; box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.08); padding: 0.5em 3em; border-radius: 30px; letter-spacing: 1px; transition: all 0.3s ease-in-out; text-align: center;}
.button-wrap .sky-blue { background: linear-gradient(to right, #4d9cf8 0%, #7cd4fb 100%); }
.button-wrap .blue { background: linear-gradient(var(--blue) 0%, #626ecc 100%); }
/* hover */
.button-wrap > *:hover { background: linear-gradient(#f895f5 0%, #ebc2f4 100%); transform: translateY(-2px); box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.15); }

/* form-wrap */
.form-wrap { width: 100%; background: rgba(255, 255, 255, 0.9); filter: drop-shadow(1px 1px 15px rgba(0, 0, 0, 0.2)); border-radius: 15px; padding: 1.5em;}
.form-wrap-flex { display: flex; flex-direction: column; gap: 1.5em; padding: 1.5em 0px;}
.form-wrap-flex dl:not(:last-of-type) { border-bottom: 1px solid #B4B0D1; padding-bottom: 1em;} 

/* DLタグ */
dt { font-size: 1.05em;  color: var(--blue); margin-bottom: 0.5em;}
dt.required::after { content: "必須"; background: #f3a1e1; color: white; font-size: 0.8em; font-weight: bold; padding: 0.3em 0.5em; margin-left: 10px; margin-bottom: 0.5em;}

dd input, dd textarea {  width: 100%; padding: 5px 10px; font-size: 0.95em; border: 1px solid #ccc; border-radius: 8px; background: #f9f9f9; transition: all 0.3s ease-in-out; box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1)}
dd input:focus, dd textarea:focus { outline: none; border-color: #7b3fc0; background: #fff; box-shadow: 0 0 8px rgba(123, 63, 192, 0.5);}
dd textarea { min-height: 120px; resize: vertical;}

/* message-wrap */
.message-wrap { max-width: 600px; margin: 0 auto;}
.message-wrap picture { max-width: 80%; margin: 0 auto;}
.message-wrap .message { text-align: center; padding-top: 2.5em;}


/* ----------------- */
/* header */
/* ----------------- */
/* header */
header { margin-top: 1em;}
header .inner { display: flex; justify-content: space-between; align-items: center; padding: 0 1.5em; gap: 3em;}
header .contact-wrap { position: relative; display: flex; border-radius: 31px; background: #fff; box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.08); gap: 1em; padding: 0.6em 0.7em 0.6em 1.5em; align-items: center;}
header .contact-wrap .contact-number { width: 350px;}
header .contact-wrap .button-wrap { margin-top: unset !important;}
header .contact-wrap .button-wrap a { font-size: 0.9em; padding: 0.5em 1em;}
.menu { display: none; flex-direction: column; position: absolute; top: 60px; left: 0; width: 100%; background: #fff;}
.menu a { padding: 15px; text-decoration: none; color: white; text-align: center; border-bottom: 1px solid #444;}
.menu a:hover { background: #555;}
.hamburger { display: none; flex-direction: column; cursor: pointer;}
.hamburger div { width: 30px; height: 3px; background: #000; margin: 5px; transition: 0.3s;}
.menu.active { display: flex;}

.hamburger.active div:nth-child(1) { transform: rotate(45deg) translate(5px, 5px);}
.hamburger.active div:nth-child(2) { opacity: 0;}
.hamburger.active div:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px);}

@media only screen and (max-width:768px) { 
    header .inner { flex-direction: column; gap: 1.5em;}
    header .inner h1 { width: 100%;}
    header .inner h1 img { width: 80%; max-width: 400px;} 
    header .contact-wrap::after {  content: ""; position: absolute; width: 110px; height: 100%; background-image: url(../images/index/contact-mark.svg); background-size: contain; background-repeat: no-repeat; background-position: left top; top: 8px; left: 15%; transform: translate(-50%, -50%);}
}

@media (max-width: 768px)  { 
    header .contact-wrap::after { width: 80px; left: 50px; top: 15px;}
}


/* footer */
footer { background-color: var(--blue); color: #fff; font-family: 'Noto Sans', sans-serif;}
footer section { padding-block: 30px}
footer .flex-box > div { flex: 1;}
footer .flex-box > div h1 { max-width: 65%;}
footer .right { display: flex;}
footer .right ul { display: grid;  grid-template-rows: repeat(5, 1fr); gap: 1em 3.5em; grid-auto-flow: column; font-weight: 500; width: fit-content; margin-left: auto;}
footer .copy-right { font-size: 0.85em;}
footer .copy-right .left { display: flex; gap: 0.5em 2em; flex-wrap: wrap;}
footer .copy-right .right { justify-content: flex-end;}

@media (max-width: 768px)  { 
    footer .right ul { margin-left: unset; margin-right: 1em;}
    footer .copy-right .left { justify-content: center;}
    footer .copy-right .right { text-align: center; justify-content: center;}
}

/* #floating-banner */
#floating-banner { position: fixed; right: 20px; bottom: 20px; width: 150px; height: 150px; z-index: 1000; display: flex; align-items: flex-start; justify-content: flex-end;}
#floating-banner img { width: 100%; height: auto; border-radius: 10px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);}
#close-banner { position: absolute; top: -8px; right: -8px; background: rgba(0, 0, 0, 0.6); color: #fff; border: none; width: 24px; height: 24px; border-radius: 50%; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center;}
#close-banner:hover { background: rgba(0, 0, 0, 0.8);}

/* スマホ対応 */
@media screen and (max-width: 480px) {
  #floating-banner { width: 120px; height: 120px; right: 10px; bottom: 10px;}
}

/* ----------------- */
/* index */
/* ----------------- */
.article-wrap.border { display: flex; align-items: center; border-bottom: 1px dotted #888888; padding: 1em 0px; width: 100%; gap: 1.5em;}
.article-wrap.border:first-of-type  { border-top: 1px dotted #888888;}

@media only screen and (max-width:768px) { 
    .article-wrap.border  { flex-direction: column; align-items: flex-start;}
}

/* .article-wrap */
.article-wrap .date-wrap { flex: 1; color: var(--blue);  font-weight: bold; display: flex; align-items: center; justify-content: flex-start; gap: 1.5em;}
.article-wrap .date-wrap .date { }
.article-wrap .date-wrap .category {  background-color: #D9EDFD; padding: 0.2em; font-weight: bold; display: inline-block; width: 150px; text-align: center; font-size: 0.9em;}
.article-wrap .title { flex: 3;}
.article-wrap h1 { width: fit-content;}
.article-wrap h1 a { border-bottom: 1px solid #333;}

.article-content { display: flex; flex-direction: column; gap: 1.5em;}
/* H3 H4 H5 */
.article-content h2 { font-size: 1.6em; font-weight: bold; color: var(--blue); display: flex; align-items: baseline;}
.article-content h2::before { content: ""; min-width: 10px; height: 1em; background-color: var(--blue); margin-right: 0.5em; position: relative; top: 0.1em;}
.article-content h3 { font-size: 1.4em; font-weight: bold; background-color: #4D9CF8; color: #fff; padding: 0.3em 0.5em; display: inline-block; width: 100%;}
.article-content h4 { font-size: 1.2em; font-weight: bold; color: #4D9CF8; border-bottom: 2px solid #58A9F9;}

/* blockquote */
.article-content blockquote { position: relative; background-color: #fff; padding: 1em; border: 4px solid #A6D2FA; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); padding-left: 3em;}
.article-content blockquote::before { content: ""; position: absolute; left: 0.5em; top: 0.5em; width: 1.5em; height: 1.5em; background: url(../images/news/quote.svg) no-repeat center; background-size: contain;}

/* li */
.article-content ul { list-style: none; padding: 0;}  
.article-content ul li { position: relative; padding-left: 1.5em;}  
.article-content ul li::before { content: "\25CF"; color: #4D9CF8; position: absolute; left: 0;}  
.article-content ol { list-style: none; counter-reset: list-counter; padding: 0;}  
.article-content ol li { position: relative; padding-left: 1.5em; counter-increment: list-counter; font-weight: bold;}  
.article-content ol li::before {  position: absolute; left: 0; top: -0.2em; content: counter(list-counter) "."; color: #4D9CF8; font-weight: bold; font-size: 1.2em; padding-right: .3em; line-height: unset;}  

.article-content em { white-space: normal !important;}
.article-content a { color: #4D9CF8; text-decoration: underline;}



/* member-login-sec */
.member-login-sec .content { background-color: #fff; box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.2); padding: 5% 3%; border-radius: 15px; position: relative;}
.member-login-sec .content::before, .member-login-sec .content::after { content: ""; position: absolute; width: 160px; height: 150px; background-size: contain; background-repeat: no-repeat; background-position: center; z-index: -1;}
.member-login-sec .content::before { background-image: url(../images/index/member-login/02.png); top: -150px; right: 10%;}
.member-login-sec .content::after { background-image: url(../images/index/member-login/01.png); top: -150px; left: 10%;}

@media only screen and (max-width:768px) { 
    .member-login-sec .content::before { right: 0%; width: 30%;  top: -120px;}
    .member-login-sec .content::after  { left: 0%;  width: 30%;  top: -120px;}
}

.member-login-sec .content .login-box { text-align: center;}
.member-login-sec .content .login-box .login-button {  background-color: #F897F4; font-size: 1.6em; font-weight: bold; color: #fff; padding: 0.5em 2em; border-radius: 100px; margin-bottom: 0.5em; line-height: normal; display: inline-block;}
.member-login-sec .content .login-box .link-to-reset { width: fit-content; margin: 0 auto; padding-top: 0em;}

.member-login-sec .content .registration-flow { margin-top: 2.5em;}
.member-login-sec .content .registration-flow h3 { font-size: 1.5em; color: var(--blue); margin-bottom: 0.5em; font-weight: 500;}
.member-login-sec .content .registration-flow .arrow { padding: 1.5em; width: fit-content; margin: 0 auto;}
.member-login-sec .content .registration-flow .step { display: flex; gap: 1.5em; align-items: center; border: 5px solid rgba(77, 156, 248, 0.5); padding: 1em;}
.member-login-sec .content .registration-flow .step .image-wrap { flex: 1;}
.member-login-sec .content .registration-flow .step .text-wrap { flex: 6; line-height: 1.8;}
.member-login-sec .content .registration-flow .step .text-wrap .step-title { color: var(--blue); font-size: 1.3em; display: flex; gap: 0.5em; padding-bottom: 0.5em; align-items: center;}
.member-login-sec .content .registration-flow .step .text-wrap .step-title span {  color: #fff; background-color: #4D9CF8; border-radius: 30px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;}
.member-login-sec .content .registration-flow .step .text-wrap .note { font-size: 0.8em; margin-top: 0.5em;}


@media only screen and (max-width:768px) { 
    .member-login-sec .content .registration-flow .step { flex-direction: column;}
    .member-login-sec .content .registration-flow .step .text-wrap h4 { width: fit-content; margin: 0 auto;}
    .member-login-sec .content .registration-flow .step .image-wrap img { max-width: 50%; margin: 0 auto;}
}


/* ----------------- */
/* news */
/* ----------------- */
/* .news-container */
.news-container h3 { margin-top: 1em;}


/* .article */
.article { display: flex; flex-direction: column; gap: 1.5em;}
/* .article > * { margin-top: 1em;} */
.article .article-wrap { margin-bottom: 1em;}
.article .article-wrap .title { font-family: "BIZ UDPGothic"; font-weight: bold; font-size: 1.9em; color: #4d9cf8;}

/* H3 H4 H5 */
h3 { font-size: 1.6em; font-weight: bold; color: var(--blue); display: flex; align-items: baseline;}
h3::before { content: ""; min-width: 10px; height: 1em; background-color: var(--blue); margin-right: 0.5em; position: relative; top: 0.1em;}
h4 { font-size: 1.3em; font-weight: bold; background-color: #4D9CF8; color: #fff; padding: 0.3em 0.5em; display: inline-block; width: 100%;}
h5 { font-size: 1.2em; font-weight: bold; color: #4D9CF8; border-bottom: 2px solid #58A9F9;}

/* .quote-block */
.quote-block { position: relative; background-color: #fff; padding: 1em; border: 4px solid #A6D2FA; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}  
.quote-block .quote { padding-left: 3em; position: relative;}  
.quote-block .quote::before { content: ""; position: absolute; left: 0; top: 0; width: 1.5em; height: 1.5em; background: url(../images/news/quote.svg) no-repeat center; background-size: contain;}  

/* li */
.list-section ul { list-style: none; padding: 0;}  
.list-section ul li { position: relative; padding-left: 1.5em;}  
.list-section ul li::before { content: "\25CF"; color: #4D9CF8; position: absolute; left: 0;}  
.list-section ol { list-style: none; counter-reset: list-counter; padding: 0;}  
.list-section ol li { position: relative; padding-left: 1.5em; counter-increment: list-counter; font-weight: bold;}  
.list-section ol li::before { position: absolute; left: 0; top: -0.2em; content: counter(list-counter) "."; color: #4D9CF8; font-weight: bold; font-size: 1.4em; padding-right: .3em;}