@charset "utf-8";
/*--------------------------------------

　カスタムプロパティ（CSS変数）

---------------------------------------*/
:root {

/* font sizes */
--font-size-title-l: 30px;
--font-size-title-m: 22px;
--font-size-base: 16px;
--font-size-paragraph: 14px;
--font-size-caption: 12px;
--font-serif: "Zen Old Mincho", serif;
--font-sans-serif: "Noto Sans JP", sans-serif;

/* colors theme */
--color-primary: #241916;
--color-primary20: #d3d1d0;
--color-secondary: #b70055;

/* colors neutral */
--color-N90: #333;
--color-N30: #BBB;
--color-N10: #EEE;
--color-N0: #FFF;

/* colors fix */
--color-bg: #f6f6f6;
--color-btn: #241916;
--color-link: #b70055;

/* line-height */
--leading-trim: calc((1em - 1lh) / 2);
--line-m: 1.6;

/* shadow */
--shodow-float: 1px 1px 10px 0 rgba(40, 40, 40, .2);

}

/*--------------------------------------

　アットルール,追加リセット

---------------------------------------*/
a {
    text-decoration: none;
}
img {
    width: 100%;
    height: auto;
}
* {
    text-wrap: pretty !important;
    transition: all .2s ease-in-out;
}
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    line-height: var(--line-m);
    word-break: break-all;
    overflow-wrap: anywhere;
    line-break: anywhere;
    background: var(--color-bg);
    font-family: var(--font-sans-serif);
    font-size: var(--font-size-base);
}
p {
    overflow-wrap: anywhere;
    word-break: normal;
    line-break: strict;
    text-align: justify;
}
p,span {
    margin-block: var(--leading-trim);
}
h2,h3 {
    font-size: var(--font-size-base);
    font-weight: bold;
}
p + h2 {
    margin-top: 32px;
}
h1 + *,
h2 + * {
    margin-top: 16px;
}
h3 + ul,
h3 + ol {
    display: block;
    margin-top: 16px;
}
.swiper-pagination-bullet {
    opacity:var(--swiper-pagination-bullet-inactive-opacity, .4);
}
.swiper-pagination-bullet-active {
    opacity: var(--swiper-pagination-bullet-opacity, 1);
}
ul {
    margin-block-start: 0;
    margin-block-end: 0;
    padding-inline-start: 0;
}

/*--------------------------------------

　コンポーネント

---------------------------------------*/
/* レイアウト */
.container {
    width: 100%;
    max-width: 1072px;
	margin: 0 auto;
	padding: 48px 32px;
}
@media (min-width: 481px) {
.container {
	padding: 64px 56px;
}
}
.container + .container {
    padding-top: 0;
}
.inner_wrapper {
    max-width: 768px;
    margin: 0 auto;
}
/* ボタン */
.btn_cta,
.btn_cta-sub {
    display: block;
    position: relative;
    max-width: 390px;
    height: 56px;
    line-height: 52px;
    margin: auto;
    border: solid 2px var(--color-btn);
    border-radius: 50px;
    box-shadow: 0 4px 6px rgba(2, 4, 83, 0.3);
    background-color: var(--color-btn);
    color: var(--color-N0);
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    transition: all .2s ease-in-out;
}
.btn_container .btn_cta {
    margin: 64px auto 0;
}
.btn_cta-sub {
    min-width: 134px;
    height: 36px;
    line-height: 32px;
    margin: 0;
    padding-right: 8px;
    border-radius: 0px;
    box-shadow: none;
    background: var(--color-N0);
    color: var(--color-btn);
    font-size: var(--font-size-paragraph);
}
.btn_cta::after,
.btn_cta-sub::after {
    content: "";
    position: absolute;
    top: 40%;
    right: 24px;
	width: 9px;
	height: 9px;
	border-top: 2px solid var(--color-N0);
	border-right: 2px solid var(--color-N0);
	transform: rotate(45deg);
}
.btn_cta-sub::after {
    right: 16px;
	width: 6px;
	height: 6px;
	border-top: 2px solid var(--color-btn);
	border-right: 2px solid var(--color-btn);
}
/* ホバー */
.btn_cta:hover {
    background: var(--color-N0) ;
    color: var(--color-btn);
}
.btn_cta:hover::after {
	border-top: 2px solid var(--color-btn);
	border-right: 2px solid var(--color-btn);
}
.btn_cta-sub:hover {
    border: solid 2px var(--color-N0);
    background: var(--color-btn) ;
    color: var(--color-N0);
}
.btn_cta-sub:hover::after {
	border-top: 2px solid var(--color-N0);
	border-right: 2px solid var(--color-N0);
}
/* スマホ改行 */
.br-sp {
    display: block;
}
@media (min-width: 481px) {
.br-sp {
    display: none;
}
}
/* pc改行 */
.br-pc {
    display: none;
}
@media (min-width: 481px) {
.br-pc {
    display: block;
}
}
/* スマホ非表示 */
.disnone-sp {
    display: none;
}
@media (min-width: 481px) {
.disnone-sp {
    display: inline-block;
}
}
/*追従　先頭に戻るボタン*/
.fix_pagetop {
    position: fixed;
    bottom: 15px;
    right: 15px;
    z-index: 3; /*DSPが上に来る対策*/
    transition: unset;
}
.fix_pagetop a {
    display: block;
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 25px;
    background: var(--color-N0);
    opacity: .9;
    box-shadow: var(--shodow-float);
}
.fix_pagetop a:after {
    content: '';
    display: block;
    position: absolute;
    top: 19px;
    left: 17px;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--color-N90);
    border-bottom: 2px solid var(--color-N90);
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
}
/*テーブル*/
table {
    width: 100%;
    font-size: var(--font-size-paragraph);
    border-collapse: separate;
    border-spacing: 0;
}
table th {
    width: 32%;
    padding: 12px 0;
    border: solid 1px var(--color-bg);
    vertical-align: middle;
    background: var(--color-primary20);
    color: var(--color-N90);
    text-align: center;
}
table td {
    padding: 12px;
    border: solid 1px var(--color-bg);
    background: var(--color-N0);
    text-align: left;
}
table tr + tr * {
    border-top: none;
}
table ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}
table ul li a {
    position: relative;
    color: var(--color-link);
}
table ul li a::after {
    content: "";
    position: absolute;
    top: 40%;
    right: -10px;
	width: 6px;
	height: 6px;
	border-top: 1px solid var(--color-link);
	border-right: 1px solid var(--color-link);
	transform: rotate(45deg);
}
/* テーブルスマホ表示 */
@media (min-width: 481px) {
table {
    font-size: var(--font-size-base);
}
table th {
    width: 25%;
}    
table td {
    padding: 16px;
}    
table ul {
    gap: 32px;
}
table ul li a::after{
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--color-link);
    border-right: 2px solid var(--color-link);
}
}
/*--------------------------------------

　section css

---------------------------------------*/
/* ヘッダー */
header {
    display: flex;
    position: sticky;
    top: 0;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 60px;
    padding: 0 16px;
    background-color: var(--color-primary);
    color: var(--color-N0);
    font-size: var(--font-size-paragraph);
    z-index: 10;
}
header .name {
    display: flex;
    align-items: center
}
header img {
    width: 30px;
}
@media (min-width: 481px) {
header {
    font-size: var(--font-size-base);
}
}
/* フッター */
footer {
    height: 48px;
    line-height: 48px;
    background: var(--color-N90);
    color: var(--color-N0);
    font-size: var(--font-size-paragraph);
    text-align: center;
}
/* 応募 */
#apply {
    text-align: center;
    padding-bottom: 64px;
}
#apply p {
    text-align: center;
}
#apply p + .btn_cta {
    margin-top: 40px;
}

/*--------------------------------------

　モーダル

---------------------------------------*/
.modal__overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}
.modal__container {
    position: relative;
    background-color: var(--color-N0);
    padding: 30px;
    max-width: 500px;
    min-width: 80vw;
    max-height: 100vh;
    border-radius: 8px;
    overflow-y: auto;
    box-sizing: border-box;
}
@media screen and (max-width: 480px) { 
.modal__container {
    max-height: 90vh;
    max-width: 80vw;
}
}
.modal__close {
    position: absolute;
    right: 16px;
    top: 16px;
    background: transparent;
    border: none;
    outline: none;
}
.modal__close:before {
    content: "\2715";
    cursor: pointer;
    color: var(--color-N90);
    font-size: var(--font-size-title-m);
}
.modal__close:hover:before {
    opacity: .8;
}
/* modal-1 */
#modal-1 .btn_inquiry {
    display: block;
    width: 100%;
    margin-top: 24px;
    padding: 16px 16px;
    color: var(--color-N0);
    border-radius: 8px;
    text-align: center;
}
#modal-1 .btn_inquiry.tel {
    background: #0173f5;
}
#modal-1 .btn_inquiry.mail {
    background: #eb4a3d;
}
#modal-1 .btn_inquiry.line {
    background: #1ec517;
}
/* リキッドグラス用上書き共通 */
#glass filter {
    display: none;
}
.liquidGlass-effect {
    position: absolute;
    z-index: 0;
    inset: 0;
    backdrop-filter: blur(12px);
    filter: url(#glass-distortion);
    animation: glass-distortion 1s ease-in-out forwards;
    overflow: hidden;
    isolation: isolate;
}
@keyframes glass-distortion {
    from { opacity: 0; }
      to { opacity: 1; }
}
/* 中身 */
.liquidGlass-text {
    z-index: 3;
}
.liquidGlass-wrapper:has(.modal__container)  {
    background: rgba(0, 0, 0, 0);
}
.liquidGlass-wrapper:has(.modal__container) .modal__container {
    background: rgba(255, 255, 255, .9);
}
.liquidGlass-wrapper:has(.modal__container) .liquidGlass-tint {
    z-index: 1;
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .7);
}

/*--------------------------------------

　タブ

---------------------------------------*/
/*タブ切り替え全体のスタイル*/
.tabs {
    position: sticky;
    top: 60px;
    margin-top: 50px;
    padding-bottom: 50px;
    background-color: var(--color-N0);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    width: 100%;
    margin: 0 auto;
    z-index: 10;
}

/*タブのスタイル*/
.tab_item {
    width: calc(100%/3);
    height: 50px;
    border-bottom: 3px solid var(--color-N30);
    background-color: var(--color-N10);
    line-height: 50px;
    font-size: var(--font-size-paragraph);
    text-align: center;
    color: var(--color-primary);
    display: block;
    float: left;
    text-align: center;
    font-weight: bold;
    transition: all 0.2s ease;
}
.tab_item.current {
    background-color: var(--color-N0);
    border-bottom: 3px solid var(--color-secondary);
}
.tab_item span {
    position: relative;
    top: -1px;
    left: 6px;
    display: inline-block;
    font-size: var(--font-size-caption);
}
.tab_item a {
    display: inline-block;
    width: 100%;
    height: 100%;
}
.tab_item a:hover {
    background-color: var(--color-N0);
}
/**************************\
  Demo Animation Style
\**************************/
@keyframes mmfadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}
@keyframes mmfadeOut {
    from { opacity: 1; }
      to { opacity: 0; }
}
@keyframes mmslideIn {
  from { transform: translateY(15%); }
    to { transform: translateY(0); }
}
@keyframes mmslideOut {
from {
    transform: scale(1)
}
to {
    transform: scale(1.04);
}
}
.micromodal-slide {
    display: none;
}
.micromodal-slide.is-open {
    display: block;
}
.micromodal-slide[aria-hidden="false"] .modal__overlay {
    animation: mmfadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}
.micromodal-slide[aria-hidden="false"] .modal__container {
    animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1);
}
.micromodal-slide[aria-hidden="true"] .modal__overlay {
    animation: mmfadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}
.micromodal-slide[aria-hidden="true"] .modal__container {
    animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1);
}
.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay {
    will-change: transform;
}