@charset "utf-8";
/*
Theme Name: imanu Web
Author: hikaru
Version: 1.0
*/

/* -----------------------
リセット 
-------------------------*/

html {
  font-size: clamp(1rem, 1.15vw, 3rem);
  scroll-behavior: smooth;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  color: #333;
  border-top: 10px solid var(--main-color);
  line-height: 1.8;
  letter-spacing: 0.05em;
  font-weight: bold;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
}
img {
  max-width: 100%;
}
a {
  text-decoration: none;
  color: #333;
}
ul {
  padding: 0;
  list-style: none;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
dl,
dt,
dd,
ul,
li,
figure {
  margin: 0;
  padding: 0;
}
/* -----------------------
共通デザイン
-------------------------*/
:root {
  --base-color: #fbf6ed; /* 70% */
  --main-color: #2a8bb5; /* 25% */
  --accent-color: #e78e10; /* 5% */
  --sub-color-blue: #162469;
  --sub-color-red: #c61124;
}
.ham,
#js-focus-trap {
  display: none;
}
/* 上下paddingのため*/
.main {
  width: 100%;
  padding: clamp(2rem, 1.077rem + 4.62vw, 5rem) 0;
}
/* 下層ページのpadding */
.lower-layer-main {
  width: 100%;
  padding: 5rem 7rem;
  padding: clamp(2rem, 1.077rem + 4.62vw, 5rem)
    clamp(0.2rem, -1.892rem + 10.46vw, 7rem);
}
/* トップページの左右paddingのためと、 
  区切りをつけたいブロック全てに。
  marginの相殺がうまく機能する。
 */
.wrapper {
  margin: clamp(1rem, 0.077rem + 4.62vw, 4rem) 0;
  padding: 1rem clamp(0.375rem, -1.663rem + 10.19vw, 7rem);
}
/* トップページなどで全幅backgroundを付けたい場合、当要素の子に充てる
    左右paddingは.wrapperと同じにする
    上下paddingは.wrapperの上下padding + N にする
 */
.back-ground-color {
  padding: clamp(1rem, -0.231rem + 6.15vw, 5rem)
    clamp(1rem, -0.846rem + 9.23vw, 7rem);
  background-color: var(--base-color);
}
.page-title {
  font-size: clamp(2.5rem, 2.346rem + 0.77vw, 3rem);
}
.section-title {
  margin-bottom: 3rem;
  text-align: center;
  .en {
    font-size: clamp(2.5rem, 2.346rem + 0.77vw, 3rem);
    line-height: 1;
    border-bottom: 8px solid var(--accent-color);
  }
  .ja {
    font-size: 1rem;
    margin-bottom: -5px;
  }
}
.heading2 {
  font-size: clamp(1.2rem, 0.954rem + 1.23vw, 2rem);
  margin-bottom: 2rem;
}
.heading3 {
  font-size: clamp(1.1rem, 0.977rem + 0.62vw, 1.5rem);
  margin-bottom: 1.5rem;
}
.title {
  font-size: clamp(1.5rem, 1.346rem + 0.77vw, 2rem);
  margin-bottom: 60px;
  text-align: center;
  position: relative;
}
.title::after {
  content: "";
  position: absolute;
  width: 3rem;
  height: 5px;
  background-color: var(--accent-color);
  inset: 3.5rem 0;
  margin: auto;
}
.button {
  touch-action: manipulation;
  border-radius: 10px;
  border: 1px solid inherit;
  height: inherit;
  width: fit-content;
  margin: 2rem auto;
  background-color: var(--sub-color-blue);
  & a {
    color: #fff;
    font-weight: normal;
    display: inline-block;
    border-radius: 10px;
    padding: 0.5rem 2rem;
    box-shadow: 0px 3px 3px rgb(156, 155, 155);
    transition: 0.3s;
  }
  & a:hover {
    background-color: #fff;
    color: var(--sub-color-blue);
    outline: 2px solid var(--sub-color-blue);
  }
}
.a-rink {
  color: var(--main-color);
}
.button-small {
  width: fit-content;
  margin: 1rem 0 1rem auto;
  border-bottom: 1px solid #121212;
}
.button-small::after {
  content: url(img/button-icon.png);
  display: inline-block;
  scale: 0.65;
  line-height: 0;
  vertical-align: top;
  transition: 0.5s;
}
.button-small a:hover::after {
  transform: translateX(1rem);
}
/* flexを多用するなら */
.flex-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  .item30 {
    width: 30%;
  }
  .item45 {
    width: 45%;
  }
  .item50 {
    width: 50%;
  }
  .item60 {
    width: 60%;
  }
  .item70 {
    width: 70%;
  }
}
@media screen and (max-width: 700px) {
  .flex-box {
    flex-direction: column;
    .item,
    .item30,
    .item45,
    .item50,
    .item60,
    .item70 {
      width: 100%;
    }
  }
}
/* ---------------------------------------
footer.php
----------------------------------------*/
#footer {
  background-color: var(--main-color);
  font-weight: normal;
  color: #fff;
  & a {
    font-weight: normal;
    color: #fff;
    transition: 0.2s ease-in;
  }
  & a:hover {
    color: var(--accent-color);
  }
  .flex-box {
    padding: 3rem clamp(1rem, 0.385rem + 3.08vw, 3rem);
    align-items: flex-start;
  }
  .menu-item::before {
    content: "－ ";
  }
  .copy {
    text-align: center;
    padding-bottom: 0.5rem;
    font-size: 0.8rem;
  }
}