@charset "UTF-8";
.spOnly {
  display: none !important; }

@media screen and (max-width: 768px) {
  body .pcOnly {
    display: none !important; }
  body .spOnly {
    display: block !important; } }

html {
  /* 16px基準のままが今は主流 */
  font-size: 100%; }

body {
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.8; }

body, input, select, textarea {
  color: #222;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 2.0em; }
  @media screen and (max-width: 480px) {
    body, input, select, textarea {
      font-size: 15px; } }

h1, h2, h3, h4, h5 {
  font-weight: 700;
  font-family: "Noto Serif", serif; }

h1 {
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1.2; }

h2 {
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.2; }

h3 {
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.2;
  margin-bottom: 0.5em; }

img {
  width: 100%;
  height: auto; }

a {
  color: inherit;
  text-decoration: none;
  color: #222; }

.h2_bg1, .h2_bg2 {
  background-image: url("../images/title_bg.png");
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 300px;
  padding: 40px 0 10px;
  margin-bottom: 25px; }
  @media screen and (max-width: 1100px) {
    .h2_bg1, .h2_bg2 {
      background-size: 260px; } }
  @media screen and (max-width: 768px) {
    .h2_bg1, .h2_bg2 {
      background-size: 240px; } }
  @media screen and (max-width: 480px) {
    .h2_bg1, .h2_bg2 {
      background-size: 220px; } }

.h2_bg2 {
  background-position: bottom center;
  text-align: center;
  padding: 40px 0 10px; }

a:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  -webkit-transition: all .5s;
  transition: all .5s;
  opacity: 0.8; }

@media (min-width: 769px) {
  a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none; } }