@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+2:wght@400;700&family=Noto+Sans+JP:wght@400;700&display=swap');
/* css変数定義 */
:root {
    /* 固定ヘッダー避け */
    --header: calc(80px + 1em);
    scroll-padding: var(--header);
    /* 色関連 */
    --theme: #e4362f;
    --text: #000;
    --black1: #000;
    --black2: #444;
    --white: #fff;
    --gray1: #888;
    --gray2: #b0b0b0;
    --gray3: #dcdcdc;
    --gray4: #f8f8f8;
    --blue: #7CCAF1;
    --red1: #e4362f;
    --red2: #FF2828;
    --red3: #fef1f0;
    --yellow: #E0C73F;
    --border: #dcdcdc;
    --back: #fff;
    /* フォント関連 */
    --font: 16px;
    --large: 20px;
    --small: 12px;
    --bold: 700;
    --normal: 400;
}

/* 共通クラスなど */
html {
    width: 100%;
    height: 100%;
}
body {
    width: 100%;
    font-size: var(--font);
    font-family: 'M PLUS 2', sans-serif;
    /* font-family: 'Noto Sans JP', sans-serif; */
    color: var(--text);
    background: var(--back);
    line-height: 1.5;
}
a {
    color: var(--text);
    word-break: break-all;
    text-decoration: underline;
}
a:hover {
    opacity: 0.9;
    transition: 0.75s all;
}
.noUnder {
    text-decoration: none;
}
.under {
    text-decoration: underline;
}
ul.noStyle li {
    list-style-type: none;
}
img {
    vertical-align: bottom;
}
.small {
    font-size: var(--small) !important;
}
.normal {
    font-size: var(--font) !important;
}
.large {
    font-size: var(--large) !important;
}
@media screen and (min-width: 1024px) {
    .spOnly {
        display: none !important;
    }
    .cmnWrap {
        width: 1000px;
        margin: 0 auto;
        padding: 0 12px;
    }
    .cmnWrapIn {
        width: 960px;
        margin: 0 auto;
    }
}
@media screen and (max-width: 1023px) {
    body {
        font-size: 14px;
    }
    img {
        width: 100%;
    }
    .pcOnly {
        display: none !important;
    }
    .pcOnly.tbExclusion {
        display: block !important;
    }
    .cmnWrap,
    .cmnWrapIn {
        width: 94%;
        margin: 0 auto;
        padding: 0;
    }
    @media screen and (max-width: 767px) {
        .pcOnly.tbExclusion {
            display: none !important;
        }
    }
    @media screen and (min-width: 768px) {
        .spOnly.tbExclusion {
            display: none !important;
        }
    }
}
.fullWidth {
    width: 100%;
}
.bold {
    font-weight: bold;
}
.weightNormal {
    font-weight: normal;
}
.flexAround {
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.flexBetween {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.flexEvenly {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.flexStart {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.flexEnd {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.flexCenter {
    display: flex;
    justify-content: center;
    align-items: center;
}
.addRadius {
    border-radius: 7px;
}
.txtCenter {
    text-align: center;
}
.txtRight {
    text-align: right;
}
.addShadow {
    box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.1);
}
.hidden {
    display: none;
}

/* コンテナクエリ */
.container {
    container-type: inline-size;
}
@container (min-width: 1024px) {
    /*PC*/
}
@container (max-width: 1023px) {
    /*TB*/
    @container (max-width: 767px) {
        /*SP*/
    }
}