const dbody = document.body;
const body = qs(".body") || dbody;

let classelms = { w100: {}, h100: {} };
function classlinear(elms = qsa("*")) {
  let ww = window.outerWidth;
  let basew = 768 < ww ? 1920 : 375;
  for (let i = 0; i < elms.length; i++) {
    const elm = elms[i];
    for (let j = 0; j < elm.classList.length; j++) {
      const className = elm.classList[j];
      function applystyle(style, classname, type, px) {
        let text = "";
        if (type == "f") text = "font-size:" + px + "px !important;";
        if (type == "h") text = "height:" + px + "px !important;";
        if (type == "w") text = "width:" + px + "px !important;";
        if (type == "mh") text = "max-height:" + px + "px !important;";
        if (type == "mw") text = "max-width:" + px + "px !important;";
        if (type == "mih") text = "min-height:" + px + "px !important;";
        if (type == "miw") text = "min-width:" + px + "px !important;";
        if (type == "lh") text = "line-height:" + px + "px !important;";
        if (type == "br") text = "border-radius:" + px + "px !important;";
        if (type == "top") text = "top:" + px + "px !important;";
        if (type == "bot") text = "bottom:" + px + "px !important;";
        if (type == "rht") text = "right:" + px + "px !important;";
        if (type == "lft") text = "left:" + px + "px !important;";
        if (type == "m") text = "margin:" + px + "px !important;";
        if (type == "mx") text = "margin-right:" + px + "px !important;";
        if (type == "mx") text += "margin-left:" + px + "px !important;";
        if (type == "my") text = "margin-top:" + px + "px !important;";
        if (type == "my") text += "margin-bottom:" + px + "px !important;";
        if (type == "p") text = "padding:" + px + "px !important;";
        if (type == "px") text = "padding-right:" + px + "px !important;";
        if (type == "px") text += "padding-left:" + px + "px !important;";
        if (type == "py") text = "padding-top:" + px + "px !important;";
        if (type == "py") text += "padding-bottom:" + px + "px !important;";
        if (type == "py") text += "padding-bottom:" + px + "px !important;";
        if (type == "ls") text = "letter-spacing:" + px + "px !important;";
        text = "." + classname + "{" + text + "}";
        if (style.innerHTML != text) style.innerHTML = text;
      }
      let match1 = className.match(/^(f|h|w|mh|mw|mih|miw|lf|br|top|bot|rht|lft|m|mx|my|p|px|py|lh|ls)(\d+)-(-?\d+)$/);
      if (match1) {
        let classname = match1[0];
        let style = classelms?.[classname] || Style(dbody);
        classelms[classname] = style;
        let type = match1[1];
        let a = (match1[2] - match1[3]) / (1920 - 375);
        let px = match1[2] - a * (1920 - ww);
        px = Math.round(px * 100) / 100;
        applystyle(style, classname, type, px);
      }
      let match2 = className.match(/^(f|lh|h|w|mh|mw|mih|miw|br|top|bot|rht|lft|m|mx|my|p|px|py|lh|ls)(\d+)$/);
      if (match2) {
        let classname = match2[0];
        let style = classelms?.[classname] || Style(dbody);
        classelms[classname] = style;
        let type = match2[1];
        let px = match2[2] * (ww / basew);
        px = Math.round(px * 100) / 100;
        applystyle(style, classname, type, px);
      }
    }
  }
  setTimeout(() => {
    classlinear();
  }, 1000 / 30);
}
classlinear();

Style(dbody, ".wauto{width:auto;max-width:unset;}");
window.addEventListener("load", () => {
  setTimeout(() => {
    Style(dbody, '@import "https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@700&display=swap";');
    Style(dbody, '@font-face{font-family:"maru3w";src:url(/font/ヒラギノUD丸ゴ Std W3.woff2)}');
    Style(dbody, '@font-face{font-family:"maru5w";src:url(/font/ヒラギノUD丸ゴ Std W5.woff2)}');
  }, 1);
});

function wsync(elms = qsa("*")) {
  for (let i = 0; i < elms.length; i++) {
    const elm = elms[i];
    for (let j = 0; j < elm.classList.length; j++) {
      const className = elm.classList[j];
      let match = className.match(/^wsync-(.+)$/);
      if (match) {
        let id = match[1];
        let elm2 = qs("#" + id);
        let w = elm2.getClientRects()[0].width;
        elm.style.width = w + "px";
      }
    }
  }
}
setInterval(() => {
  wsync();
}, 100);

function setspmenu() {
  let hamburger = qs("#hamburger");
  let spmenu = qs("#spmenu");
  let closespmenu = qs("#closespmenu");
  let statespmenu = false;
  function togglespmenu() {
    statespmenu = !statespmenu;
    // console.log(statespmenu);
    if (statespmenu) {
      spmenu.style.right = "0";
    } else {
      spmenu.style.right = "-100vw";
    }
  }
  if (hamburger) hamburger.onclick = togglespmenu;
  if (closespmenu) closespmenu.onclick = togglespmenu;
  if (spmenu) {
    let buttons = qsa("a", spmenu);
    for (let i = 0; i < buttons.length; i++) {
      const button = buttons[i];
      button.onclick = togglespmenu;
    }
  }
}
setspmenu();

function setcheckbox() {
  let divs = qsa(".check1");
  for (let i = 0; i < divs.length; i++) {
    const div = divs[i];
    let check = qs("input", div);
    div.onclick = () => {
      check.checked = !check.checked;
    };
    setInterval(() => {
      if (check.checked) {
        div.classList.add("checked");
      } else {
        div.classList.remove("checked");
      }
    }, 100);
  }
}
setcheckbox();

(() => {
  let inputdts = qsa("input[type=datetime-local]");
  for (let i = 0; i < inputdts.length; i++) {
    const inputdt = inputdts[i];
    inputdt.onchange = () => {
      inputdt.value = inputdt.value.slice(0, -2) + "00";
    };
  }
})();

function sendmail(dataobj = {}) {
  return new Promise((resolve, reject) => {
    let xhr1 = new XMLHttpRequest();
    xhr1.onload = function () {
      if (xhr1.status != "200") reject();
      let received = xhr1.response == "" ? "" : JSON.parse(xhr1.response);
      console.log(received);
      resolve(received);
    };
    xhr1.open("post", "https://6qmykuzh4b.execute-api.ap-northeast-1.amazonaws.com/all-mail");
    xhr1.send(JSON.stringify(dataobj));
  });
}

function setslider(elms = qsa("*")) {
  for (let i = 0; i < elms.length; i++) {
    const elm = elms[i];
    for (let j = 0; j < elm.classList.length; j++) {
      const className = elm.classList[j];
      let match = className.match(/^slider(\d+)-(\d+)s$/);
      if (match) {
        let d = match[1];
        let s = match[2];
        let name = d + "-" + s;
        let text = "";
        text += "@keyframes slide" + name + "s { ";
        text += "from { ";
        text += "transform: translateX(0); ";
        text += "} to { ";
        text += "transform: translateX(-" + d + "00%); ";
        text += "} } ";
        text += ".slider" + name + "s { ";
        text += "animation: slide" + name + "s " + s + "s infinite linear 0.5s both; ";
        text += "} ";
        Style(body, text);
      }
    }
  }
}
setslider();

function setslider2(elms = qsa(".slider2")) {
  for (let i = 0; i < elms.length; i++) {
    const elm = elms[i];
    let w = 0;
    let h = 0;
    let slideto = 0;
    let speed = 0.5;
    let ms = 1000 / speed;
    let interval1 = setInterval(() => {
      let imgs = elm.children;
      for (let i = 0; i < imgs.length; i++) {
        const img = imgs[i];
        if (img.naturalWidth == 0) return;
      }
      let rect = elm.children[0].getClientRects()[0];
      if (!rect) return;
      w = rect.width;
      h = rect.height;
      slideto = w;
      ms = ((w / h) * 1000) / speed;
      clearInterval(interval1);
      function reset() {
        elm.style.transition = `transform 0ms linear`;
        elm.style.transform = `translateX(0px)`;
        setTimeout(() => {
          elm.style.transition = `transform ${ms}ms linear`;
          elm.style.transform = `translateX(-${slideto}px)`;
          setTimeout(reset, ms);
        }, 20);
      }
      reset();
    }, 100);
  }
}
setslider2();

function setfader(elms = qsa("*")) {
  for (let i = 0; i < elms.length; i++) {
    const elm = elms[i];
    for (let j = 0; j < elm.classList.length; j++) {
      const className = elm.classList[j];
      let match = className.match(/^fader(\d+)-(\d+)s$/);
      if (match) {
        let wait = Number(match[1]);
        let change = Number(match[2]);
        let imgs = qsa("img", elm);
        for (let k = 0; k < imgs.length; k++) {
          const img = imgs[k];
          imgs[0].style.position = "absolute";
        }
        imgs[0].style.transition = "opacity " + change + "s";
        setInterval(() => {
          if (imgs[0].style.opacity == "1") {
            imgs[0].style.opacity = "0";
          } else {
            imgs[0].style.opacity = "1";
          }
        }, (wait + change) * 1000);
      }
    }
  }
}
setfader();