@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@100;300;400;500;700;800;900&display=swap");
/*	共通部分
-------------------------------	*/
html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  font-optical-sizing: auto;
  font-size: 1.6rem;
  font-family: "dnp-shuei-mgothic-std", sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1.7;
  letter-spacing: 1px;
  background-image: url(../images/bg_l.svg), url(../images/bg_r.svg);
  background-position: 0% 0%, 100% 0%;
  background-attachment: fixed;
  background-size: contain, contain;
  background-repeat: no-repeat;
}
@media screen and (min-width: 500px) {
  body {
    background-image: url(../images/bg_chara.svg), url(../images/bg_l.svg), url(../images/bg_r.svg);
    background-position: 50% 50%, 0% 0%, 100% 0%;
    background-attachment: fixed;
    background-size: cover, contain, contain;
  }
}

img {
  width: 100%;
  height: auto;
}

p {
  margin-bottom: 1rem;
}

h2 {
  margin: 0 auto 3rem;
  font-weight: bold;
  text-align: center;
}
h2 span {
  display: block;
  font-size: small;
  color: #e61916;
}

.btn {
  color: #ffffff;
  background-color: #e61916;
}
.btn:hover {
  background-color: #8da3d3;
}

.hr {
  margin: 3rem 0;
  width: 100%;
  max-width: 150px;
}

.small {
  font-size: 1.2rem;
}

.sp {
  display: none;
}
@media screen and (min-width: 500px) {
  .sp {
    display: block;
  }
}

@media screen and (min-width: 500px) {
  .pc {
    display: none;
  }
}
strong {
  color: #e61916;
}

em {
  padding: 0 0.5rem;
  color: #ffffff;
  font-style: normal;
  background-color: #e61916;
}

.btn {
  display: block;
  margin: 2rem auto 0;
  padding: 1rem;
  width: 100%;
  max-width: 320px;
  text-align: center;
  border-radius: 30px;
  text-decoration: none !important;
}
@media screen and (min-width: 767px) {
  .btn {
    transition: 0.2s cubic-bezier(0.45, 0, 0.55, 1);
  }
}

#global {
  position: relative;
  margin: 0 auto;
  width: 100%;
}

.wrap {
  margin: 0 auto;
  padding: 0 10%;
  width: 100%;
  max-width: 1025px;
}

hr {
  margin-bottom: 3rem;
  border: 1px solid #ccc;
}

/*	HEADER
-------------------------------	*/
header {
  text-align: center;
}
header h1 {
  margin: 6rem auto;
}
header h1 img {
  width: 265px;
}
@media screen and (min-width: 767px) {
  header h1 img {
    width: 600px;
  }
}
header h1 img.logo_caption {
  width: 195px;
}
@media screen and (min-width: 767px) {
  header h1 img.logo_caption {
    width: 300px;
  }
}

/*	FOOTER
-------------------------------	*/
footer {
  margin: 0 auto;
  padding: 3rem 0;
  width: 100%;
  text-align: center;
}
footer h3 {
  font-size: 2.6rem;
}
footer .tel {
  margin-top: 1rem;
}
footer .tel span {
  display: block;
  font-size: 1.2rem;
}

section {
  margin: 6rem 0;
}

#intro {
  text-align: center;
}

.entry__block {
  text-align: center;
}

.entry__box-text {
  width: 100%;
}

.entry__box-img img {
  width: 100%;
  max-width: 150px;
}

.date {
  margin: 0 auto;
  padding: 2rem;
  font-size: 3rem;
  width: 100%;
  max-width: 560px;
}

div.vid_contents {
  width: 100%; /*背景色を横幅いっぱいに広げる*/
  text-align: center;
  margin: auto;
  padding: 4% 4% 4% 4%; /*ここで動画の周りの余白を調整*/
}

video.vid_main {
  width: 100%;
  max-width: 920px; /*PC版での最大幅*/
}

#guest h3 {
  margin-bottom: 2rem;
}

.guest {
  margin-bottom: 5rem;
  padding: 2rem;
  color: #333333;
  background-color: #ffffff;
  border-radius: 3px;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.3);
}
.guest h3 {
  text-align: center;
}

@media screen and (min-width: 767px) {
  .guest__block {
    display: flex;
    justify-content: space-between;
  }
}

@media screen and (min-width: 767px) {
  .guest__img {
    width: 40%;
  }
}

.guest__desc {
  font-size: 1.2rem;
}
.guest__desc h4 {
  margin: 1rem 0;
  font-size: 1.6rem;
}
@media screen and (min-width: 767px) {
  .guest__desc {
    width: 54%;
    text-align: justify;
  }
}

.navigator {
  margin: 0 auto 5rem auto;
  padding: 3rem;
  background-color: #d7e2fb;
  border-radius: 3px;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 500px;
  text-align: center;
}
@media screen and (min-width: 767px) {
  .navigator {
    padding: 5rem;
    border-radius: 50%;
  }
}
.navigator img {
  width: 260px;
}

.thema {
  margin-bottom: 3rem;
  background-color: #ffffff;
  border-radius: 15px;
}
.thema h3 {
  margin-bottom: 2rem;
  padding: 1rem;
  color: #ffffff;
  font-size: 2rem;
  line-height: 1.5;
  border-radius: 10px 10px 0 0;
}
@media screen and (min-width: 767px) {
  .thema h3 {
    font-size: 3rem;
  }
}
.thema h3 span {
  display: block;
  margin-bottom: 1rem;
  font-size: 1.6rem;
}
@media screen and (min-width: 767px) {
  .thema h3 span {
    font-size: 2.3rem;
  }
}
.thema p {
  padding: 1rem 3rem;
  text-align: justify;
}
.thema.individual img, .thema.company img {
  margin-right: 2rem;
  width: 100%;
  max-width: 80px;
}
.thema.individual h3, .thema.company h3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex-wrap: nowrap;
}
@media screen and (min-width: 767px) {
  .thema.individual h3, .thema.company h3 {
    flex-direction: row;
    align-items: center;
  }
}
.thema.individual h3 p, .thema.company h3 p {
  margin-bottom: 0;
  padding: 0;
}
.thema.individual {
  border: 3px solid #f4a585;
}
.thema.individual h3 {
  background-color: #f4a585;
}
.thema.company {
  border: 3px solid #8da3d3;
}
.thema.company h3 {
  background-color: #8da3d3;
}/*# sourceMappingURL=style.css.map */