@charset "UTF-8";

/* 関数 */
:root {
  --bg: #f4f4f2;
  --bg_sub: #e0e0de;
  --font_light: #fff;
  --text_shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
  /* --box_shadow: 0px 0.5px 0.5px 0px rgba(0, 0, 0, 0.1); */
  --main: #f4a81d;
  --accent1: #e7609a;
  --accent2: #66c192;
  --accent3: #e42557;
  --accent4: #179ddf;
}

/* 共通css */
html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg);
}

rt {
  font-size: 0.5rem;
}

a {
  text-decoration: none;
}

a:hover {
  cursor: pointer;
}

a,
a:hover,
.nav-inner li,
.footer li,
.site-title,
.small {
  color: var(--font_light);
  text-shadow: var(--text_shadow);
}

section {
  padding: 96px 0;
}

section:first-child {
  padding-top: 80px;
}

section:last-child {
  padding-bottom: 80px;
}

.link {
  border-radius: 50px;
  padding: 10px 15px;
  background-color: var(--accent1);
  transition: all 0.8s;
}

.link:hover {
  transform: scale(1.1, 1.1);
}

.br-992-1200 {
  display: none;
}

/* font */
.site-title,
.section-title,
.text-title,
.nav-inner li {
  font-family: "Hachi Maru Pop", cursive;
  font-weight: 700;
  font-style: normal;
}

.text,
.text-small,
.link,
#question li {
  font-family: "Hachi Maru Pop", cursive;
  font-family: "Yomogi", cursive;
}

.list-style-none {
  list-style: none;
}

/* font-size */
.site-title {
  font-size: clamp(1.375rem, 2vw + 1rem, 2.5rem);
}

.section-title,
.text-title,
.text-small {
  line-height: 2.5rem;
}

.section-title,
.text-title {
  font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem);
}

.text,
.link {
  line-height: 3rem;
  font-size: clamp(1.25rem, 1vw + 1rem, 2rem);
}

#nav-menu .text,
.text-small {
  font-size: clamp(1rem, 1vw + 0.75rem, 1.5rem);
}

/* =====header===== */
.header {
  background-color: var(--main);
  border-bottom-left-radius: 50% 30%;
  border-bottom-right-radius: 50% 30%;
  padding: 64px 0 96px;
}

.nav-inner {
  position: absolute;
  top: -280px;
  left: 0;
  height: 280px;
  width: 100%;
}

.nav-link {
  color: var(--font_light) !important;
}

.open .nav-inner {
  position: fixed;
  top: 0;
  padding-top: 30px !important;
  background-color: var(--accent1);
  border-bottom-left-radius: 50% 30%;
  border-bottom-right-radius: 50% 30%;
  z-index: 5;
}

.open .nav-inner .nav-link {
  display: inline-block !important;
  transition: all 0.8s;
}

.open .nav-inner li {
  text-align: center;
  padding: 7px;
}

.open .nav-inner .nav-link:hover {
  transform: scale(1.1, 1.1);
}

/* ハンバーガー三本線の位置 */
.toggle-btn {
  display: block;
  position: fixed;
  top: 20px;
  right: 20px;
  width: 30px;
  height: 30px;
  z-index: 10;
  cursor: pointer;
  transition: all 0.8s;
}

/* ハンバーガー三本線の色や形 */
.toggle-btn span {
  position: absolute;
  display: block;
  left: 0;
  width: 30px;
  height: 2px;
  border-radius: 5px;
  opacity: 1;
  /* box-shadow: var(--box_shadow); */
}

/* 三本が均等に並ぶように位置を指定 */
.toggle-btn span:nth-child(1) {
  top: 4px;
  background-color: var(--accent1);
}

.toggle-btn span:nth-child(2) {
  top: 14px;
  background-color: var(--accent2);
}

.toggle-btn span:nth-child(3) {
  bottom: 4px;
  background-color: var(--accent3);
}

.toggle-btn:hover {
  transform: scale(1.3, 1.3);
}

/* ハンバーガーメニューがopenしているとき×に変更する */
.open .toggle-btn span:nth-child(1) {
  transform: translateY(10px) rotate(-315deg);
  background-color: var(--accent3);
}

.open .toggle-btn span:nth-child(2) {
  opacity: 0;
}

.open .toggle-btn span:nth-child(3) {
  transform: translateY(-10px) rotate(315deg);
  background-color: var(--accent2);
}

.open #mask {
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: fixed;
  cursor: pointer;
  background-color: var(--bg);
  opacity: 0;
  z-index: 2;
}
/* navigation-menu__end */

/* ruby-toggle */
.rt-off rt {
  display: none;
}

.ruby-toggle {
  background-color: var(--bg_sub);
}

.form-check-input {
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.25em;
  vertical-align: text-bottom !important;
}

.form-check-input:checked {
  background-color: var(--accent1) !important;
  border-color: var(--accent1) !important;
}

/* =====section-profile===== */

/* =====section-works===== */
#works,
#merit-demerit {
  border-top: dashed 15px var(--main);
  border-bottom: dashed 15px var(--main);
}

.flex-inner {
  border: solid 5px var(--accent2);
  border-radius: 10px;
}

/* =====section-question===== */
.i-1 {
  color: var(--accent1);
}

.i-2 {
  color: var(--accent2);
}

/* =====works.html===== */
tr:first-child {
  border-top: solid 3px var(--main);
  border-bottom: solid 3px var(--accent1);
}

tr:nth-child(2) {
  border-bottom: solid 3px var(--accent2);
}

tr:nth-child(3) {
  border-bottom: solid 3px var(--accent3);
}

tr:nth-child(4) {
  border-bottom: solid 3px var(--accent1);
}

tr:last-child {
  border-bottom: solid 3px var(--main);
}

/* =====question.html===== */
.i-3,
.bi-check {
  color: var(--accent3);
}

.check-point {
  border: solid 5px var(--main);
  border-radius: 10px;
}

/* =====workshop.html===== */
#suggest {
  border-top: dashed 15px var(--main);
}

.book-1 {
  border-radius: 60% 40% 40% 70% / 60% 50% 50% 40%;
}

/* =====footer===== */
.footer {
  background-color: var(--main);
  border-top-left-radius: 50% 30%;
  border-top-right-radius: 50% 30%;
  padding: 64px 0px 5px;
}

.logo-wrapper img {
  max-width: 160px;
}

/* 576px〜===================================================================== */
@media screen and (min-width: 576px) {
  .br-576 {
    display: none;
  }
}

/* 992px〜===================================================================== */
@media screen and (min-width: 992px) {
  .br-992-1200 {
    display: block;
  }

  section {
    padding: 192px 0;
  }

  .toggle-btn {
    display: none;
  }

  #mask {
    display: none;
  }

  .site-title {
    width: 100%;
    margin-bottom: 96px;
  }

  .h-nav .nav-inner {
    display: flex;
    flex-direction: row !important;
    position: initial;
    height: auto;
    justify-content: space-around;
    /* background-color: var(--main); */
  }

  /* list-circle */
  .h-nav .nav-inner li {
    height: 200px;
    width: 200px;
    line-height: 196px;
    transition: all 0.8s;
  }

  .h-nav .nav-inner li:hover {
    transform: scale(1.1, 1.1);
  }

  .h-nav .nav-inner li:nth-child(1) {
    background-color: var(--accent1);
    border-radius: 70% 60% 50% 50% / 50% 60% 70% 80%;
  }

  .h-nav .nav-inner li:nth-child(2) {
    background-color: var(--accent2);
    border-radius: 70% 50% 70% 60% / 40% 80% 60% 70%;
  }

  .h-nav .nav-inner li:nth-child(3),
  .works-header .nav-inner li:nth-child(2) {
    background-color: var(--accent3);
    border-radius: 80% 60% 50% 60% / 50% 60% 70% 50%;
  }

  .h-nav .nav-inner li:nth-child(4),
  .works-header .nav-inner li:nth-child(3),
  .question-header .nav-inner li:nth-child(3) {
    background-color: var(--accent4);
    border-radius: 60% 40% 40% 70% / 60% 50% 50% 40%;
  }

  /* footer */
  .footer {
    padding-top: 96px;
  }
}

@media screen and (min-width: 1200px) {
  .br-992-1200 {
    display: none;
  }
}