@charset "utf-8";

body {
  font-family:
    Meiryo,
    "Hiragino Kaku Gothic ProN",
    "Noto Sans JP",
    sans-serif;
  /* "Noto serif JP",
  "Helvetica Neue",
  Arial,
  "Hiragino Sans",
  "BIZ UDPGothic", */
  background-image: url(../images/antru.jpg);
  background-color: #add4a1;
}


.wrapper {
  background-color: #fff;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

/* ------------------------------------------header----- */
header {
  height: 60px;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

footer h2 {
  font-family: "Times New Roman", Times, serif;
}

header h1 {
  width: 490px;
  height: auto;
  margin: 20px;
}

/* ----------------------------------------global nav部分----- */
header nav {
  width: calc(100% - 550px);
}

.global ul {
  display: flex;
  justify-content: flex-end;
}

.global li a {
  display: block;
  color: #000;
  text-decoration: none;
  font-size: 1.2em;
  font-weight: 600;
  padding: 0 10px;
}

.global li a:hover {
  color: #5ac43c;
  border-bottom: 1px solid #5ac43c;
}

/* ----------------------------------------Top View部分----- */

.topview {
  background-image: url(../images/top_hapu.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #add4a1;
  height: 550px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* align-content: center; */
}

.topview p {
  width: 100%;
  padding: 20px 0;
  text-align: center;
  background-color: rgb(255, 255, 255, 0.5);
  color: #fff;
  font-weight: normal;
  font-size: 1.5em;
  line-height: 2em;
  text-shadow: 2px 3px 5px rgba(0, 00, 50, 1);
}

.tabs {
  display: flex;
  cursor: pointer;
  margin-top: 10px;
  margin-bottom: 20px;
}

.tab {
  width: calc(100% / 2);
  box-sizing: border-box;
  text-align: center;
  padding: 10px;
  border: 1px solid #857fb3;
}

.tab h3 {
  font-weight: 600;
}

.tab h3:hover {
  color: #5ac43c;
}

.tab.active {
  background-color: #857fb3;
  color: white;
}

.tab.active h3 {
  color: #fff;
  /* アクティブ時に白文字 */
}

.content.active {
  display: block;
}

.newslist {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  margin: 0 40px 0 80px;
}

dl.info {
  margin-top: 20px;
  margin-bottom: 20px;
}

dl.info dt {
  width: 510px;
   line-height: 2em;
}

dl.info dd {
  width: 750px;
  line-height: 2em;
  padding-bottom: 10px;
}

.newslist .sch0 img {
  margin-top: 20px;
  width: 350px;
  height: auto;
  max-width: 350px;
  /* background-color: #add4a1; */
  border: 1px solid #add4a1;
  box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.3);
}

.content {
  display: none;
}

.schlist {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.schlist img {
  margin-top: 20px;
  box-sizing: border-box;
   width: calc((100% - 80px) / 3);
  height: auto;
  max-width: 350px;
  border: 1px solid #add4a1;
  box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.3);
}

.schmemo {
  margin-left: 80px;
  margin-bottom: 20px;
  color: #fff;
}

/* ----------------------------------------レッスンについて部分----- */

article.about_lesson {
  background-color: #dde;
  background-image: url(../images/logo.svg);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: calc(100% * 1.6);
  display: flex;
}

section.lesson {
  margin: 40px auto;
  width: calc((100% -120px) * 2 / 3);
  background-color: #fff;
  padding: 30px 40px 40px;
}

section.lesson h2 {
  color: #857fb3;
}

section.lesson h3 {
  color: #333;
  line-height: 30px;
  background-image: url(../images/monstera.png);
  background-repeat: no-repeat;
  padding-left: 40px;
}

section.lesson p {
  color: #222;
  padding-top: 20px;
  padding-left: 40px;
}

section.lesson .date,
section.lesson .location,
section.lesson .fee {
  padding-top: 40px;
}

section.lesson .location .map a {
  text-decoration: none;
  color: #555;
  font-weight: bold;
}

section.lesson .location .map a:hover {
  color: #5ac43c;
  border-bottom: 1px solid #5ac43c;
}

section.profile {
  margin: 115px auto 40px;
  width: calc((100% -120px) / 3);
  background-color: #fff;
  padding: 30px 30px 40px;
}

section.profile h3 {
  color: #333;
  line-height: 30px;
  background-image: url(../images/monstera.png);
  background-repeat: no-repeat;
  background-position: 10px 0;
  padding-left: 50px;
}

section.profile img {
  margin-top: 20px;
  margin-bottom: 20px;
  width: 350px;
  height: 350px;
  background-color: #add4a1;
  border: 5px solid #e5e5dd;
  box-shadow: 3px 6px 15px rgba(0, 0, 0, 0.5);
}

section.profile p {
  color: #222;
  padding-top: 20px;
  padding-left: 10px;
}

section.profile p.prof {
  font-size: 1.2em;
  text-align: right;
}

section.profile p.prof a img{
  margin: 0;
  width: 30px;
  height: 30px;
  background-color: #fff;
  border:none;
  box-shadow: none;
}

section.profile p.prof a img:hover{
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.5);
}

/* -------------------------------------------------フッター部分----- */

footer {
  background-color: #857fb3;
  padding: 20px;
}

footer h2 {
  padding-left: 20px;
  padding-bottom: 20px;
}

footer h2 a {
  color: #fff;
  text-decoration: none;
}

.local ul {
  display: flex;
  justify-content: flex-end;
}

.local li a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 0 10px;
}

.local li a:hover {
  color: #333;
  border-bottom: 1px solid #333;
}

hr {
  background-color: #fff;
  height: 1px;
  margin-top: 20px;
}

footer p a {
  display: block;
  text-align: right;
  color: #fff;
  text-decoration: none;
}

small {
  display: block;
  color: #fff;
  font-size: 16px;
  text-align: center;
  line-height: 40px;
}

/* -----------------------------------------カリキュラム------ */
article.intro {
  display: flex;
  background-color: #dde;
  justify-content: space-between;
}

/* ---------------------------体験レッスン--- */

section.trial {
  margin: 40px 20px 40px 40px;
  width: calc(100% / 2);
  background-color: #fff;
  padding: 30px 40px 40px;
}

section.trial h2 {
  color: #857fb3;
  padding-bottom: 40px;
}

section.trial img.circle {
  float: right;
  margin-left: 20px;
  margin-bottom: 10px;
  border-radius: 120px;
}

section.trial p {
  line-height: 2em;
  color: #222;
}

/* ---------------------------ファーストキルト--- */

section.firstquilt {
  margin: 40px 40px 40px 20px;
  width: calc(100% / 2);
  background-color: #fff;
  padding: 30px 40px 40px;
}

section.firstquilt h2 {
  color: #857fb3;
  padding-bottom: 40px;
}

section.firstquilt img {
  float: right;
  margin-left: 20px;
  margin-bottom: 10px;
}

section.firstquilt p {
  line-height: 2em;
  color: #222;
}

section.firstquilt p.newline {
  margin-top: 2em;
  line-height: 2em;
}

/* ---------------------------認定カリキュラム--- */

section.program {
  background-color: #fff;
  margin: 80px 40px 80px 80px;
  display: flex;
}

section.program .member {
  width: calc((100% / 2) - 40px);
  padding: 10px 40px 40px 0;
}

section.program .low_samplers {
  display: none;
}

section.program .member p {
  line-height: 2em;
  color: #222;
  margin-bottom: 2em;
  text-align: justify;
}

section.program .member p a{
  color: #222;
}

section.program .member p a:hover{
  color: #5ac43c;
}

section.program .member img {
  margin-top: 20px;
  width: 350px;
  height: 350px;
  background-color: #add4a1;
  border: 5px solid #e5e5dd;
  box-shadow: 3px 6px 15px rgba(0, 0, 0, 0.5);
}

section.program .step {
  width: calc(100% / 2);
  color: #222;
  line-height: 2em;
  padding: 10px auto 40px;
}

section.program .step h2 {
  color: #857fb3;
  padding-bottom: 40px;
}

section.program .step h3 {
  color: #333;
  line-height: 2em;
  background-image: url(../images/monstera.png);
  background-repeat: no-repeat;
  padding-left: 40px;
}

section.program .step p {
  /* padding-left: 20px; */
  margin-bottom: 30px;
}

/* -----------------------------------------お問い合わせ------ */
/* ---------------------------------contact>main--- */

section.form {
  background-color: #dde;
  padding: 30px 40px 60px;
}

section.form h2 {
  color: #857fb3;
  padding-bottom: 20px;
}

section.form p {
  margin-left: 40px;
  margin-bottom: 20px;
}

form table {
  margin-left: 30px;
  width: calc(100% - 70px);
  border: 1px solid #857fb3;
}

form .contact-table th {
  width: 130px;
  background-color: #857fb3;
  color: #fff;
  text-align: right;
  padding: 10px 20px;
  border-bottom: 1px solid #fff;
}

form .contact-table tr:last-child th {
  border-bottom: none;
}

form .contact-table td {
  padding: 5px 20px;
  border: 1px solid #857fb3
}

form span.caution {
  color: #f00;
  font-size: 12px;
  margin-left: 5px;
}

form span.optional {
  color: #555;
  font-size: 12px;
  margin-left: 5px;
}

form .contact-table input[type="text"],
form .contact-table input[type="email"] {
  width: 300px;
  height: 35px;
  padding: 5px 10px;
  font-size: 16px;
}

form .contact-table textarea {
  width: 100%;
  height: 130px;
  padding: 5px 10px;
  font-size: 16px;
  line-height: 1.2;
  box-sizing: border-box;
  resize: vertical;
}

form button {
  display: block;
  margin: 20px auto 0;
  padding: 10px 30px;
  font-size: 16px;
  background-color: #555;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

form button:hover {
  background-color: #857fb3;
}

/* -----------------------------------------プライバシーポリシー----- */

body.privacy main {
  background-color: #dde;
  margin: 0 auto;
  padding: 30px 80px 80px;
}

body.privacy main h2,
body.privacy main h3 {
  font-weight: normal;
  padding: 30px 0 20px;
}

body.privacy main p {
  line-height: 2em;
}
/* ---------------------------------confirm.php--- */

body.comfirm,
body.complete {
  background-color: #dde;
  background-image: none;
}

section.check,
section.thanku {
  margin: 30px;
  border: 1px solid #857fb3;
  background-color: #fff;
  padding: 30px 40px;
}

section.check h2,
section.thanku h2 {
  color: #857fb3;
  padding-bottom: 20px;
}

section.check p,
section.thanku p {
  padding-left: 40px;
  line-height: 2em;
}


body.complete a.btn {
  display: block;
  width: 32px;
  margin: 20px auto 0;
  padding: 10px 30px;
  background-color: #555;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  color: #fff;
  text-decoration: none;
}

body.complete a.btn:hover {
  background-color: #857fb3;
}

section.check form button {
  margin: 20px 0px 0;
}


/* -----------------------------ハンバーガーメニュー --- */
.slicknav_menu {
  display: none;
}

/* -----------------------------メディアクエリ タブレット用（1000px以下）--- */

@media screen and (max-width:1000px) {

  .wrapper {
    width: 100%;
    margin: 0 auto;
  }

  header {
    display: none
  }

  .slicknav_menu {
    display: block;
  }

  header nav {
    width: 100%;
  }

  .topview p {
    font-size: 1.3em;
    line-height: 2em;
  }

  /* -------------お知らせ-------------- */

  dl.info dt {
    width: 100%;
    line-height: 2em;
  }

  dl.info dd {
    width: 100%;
    line-height: 2em;
    padding-bottom: 10px;
  }

  /* -------------レッスン---------------- */

  article.about_lesson {
    display: flex;
    flex-wrap: wrap;
    /* 幅狭い時は縦並び */
  }

  section.lesson {
    margin: 40px 40px 20px;
    width: calc(100%);
    background-color: #fff;
    padding: 30px 40px 40px;
  }

  section.profile {
    margin: 20px auto 40px;
  }

  /* -------------カリキュラム---------------- */


  section.program {
    margin: 60px 40px 60px 60px;
    display: block;
    flex-direction: column;
    /* 縦並び */
    align-items: center;
  }

  section.program .member {
    width: 100%;
    display: block;
  }

  section.program .step {
    width: 100%;
    margin: 0 auto;
  }

  section.program .step p {
    padding-left: 40px;
  }

  section.program .member .up_samplers {
    display: none;
  }

  section.program .low_samplers {
    display: block;
    text-align: right;
    margin-top: 40px;
  }

}

/* --------------------------------メディアクエリ （767px以下）--- */
@media screen and (max-width:767px) {

  .topview {
    height: 488px;
  }

  .topview p {
    font-size: 1.1em;
    line-height: 2em;
  }

  /* -------------レッスンについて---------------- */

  section.lesson {
    margin: 40px 20px 20px;
  }

  section.lesson p {
    padding-top: 20px;
    padding-left: 0px;
  }

  section.profile {
    margin: 20px auto 40px;
  }

  /* -------------カリキュラム---------------- */
  article.intro {
    flex-direction: column;
    /* 縦並び */
    align-items: center;
  }

  section.trial {
    margin: 40px auto 20px;
    width: 70%;
  }

  section.firstquilt {
    margin: 20px auto 40px;
    width: 70%;
  }

  section.program .step p {
    padding-left: 0px;
  }

  /* -------------問い合わせ---------------- */

  section.form {
    padding: 30px 5px 60px;
  }

  section.form h2 {
    padding-left: 30px;
  }


  section.form p {
    margin: 20px 20px 20px 30px;
  }

  form table {
    margin-left: 20px;
    box-sizing: border-box;
    width: calc(100% - 30px);
  }

  form .contact-table th {
    width: 120px;
    text-align: center;
    padding: 5px;
    font-size: 0.875em;
  }

  form .contact-table input[type="text"],
  form .contact-table input[type="email"] {
    box-sizing: border-box;
    width: calc(100% - 60px);
    height: 35px;
  }

}

/* ---------------------------メディアクエリ スマホ用（479px以下）--- */

@media screen and (max-width:479px) {

  .topview {
    height: 488px;
  }

  .topview p {
    padding: 20px 30px;
    font-size: 1em;
    line-height: 2em;
  }



  .topview {
    height: 488px;
    background-position: center center;
  }

  /* -------------お知らせについて---------------- */

  .newslist {
    margin: 0 40px;
  }

  .newslist .sch0 img {
    margin-top: 20px;
    width: 100%;
    height: auto;
    max-width: 350px;
  }

  .schlist img {
    margin-top: 20px;
    width: 80%;
    /* width: 100% - 40px; */
    height: auto;
  }

  /* -------------レッスンについて---------------- */

  section.lesson {
    margin: 40px 20px 20px;
    padding: 30px 20px 40px;
  }

  section.profile {
    margin: 20px 20px 40px;
    padding: 30px 10px 40px;
  }

  section.profile img {
    width: 96%;
    height: auto;
  }

  /* -------------カリキュラム---------------- */

  section.trial {
    margin: 40px 20px 20px;
    width: 80%;
    padding: 30px 20px 40px;
    ;
  }

  section.firstquilt {
    margin: 20px 20px 40px;
    width: 80%;
    padding: 30px 20px 40px;
  }

  section.program {
    margin: 40px;
  }

  section.program .low_samplers {
    display: block;
    text-align: center;
    margin-top: 40px;
  }

  section.program img {
    width: 100%;
    height: auto;
  }

  /* -------------問い合わせ---------------- */

  section.form p {
    font-size: 0.875em;
  }

  form table {
    margin-left: 20px;
    margin-right: 20px;
    box-sizing: border-box;
    width: calc(100% - 40px);
  }

  form .contact-table th {
    width: 65px;
    text-align: center;
    padding: 2px;
    font-size: 0.875em;
  }


  form .contact-table td {
    padding: 2px 10px;

  }

  form span.caution {
    font-size: 10px;
    margin-left: 0px;
  }

  form span.optional {
    font-size: 10px;
    margin-left: 0px;
  }

  form .contact-table input[type="text"],
  form .contact-table input[type="email"] {
    box-sizing: border-box;
    width: calc(100% - 50px);
    height: 35px;
  }

  /* -------------フッター---------------- */
  .local li a {
    font-size: 0.875em;
  }

  footer p a {
        font-size: 0.875em;
  }

  /* -------------問い合わせ確認フォーム---------------- */
  section.check,
  section.thanku {
    margin: 20px;
    padding: 30px 20px;
  }

  section.check p,
  section.thanku p {
    padding-left: 0px;
    line-height: 2em;
  }

/* -------------プライバシーポリシー--------------- */
body.privacy main {
  padding: 30px 20px 80px;
}


}