@charset 'UTF-8';

html {
    font-size: 62.5%;
    font-family: 'Noto Sans JP', sans-serif;
    scroll-behavior: smooth;
}

body {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    overflow-x: hidden;
    overflow-y: scroll;
    font-size: 10px;
    color: var(--main_color);
    /* background: #9900CC; */
}

h1 {
    font-size: 4rem;
}

h2 {
    font-size: 3rem;
}

h3 {}

p {}

img {
	width: 100%;
	max-width: 100%;
}

@media screen and (min-width: 751px) and (max-width: 1200px) {

    /* 1200pxで1remが10pxになる。それ以降は大きくならない。
  1200px以下で自動でサイズが小さくなる。計算式＝10px / 1300px x 1000 */
    html {
        font-size: 0.8333vw;
    }
}

@media screen and (max-width: 750px) {

    /* 750pxで1remが10pxになる。それ以降は大きくならない。
  750px以下で自動でサイズが小さくなる。計算式＝10px / 749px x 1000 */
    html {
        font-size: 1.333vw;
    }
}

/* ======================================
共通設定
====================================== */
/* PCでTELクリック無効 */
a[href^="tel:"] {
    pointer-events: none;
}
a {
  opacity: 1;
  transition: opacity 0.3s ease; /* ← なめらかに変化 */
}
a:hover {
    opacity: .7;
}

/* ======================================
色の共通設定
====================================== */
:root {
    --main_color: #000000;
}

/* ======================================
共通設定ヘルパークラス
====================================== */
@media screen and (min-width: 751px) {

    /* 750px以上は.hp_pcでパソコン表示、.hp_spでスマホ非表示 */
    .hp_pc {
        display: block;
    }

    .hp_sp {
        display: none !important;
    }
}

@media screen and (max-width: 750px) {

    /* 749pxまでは.hp_pcでパソコン非表示、.hp_spでスマホ表示 */
    .hp_pc {
        display: none !important;
    }

    .hp_sp {
        display: block;
    }
}

.hp_flex {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items:stretch;
}

.hp_flex li {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.posi--r {
    position: relative;
}
.posi--a {
    position:absolute;
}