@charset "utf-8";
/* CSS Document */

/******************************

[Table of Contents]

1. Fonts
2. Body and some general stuff
3. Header
	3.1 Top Bar
	3.2 Header Content
	3.3 Logo
	3.4 Main Nav
	3.5 Hamburger
4. Footer
5. Home
6. Information
. SPsize


******************************/

/***********
1. Fonts
***********/
@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');

/***********
2. Body and some general stuff
***********/

html{
  font-size: 62.5%;
}


body {
  font-family: "Kiwi Maru", serif;
  font-size: 2rem;
  font-weight: 400;
  background: #FEF1E5;
  color: #5D421E;
}

ul {
  list-style: none;
  margin-bottom: 0px;
}


a, a:visited, a:active, a:link {
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
    -webkit-text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
    text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
}

h1{
  font-family: "Kiwi Maru", serif;
  font-size: 4rem;
  font-weight: 400;
  margin-bottom: 2.4rem;
  color: #543B1B;
}

h2{
  font-family: "Kiwi Maru", serif;
  font-size: 3.2rem;
  font-weight: 400;
  margin-bottom: 2.4rem;
  color: #ffffff;
  background-color: #543B1B;
}

h3{
  font-family: "Kiwi Maru", serif;
  font-size: 2.8rem;
  font-weight: 400;
  margin-bottom: 2.4rem;
  color: #543B1B;
  border-bottom: solid 1px #543B1B;
}

h4{
  font-family: "Kiwi Maru", serif;
  font-size: 2.4rem;
  font-weight: 400;
  margin-bottom: 2.4rem;
  color: #876A44;
}

h5{
  font-family: "Kiwi Maru", serif;
  font-size: 2rem;
  font-weight: 400;
  margin-bottom: 2.4rem;
  color: #876A44;
}

h5::before {
  content: "";
  display: inline-block;
  margin: 0 0.5rem;
  width: 1rem;
  height: 1rem;
  background-color: #876A44;
  border-radius: 100%;
}

h6{
  font-family: "Kiwi Maru", serif;
  font-size: 2rem;
  font-weight: 300;
  margin-bottom: 2.4rem;
  color: #876A44;
}

p{
  font-family: "Noto Sans jp", serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 160%;
  color: #543B1B;
}

.num{
  font-family: "Lato", serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 100%;
  color: #876A44;
}

.material-symbols-outlined {
  color: #ffffff;
  font-variation-settings:
  'FILL' 1,
  'wght' 0,
  'GRAD' 0,
  'opsz' 24
}

.material-symbols-outlined.front {
  color: #876A44;
  font-variation-settings:
  'FILL' 1,
  'wght' 0,
  'GRAD' 0,
  'opsz' 30
}

a{
  color: #876A44;
}

.fuwafuwa {
  animation: fuwafuwa 3s ease-in-out infinite alternate;
  transition: 1.5s ease-in-out;
}

@keyframes fuwafuwa {
  0% {
    transform:translate(0, 0) rotate(-7deg);
  }
  50% {
    transform:translate(0, -7px) rotate(0deg);
  }
  100% {
    transform:translate(0, 0) rotate(7deg);
  }
}

.fuwafuwa-delay {
  animation: fuwafuwadelay 4s ease-in-out infinite alternate;
  transition: 1.5s ease-in-out;
}

@keyframes fuwafuwadelay {
  0% {
    transform:translate(0, 0) rotate(-7deg);
  }
  50% {
    transform:translate(0, -7px) rotate(0deg);
  }
  100% {
    transform:translate(0, 0) rotate(7deg);
  }
}


/***********
3. Header
***********/

.header{
  padding: 2.4rem 10%;
  background-color: #F5E2CF;
  position: fixed;
  top: 0;
  z-index: 10;
  width: 100%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* 下方向に影を追加 */
}

.header-container{
  width: auto;
  display: flex;
  justify-content: space-between;
}

.logo{
  display: flex;
  justify-content:center;
  align-items:center;
  z-index: 10;
}

.logo a{
  display: block;
}

.logo img{
  object-fit: cover;
  width: 15vw;
  min-width: 10rem;
}

#nav-pc {
  display: flex;
  font-size: clamp(1rem, calc(0.9rem + 0.625vw), 2.4rem);
  align-items: center;
  gap: 2.4rem;

  margin: 0 auto;
}

.nav-item a{
  color: #876A44;
  text-align: center;
}

.nav-item a:hover{
  color: #ffffff;
}

.button {
  display: flex;
  align-items: center;
  justify-content: center; 

  height: 56px;
  width: 300px;
  min-width: 0;
  background: #11AFAA;
  border-radius: 50px;
  padding: 3.2rem 1.6rem;
  font-size: clamp(1.2rem, calc(0.9rem + 0.625vw), 1.6rem);
}

#nav-sp {
  display: none;
}


/***********
4. Footer
***********/

.footer{
  padding: 2.4rem 10%;
  background-color: #F5E2CF;
  margin-top: 13rem;

}

.footer-container{
  width: 100%;
  position: relative;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: 2.4rem;

}

#logo-footer{
  position: absolute;
  left: 50%;
  transform: translate(-50%,-85%);
}

#footer-nav{
  padding-top: 10rem;
  padding-left: 0;
  display: flex;
  font-size: 1.6rem;
  align-items: center;
  gap: 2.4rem;
  margin: 0 auto;
}

.sns-container{
  display: flex;
  flex-flow: column;
  align-items: center;
}

.sns-container p{
  font-family: "Kiwi Maru", serif;
  font-size: 1.5rem;
  font-weight: 400;
  color: #876A44;
}

.cr-text{
  font-family: "Noto Sans JP", serif;
  color: #DBC6A9;
}


/***********
5. Home
***********/


/* FV */
#main-visual{
  object-fit: cover;
  width: 80vw;
  aspect-ratio: 16 / 9;/* アスペクト比 */
  margin: 0 auto;
  border-radius: 300px;
}

.cover{
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  padding: 40px 0;
  background-color: #F5E2CF;
  margin-top: 112px;
}

.catchcopy{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-family: "Josefin Sans", serif;
  font-size: clamp(2.4rem, calc(2.2rem + 0.625vw), 4rem);
  font-weight: 400;
  color: #ffffff;
  text-shadow: 0px 4px #73402F;
}

#cherry-img{
  position: absolute;
  top: 10%;
  left: 7%;
  width: 8%;
}

#cutboard-img{
  position: absolute;
  top: 2%;
  left: 15%;
  width: 15%;
  transform: rotate(15deg);
}

#scale-img{
  position: absolute;
  top: 8%;
  right: 8%;
  width: 10%;
  transform: rotate(10deg);
}

#pastrybag-img{
  position: absolute;
  top: 20%;
  right: 3%;
  width: 10%;
}

#mixer-img{
  position: absolute;
  top: 65%;
  left: 7%;
  width: 25%;
  transform: rotate(25deg);
}

#yummy-img{
  position: absolute;
  top: 70%;
  left: 60%;
  width: 15%;
  transform: rotate(-15deg);
}

#banana-img{
  position: absolute;
  top: 70%;
  right: 10%;
  width: 15%;
}

#peach-img{
  position: absolute;
  top: 80%;
  right: 5%;
  width: 8%;
}


/* ABOUT */
#about{
  margin: 8rem 0;
  padding: 0 10%;
  display:flex;
  flex-flow: column;
  gap: 5.6rem;
}

.front-title{
  text-align: center;
}

.main-description p{
  font-family: "Kiwi Maru", serif;
  font-size: 2rem;
  font-weight: 400;
  text-align: center;
  line-height: 160%;
}

#cookies-line{
  display: flex;
  justify-content: center;
  gap: 5%;
}

.cookie{
  object-fit: contain;
  max-width: 8rem;
  min-width: 0;
}

.character_description-container{
  display: flex;
  justify-content: center;
  gap: 4%;
}

.character{
  object-fit: contain;
  max-width: 27rem;
}

.description-title{
  min-width: 0;
  font-size: 3.6rem;
  color: #543B1B;
  background-color: transparent;
}

.links-container{
  display: flex;
  justify-content: center;
  gap: 5%;
}

.front-button{
  border: 1px solid  #876A44;
  background-color: transparent;
  font-size: 1.6rem;
  overflow: hidden;
  position: relative;
  transition-duration: .4s;
  z-index: 2;
}

.front-button:hover{
  color: #ffffff;
  background-color: #543B1B;
  transform: translateY(4px);
  box-shadow: none;
}

/* INFORMATION */
#information{
  margin: 8rem 0;
  padding: 8rem 10%;
  display:flex;
  flex-flow: column;
  gap: 8rem;
  background-color: #F5E2CF;
}

.information-container{
  display: flex;
  justify-content: space-between;
}

.information-container h6{
  font-size: 2.4rem;
}

.informations-box{
  display: flex;
  flex-flow: column;
  width: 60%;
}

.info{
  display: flex;
  align-items: center;
  gap: 8rem;
  border-top: 1px solid #DBC6A9;
  border-bottom: 1px solid #DBC6A9;
  padding: 1.2rem 4%;
  margin: 0.8rem 0;
}

.info_post_small{
  display: flex;
  position: relative;
  flex-flow: column;
  gap: 0;
  margin-right: 4rem;
}

.info .info_post_small::after {
	position: absolute; /*--positionを追加--*/
	top: 0;
	left: 150%;
	margin: 0 1rem;
	content: "";
	width: 2px; /*--縦線の太さ(幅)--*/
	height: 100%;
	background-color: #876A44; /*--縦線の色--*/
}

.post-date{
  font-size: 3.2rem;
}

.info_post_small_title{
  font-family: "Noto Sans JP", serif;
  font-size: 2rem;
  font-weight: 400;
}

.info_post_small_title a:hover {
  color: #543B1B;
}

#gallery{
  margin: 8rem 0;
  padding: 8rem 10%;
  background-color: #FEF1E5;
}

.feed{
  margin: 5.6rem 0;
}

/**********
6. Information 
**********/

#informations{
  margin: 13.5rem 0 2.4rem 0;
  padding: 0 10%;
}

.cats-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  margin: 4.8rem 0;

}

.category-button {
  padding: 0.8rem 1.6rem;
  border: 1px solid #876A44;
  border-radius: 50px;
}

.category-button.active {
  background-color: #876A44; /* 選択中のカテゴリ用の背景 */
  color: #FEF1E5;               /* 選択中の文字色 */
}

.category-button:hover {
  color: #ffffff;
  background-color: #543B1B;

}


/* pagenation */
.news-pagination{
  margin-bottom: 13.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.news-pagination > * + * {
margin-left: 8px;
}

.page-numbers{
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  overflow: hidden;
  border: solid 2px #876A44;
  font-size: 1.4rem;
  font-weight: bold;
  transition: all 0.15s linear;
}

.page-numbers.current{
  background: #876A44;
  color: #fff;
  pointer-events: none;
}

.page-numbers:not(.current):hover {
  background: #876A44;
  color: #fff;
}

.p-single-content-pager{
  margin-bottom: 13.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.p-single-content-pager__inner >a{
  margin: 5px;
}



/***********
.Postdetail 
*************/

#postdetail{
  margin: 13.5rem 0;
  padding: 0 10%;
}

.news-detail-title::before  {
  content: "";
  display: inline-block;
  width: 3.2rem;
  height: 4.3rem;
  background-image: url('../images/title-cupcake.png');
  background-position: center;
  background-size: contain;
}



/***********
.SPsize
***********/
@media (max-width: 860px){
/* 画面サイズが768px未満の場合の設定 */
h1{
    font-size: 3.2rem;
}

h2{
    font-size: 2.4rem;
}

h3{
    font-size: 2rem;
}

h4{
    font-size: 2rem;
}

h5{
    font-size: 1.8rem;
}

h6{
    font-size: 1.8rem;
}

#nav-pc{
    display: none;
  }

#nav-sp{
    display: block;
  }

.cover{
  margin-top: 10.8rem;
}

#main-visual{
  object-fit: cover;
  width: 80vw;
  height: 60vh;
  aspect-ratio: 3 / 4;/* アスペクト比 */
  margin: 0 auto;
  border-radius: 120px ;
}

.links-container{
  flex-flow: column;
  align-items:center;
  gap: 2.4rem;
}

.info_post_small_title{
  font-size: 1.6rem;
}

.post-date {
  font-size: 2rem;
}

.cats-container {
  flex-flow: column;
  align-items: flex-start;
  gap: 1.4rem;
  font-size: 1.6rem;
}

/* hamburger-menu */

.hamburger {
    display: block;
    height: 60px;
    margin-left: auto;
    position: relative;
    z-index: 10;
    width: 60px;
    border: none;
    background-color: transparent;
}

.hamburger.-active .hamburger__line {
    background-color: transparent;
}

.hamburger.-active .hamburger__line::before {
    top: 0;
    transform: rotate(45deg);
}

.hamburger.-active .hamburger__line::after {
    top: 0;
    transform: rotate(-45deg);
}

.hamburger.-active .hamburger__text::before {
  content: '閉じる';
}

.hamburger__line {
    display: block;
    height: 2px;
    position: absolute;
    top: 23px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    background-color: #172e59;
    transition: 0.4s;
}

.hamburger__line:before,
.hamburger__line:after {
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    width: 100%;
    background-color: #172e59;
    transition: inherit;
}

.hamburger__line:before {
    top: -6px;
}

.hamburger__line:after {
    top: 6px;
}

.header__nav-area {
    position: fixed;
    top: 0;
    left: -100%;
    z-index: 9;
    height: 100vh;
    width: 100vw;
    visibility: hidden;
    padding-top: 60px;
    background-color: #F5E2CF;
    transition: 0.4s;
}

.header__nav-area.-active {
  left: 0;
  visibility: visible;
}

.global-navigation {
    padding-top: 40px;
    padding-right: 25px;
    padding-bottom: 120px;
    padding-left: 25px;
}

.global-navigation__list{
  display: flex;
  flex-flow: column;
  gap: 3.6rem;
  justify-content: center;
  align-items: center;
}

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

.ham-container{
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  padding: 0.8rem 1.6rem;
}



.nav-item-desc{
  font-size: 1.2rem;
  color: #876A44;
}

.character_description-container{
  flex-flow: column;
  gap: 4rem;
  align-items: center;
}

#information{
  gap: 4rem;
}

.information-container{
  flex-flow: column;
  gap: 2.4rem;
}

.informations-box {
  width: 100%;
}

#footer-nav {
  flex-flow: column;

}

#logo-footer{
  transform: translate(-50%, -120%);
}
}