@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2? family= Yuji+Mai & display=swap');

@font-face {
  /* ① ここにfont-familyで指定したい名前を書く*/
  font-family: "myfont";

  /* フォントが置かれているパスを書く */
  src: url("font/YujiMai-Regular.ttf") format("truetype") }
}

/* ①で作成した名前を使うと、普通にfont-familyを使う感じで、アップロードしたフォントを利用できる */
h1{
  font-family: "myfont";
}

.header_box {
  background: #e1dbc2;
  border-bottom: 1px solid #e1dbc2;
}

.relief_txt span {
  font-size: 4rem;
}


/* ハンバーガー （共通）================================== */
#global_nav .dropdown_list li {
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-open{
  padding: 15px;
  font-size: 1.6rem;
  font-family: serif;
  border-bottom: 1px solid #999;
  position: relative;
}

#global_nav .dropdown_list .nav-open {
  background: #333;
  color: #fff;
}

.nav-open .nav_inner li{
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #000;
}

#global_nav .nav_inner li a{
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #000;
  height: 52px;
  width: 100%;
  border-bottom: 1px solid #ccc;
}

#global_nav .nav_inner li a:hover {
  color: #fff;
}

.nav-open::before{
  content: "＋";
  position: absolute;
  right: 20px;
}

.nav-open.active::before{
  content: "－";
}

#global_nav nav {
  display: none;
}


/* main ================================================= */
#main{
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

#main img{
  width: 100%;
  margin: 0 auto;
}


/* actually ================================== */
.actually_txt .no1 {
  font-size: 6rem;
  display: inline;
}

#actually .actually_txt2 .actually_inner {
  width: 600px;
}

/* cause ================================== */
.cause_title {
  padding: 30px;
}

.cause_box {
  background-image: url(../img/why.jpg);
  margin: 50px auto 50px;
  flex-direction: column;
}

.cause_title br{
  display: none;
}

.cause_txt {
  font-size: 6rem;
}



/* self_style ================================== */
#self_style {
  padding: 50px 0 100px;
}

.one_day_img {
  width: 60%;
  text-align: center;
  margin: 0 auto;
}

.one_day_img img{
  margin: 0 auto;
}

/* ---------------------------------------------------------
@media (max-width: 1024px)
----------------------------------------------------------- */
@media (max-width: 1024px) {
  #recommend {
    margin: 0 auto;
    padding-top: 0;
  }

  #teacher {
    padding: 30px 20px 20px;
    margin: -30px auto 50px;
  }

  #reserve {
    padding: 0 0 0;
    margin: 0 auto 0;
  }
}

/* ---------------------------------------------------------
@media (max-width: 768px)
----------------------------------------------------------- */
@media (max-width: 768px) {
  .actually_txt .no1 {
    font-size: 4rem;
    padding: 8px 10px;
  }

  .cause_box {
    margin: 0;
  }

  .cause_title {
    font-size: 4.5rem;
  }

  .cause_txt {
    font-size: 5rem;
  }

  .relief_txt span {
    font-size: 3rem;
  }
}

/* ---------------------------------------------------------
@media (max-width: 600px)
----------------------------------------------------------- */
@media (max-width: 600px) {
  .actually_txt .no1 {
    font-size: 3rem;
  }

  .actually_txt .no2 {
    font-size: 3rem;
  }

  .cause_title {
    padding: 20px;
  }

  .cause_title br{
    display: block;
  }
}

/* ---------------------------------------------------------
@media (max-width: 428px)
----------------------------------------------------------- */
@media (max-width: 428px) {
  .dropdown_list {
    top: 72px;
  }

  #self_style {
    padding: 30px 0 60px;
  }

  .one_day_img {
    width: 80%;
  }

  .actually_txt .no1 {
    padding: 5px 12px;
  }

  .actually_txt .no2 {
    font-size: 2.3rem;
    padding-bottom: 0;
  }

  #actually .actually_txt2 .actually_inner li {
    font-size: 2.1rem;
  }

  .cause_title {
    font-size: 3.5rem;
    padding: 10px;
  }

  .cause_txt {
    font-size: 3.5rem;
  }

  .cause_txt br{
    display: none;
  }

  .cause_box {
    padding: 10px;
  }

  .txt3_container {
    width: 95%;
  }

  .relief_txt span {
    font-size: 2.6rem;
  }

  #actually .actually_txt2 .actually_inner {
    width: 95%;
  }
}

/* ---------------------------------------------------------
@media (max-width: 375px)
----------------------------------------------------------- */
@media (max-width: 375px) {
  .relief_txt span {
    font-size: 2rem;
  }
}