@charset "UTF-8";
/*
Theme Name: SANE
Version: 1.0.0
Author: Sane - https://saneyoshi.com
-------------------------------------------------*/

/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    /*baseline→middleにアレンジ*/
    vertical-align: middle;
    background: transparent;
}

body {
    margin: 0;
    word-break: normal;
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: none;
}

* {
    box-sizing: border-box;
}


article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

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

del {
    text-decoration: line-through;
}

table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

input,
select {
    vertical-align: middle;
}

/*img*/
img {
    max-width: 100%;
    height: auto;
    border: 0;
    vertical-align: middle;
}


:root {
    font-size: 62.5%;
    /* 構成カラー */
    --white-color: #fff;
    --black-color: #021328;
    --light-gray-color: #fafafa;
    --gray-color: #f2f2f2;
    --green-color: #15be53;
    --yellow-color: #ffd848;
    --cream-color: #FCF6CD;
    --blue-color: #092440;
    --light-blue-color: #c5f0ff;
    /* テキスト */
    --text-color: #424770;
    --text-link-color: #32325d;
    --text-yellow-color: #ffa832;
    /* ボーダー */
    --border-color: #dadce0;
    /* メニュー */
    --menu-color: #092440;
    /* フォーム */
    --form-required-color: #00a600;
    --form-input-color: #FCF6CD;
    --form-submit-color: #07b53b;
    --form-error-color: #ea4435;
    --form-border-color: #c9c9c9;
    /* ページ幅 */
    --widthMax: 1024px;
    /* 余白 */
    --space-xxs: 5px;
    --space-xs: 10px;
    --space-sm: 15px;
    --space-md: 20px;
    --space-lg: 30px;
    --space-xl: 40px;
    --space-xxl: 80px;
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.8rem;
    line-height: 1.6;
    letter-spacing: 0.04em;
    color: var(--text-color);
    background-image: url(/assets/img/common/bg.gif);
}

a {
    color: var(--text-link-color);
    text-decoration: none;
}

/* flickity carousel */
.carousel-main-pc .carousel-cell {
    width: 70%;
}

.carousel-main-pc .flickity-page-dots .dot {
    background: var(--white-color) !important;
    opacity: 1 !important;
    width: 12px !important;
    height: 12px !important;
}

.carousel-main-pc .flickity-page-dots {
    bottom: 10px !important;
}

.carousel-main-pc .flickity-page-dots .dot.is-selected {
    background: var(--green-color) !important;
}

.carousel-main-mb .carousel-cell {
    width: 96%;
}

.carousel-main-mb .flickity-page-dots .dot {
    background: var(--white-color) !important;
    opacity: 1 !important;
    width: 12px !important;
    height: 12px !important;
}

.carousel-main-mb .flickity-page-dots {
    bottom: 10px !important;
}

.carousel-main-mb .flickity-page-dots .dot.is-selected {
    background: var(--green-color) !important;
}

.carousel-main-mb .flickity-button {
    display: none;
}

.carousel-sub .carousel-cell {
    width: 100%;
}

.carousel-sub .flickity-page-dots .dot {
    background: var(--white-color) !important;
    opacity: 1 !important;
    width: 12px !important;
    height: 12px !important;
}

.carousel-sub .flickity-page-dots {
    bottom: 10px !important;
}

.carousel-sub .flickity-page-dots .dot.is-selected {
    background: var(--green-color) !important;
}

/* Sections */
.section-contents {
    position: relative;
}

.section-inner {
    width: 100%;
    max-width: var(--widthMax);
    margin: 0 auto;
}

/* Layout */
div.flex-area {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

div.box {
    padding: var(--space-md);
    background: var(--white-color);
    position: relative;
    border-radius: 2px;
    box-shadow: 0 3px 6px rgb(0 0 0 / 25%);
}

div.box-inner {
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: 1fr 1fr;
}

/* sub-ttl */
.sub-ttl {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
}

.sub-ttl h1::before,
.sub-ttl h2::before {
    background-color: var(--blue-color);
}

.sub-ttl .box div {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    flex-wrap: wrap;
    grid-gap: 10px;
}

.sub-ttl .box div a {
    border: 1px solid var(--border-color) !important;
    padding: 10px !important;
    display: flex !important;
    align-items: center !important;
    background-color: var(--white-color) !important;
}

.sub-ttl .box div a:before {
    content: '';
    width: 18px;
    height: 18px;
    background-image: url(/assets/img/common/arrow-down.svg);
    background-repeat: no-repeat;
    padding-right: 15px;
}

/* sub-contents */
.sub-contents {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
}

/* staff-contents */
.staff-contents figure img {
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 150px;
    display: block;
    margin: 0 auto;
}

/* step-contents */
.step-contents .box-inner {
    border: 1px solid var(--border-color);
    padding: var(--space-md);
    margin-bottom: var(--space-md);
}

.step-contents .box-inner>div:last-child {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-md);
    align-items: start;
}

.step-contents .box-inner h4 {
    grid-column: 1 / -1;
    margin-bottom: var(--space-xs);
}

.step-contents .box-inner figure {
    margin: 0;
}

/* Decoration */
.text-yellow {
    color: var(--text-yellow-color);
}

strong {
    vertical-align: baseline;
}

.vline {
    padding: 0.6rem 1rem;
    border-left: 4px solid var(--blue-color);
    margin-top: 10px;
    margin-bottom: 10px;
}

p.step-num {
    background-color: var(--green-color);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 5px;
}

p.step-num span {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--white-color) !important;
}

p.wcapsule {
    color: var(--text-color);
    padding: 2px 12px;
    display: inline-flex;
    align-items: center;
    background: var(--cream-color);
    border-radius: 15px;
}

p.wcapsule span {
    font-size: 0.7em;
    color: var(--text-color);
    display: inline-block;
    padding: 0 6px;
    margin-right: 7px;
    background: var(--yellow-color);
    border-radius: 10px;
}

.mt10 {
    margin-top: 10px;
}

p.circle {
    color: var(--text-color);
    padding: 2px 12px;
    display: inline-flex;
    align-items: center;
    background: var(--cream-color);
    border-radius: 15px;
    margin-top: 10px;
}

p.circle span {
    content: '';
    display: inline-block;
    background-size: contain;
    width: 15px;
    height: 15px;
    background-image: url(/assets/img/common/circle.svg);
    background-repeat: no-repeat;
    margin-right: 8px;
}

div.note {
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 97%, #ddd 97%, #ddd 100%);
    background-size: 100% 2em;
    line-height: 2;
}

div.note p {
    margin-top: 10px;
    margin-bottom: 15px;
}

p.capsule {
    color: var(--white-color);
    background: var(--blue-color);
    padding: 1px 6px;
    display: inline-block;
    vertical-align: baseline;
    border-radius: 2px;
}

ul li {
    margin: 6px 0;
}

ul.icon li::before {
    content: '';
    display: inline-block;
    background-size: contain;
    width: 15px;
    height: 15px;
    background-image: url(/assets/img/common/arrow-check.svg);
    background-repeat: no-repeat;
    padding-right: 8px;
}

/* Button */
.primary {
    display: block;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    padding: var(--space-sm) var(--space-lg) var(--space-sm) var(--space-xs);
    min-width: 100px;
    max-width: 350px;
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--white-color) !important;
    background-color: var(--green-color);
    overflow: visible;
    margin: var(--space-md) auto 0;
    position: relative;
    border-radius: 3px;
}

a.primary {
    text-decoration: none !important;
}

.primary::after {
    content: '';
    display: inline-block;
    background-size: contain;
    vertical-align: middle;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
    width: 25px;
    height: 25px;
    background-image: url(/assets/img/common/arrow.svg);
}

/* Form Styles */
.contact-form {
    margin-top: 40px;
}

.form-item {
    margin-bottom: 25px;
}

.form-item label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 1.6rem;
}

.form-item .required {
    background: var(--form-required-color);
    color: var(--white-color);
    font-size: 1.2rem;
    padding: 2px 6px;
    border-radius: 2px;
    margin-left: 8px;
    vertical-align: middle;
}

.form-item input[type="text"],
.form-item input[type="email"],
.form-item input[type="password"],
.form-item input[type="tel"],
.form-item select,
.form-item textarea {
    width: 100%;
    padding: var(--space-xs);
    border: 1px solid var(--form-border-color);
    border-radius: 4px;
    font-size: 1.6rem;
    font-family: inherit;
    background-color: #fff;
    transition: border-color 0.3s, background-color 0.3s;
}

.form-item input:focus,
.form-item select:focus,
.form-item textarea:focus {
    outline: none;
    border-color: var(--blue-color);
    background-color: var(--form-input-color);
}

.form-item textarea {
    height: 15rem;
}

.form-submit {
    text-align: center;
    margin-top: 40px;
}

.form-submit button {
    border: none;
    width: 100%;
}

/* Common Header Styles */
h1,
h2 {
    color: var(--blue-color);
    font-size: 2.2rem;
    font-weight: 500;
    letter-spacing: 0;
    background-color: #F7F9Fc;
    padding: var(--space-lg) var(--space-xs);
    text-align: center;
    margin-bottom: var(--space-md);
    position: relative;
}

h1::before,
h2::before {
    content: '';
    width: calc(20%);
    height: 4px;
    min-width: 250px;
    margin: 0 auto;
    background-color: var(--light-blue-color);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50px;
    right: 50px;
}

h3 {
    color: var(--text-color);
    font-size: 2.4rem;
    font-weight: normal;
    letter-spacing: 0;
    line-height: 1.35;
}

h3 span {
    font-size: 1.8rem;
}

h4 {
    font-weight: 600;
    padding-top: 10px;
}

h4:first-of-type {
    padding-top: 0;
}

figcaption {
    text-align: center;
    padding-bottom: 10px;
}

/* Top Page Specific */
.home-contents {
    padding-top: 20px;
    padding-bottom: 20px;
}

.home-ttl-mb {
    display: none;
}

.section-contents.home-contents.copy {
    padding-top: 10rem;
    padding-bottom: 10rem;
    clip-path: polygon(0 calc(0% + 5vw), 100% 0, 100% calc(100%), 0 100%);
    background: var(--light-blue-color);
}

.section-contents.home-contents.copy h1 {
    font-size: 2.4rem;
    font-weight: 400;
    letter-spacing: 0;
    text-align: center;
    padding-bottom: 10px;
    background-color: transparent;
    padding: 0;
    margin-bottom: 10px;
}

.section-contents.home-contents.copy h1::before {
    display: none;
}

.home-contents.copy p.wcapsule {
    margin-top: 10px;
}

/* News */
.news-item {
    margin-bottom: 40px;
    padding-bottom: 20px;
}

.news-item:not(:last-child) {
    border-bottom: 1px dashed #e2e8f0;
}

.news-date {
    color: var(--text-color);
}

.news-title {
    color: var(--text-color);
    font-weight: bold;
    font-size: 2.0rem;
    margin-top: 5px;
}

.news-body {
    color: var(--text-color);
    font-size: 1.6rem;
    line-height: 1.6;
    margin-top: 10px;
}

.news-img {
    margin-top: 20px;
}

.news-img img {
    max-width: 350px;
    height: auto;
    border-radius: 4px;
}

.home-contents.info h3 {
    padding-bottom: 0;
    padding-top: 20px;
}

.home-contents.info h3:first-of-type {
    padding-top: 0;
}

.home-contents.menu .primary {
    margin-top: 20px;
}

/* Table */
table {
    border: 2px solid var(--border-color);
    background: var(--white-color);
    margin-top: 40px;
    width: 100%;
    border-collapse: collapse;
}

table th {
    background: var(--blue-color);
    color: var(--white-color);
    padding: var(--space-xs);
    font-size: 1.8rem;
    font-weight: bold;
    text-align: center;
}

table tr {
    border-bottom: 1px dotted var(--border-color);
}

table td {
    padding: var(--space-xs) var(--space-sm);
    border-right: 1px dotted var(--border-color);
    vertical-align: middle;
}

table td:first-of-type {
    width: 20%;
    background: var(--light-gray-color);
    font-weight: bold;
}

table td span {
    font-size: 1.3rem;
}

/* Header */
.header {
    background: var(--white-color);
}

#header-inner {
    width: 100%;
    max-width: var(--widthMax);
    margin: 0 auto;
    padding: var(--space-xs);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#header-inner .logo img {
    width: 100%;
    max-width: 330px;
}

.logo p {
    font-size: 1.6rem;
    color: var(--blue-color);
    letter-spacing: 0;
    padding-left: 5px;
    font-weight: 600;
    margin: 0;
}

.logo p span {
    vertical-align: baseline;
}

/* Navigation */
nav {
    width: 100%;
    background: var(--menu-color);
    border-bottom: 1px solid var(--gray-color);
}

.menu-pc {
    max-width: var(--widthMax);
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
}

.menu-pc a.current,
.menu-mb a.current {
    background-color: rgba(255, 255, 255, 0.1);
    font-weight: bold;
}

.menu-pc a {
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--white-color);
    letter-spacing: 0;
    border-left: 2px solid var(--gray-color);
    padding: 20px 7px;
    /* flex: 1; */
    white-space: nowrap;
    text-align: center;
}

.menu-pc a:first-of-type {
    border-left: 0;
}

/* Footer */
.footer {
    color: var(--white-color);
    clip-path: polygon(0 calc(0% + 5vw), 100% 0, 100% calc(100%), 0 100%);
    background: var(--blue-color);
    padding-top: 8rem;
    padding-bottom: 5rem;
}

#footer-inner {
    width: 100%;
    max-width: var(--widthMax);
    margin: 0 auto;
}

#footer-inner img {
    height: 100px;
    text-align: left;
    display: block;
    border-radius: 3px;
}

.footer-menu {
    width: 50%;
    padding-top: 2rem;
    padding-bottom: 8rem;
}

.footer-menu p {
    font-size: 1.8rem;
    line-height: 1.25;
    text-align: left;
}

.footer-menu ul.sns {
    margin-top: 4rem;
    display: flex;
    list-style: none;
    padding: 0;
}

.footer-menu ul.sns li {
    padding-right: 15px;
}

#footer-inner .footer-menu ul.sns img {
    height: 30px;
}

.copyright {
    font-size: 1.2rem;
    border-top: 1px solid rgb(151, 151, 151);
    padding-top: 1rem;
    text-align: right;
}

/* Mobile Menu */
.menu-mb {
    display: none;
}

@media screen and (max-width:1024px) {
    .section-inner {
        padding-left: 10px;
        padding-right: 10px;
    }

    div.box-inner {
        gap: 10px;
        grid-template-columns: 1fr;
    }

    .menu-pc {
        display: none;
    }

    .menu-mb {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .menu-mb a {
        font-size: 1.6rem;
        font-weight: 500;
        color: var(--white-color);
        letter-spacing: -0.1em;
        padding: 10px 0 10px 10px;
        border-bottom: 1px solid var(--white-color);
    }

    .menu-mb a:nth-child(odd) {
        border-right: 1px solid var(--white-color);
    }

    .home-ttl-mb {
        display: block;
    }

    .home-ttl-pc {
        display: none;
    }

    #header-inner .logo img {
        max-width: 200px;
    }

    .logo p {
        font-size: 1.2rem;
    }

    #footer-inner {
        padding: 10px 25px;
    }

    .footer-menu {
        width: 100%;
    }
}