@charset "utf-8";

/* reset */
* {
  padding: 0;
  margin: 0;
}

body {
  line-height: 1;
  /* font-family: sans-serif; */
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2em;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
  display: block;
}

img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

/* ・・・・全ページ共通・・・・ */
/* TOPへ戻るbtn */
.top {
  display: block;
  width: 50px;
  height: 50px;
  border: 3px solid #005d4d;
  border-radius: 50%;
  text-align: center;
  color: #005d4d;
  font-size: 2em;
  background-color: #dfeccd;

  position: fixed;
  right: 25px;
  bottom: 25px;
  z-index: 9999;
}

.top i {
  display: block;
  line-height: 50px;
}

/* 幅 */
.container {
  max-width: 960px;
  margin: 0 auto;
  padding-inline: 10px;
}

/* flexレイアウト */
header div,
.pcnav,
.contents-link,
.footernav {
  display: flex;
  justify-content: space-between;
}

/* header,footer */
header,
footer {
  background: #005d4d;
  color: #fff;
  padding: 50px 0;
}

header div {
  align-items: center;
}

header h1 {
  width: 80%;
  font-family: "Yuji Syuku", serif;
  font-size: 2.5em;
}

header p {
  width: 20%;
  text-align: center;
  font-size: 1.2em;
}

header p a {
  background: #f00;
  border-radius: 10px;
  padding: 20px;
}

header p a:hover {
  background: #fd9527;
}

/* key-vis */
.key-vis {
  height: 350px;
  text-align: center;
  text-shadow: 0px 0px 5px #fff, 0px 0px 5px #fff, 0px 0px 5px #fff,
    0px 0px 5px #fff, 0px 0px 5px #fff, 0px 0px 5px #fff, 0px 0px 5px #fff,
    0px 0px 5px #fff, 0px 0px 5px #fff;
}

.key-vis .copy {
  font-size: 4em;
  padding-top: 120px;
}

.key-vis .ex {
  font-size: 1.2em;
  line-height: 1.65;
}

/* PC navigation */
.pcnav li {
  width: 20%;
  text-align: center;
  margin: 5px 0;
  border-right: 1px solid #005d4d;
}

.pcnav li:first-of-type {
  border-left: 1px solid #005d4d;
}

.pcnav a {
  padding: 20px 0;
}

.pcnav a:hover {
  background: #005d4d;
  color: #fff;
}

.current {
  background: #dfeccd;
}
/* SP navigation */
.spnav,
.btn {
  display: none;
}

/* main */
main h2 {
  border-bottom: 5px solid #005d4d;
  width: fit-content;
  margin: 0 auto 50px;
  padding-bottom: 10px;
}

/* section */
main section {
  padding: 100px 0;
}

/* 詳細を見る共通 */
.more {
  background: #fd9527;
  border-radius: 50px;
  color: #fff;
  font-size: 1.2em;
  padding: 20px 50px ;
  width: fit-content;
  margin: 0 auto;
  transition: 500ms;
}

.more:hover {
  background: #f00;
  scale: 1.2;
}

/* スケジュール,会費 */
.schedule table,
.fee table {
  background: #fff;
  border: 1px solid #005d4d;
  border-collapse: collapse;
  margin: 0 auto 50px;
}

.schedule th,
.schedule td,
.fee th,
.fee td {
  border: 1px solid #005d4d;
  padding: 20px 100px;
}

/* アクセス */
.access .access-box {
  display: flex;
  justify-content: space-between;
}

.access dl {
  width: 50%;
  text-align: left;
}

.access dt {
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 20px;
  border-left: 5px solid #005d4d;
  padding-left: 10px;
  width: fit-content;
}

.access dd {
  padding-bottom: 50px;
}

/* footer */
/* footer navigation */
.footernav li {
  width: 20%;
  text-align: center;
  margin-bottom: 30px;
  border-right: 1px solid #fff;
}

.footernav li:first-of-type {
  border-left: 1px solid #fff;
}

.footernav a {
  padding: 10px 0;
}

.footernav a:hover {
  font-weight: bold;
  color: #fd9527;
}

footer p {
  text-align: center;
}

/* ・・・・共通media query・・・・ */
@media screen and (max-width: 743px) {
  /* flexレイアウト */
  header div,
  .contents-link {
    display: block;
  }

  /* flex解除、非表示 */
  header div p,
  .pcnav,
  .footernav {
    display: none;
  }

  /* header,footer */
  header,
  footer {
    padding: 40px 0;
  }

  header {
    font-size: 0.8em;
    text-align: center;
  }

  header h1 {
    font-size: 1.62em;
    text-align: left;
  }

  /* menu btn */
  .btn {
    display: block;
    width: 50px;
    height: 50px;
    border: 1px solid #fff;
    border-radius: 5px;
    position: absolute;
    right: 5px;
    top: 5px;
    z-index: 99999;
  }

  .btn span::before,
  .btn span::after {
    content: "";
  }

  .btn span,
  .btn span::before,
  .btn span::after {
    display: block;
    width: 35px;
    height: 5px;
    background: #fff;
    border-radius: 5px;
    position: absolute;
    margin: auto;
    inset: 0;
    transition: 300ms;
  }

  .btn span::before {
    transform: translate(0 , -10px);
    /* translate: 0 -10px; */
  }

  .btn span::after {
transform: translate(0 , 10px);
    /* translate: 0 10px; */
  }

  /* class名nav-openついた後 */
  .nav-open span {
    background: transparent;
  }

  .nav-open span::before {
    transform: rotateZ (225deg);
    transform: translate(0 , 0);
    /* rotate: 225deg; */
    /* translate: 0; */
  }

  .nav-open span::after {
    transform: rotateZ (-225deg);
    transform: translate(0 , 0);
    /* rotate: -225deg; */
    /* translate: 0; */
  }

  /* SPnav */
  .spnav {
    /* display: block; */
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background: #005d4d;
    color: #fff;

    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    padding-top: 50px;
    z-index: 9999;
  }

  .spnav li {
    line-height: 70px;
    padding-left: 50px;
    font-size: 1.5em;
    font-weight: bold;
    border-bottom: 1px solid #fff;
  }

  /* key-vis */
  .key-vis {
    box-sizing: border-box;
  }

  .key-vis .copy {
    font-size: 2.4em;
    padding-top: 150px;
  }

  .key-vis .ex {
    padding-top: 5px;
    font-size: 1em;
    line-height: 1.5;
    text-align: left;
    padding-inline: 10px;
  }

  /* section共通 */
  main section {
    padding: 70px 10px;
  }

  /* 詳細を見る共通 */
  .more {
    width: auto;
    padding:30px 0;
    text-align: center;
  }

  /* スケジュール,会費 */
  .schedule th,
  .fee th {
    padding: 20px;
  }

  .schedule td,
  .fee td {
    padding: 20px 40px;
  }

  .fee p {
    text-align: left;
    line-height: 1.65;
  }

  /* アクセス */
  .access .access-box {
    display: block;
  }

  .access .access-box dl {
    width: auto;
  }

  .access dl {
    margin-bottom: 10px;
  }

  .access .more {
    margin: 30px 0;
  }
}

/* ・・・・共通media query 終了・・・・ */

/* ・・・・TOPページ・・・・ */

/* main共通 */
#home main {
  text-align: center;
}

/* section共通 */
#home main section:first-of-type {
  padding: 80px 0 100px;
}

#home .schedule,
#home .access {
  background: #dfeccd;
}

/* 挨拶 */
#home .hello h2 + p {
  text-align: left;
  line-height: 1.65em;
  width: 700px;
  margin: 0 auto 50px;
}

#home .contents-link h3 {
  border: 1px solid #16706165;
  border-radius: 10px;
  width: 30%;
  height: 300px;
  line-height: 300px;
  font-weight: bold;
  text-shadow: 1px 1px 3px #fff, 1px 1px 3px #fff, 1px 1px 3px #fff,
    1px 1px 3px #fff;
}

#home .contents-link1 {
  background: url(../img/taichi-contents-link.jpg) no-repeat center/cover;
}

#home .contents-link2 {
  background: url(../img/room-link.jpg) no-repeat center/cover;
}

#home .contents-link3 {
  background: url(../img/instructor-link.jpg) no-repeat center/cover;
}

#home .contents-link a {
  transition: 500ms;
}

#home .contents-link a:hover {
  background: #ffffff94;
  font-size: 1.5em;
}

/* お問い合わせ */
#home .contact-form {
  background: #f00;
  color: #fff;
  font-size: 1.3em;
  padding: 1em;
  width: 700px;
  margin: 0 auto 30px;
  border-radius: 50px;
  transition: 300ms;
}

#home .contact-form:hover {
  background: #fd9527;
  scale: 1.2;
}

#home .contact p:last-child {
  line-height: 1.65;
}

/* ・・・・TOPページmedia query・・・・ */
@media screen and (max-width: 743px) {
  #home main section:first-of-type {
    padding: 50px 10px 70px;
  }

  /* 挨拶 */
  #home .hello h2 + p {
    width: fit-content;
  }

  #home .contents-link h3 {
    width: auto;
    height: 130px;
    line-height: 130px;
  }

  #home .contents-link h3 + h3 {
    margin-top: 10px;
  }

  /* お問い合わせ */
  #home .contact-form {
    width: auto;
    margin: 0 auto 30px;
  }

  #home .contact p:last-child {
    text-align: left;
  }
}

/* ・・・・TOPページ media query終了・・・・ */

/* ・・・・太極拳についてページ　CSS・・・・ */
/* key-vis */
#taichi-contents .key-vis {
  background: url(../img/taichi-contents.jpg) no-repeat top/cover;
}

/* main */
#taichi-contents .chin {
  background: #dfeccd;
}

/* 『四正太極拳』 */
#taichi-contents .shisei h2 + p {
  width: 700px;
  margin: 0 auto;
  line-height: 1.65;
  margin-bottom: 30px;
}

/* gridレイアウト */
#taichi-contents .shisei .wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 20px;
}

#taichi-contents .shisei .wrap div:nth-child(1) {
  grid-column: 1;
  grid-row: 1;
}

#taichi-contents .shisei .wrap div:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
}

#taichi-contents .shisei .wrap div:nth-child(3) {
  grid-column: 1;
  grid-row: 2;
}

#taichi-contents .shisei .wrap div:nth-child(4) {
  grid-column: 2;
  grid-row: 2;
}

#taichi-contents .shisei .wrap div {
  line-height: 1.65;
  border: 2px solid #005d4d;
  border-radius: 50px;
  padding: 1em;
}

#taichi-contents .shisei span {
  display: block;
  text-align: center;
  font-size: 1.5em;
  font-weight: bold;
}

/* 陳氏太極拳について */
/* レイアウト */
#taichi-contents .chin .container {
  width: 700px;
}

/* 文章 */
#taichi-contents .chin p {
  line-height: 1.65;
}

#taichi-contents .chin .quote {
  font-size: 1.3em;
  font-weight: bold;
  padding: 20px 0;
}

#taichi-contents .chin .link {
  text-align: center;
  margin-top: 50px;
}

#taichi-contents .chin .link p:first-child {
  font-weight: bold;
  font-size: 1.2em;
  margin-bottom: 20px;
}
/* ・・・・太極拳についてmedia query・・・・ */
@media screen and (max-width: 743px) {
  /* key-vis */
  #taichi-contents .key-vis {
    background: url(../img/taichi-contents-key-vis-sp.jpg) no-repeat
      center/cover;
  }

  /* 『四正太極拳』 */
#taichi-contents .shisei h2 + p {
  width: auto;
}

  /* gridレイアウト */
  #taichi-contents .shisei .wrap {
    display: block;
  }

  #taichi-contents .shisei .wrap div + div {
    margin-top: 20px;
  }

  #taichi-contents .chin .container {
    width: auto;
  }
}
/* ・・・・太極拳についてmedia query終了・・・・ */

/* ・・・・教室のご案内ページ・・・・ */
/* key-vis */
#room .key-vis {
  background: url(../img/room-key-vis.jpg) no-repeat center/cover;
}

/* main */
#room .room {
  background: #dfeccd;
}

/* 国分寺ひかり教室について */
#room .intro p,
#room .room p:first-of-type {
  width: 700px;
  margin-inline: auto;
  margin-bottom: 60px;
  line-height: 1.65;
}

/* 練習場所 */
#room .room .container div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 30px;
}

#room .room .container div img {
  width: 50%;
}

/* 詳細 */
#room .room p:nth-of-type(2) .more {
  margin: 50px auto;
}

/* 練習内容・時間配分 */
#room .schedule h3 {
  margin-bottom: 30px;
}

#room .schedule p {
  line-height: 1.65;
}

/* ・・・・教室のご案内ページmedia query・・・・ */
@media screen and (max-width: 743px) {
  /* key-vis */
  #room .key-vis {
    background: url(../img/room-key-vis-sp.jpg) no-repeat center/cover;
  }

  /* 国分寺ひかり教室について */
  #room .intro p,
  #room .room p:first-of-type {
    width: 100%;
    margin-bottom: 50px;
  }

  /* 練習場所 */
  #room .room .container div {
    display: block;
  }

  #room .room .container div img {
    width: 90%;
    display: block;
    margin: 0 auto 20px;
  }

  /* 詳細 */
  #room .room p:nth-of-type(2) .more {
    margin: 20px auto;
  }

  /* 練習内容・時間配分 */
  /* #room .schedule th {
    padding: 10px 30px;
  }

  #room .schedule td {
    padding: 20px 70px;
  } */

  #room .time-allocation th,
  #room .time-allocation td {
    padding: 20px 10px;
  }

  #room h3 {
    text-align: center;
  }
}
/* ・・・・教室のご案内ページmedia query終了・・・・ */

/* ・・・・講師についてページ・・・・ */
/* key-vis */
#instructor .key-vis {
  background: url(../img/instructor-key-vis.jpg) no-repeat center/cover;
  color: #fff;
  text-shadow: 0px 0px 5px #000, 0px 0px 5px #000, 0px 0px 5px #000,
    0px 0px 5px #000, 0px 0px 5px #000, 0px 0px 5px #000, 0px 0px 5px #000,
    0px 0px 5px #000, 0px 0px 5px #000;
}

/* プロフィール */
#instructor .self-intro {
  background: #dfeccd;
}

#instructor .self-intro-box {
  display: flex;
  justify-content: space-between;
}

#instructor .self-intro-box div {
  width: 50%;
}

#instructor .self-intro .profile-img {
  width: 100%;
  height: auto;
}

/* 名前 */
#instructor .name {
  font-size: 2em;
  margin-bottom: 50px;
}

/* 経歴 */
#instructor h3 {
  margin-bottom: 20px;
}

#instructor .history {
  margin-bottom: 50px;
}

#instructor .history dt {
  float: left;
  padding-top: 5px;
}

#instructor .history dd {
  margin-left: 90px;
  margin-bottom: 10px;
  line-height: 1.65;
}

/* 趣味 */
#instructor .hobby {
  margin-bottom: 20px;
  line-height: 1.65;
}

#instructor .hobby + p {
  line-height: 1.65;
}

/* ご挨拶 */
#instructor .comment {
  line-height: 1.65;
  width: 700px;
  margin: 0 auto;
}

#instructor .comment p + p {
  margin-top: 30px;
}

/* ・・・・講師ページ　media query・・・・ */
@media screen and (max-width: 743px) {
  /* key-vis */
  #instructor .key-vis {
    background: url(../img/instructor-key-vis-sp.jpg) no-repeat center/cover;
  }

  /* プロフィール */
  #instructor .self-intro-box {
    display: block;
  }

  #instructor .self-intro-box div {
    width: 100%;
  }

  #instructor .self-intro .profile-img {
    width: 80%;
    display: block;
    margin: 50px auto 0;
  }

  /* ご挨拶 */
  #instructor .comment {
    width: auto;
    margin: 0 auto;
  }
}
/* ・・・・講師ページ　media query終了・・・・ */

/*  ・・・・スケジュールページ・・・・ */
/* key-vis */
#schedule .key-vis {
  background: url(../img/schedule-key-vis.jpg) no-repeat center/cover;
}

/* スケジュール */
#schedule .schedule p {
  width: fit-content;
  margin-inline: auto;
  line-height: 1.65;
}

/* Google カレンダー */
#schedule .calendar {
  background: #dfeccd;
}

#schedule .calendar iframe {
  width: 100%;
  height: 600px;
}

/*  ・・・・スケジュールMedia query・・・・ */
@media screen and (max-width: 743px) {
  /* key-vis */
  #schedule .key-vis {
    background: url(../img/schedule-key-vis-sp.jpg) no-repeat center/cover;
  }

  /* Google カレンダー */
  #schedule .calendar iframe {
    width: 100%;
    height: 300px;
  }
}
/*  ・・・・スケジュールMedia query終了・・・・ */

/* ・・・・アクセス・・・・ */
/* key-vis */
#access .key-vis {
  background: url(../img/access-key-vis.jpg) no-repeat center/cover;
  text-shadow: 0px 0px 5px #fff, 0px 0px 5px #fff, 0px 0px 5px #fff,
    0px 0px 5px #fff, 0px 0px 5px #fff, 0px 0px 5px #fff, 0px 0px 5px #fff,
    0px 0px 5px #fff, 0px 0px 5px #fff;
}

/* section背景色 */
#access .access,
#access .gallery {
  background: #dfeccd;
}

/* Google Map */
#access .google-map {
  position: relative;
  padding-bottom: 40%;
}

#access .google-map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 施設案内 */
#access .facility .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
}

#access .facility .container div p {
  margin-top: 5px;
  line-height: 1.3;
}

#access .facility .container div p span {
  display: block;
  font-weight: bold;
}

/* ・・・・アクセスMedia query・・・・ */
@media screen and (max-width: 743px) {
  /* key-vis */
  #access .key-vis {
    background: url(../img/access-key-vis-sp.jpg) no-repeat center/cover;
  }

  /* Google Map */
  #access .google-map {
    position: relative;
    padding-bottom: 60%;
  }

  /* 施設紹介 */
  #access .facility .container {
    display: block;
  }

  #access .facility .container div p {
    margin: 10px 0 20px;
  }
}

/* ・・・・アクセスMedia query終了・・・・ */

/* ・・・・お問い合わせページ・・・・ */
/* key-vis */
#contact .key-vis {
  background: url(../img/contact-key-vis.jpg) no-repeat center/cover;
}

/* section背景色 */
#contact .flow,
#contact .contact-form {
  background: #dfeccd;
}

/* 参加までの流れ */
#contact .flow p {
  line-height: 1.65;
  text-align: center;
}

/* よくあるご質問 */
#contact .question dl {
  width: 500px;
  margin: 0 auto;
}

#contact .question dt {
  line-height: 40px;
  border-bottom: 1px solid #005d4d;
  margin-bottom: 20px;
  font-weight: bold;
  cursor: pointer;
  cursor: hand;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#contact .question dd {
  line-height: 1.65;
  margin-bottom: 50px;
}

#contact .question dd:not(:first-of-type) {
  display: none;
}

#contact .open {
  color: #f00;
}

/* お問い合わせフォーム */
#contact .wrap{
  width: 960px;
  height: 2200px;
  margin: 0 auto;
}

#contact .wrap iframe{
  width: 100%;
  height: 100%;
}

/* ・・・・お問い合わせページMedia Query・・・・ */
@media screen and (max-width: 743px) {
  /* key-vis */
  #contact .key-vis {
    background: url(../img/contact-key-vis-sp.jpg) no-repeat center/cover;
  }

  #contact .key-vis .ex {
    text-align: left;
    padding-inline: 10px;
  }

  /* 参加までの流れ */
  #contact .flow p {
    line-height: 1.65;
    text-align: left;
  }

  /* よくあるご質問 */
  #contact .question dl {
    width: 100%;
  }

  #contact th,
  #contact td {
    display: block;
    margin-bottom: 5px;
  }

  #contact td {
    line-height: 1.65;
  }

  #contact .wrap{
    width: auto;
  }
}

/* ・・・・送信済ページ・・・・ */
#thanks .thanks {
  background-color: #dfeccd;
}

#thanks .thanks p {
  text-align: center;
  margin-bottom: 50px;
}