@charset "UTF-8";

/* ::::::::::  初めての方へ  :::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
.contents {
  overflow: visible;
}

@media (max-width: 767px) {
  .contents {
    overflow: hidden;
  }
}

.thumbnail {
  max-width: none;
}

/* =========================================================
beginner
========================================================= */
.beginner .secTitle02 {
  margin-bottom: 80px;
}

@media (max-width: 767px) {
  .beginner .secTitle02 {
    margin-bottom: 30px;
  }
}

@media (max-width: 767px) {
  .beginner .wrapper {
    padding-bottom: 0;
  }
}

.beginner .flexBox {
  position: relative;
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
}

@media (max-width: 767px) {
  .beginner .flexBox {
    display: block;
  }
}

.beginner .flexBox .photo {
  width: 50%;
}

@media (max-width: 767px) {
  .beginner .flexBox .photo {
    width: 95%;
    margin: 0 -6% 0 auto;
  }
}

.beginner .flexBox .textBlock {
  width: 40%;
}

@media (max-width: 767px) {
  .beginner .flexBox .textBlock {
    width: 100%;
    padding-top: 40px;
  }
}

.beginner .flexBox .bg01 {
  position: absolute;
  bottom: -200px;
  right: -110px;
  width: 275px;
}

.beginner .flexBox:last-child {
  flex-direction: row;
  align-items: flex-end;
  margin-top: 30px;
  padding-bottom: 140px;
}

@media (max-width: 767px) {
  .beginner .flexBox:last-child {
    padding-bottom: 0;
  }
}

.beginner .flexBox:last-child .thumbnail {
  position: absolute;
  bottom: -130px;
  left: -100px;
}

@media (max-width: 767px) {
  .beginner .flexBox:last-child .thumbnail {
    bottom: auto;
    top: 40%;
  }
}

.beginner .flexBox .photoWrap {
  display: flex;
  align-items: flex-end;
  width: 50%;
}

@media (max-width: 767px) {
  .beginner .flexBox .photoWrap {
    width: 95%;
    margin: 50px auto 180px -6%;
  }
}

.beginner .flexBox .photoWrap img {
  width: 100%;
  height: auto;
}

.beginner .flexBox .photoWrap .photo01 {
  width: 80%;
}

.beginner .flexBox .photoWrap .photo02 {
  width: 47%;
  margin: 0 -7% -15% -20%;
}

@media (max-width: 767px) {
  .beginner .flexBox .photoWrap .photo02 {
    width: 48%;
    height: 50vw;
    margin: 0 -7% -30% -20%;
  }

  .beginner .flexBox .photoWrap .photo02 .animeItem,
  .beginner .flexBox .photoWrap .photo02 .animeImg {
    height: 100%;
  }

  .beginner .flexBox .photoWrap .photo02 .animeItem img,
  .beginner .flexBox .photoWrap .photo02 .animeImg img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
}

/* =========================================================
anxiety
========================================================= */
@media (max-width: 767px) {
  .anxiety .wrapper {
    padding: 40px 0;
  }
}

.anxiety .bg02 {
  top: 350px;
  z-index: -1;
}

@media (max-width: 767px) {
  .anxiety .bg02 {
    top: 0;
  }
}

.anxietyList {
  display: flex;
  gap: 70px;
  margin: 60px 0 0;
}

@media (max-width: 767px) {
  .anxietyList {
    flex-direction: column;
    gap: 20px;
    margin: 30px 0 0;
  }
}

.anxietyList>li {
  position: relative;
  border-top: 1px solid #DDDDDD;
  width: 100%;
  padding-top: 20px;
}

@media (max-width: 767px) {
  .anxietyList>li {
    width: 100%;
  }

  .anxietyList>li+li {
    margin-top: 20px;
  }
}

.anxietyList>li::before {
  content: '';
  display: block;
  position: absolute;
  top: -1px;
  left: 0;
  background: #A72A2E;
  width: 80px;
  height: 1px;
}

@media (max-width: 767px) {
  .anxietyList>li .title {
    letter-spacing: -.05em;
  }
}

.anxiety .photoSList {
  display: flex;
  flex-direction: row-reverse;
  position: absolute;
  right: -130px;
  bottom: 100px;
}

@media (max-width: 767px) {
  .anxiety .photoSList {
    display: none;
  }
}

.anxiety .photoSList li+li {
  margin: 130px 20px 0 0;
}

/* =========================================================
license
========================================================= */
.license {
  margin-top: -113px;
  /*コンテンツのブロック*/
  /*画像のブロック*/
}

@media (max-width: 767px) {
  .license {
    margin-top: 0;
  }
}

.license .wrapper {
  display: flex;
  justify-content: space-between;
  position: relative;
  padding: 0 0 50px;
}

@media (max-width: 767px) {
  .license .wrapper {
    display: block;
    padding-top: 80px;
    padding-bottom: 0;
  }
}

.license .bgText {
  position: absolute;
  top: 113px;
  left: -200px;
  opacity: .05;
  line-height: 1;
  color: #000;
  font-family: "EB Garamond", serif;
  font-size: 8.6rem;
  writing-mode: vertical-rl;
}

@media (max-width: 767px) {
  .license .bgText {
    top: 0;
    left: -6%;
    writing-mode: horizontal-tb;
    font-size: 5rem;
  }
}

.license .textContents {
  flex-shrink: 0;
  width: 470px;
  padding-right: 120px;
}

@media (max-width: 767px) {
  .license .textContents {
    width: 100%;
    padding-right: 0;
  }
}

.license .textContents>div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
  padding-top: 113px;
}

@media (max-width: 767px) {
  .license .textContents>div {
    height: auto;
    padding-top: 0;
    padding-bottom: 30px;
  }
}

.license .textContents>div .secTitle03 {
  margin-bottom: 0;
}

.license .textContents>div .secTitle02 {
  margin: 10px 0 30px;
  line-height: 1.5;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .license .textContents>div .secTitle02 {
    display: flex;
    align-items: center;
    height: 50px;
    margin: -48px 0 20px;
    font-size: 1.5rem;
  }
}

.license .textContents>div .tag {
  margin-top: 30px;
}

@media (max-width: 767px) {
  .license .textContents>div .photo {
    height: 210px;
    margin: 0 -6%;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 60% 100%, 60% 76%, 0 76%);
  }

  .license .textContents>div .photo .animeItem,
  .license .textContents>div .photo .animeImg {
    height: 100%;
  }

  .license .textContents>div .photo img {
    object-fit: cover;
    object-position: center bottom;
    width: 100%;
    height: 100%;
  }
}

.license .images {
  width: 100%;
  height: 100vh;
  margin: 0;
  margin-right: calc(50% - 50vw);
  position: sticky;
  position: -webkit-sticky;
  top: 0;
}

.license .images .animeItem,
.license .images .animeImg {
  width: 100%;
  height: 100%;
}

.license .images .animeImg::before {
  top: 113px;
}

.license .images .scroll-box {
  width: 100%;
  height: 100%;
  max-height: 767px;
  display: block;
  padding-top: 113px;
  visibility: hidden;
  /* 画像が透過pngの時は背景色が必要です */
  position: absolute;
  top: 0;
  bottom: 0;
  /* フェード速度 */
  transition: .8s;
  opacity: 0;
}

.license .images .scroll-box img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.license .images p:first-child,
.license .images p.active {
  visibility: visible;
  opacity: 1;
}

/* =========================================================
success
========================================================= */
.success .thumbnail {
  position: absolute;
  top: 50px;
  left: -50px;
}

@media (max-width: 767px) {
  .success .thumbnail {
    top: 30px;
  }
}

.success .wrapper {
  padding: 90px 0;
}

@media (max-width: 767px) {
  .success .wrapper {
    padding: 40px 0;
  }
}

.success .wrapper .bg01 {
  position: absolute;
  bottom: 0px;
  right: -270px;
}

.successList {
  position: relative;
  margin: 40px 0 0;
}

.successList>li {
  position: relative;
  display: flex;
  justify-content: space-between;
  border: 1px solid #A72A2E;
  background: #fff;
  padding: 50px;
  margin-top: 55px;
}

@media (max-width: 767px) {
  .successList>li {
    display: block;
    padding: 25px 20px;
  }

  .successList>li:first-child {
    margin-top: 30px;
  }
}

.successList>li .photo {
  width: 431px;
}

@media (max-width: 767px) {
  .successList>li .photo {
    width: 100%;
    margin: 0 0 10px;
  }

  .successList>li .photo img {
    height: auto;
  }
}

.successList>li .textBlock {
  width: calc(100% - 470px);
}

@media (max-width: 767px) {
  .successList>li .textBlock {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .successList>li .textBlock .secTitle03 {
    font-size: 1.5rem;
  }
}

.successList>li .textBlock .name {
  margin: 7px 0;
  color: #000;
}

.successList>li .textBlock .name span {
  font-family: "Noto Serif JP", 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
  font-size: 2.6rem;
}

@media (max-width: 767px) {
  .successList>li .textBlock .name span {
    font-size: 2.1rem;
  }
}

.successList>li .toggleBtn {
  position: absolute;
  bottom: -22px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: #A72A2E;
  border: 1px solid #A72A2E;
  width: 44px;
  height: 44px;
  margin: auto;
  cursor: pointer;
}

.successList>li .toggleBtn .icon_arrow {
  fill: #fff;
  transform: rotate(90deg);
  transition: all .3s;
}

.successList>li .toggleBtn.on {
  background: #fff;
}

.successList>li .toggleBtn.on .icon_arrow {
  fill: #A72A2E;
  transform: rotate(-90deg);
}

.successList>li .toggleBtn.on+.accordionBody {
  grid-template-rows: 1fr;
}

.successList>li .toggleBtn.hide {
  display: none;
}

.successList>li .accordionBody {
  display: grid;
  grid-template-rows: 0fr;
  transition: .3s grid-template-rows ease;
}

.successList>li .accordionBody>div {
  overflow: hidden;
  min-height: calc(1.8em * 4);
}

/*# sourceMappingURL=map/beginner.css.map */