/*

メイン要素

*/

.main_visual_wrapper {
  padding: 0px 0px;
}

.SP_m_text {
  display: none;
}

.main_visual {
  position: relative;

  margin: auto;

  width: 100%;

  /* border-radius: 0px 67px; */

  text-shadow: 0px 0px 25px #f4a360;
}

.main_visual p {
  color: #fff;

  letter-spacing: 0px;

  font-size: 50px;
}

.main_visual figure {
  text-align: end;

  position: relative;

  z-index: 20;
}

.main_visual img {
  width: 50%;

  height: 750px;

  object-fit: contain;
}

.main_visual_text {
  position: absolute;

  top: 460px;

  right: 0%;

  width: 100%;

  display: block;

  padding: 30px 0px 30px 60px;

  font-weight: bold;

  font-size: 60px;

  z-index: 10;

  background-color: #f4a360;
}

.main_visual_text p {
  color: #fff;
}

.main_visual h1 {
  font-size: 20px;

  color: #fff;
}

.ShapeAnime {
  animation-name: ShapeAnime;

  animation-duration: 1s;

  animation-fill-mode: forwards;

  transition: cubic-bezier(0.8, 0, 0.2, 1) 0s;
}

@keyframes ShapeAnime {
  0% {
    transform: scale(1, 0);
  }

  100% {
    transform: scale(1, 1);
  }
}

.delay-time02 {
  animation-delay: 1s;
}

.delay-time03 {
  animation-delay: 1.2s;
}

.SlideinAnime {
  animation-name: SlideinAnime;

  animation-duration: 1s;

  animation-fill-mode: forwards;

  opacity: 0;

  transform: translateY(20px);

  transition: cubic-bezier(0.8, 0, 0.2, 1) 0s;
}

@keyframes SlideinAnime {
  0% {
    opacity: 0;

    transform: translateY(20px);
  }

  100% {
    opacity: 1;

    transform: translateY(0px);
  }
}

.main_container {
  height: 90%;

  width: 100%;

  top: 5%;

  position: absolute;
}

.container_right {
  position: absolute;

  width: 30%;

  z-index: 5;

  top: 0;

  bottom: 0;

  right: 0;

  background-color: #fee9b2;
}

.image {
  border-bottom: double #fff 16px;

  border-top: double #fff 16px;

  filter: saturate(70%) sepia(40%) blur(1px);

  position: absolute;

  width: 70%;

  height: auto;

  top: 0;

  left: 0;

  bottom: 0;

  right: 0;

  opacity: 0;

  background-size: cover;

  background-position: center center;

  animation: image-switch-animation 25s infinite;
}

.main_image1 {
  background-image: url(../img/mv01.png);
}

.main_image2 {
  background-image: url(../img/mv02.png);
}

.main_image3 {
  background-image: url(../img/mv03.png);
}

.main_image4 {
  background-image: url(../img/mv04.png);
}

.main_image5 {
  background-image: url(../img/mv05.png);
}

@keyframes image-switch-animation {
  0% {
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  25% {
    opacity: 1;
  }

  30% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

.image:nth-of-type(1) {
  animation-delay: 0s;
}

.image:nth-of-type(2) {
  animation-delay: 5s;
}

.image:nth-of-type(3) {
  animation-delay: 10s;
}

.image:nth-of-type(4) {
  animation-delay: 15s;
}

.image:nth-of-type(5) {
  animation-delay: 20s;
}

/* トップページ要素 */

#top_about,
#top_works,
#top_character,
#top_blog,
#top_contact,
#error_page {
  padding-top: 120px;

  padding-bottom: 120px;
}

.top_subtitle {
  border-bottom: 11px #f4a360 dotted;

  margin-bottom: 20px;
}

.top_subtitle_eng {
  font-weight: bold;

  font-size: 40px;

  color: #5c5c5c;
}

#top_about {
  text-align: center;

  background-color: #f9fce1;
}

.top_about_profile,
.top_works_text,
.top_character_text,
.top_blog_text {
  letter-spacing: 5px;
    background-color: #fff;
    position: relative;
    margin: 24px 0;
    padding: 40px;
    border-radius: 150px;
    box-shadow: #cbcf94 1px 4px 4px 1px;
  text-align: center;
}

.top_about_profile::before {
    content: none;
}

.PC_wrap {
  display: flex;

  justify-content: space-around;

  align-items: center;
}

.top_about_box img {
  width: 350px;
}

.top_about_card {
  width: 45%;

  position: relative;

  border: 7px solid #f4a360;

  border-radius: 0px 40px;

  padding: 15px;

  margin-bottom: 40px;
}

.top_about_card img {
  width: 100%;

  height: 345px;

  object-fit: cover;

  border-radius: 0px 40px;

  border: 5px #fff solid;
}

.top_about_card p {
  color: #fff;

  margin-bottom: 10px;
}

.top_about_card_text {
  position: absolute;

  width: 100%;

  padding: 5px 0px;

  top: 284px;

  right: 0px;

  background-color: #f4a360;
}

#top_works {
  text-align: center;

  background-color: #fee9b2;
}

.top_works_card {
  color: #5c5c5c;
}

.top_works_card img {
  width: 85%;

  height: 200px;

  border-radius: 30px 0px;

  object-fit: cover;

  object-position: 0px 0px;
}

.top_works_card_single {
  width: 30%;

  background-color: #ffffff73;

  border: #fff solid 7px;

  border-radius: 30px 0px;

  margin: 0px 0px 30px;
}

#top_character {
  text-align: center;

  background-color: #f9fce1;
}

#top_blog {
  text-align: center;

  background-color: #fee9b2;
}

#top_contact {
  text-align: center;

  background-color: #f9fce1;
}

/*

キャラクターカテゴリー要素

*/

.chara_title {
  text-align: center;

  margin-bottom: 20px;
}

.chara_wrapper {
  display: flex;

  flex-wrap: wrap;

  justify-content: center;
}

.chara_constant {
  padding: 0px 0px 15px 0px;
}

.chara_image {
  text-align: center;
}

.chara_image img {
  border: 1px solid #dddddd;

  transition: 0.2s all;
}

.chara_image img:hover {
  transform: scale(1.1);

  transition: 0.2s all;
}

.chara_name {
  font-size: 15px;

  text-align: center;

  width: 200px;
}

/*

キャラクター投稿要素

*/

.post_main {
  width: 100%;

  margin: auto;
}

.post_relative {
  width: 727px;

  height: 600px;

  position: relative;

  margin: 0px auto 60px;
}

.talk1 {
  color: #ffffff;

  font-weight: bold;

  font-size: 30px;

  position: absolute;

  top: 278px;

  left: 251px;

  z-index: 2;

  text-shadow: 7px 7px 11px #f4a36091, 0px 0px 5px #f4a360, 2px 3px 2px #f4a360;
}

.talk2 {
  color: #ffffff;

  font-weight: bold;

  font-size: 30px;

  position: absolute;

  top: 448px;

  left: 114px;

  z-index: 2;

  text-shadow: 7px 7px 11px #f4a36091, 0px 0px 5px #f4a360, 2px 3px 2px #f4a360;
}

.post_images {
  display: flex;

  justify-content: space-between;
}

.image1_02 {
  width: auto;

  height: 400px;

  object-fit: cover;
}

.image1 {
  position: absolute;

  top: -15px;

  left: 0px;

  height: 639px;
}

.image_box {
  text-align: center;
}

.image2 {
  border: 2px solid #dddddd;
}

.post_arrow {
  display: flex;

  flex-wrap: nowrap;

  justify-content: space-around;

  margin-bottom: 20px;

  font-size: 30px;
}

.post_arrow > div {
  width: 100%;
}

.page_nav {
  margin: 20px 0px;
  width: 100%;
  padding: 10px 20px;
  border: solid 2px #00aa63;
  background-color: #fff;
  color: #5c5c5c;
  font-size: 16px;
}

.page_nav ul {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  align-items: center;
}

.page_nav ul li {
  min-width: 100px;
  text-align: center;
}

.profile_list {
  display: flex;

  flex-wrap: nowrap;

  justify-content: space-around;

  background-color: #fff;

  border: #fff solid 7px;

  border-radius: 30px 0px;

  padding: 20px;

  text-align: start;
}

.p_box {
  background-color: #fff;

  border: #fff solid 7px;

  border-radius: 30px 0px;

  padding: 20px;

  text-align: start;
}

.p_box p {
  margin-bottom: 10px;
}

.p_box p:last-child {
  margin-bottom: 0px;
}

.chara_wrapper_mini {
  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  margin-top: 34px;
}

.chara_constant_mini {
  padding: 0px 5px 5px 0px;
}

.chara_image_mini img {
  border: 1px solid #dddddd;

  transition: 0.2s all;
}

.chara_image_mini img:hover {
  transform: scale(1.1);

  transition: 0.2s all;
}

/*==================================================

ふわっ

===================================*/

.click {
  display: block;

  color: #dc7979;

  background-color: #883c3c;
}

/* fadeUp */

.fadeUp {
  animation-name: fadeUpAnime;

  animation-duration: 0.5s;

  animation-fill-mode: forwards;

  opacity: 0;
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;

    transform: translateY(100px);
  }

  to {
    opacity: 1;

    transform: translateY(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.fadeUpTrigger {
  opacity: 0;
}

/*

お仕事要素

*/

.commission_wrapper {
  text-align: center;
}

.commission_wrapper img {
  width: 90%;

  height: 1000px;

  object-fit: contain;
}

#top_works figure img {
  width: 60%;

  height: auto;
}

.works_text p {
  text-align: start;

  margin-bottom: 10px;
}

.works_text p:last-child {
  margin-bottom: 0px;
}

.works_wrapper {
  margin-bottom: 30px;
}

.works_block {
  padding: 20px;
}

.works_text {
  margin: 40px 0px;
}

.slider {
  width: 100%;

  position: relative;
}

.items {
  position: relative;

  overflow: hidden;

  width: 50%;

  height: auto;

  padding-bottom: 50%;

  margin: auto;
}

.item {
  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  opacity: 0;

  transition: opacity 0.6s ease-in-out;
}

.current {
  opacity: 1;
}

.slider img {
  width: 100%;

  height: 100%;

  object-fit: cover;
}

.buttons {
  position: absolute;

  z-index: 1;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  display: flex;

  justify-content: space-between;

  align-items: center;
}

.button {
  width: 32px;

  height: 32px;

  border: none;

  outline: none;

  padding: 0;

  background: transparent center no-repeat;

  cursor: pointer;

  opacity: 0.4;

  &.prev {
    background-image: url(../ico_next_b32.png);
  }

  &.next {
    background-image: url(../ico_next_b32-1.png);
  }

  &:hover {
    opacity: 0.8;
  }
}

.dots_mg {
  position: absolute;

  bottom: -35px;

  left: 0;

  width: 100%;

  display: flex;

  justify-content: center;
}

.dot_mg {
  display: block;

  margin: 0px 50px;

  width: 25px;

  height: 25px;

  border-radius: 50%;

  border: none;

  outline: none;

  padding: 0;

  background: #777;

  cursor: pointer;

  opacity: 0.5;

  transition: opacity 0.4s ease-in-out;

  &:nth-child(n + 2) {
    margin-left: 5px;
  }

  &.current {
    opacity: 1;
  }
}

/* コミッション */

.com_wrapper {
  display: flex;

  flex-wrap: wrap;

  justify-content: center;
}

.com_constant {
  margin: 5px;

  width: 170px;

  height: 170px;

  overflow: hidden;
}

.com_image img {
  border: 1px solid #dddddd;

  transition: 0.2s all;

  width: 100%;

  height: 300px;

  object-fit: cover;

  overflow: hidden;
}

.com_image img:hover {
  transform: scale(1.1);

  transition: 0.2s all;
}

/* ブログ */

.blog_constant {
  height: 360px;

  width: 30%;

  margin-right: 5%;

  margin-bottom: 20px;

  background-color: #ffffff73;

  border: #fff solid 7px;

  border-radius: 30px 0px;
}

.blog_image img {
  width: 100%;

  height: 200px;

  object-fit: cover;

  border-radius: 30px 0px;
}

.blog_image {
  padding: 20px;
}

.blog_title {
  font-weight: bold;

  color: #5c5c5c;
}

.blog_date {
  font-size: 14px;

  color: #5c5c5c;
}

.blog_wrapper {
  display: flex;

  flex-wrap: wrap;
}

.blog_wrapper li:nth-child(3n) {
  margin-right: 0px;
}

.blog_post_image img {
  width: 80%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

.blog_post_image.contain img {
  width: 80%;
  height: 100%;
  object-fit: contain;
  aspect-ratio: unset;
}

.blog_post_image {
  text-align: center;
}

.blog_post_box {
  text-align: start;
}

.blog_post_box h2 {
  font-weight: bold;

  font-size: 45px;

  color: #5c5c5c;

  border-bottom: 11px #f4a360 dotted;

  margin: 40px 0;
}

.blog_post_box p {
  margin-bottom: 20px;
}

.blog_post_box h1 {
  font-size: 45px;
}

.blog_post_box ul {
  color: #5c5c5c;

  background-color: #f9fce1;

  padding: 20px;

  margin: 20px 0;

  border-radius: 20px;
}

.blog_post_box ul li {
  list-style: inside;
}

.blog_post_box ul li:last-child {
  list-style: none;
}

.blog_post_box .code {
  font-size: 16px;
  background-color: #252525;
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 20px;
}

.blog_post_box .code p {
  margin: 0px;
  color: #bff0a9;
}

.blog_post_box a {
  color: #009961;
  text-decoration: underline;
}

.contact_box {
  text-align: start;
  margin: 20px auto 40px;
}

.contact_box ul li {
  margin: 20px 0px;
}

.contact_box input {
  background-color: #fff;
  border: solid 1px #5c5c5c;
  border-radius: 5px;
  width: 100%;
}

.contact_box textarea {
  background-color: #fff;
  border: solid 1px #5c5c5c;
  border-radius: 5px;
  width: 100%;
}

.contact_btn input {
  background-color: #f4a360;
  color: #fff;
  border: unset;
  padding: 20px;
  border-radius: 20px 0px;
  width: 30%;
}

.top_about_slide_img img {
    width: 75%;
}

.swiper-slide span {
display: block;
    color: #5C5C5C;
    font-size: 40px;
    padding: 0.5em;
    line-height: 1.3;
    background: #fdffe3;
    vertical-align: middle;
    border-radius: 40px;
}

.swiper-slide p {
    display: block;
    line-height: 1;
    margin: 16px;
}

@media screen and (max-width: 767px) {
  .main_wrapper {
    padding: 50px 30px;
  }

  .PC_m_text {
    display: none;
  }

  .SP_m_text {
    display: unset;
  }

  .main_visual {
    text-align: center;

    height: 1000px;
  }

  .main_visual_text {
    position: absolute;

    top: 700px;

    right: 0%;

    width: 100%;

    padding: 40px 0px;

    display: block;

    margin: auto;

    font-weight: bold;

    font-size: 70px;

    color: #ffffff;

    background-color: #f67f35b3;
  }

  .main_visual figure {
    text-align: unset;

    position: revert;
  }

  .main_visual img {
    width: 100%;

    height: 1000px;

    object-fit: cover;
  }

  .main_container {
    width: 100%;

    height: 100%;

    top: 0%;
  }

  .container_right {
    width: 10%;
  }

  .image {
    border-bottom: unset;

    border-top: unset;

    width: auto;
  }

  /* トップページ要素 */

  #top_about,
  #top_works,
  #top_character,
  #top_blog,
  #top_contact,
  #error_page {
    padding-top: 80px;

    padding-bottom: 80px;
  }

  .PC_wrap {
    display: block;
  }

  .top_subtitle {
    padding-bottom: 15px;
  }

  .top_subtitle_eng {
    font-weight: bold;

    font-size: 60px;

    color: #5c5c5c;
  }

  .top_about_box img {
    width: 80%;
  }

  .top_about_card {
    width: unset;
  }

  .top_works_card_single {
    width: unset;
  }

  .top_works_card img {
    object-position: 0px -100px;
  }

  #top_works figure img {
    width: 100%;

    height: auto;
  }

  .top_about_profile::before {
    content: "▲";
    position: absolute;
    top: -64px;
    font-size: 60px;
    color: #fff;
    left: auto;
    right: auto;
  }

  .items {
    width: 100%;

    height: auto;

    padding-bottom: 100%;
  }

  .blog_wrapper {
    display: block;
  }

  .blog_constant {
    height: 560px;

    width: 100%;
  }

  .blog_image img {
    width: 100%;

    height: 360px;

    object-fit: cover;

    border-radius: 30px 0px;
  }

  .blog_title {
    display: block;

    font-size: 30px;

    font-weight: bold;

    color: #5c5c5c;
  }

  .blog_date {
    font-size: 20px;
  }

  .blog_post_image img,
  .blog_post_image.contain img {
    width: 100%;
  }
}

/* ここまでスマホ表示 */