@charset "utf-8";
/*------------------------------------------
               header
---------------------------------------------*/

header {
  text-align: center;
}

header h1 {
  padding: 720px 0 0;
}


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

  header h1 {
    padding: 65% 0 0;
  }

  header h1 img {
    width: 70%;
  }
}



/*------------------------------------------
               main
---------------------------------------------*/
.main {
  color: #ffffff;
  font-family: 'Noto Sans Japanese';
  margin: 40px 0 0;
  text-align: center;
}

.main_title {
  font-size: calc(40% + 2.5vw);
  font-weight: 500;
  line-height: 133%;
  margin: 0 0 1.0em;
}

.main_body {
  font-size: calc(40% + 1.25vw);
  font-weight: 250;
  line-height: 180%;
}

.main_blueguide {
  width: 70%;
  font-size: calc(40% + 2.0vw);
  font-weight: 400;
  margin: 2.0em auto;
  text-align: center;
}

.main_blueguide .display_button {
  color: #ffffff;
  background: #0056b5;
  padding: 0.5em;
  text-align: center;
  cursor: pointer;
}

.main_blueguide .book_list {
  color: #ffffff;
  font-size: calc(40% + 1.0vw);
  border: #0056b5 3px solid;
  padding: 0.5em;
  text-align: left;
}

.main_blueguide .book_list a {
  color: #ffffff;
}

.main_mail {
  width: 70%;
  border: #ffffff 3px solid;
  margin: 2.0em auto;
  text-align: center;
}

.main_mail a {
  width: 100%;
  color: #ffffff;
  padding: 1.0em;
  display: block;
}

.main_mail a .mail_title {
  width: 180px;
  font-size: calc(40% + 1.0vw);
  font-weight: 100;
  line-height: 150%;
  margin: 0 1.0em;
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

.main_mail a .mail_address {
  font-size: calc(40% + 3.0vw);
  font-weight: 400;
  padding: 0.5em 0;
  display: inline-block;
  vertical-align: middle;
}


@media screen and (max-width: 1130px){
  .main {
    margin: 5% 0 0;
  }
}

@media screen and (min-width: 1130px){
  .main_title {
    font-size: 38px;
  }

  .main_body {
    font-size: 24px;
  }

  .main_blueguide {
    font-size: 32px;
  }

  .main_blueguide .book_list {
    font-size: 20px;
  }

  .main_mail a .mail_title {
    font-size: 18px;
  }

  .main_mail a .mail_address {
    font-size: 44px;
  }
}


/*------------------------------------------
               sub
---------------------------------------------*/
.sub {
  font-family: 'Noto Sans Japanese';
  background: #ffffff;
  padding: 2.0em;
  text-align: center;
}

.sub_title {
  color: #444444;
  font-size: calc(40% + 2.5vw);
  font-weight: 500;
  line-height: 133%;
  margin: 0 0 1.0em;
}

.sub_body {
  color: #333333;
  font-size: calc(40% + 1.25vw);
  font-weight: 250;
  line-height: 180%;
}

.sub_concierge {
  font-size: calc(40% + 1.0vw);
  margin: 1.0em 3.0em;
  text-align: right;
}


@media screen and (min-width: 1130px){
  .sub_title {
    font-size: 38px;
  }

  .sub_body {
    font-size: 24px;
  }

  .sub_concierge {
    font-size: 18px;
  }
}



/*------------------------------------------
               flow
---------------------------------------------*/
@media screen and (max-width: 1130px){
  .flow img {
    width: 100%;
  }
}



/*------------------------------------------
               button
---------------------------------------------*/
.button {
  font-family: 'Noto Sans Japanese';
  background: #ffffff;
  padding: 2.0em;
  text-align: center;
}

.button_mail {
  width: 70%;
  font-size: calc(40% + 2.5vw);
  background: #008de0;
  margin: 2.0em auto;
  text-align: center;
}

.button_mail a {
  width: 100%;
  color: #ffffff;
  font-weight: 400;
  padding: 0.5em;
  display: block;
}

.button_blueguide {
  width: 70%;
  font-size: calc(40% + 2.5vw);
  background: #0056b5;
  margin: 2.0em auto;
  text-align: center;
}

.button_blueguide a {
  width: 100%;
  color: #ffffff;
  font-weight: 400;
  padding: 0.5em;
  display: block;
}


@media screen and (min-width: 1130px){
  .button_mail a {
    font-size: 40px;
  }

  .button_blueguide a {
    font-size: 40px;
  }
}



/*------------------------------------------
               footer
---------------------------------------------*/
footer {
  font-family: 'Noto Sans Japanese';
  background: #ffffff;
  border-top: #aaaaaa 1px solid;
  padding: 10px;
}

footer .company {
  width: 49%;
  color: #333333;
  font-size: calc(40% + 1.0vw);
  font-weight: 200;
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

footer .company a {
  color: #333333;
}

footer .group {
  width: 49%;
  display: inline-block;
  text-align: right;
  vertical-align: middle;
}

footer .copyright {
  color: #333333;
  font-size: calc(40% + 1.0vw);
  font-weight: 200;
  text-align: right;
}


@media screen and (max-width: 540px){
  footer .group img {
    width: 100%;
  }
}

@media screen and (min-width: 1130px){
  footer .company {
    font-size: 14px;
  }

  footer .copyright {
    font-size: 14px;
  }
}