@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Dancing+Script&family=Klee+One:wght@400;600&family=RocknRoll+One&display=swap");
/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/
/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
:root {
  --fontA:"Dancing Script", cursive;
  --fontB: "Klee One", cursive;
  --fontC: "RocknRoll One", sans-serif;
  --fontsizeL:32px;
  --fontsizeM:24px;
  --fontsizeS:16px;
}

.html{
  margin-top: 0 !important;
}

.g__column {
  display: flex;
}

.header::before {
  width: 100%;
  height: 50px;
  background-color: #E6E7F4;
  display: block;
  content: "";
  margin-bottom: 20px;
}
.header__title {
  font-size: 32px;
  text-align: center;
  display: block;
  color: #6E74A3;
  font-family: var(--fontA);
}
.header__list-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.header__list {
  text-align: center;
  width: 160px;
}
.header__link {
  display: inline-flex;
  height: 60px;
  width: 100%;
  align-items: flex-end;
  justify-content: center;
  font-family: var(--fontB);
}
.header__link:hover {
  background: #6E74A3;
  color: white;
  transition: 0.2s;
}

main {
  padding: 0 100px;
}

.head__img {
  width: 100%;
  height: 600px;
  -o-object-fit: cover;
     object-fit: cover;
  filter: grayscale(0.6);
}

.newpost__inner {
  margin: 40px 0;
}
.newpost__title_wrap {
  text-align: center;
  margin-bottom: 20px;
}
.newpost__title_en {
  font-size: 32px;
  font-family: var(--fontA);
}
.newpost__title {
  font-size: 18px;
  font-family: var(--fontB);
}
.newpost__link {
  width: 100%;
  height: 100%;
}
.newpost__time{
	display:inline-block;
}
.newpost__card_wrap {
  display: flex;
  gap: 20px;
  margin-bottom: 40px;
}
.newpost__card {
  width: 33.3333333333%;
}
.newpost__card_img {
  width: 100%;
}
.newpost__card_title {
  font-size: var(--fontsizeM);
}
.newpost__card_text {
  font-size: var(--fontsizeS);
  line-height: 1.2;
}

.button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 400px;
  height: 60px;
  border-radius: 50px;
  margin: 0 auto;
  position: relative;
}
.button::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0;
  transform: scale(1);
  opacity: 1;
  border-radius: 50px;
}
.button:hover::after {
  border: 1px solid #6E74A3;
  -webkit-animation: hamon 1s infinite;
          animation: hamon 1s infinite;
}
@-webkit-keyframes hamon {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}
@keyframes hamon {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}
.button__purple {
  color: white;
  background-color: #6E74A3;
}
.button__white {
  color: #6E74A3;
  background-color: white;
}
.button__text {
  font-family: var(--fontB);
  font-size: var(--fontsizeM);
  letter-spacing: 10px;
}

.category__bg {
  width: 100vw;
  margin: -1px calc(50% - 50vw);
  background-color: #9d9fb4;
}
.category__inner {
  padding: 0px 100px;
  color: white;
}
.category__bg_img {
  width: 100vw;
	max-width: 100vw;
  height: 120px;
  margin: 0 calc(50% - 50vw);
}
.category__title_wrap {
  text-align: center;
  padding-bottom: 20px;
}
.category__title_en {
  font-size: 32px;
  font-family: var(--fontA);
}
.category__title {
  font-size: 18px;
  font-family: var(--fontB);
}
.category__list_wrap {
  gap: 40px;
}
.category__list {
  width: 50%;
}
.category__list_title {
  border-top: 1px solid white;
  border-bottom: 1px solid white;
  text-align: center;
  font-size: var(--fontsizeM);
  padding: 20px 0;
  margin-bottom: 40px;
}
.category__card {
  margin-bottom: 40px;
}
.category__card_img_wrap {
  width: 45%;
  margin-right: 40px;
}
.category__card_img {
  width: 100%;
}
.category__card_title {
  font-size: var(--fontsizeM);
  margin-bottom: 20px;
}
.category__card_text {
  margin-bottom: 20px;
  margin-top: 10px;
}

.welcome__inner {
  margin: 40px 0;
}
.welcome__title_wrap {
  text-align: center;
  margin-bottom: 20px;
}
.welcome__title_en {
  font-size: 32px;
  font-family: var(--fontA);
}
.welcome__title {
  font-size: 18px;
  font-family: var(--fontB);
}
.welcome__introduce_wrap {
  justify-content: center;
  gap: 80px;
  align-items: center;
  margin-bottom: 40px;
}
.welcome__introduce_img_wrap {
  width: 100%;
  max-width: 100px;
  height: 100%;
  min-height: 100px;
  border-radius: 50%;
  border: 1px solid black;
}
.welcome__sns_container {
  text-align: center;
}
.welcome__sns_wrap {
  gap: 160px;
  justify-content: center;
}
.welcome__sns_title {
  font-size: var(--fontsizeM);
  margin-bottom: 40px;
}
.welcome__sns_circle {
  width: 100%;
  max-width: 100px;
  height: 100%;
  min-height: 100px;
  border-radius: 50%;
  background-color: #6E74A3;
  position: relative;
  cursor: pointer;
}
.welcome__sns_circle:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0;
  transform: scale(1);
  opacity: 1;
  border-radius: 50px;
  transition: 0.1s;
}
.welcome__sns_circle:hover::after {
  border: 1px solid #6E74A3;
  -webkit-animation: hamon 1s infinite;
          animation: hamon 1s infinite;
}
@keyframes hamon {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}
.welcome__sns_link {
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  min-height: 100px;
}
.welcome .fa-brands {
  font-size: 60px;
  color: #fff;
}
.f {
  background-color: #6E74A3;
  color: white;
}
.f .fa-sort-up {
  transform: translateY(5px);
}
.f__page_top {
  color: #6E74A3;
  width: 100%;
  height: 50px;
  background-color: #E6E7F4;
  align-items: center;
  justify-content: center;
}
.f__wrap {
  justify-content: center;
  margin-top: 40px;
  margin-bottom: 40px;
}
.f__list {
  width: 240px;
  text-align: center;
  border-right: 1px solid white;
}
.f__list:first-child {
  border-left: 1px solid #fff;
}
.f__link {
  padding: 20px 0;
  width: 100%;
  display: inline-block;
  position: relative;
}
.f .copyright {
  text-align: center;
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px) {
  /*必要ならばここにコードを書く*/
}
/*834px以下*/
@media screen and (max-width: 834px) {
  /*必要ならばここにコードを書く*/
}
/*480px以下*/
@media screen and (max-width: 480px) {
  /*必要ならばここにコードを書く*/
}/*# sourceMappingURL=style.css.map */