@charset "UTF-8";
/*
Theme Name: Let It Be
Theme URI: https://lookat.co.jp
Author: Look At Inc.
Author URI: https://lookat.co.jp
Description: There will be an answer, let it be.
Version: 1.0.0
License: GNU General Public License v2 or later
*/

@import url("style-original.css"); 

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
root設定
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/* 標準フォントサイズ */
@media (max-width:640px) {:root {font-size:14px;}}
@media (min-width:641px) {:root {font-size:16px;}}

:root {--header-pc-height:80px;}
:root {--header-mobile-height:50px;}
:root {--header-topbar-height:50px;}
:root {--header-logo-height:40px;}
:root {--header-navi-height:60px;}
:root {--h2-line-color:linear-gradient(to right, #185a9d, #43cea2);}
:root {--header-color:#fff;}
:root {--header-text-color:#333;}
:root {--footer-bg-color:#4C4966}

:root {--main-color-light:RGBA(89, 54, 150, .1);} /* dark*0.1 */
:root {--main-color:RGBA(89, 54, 150, .4);} /* dark*0.4 */
:root {--main-color-dark:RGBA(89, 54, 150, 1);} /* #593696 */

:root {--sub-color-light:RGBA(47, 155, 244, .1);} /* dark*0.1 */
:root {--sub-color:RGBA(47, 155, 244, .4);} /* dark*0.4 */
:root {--sub-color-dark:RGBA(47, 155, 244, 1);} /* #2f9bf4 */

:root {--accent-color-light:RGBA(194, 24, 91, .1);} /* dark*0.1 */
:root {--accent-color:RGBA(194, 24, 91, .4);} /* dark*0.4 */
:root {--accent-color-dark:RGBA(194, 24, 91, 1);} /* #c2185b */

:root {--extra-color-light:RGBA(255, 230, 12, .1);} /* dark*0.1 */
:root {--extra-color:RGBA(255, 230, 12, .4);} /* dark*0.4 */
:root {--extra-color-dark:RGBA(255, 230, 12, 1);} /* #ffe60c */

:root {--drawer-color:#e1f5fe;}
:root {--hamburger-color:#fff;}
:root {--hamburger-line-color:#000;}

:root {--navigation-color:linear-gradient(80deg, #8e2de2, #4a00e0);}
:root {--navigation-hover-color:linear-gradient(-80deg, #8e2de2, #4a00e0);}
:root {--megamenu-bg-color:#eee;}
:root {--megamenu-text-color:#263238;}

:root {--title-bg-overlay-color:linear-gradient(100deg,rgba(0,0,0,.4) 0,rgba(0,0,0,.1) 100%);}
:root {--title-color:linear-gradient(to left, rgba(109, 213, 250,0.4), rgba(109, 213, 250,0.2));}
:root {--title-slim-bg-color:linear-gradient(to top, #d3cce3, #e9e4f0);}
:root {--title-slim-bg-color:linear-gradient(350deg, var(--main-color), var(--main-color-light));}
:root {--title-slim-text-color:#000;}

:root {--border-color-light:#fff;}
:root {--border-color:#d8d8d8;}
:root {--border-color-dark:#3c4858;}

:root {--text-color:#333;}

:root {--black-color-light:#d8d8d8;}
:root {--black-color:#3c4858;}
:root {--black-color-dark:#000;}

:root {--white-color-light:#fff;}
:root {--white-color:#f9fafc;}
:root {--white-color-dark:#eff2f7;}

:root {--bg-color-light:#fefdfb;}
:root {--bg-color:#faf0e6;}
:root {--bg-color-dark:f6e3d1;}

:root {--bg-sub-color-light:#f0f3f6;}
:root {--bg-sub-color:#e0e6ed;}
:root {--bg-sub-color-dark:#d0d9e4;}

:root {--button-color-light:#a793ff;}
:root {--button-color:#6D4CFF;}
:root {--button-color-dark:#412d99;}

:root {--button2-color-light:#e8f5e9;}
:root {--button2-color:#a5d6a7;}
:root {--button2-color-dark:#66bb6a;}

:root {--label-color1:#4a00e0;}
:root {--label-color2:#00695c;}
:root {--label-color3:#d50000;}
:root {--label-color4:#333;}
:root {--label-color0:#81d4fa;}

#color-chart .cell {height:10rem;display:flex;align-items: center;justify-content: center;flex-direction:column;margin-bottom:2rem;}
#color-chart span {color:#fff;}
#color-chart .main-color-light {background:var(--main-color-light);}
#color-chart .main-color {background:var(--main-color);}
#color-chart .main-color-dark {background:var(--main-color-dark);}
#color-chart .sub-color-light {background:var(--sub-color-light);}
#color-chart .sub-color {background:var(--sub-color);}
#color-chart .sub-color-dark {background:var(--sub-color-dark);}
#color-chart .accent-color-light {background:var(--accent-color-light);}
#color-chart .accent-color {background:var(--accent-color);}
#color-chart .accent-color-dark {background:var(--accent-color-dark);}
#color-chart .extra-color-light {background:var(--extra-color-light);}
#color-chart .extra-color {background:var(--extra-color);}
#color-chart .extra-color-dark {background:var(--extra-color-dark);}



h1.japanese,
.font-sawarabi {
  font-family: "Sawarabi Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
}
h1.english,
.font-mont {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}
h1,
.font-tektur {
  font-family: "Tektur", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

header {background: #0F163B;}
#topbar {display: flex; align-items: center; justify-content: space-between;}
h1 a {color:#fff; font-size: 2rem;}
header .right-block li a {color:#fff;}

.sc-hero {display: grid;
          grid-template-columns: 100%;
          grid-template-rows: 100%;
          position: relative;
          margin-top:var(--header-pc-height);
        }
.sc-hero img {width:100vw;aspect-ratio: 3/1; object-fit: cover;}
.sc-hero .image-box {grid-area: 1 / 1;z-index:0;}
.sc-hero .text-box {grid-area: 1 / 1;color:#fff;z-index:2;}
.sc-hero .text-box .grid-container {display: flex; flex-direction : column; align-items: flex-start;justify-content: center;height:100%;gap:1.25rem;}
.sc-hero .text-box .catch-copy {font-size: 2.5rem;font-family:serif;font-weight: bold;}
.sc-hero .text-box .font-tektur {font-size: 2rem;}
.sc-hero .text-box .font-sawarabi {font-size: 1.5rem;}
.sc-hero .text-box .title-set {display: flex; align-items: center;gap:1rem;}
.sc-hero .text-box .cta-button .button {border-color:#fff; color:#fff;}

.about {background: #f4f3fb;}
.about h4 {font-size: 1.25rem; background: transparent; margin: 0;margin-bottom: 2rem; padding:0;}

.science-top {
  background-color: #18153f;
  background-image: url("https://www.transparenttextures.com/patterns/inflicted.png");
}
.text-white {color:#fff;}


@media (max-width: 640px) {
  .sc-hero .text-box .catch-copy {font-size: 1.5rem;font-family:serif;font-weight: bold;}
  .sc-hero img {width:100vw;aspect-ratio: 1/1; object-fit: cover;object-position: right center;}
  .sc-hero .text-box .title-set {display: flex; flex-direction: column;}
  #science-casting-menu li {width:50%;}
}

.accordion h4 {padding-left:0;}