@charset "UTF-8";
/*--------------------------------------------------------
　LP専用テンプレート（lp-default.php）のデフォルトレイアウト
（個別のスタイルは、個々のページ用CSSで対応する）
--------------------------------------------------------*/

/* =======================================
　LP背景
======================================= */
body,
#container {
  background: var(--bg-black);
}

/* =======================================
　LPフォント
======================================= */

/* フォント */
body,
p,
td,
li,
dt,
dd {
  color: var(--color-lp-primary-font-main);
  font-size: var(--size-lp-primary-font);
  font-family: var(--type-lp-primary-font-sans);
  line-height: var(--lh-lp-primary-font);
}

main p {
  padding-bottom: calc(var(--size-lp-primary-font) * var(--lh-lp-primary-font));
  font-weight: 600;
}

main ul {
  padding: calc(var(--size-lp-primary-font) * .5) var(--size-lp-primary-font) calc(var(--size-lp-primary-font) * .5) calc(var(--size-lp-primary-font) * 1.5);
}


/* Expo フォントクラス */
.font-expo {
  font-family: var(--font-expo);
  text-transform: uppercase;
  font-style: italic;
  font-weight: 900;
}


/* 見出し */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-lp-primary-heading);
  font-family: var(--type-lp-primary-font-sans);
  line-height: var(--lh-lp-primary-heading);
  letter-spacing: var(--ls-lp-primary-heading);
  font-weight: bold;
  font-feature-settings: "palt";
  text-align: left;
}

h1 {
  font-size: var(--size-lp-h1);
  padding: 0;
  margin-bottom: 1rem;
}

h2 {
  font-size: var(--size-lp-h2);
  margin-bottom: var(--size-lp-h2);
}

h3 {
  font-size: var(--size-lp-h3);
  margin-bottom: calc(var(--size-lp-h3) * 0.6);
}

h4 {
  font-size: var(--size-lp-h4);
  margin-bottom: var(--size-lp-h4);
}

h5 {
  font-size: var(--size-lp-h5);
  margin-bottom: var(--size-lp-h5);
}

h6 {
  font-size: var(--size-lp-h6);
  margin-bottom: var(--size-lp-h6);
}


@media screen and (max-width: 639px) {
  h1 {
    font-size: calc(var(--size-lp-h1) * .675);
    margin-bottom: calc(var(--size-lp-h1) * .5);
  }

  h2 {
    font-size: calc(var(--size-lp-h2) * .875);
    margin-bottom: calc(var(--size-lp-h2) * .875);
  }

  h3 {
    font-size: calc(var(--size-lp-h3) * .875);
    margin-bottom: calc(var(--size-lp-h3) * .875);
  }

  h4 {
    font-size: calc(var(--size-h4) * .875);
    margin-bottom: calc(var(--size-h4) * .875);
  }

  h5 {
    font-size: calc(var(--size-lp-h5) * .875);
    margin-bottom: calc(var(--size-lp-h5) * .875);
  }

  h6 {
    font-size: calc(var(--size-lp-h6) * .875);
    margin-bottom: calc(var(--size-lp-h6) * .875);
  }
}



/* =======================================
　LPレイアウト
======================================= */

/*------ コンテンツエリア -----*/
.page-template-lp #content-inner {
  max-width: 100%;
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

/*------ フッターエリア -----*/

footer a,
footer a:link,
footer a:visited {
  color: #e2ff00;
  text-decoration: none;
  transition: all .5s;
  font-weight: bold;
}

footer a:hover {
  text-decoration: none;
  opacity: .7;
}

/* グローバルフッター */
#footer-inner {
  background: var(--color-lp-footer-bg);
}

footer #global-footer {
  box-sizing: border-box;
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  padding: 32px 16px 24px;
}

#global-footer,
#global-footer p,
#global-footer td,
#global-footer li,
#global-footer dt,
#global-footer dd {
  color: var(--color-lp-primary-font-footer);
  font-size: 14px;
}

@media screen and (max-width: 639px) {
  footer #global-footer {
    padding: 48px 16px;
  }
}


/* フッターボトム */
footer #footer-bottom {
  box-sizing: border-box;
  padding: 8px 16px;
  width: 100%;
  background: var(--color-lp-footerbottom-bg);
}

#footer-bottom,
#footer-bottom p,
#footer-bottom td,
#footer-bottom li,
#footer-bottom dt,
#footer-bottom dd {
  color: var(--color-lp-primary-font-footerbottom);
}

/* ウィジェット */
.footer-bottom-widget {
  padding: 0;
  margin: 0;
}


/*------ 上に戻るボタン ------*/
#pagetop-btn {
  display: block;
  width: 100%;
}

.pagetop a {
  background: var(--color-lp-primary01);
  color: var(--color-wh);
  cursor: pointer;
  display: block;
  font-size: var(--size-lp-primary-font-small);
  font-weight: bold;
  line-height: 1;
  padding: 15px 0;
  text-align: center;
  width: 100%;
  text-decoration: none;
}

@media only screen and (max-width:1023px) {
  .pagetop a {
    font-size: var(--size-lp-primary-font-small);
  }
}

.pagetop a:hover {
  opacity: .7;
}

.pagetop a i,
.pagetop a svg {
  margin: 5px 5px 0 0;
}




/* =======================================
　その他WordPressに関するLP調整
======================================= */

/*------ 以下、スタイルは通常ページと同じとする（変更の必要なし） -----*/
/* adminbar */
#wpadminbar,
#wpadminbar p,
#wpadminbar li {
  color: var(--color-wh);
}

#wpadminbar a {
  color: var(--color-gray02);
}

/*iPhoneのみ*/
body {
  -webkit-text-size-adjust: 100%;
}