@charset "UTF-8";
:root{
    /* カラー */
    --jcom-red:#D9161B;
    --jcom-orange:#E93817;
    --jcom-sub-orange:#EE5D44;
    --link-blue:#406FAF;
    --text-color:#333;
    --color-wh:#fff;

    /* 基準フォントサイズ */
    font-size: 62.5%;
    
    /* 最大幅と余白 */
    --max-width: 96rem;
    --min-side-space: 10vw;

    /* グリッドの隙間 */
    --grid-gap-md: 2.4rem;
    --grid-gap-lg: 4.0rem;
}
html{
    scroll-behavior: smooth;
}
body {
    font-family: 'Noto Sans JP', 'meiryo', 'メイリオ', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Osaka', 'sans-serif';
    margin: 0;
    padding: 0;
    font-size: 1.6rem;
    color: var(--text-color);
    line-height: 1.7;
}
main{
    margin: 0 auto;
    overflow: hidden;
}
.side-space{
    padding-inline: max(var(--min-side-space), calc(50% - var(--max-width) / 2));
}
.grid-2 {
  display: grid;
  gap: var(--grid-gap-lg);
  grid-template-columns: repeat(2, 1fr);
}
.grid-3 {
  display: grid;
  gap: var(--grid-gap-md);
  grid-template-columns: repeat(3, 1fr);
}

img{
    max-width: 100%;
}
.img{
    place-self: center;
}
.sp_only{
    display: none;
}
.sp-img{
    display: none;
}
.b{
    font-weight: bold;
}
.sm{
    font-size: 12px;
}

@media screen and (max-width: 768px) {
    .grid-2,.grid-3 {
        grid-template-columns: 1fr;
    }
    .sp_only{
        display: block;
    }
    .pc_only{
        display: none;
    }
    .sp-img{
        display: unset;
    }
    .pc-img{
        display: none;
    }
}