@charset "UTF-8";

/* 全ての画面に適用する（作品個別cssの前にいったんリセットしたい内容） */

/* すべての要素の基本リセット */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;

    /*おまじない*/
    -webkit-appearance: none;
    appearance: none;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;

    /* 強調をなくす */
    -webkit-tap-highlight-color: transparent;
}



/* ユーザーがアニメーションを少なくする設定を有効にしている場合 */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation: none;
    }
}

/*横幅リセット*/
html,
body,
main {
    min-width: 100%;
    min-width: 100vw;
    min-width: 100dvw;
}


html,
body {
    /*縦幅*/
    min-height: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    /*横スクロール禁止*/
    overflow-x: hidden;
}



/* 画像とメディア要素が親要素に収まるように設定 */
img,
video {
    max-width: 100%;
    height: auto;
    display: block;
}




/*文字サイズ*/
/*スマホは画面が物理的に小さいので、文字サイズを画面横幅に対する比率で設定する*/
:root {
    /*基本の文字サイズ*/
    --font-size-m: 20px;

    --font-size-xs-mag: 0.7;
    --font-size-s-mag: 0.9;
    --font-size-l-mag: 1.2;
    --font-size-xl-mag: 1.5;

    --font-size-xs: calc(var(--font-size-m) * var(--font-size-xs-mag));
    --font-size-s: calc(var(--font-size-m) * var(--font-size-s-mag));
    --font-size-l: calc(var(--font-size-m) * var(--font-size-l-mag));
    --font-size-xl: calc(var(--font-size-m) * var(--font-size-xl-mag));
}

html.sp {
    --font-size-m: 4vw;
    --font-size-m: 4dvw;
}

.font-size-s {
    font-size: var(--font-size-s);
}

.font-size-l {
    font-size: var(--font-size-l);
}

.font-size-xl {
    font-size: var(--font-size-xl);
}



/* 基本スタイルの設定 */

html {
    scroll-behavior: smooth;
    /* ズーム禁止 */
    touch-action: pan-x pan-y;
    font-size: var(--font-size-m);

    /* Googleフォント*/
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;

    caret-color: transparent;
}


/* リンクの装飾をリセット */
a {
    color: inherit;
    text-decoration: none;
}



/* リストのデフォルトのインデントとマーカーを削除 */
ul,
ol {
    list-style: none;
    padding: 0;
}


/* テーブルのボーダー設定 */
table {
    border-collapse: collapse;
    border-spacing: 0;
}


/* フォーム要素の基本リセット */
input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    outline: none;
}



/* SafariのiOSでのフォームサイズや外観のリセット */
textarea {
    resize: vertical;
    /* 横方向のリサイズを無効化 */
}

button {
    appearance: none;
    background: none;
    border: none;
    cursor: pointer;
    /*ボタンの背景を透明にする*/
    background-color: transparent;
}

h1,
h2,
h3,
h4,
h5 {
    margin: 0;
}


/*レイアウト用の設定*/
/*.sp-onlyをつけるとスマホの時にのみ表示される*/
.sp-only {
    display: none;
}

.sp .sp-only {
    /*デバイスがスマホ*/
    display: block;
}

/*.box-gatherをつけると、pcで横1000px超え、またはtabで縦画面で横1000px超えのとき、幅が1000pxになる*/
.box-gather {
    width: 100%
}

.pc.over1000 .box-gather,
.tab.h.over1000 .box-gather {
    width: 1000px;
}





/* レイアウト用 */


.box-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.box-padding {
    padding: 1rem;
}

.box-50 {
    width: 50%;
}

.sp .box-50 {
    width: 100%
}


.item1 {
    width: 100%;
    padding-bottom: 1rem;
}

.item1-p .item1:last-child {
    padding-bottom: 0;
}

/*sp以外なら横並びにする（横幅はauto）*/
.flex-auto {
    display: flex;
    width: auto;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.sp .flex-auto {
    flex-direction: column;
}


/* 寄せ */
.align-center {
    text-align: center;
    align-items: center;
}

.align-left {
    text-align: left;
    align-items: left;
}

.align-right {
    text-align: right;
    align-items: right;
}

.indentation {
    padding-left: 1em;
}


/*フォント*/

@font-face {
    font-family: 'KurobaraGothic';
    src: url('/assets/fonts/kurobara-gothic-regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.kurobara {
    font-family: 'KurobaraGothic', serif;
    /* 黒薔薇フォントを使用 */
}

.mincho {
    font-family: "Zen Old Mincho", serif;
    font-weight: 400;
    font-style: normal;
}