@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');

.h_bar, 
#beltbnr {
	display: none;
}

.clearfix:after {
  content: "";
  display: block;
  clear: both;
} 
.clearfix:before {
  content: "";
  display: block;
  clear: both;
} 
.clearfix {
  display: block;
}

/*--SP--*/
@media only screen and (max-width: 767px) {
.sp {
  display: block;
}
.pc {
  display: none;
}

main {
  width: 100%;
  overflow: hidden;
  margin: 0 auto;
  text-align: center;
  background-color: #f8f4ea;
}
main p {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 3.2vw;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0;
  color: #000;
}

.lead {
  width: calc(100% - 40px);
  margin: 30px auto 0;
  text-align: justify;
}
.lead br {
  display: none;
}

.menu {
  width: calc(100% - 40px);
  margin: 40px auto 60px;
  display: flex;
  gap: 10px;
}
.menu-icon a:hover img {
  opacity: 1 !important;
}

section {
  margin: 0 auto 60px;
}

/*--section共通--*/
.icon {
  width: 16%;
  margin: 20px auto 0;
}
.img-container {
  width: 100%;
  margin: 30px auto 0;
}
.caption {
  width: calc(100% - 40px);
  margin: 30px auto 0;
  text-align: justify;
}
.credit-all {
  width: calc(100% - 40px);
  margin: 30px auto 0;
}
.credit-all h4, 
.credit-all h5 {
  width: 15.6%;
  margin: 15px auto 0;
}
.credit-all .credit {
  margin-top: 20px;
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
}
.credit-all .credit .text p {
  line-height: 1.6;
  text-align: left;
}
.credit-all .credit .text a {
  color: #000;
  text-decoration: none;
}
.credit-all .credit .text a:hover {
  color: #666;
}
.credit-all .credit .btn a {
  width: 50px;
  height: 25px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 3.2vw;
  font-weight: 400;
  color: #000;
  text-decoration: none;
  border: 1px solid #000;
  border-radius: 20px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 1s;
}
.credit-all .credit .btn a:hover {
  background-color: #000;
  color: #fff;
}

/*--1st week--*/
#week01 .img-container {
  padding: 10px;
  background-color: #fff;
}
#week01 .img-container div:nth-child(n+2) {
  margin-top: 10px;
}

/*--3rd week--*/
#week03 .caption {
  margin: 40px auto 0;
}
#week03 .column {
  width: calc(100% - 40px);
  margin: 40px auto 0;
  border: 2px solid #000;
}
#week03 .column p {
  width: calc(100% - 40px);
  margin: 20px auto 0;
  text-align: justify;
}
#week03 .column .btn {
  margin: 30px auto 40px;
}
#week03 .column .btn a {
  padding: 2% 6%;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 3.2vw;
  font-weight: 400;
  color: #000;
  text-decoration: none;
  border: 1px solid #000;
  border-radius: 20px;
  background-color: #fff;
  transition: background 1s;
}
#week03 .column .btn a:hover {
  background-color: #000;
  color: #fff;
}

/*--5th week--*/
#week05 .caption {
  margin: 40px auto 0;
}

/*--related link--*/
.related-link {
  margin: 60px auto;
}
.related-link a {
  padding: 2% 6%;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 3.2vw;
  font-weight: 400;
  color: #000;
  text-decoration: none;
  border: 1px solid #000;
  border-radius: 20px;
  background-color: #fff;
  transition: background 1s;
}
.related-link a:hover {
  background-color: #000;
  color: #fff;
}
}

/*--PC--*/
@media only screen and (min-width: 768px) {
.sp {
  display: none;
}
.pc {
  display: block;
}

#specialty {
  width: 100%;
  background-color: #f8f4ea;
}
main {
  width: 900px;
  overflow: hidden;
  margin: 0 auto;
  text-align: center;
}
main p {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0;
  color: #000;
}

.lead {
  width: 900px;
  margin: 60px auto 0;
  text-align: center;

}
.lead br {
  display: block;
}

.menu {
  width: calc(100% - 300px);
  margin: 80px auto 120px;
  display: flex;
  gap: 40px;
}
.menu-icon a:hover img {
  opacity: 1 !important;
}

section {
  width: 600px;
  margin: 0 auto 120px;
}
.week {
  margin-top: -72px;
  padding-top: 72px;
}

/*--section共通--*/
h3 {
  width: 500px;
  margin: 0 auto;
}
.icon {
  width: 80px;
  margin: 40px auto 0;
}
.img-container {
  width: 100%;
  margin: 60px auto 0;
}
.caption {
  width: calc(100% - 40px);
  margin: 30px auto 0;
  text-align: justify;
}
.credit-all {
  width: calc(100% - 40px);
  margin: 30px auto 0;
}
.credit-all h4, 
.credit-all h5 {
  width: 80px;
  margin: 30px auto 0;
}
.credit-all .credit {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
}
.credit-all .credit .text p {
  line-height: 1.6;
  text-align: left;
}
.credit-all .credit .text a {
  color: #000;
  text-decoration: none;
}
.credit-all .credit .text a:hover {
  color: #666;
}
.credit-all .credit .text br {
  display: none;
}
.credit-all .credit .btn a {
  width: 50px;
  height: 25px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  color: #000;
  text-decoration: none;
  border: 1px solid #000;
  border-radius: 20px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 1s;
}
.credit-all .credit .btn a:hover {
  background-color: #000;
  color: #fff;
}

/*--1st week--*/
#week01 .img-container {
  padding: 10px;
  background-color: #fff;
}
#week01 .img-container div:nth-child(n+2) {
  margin-top: 10px;
}

/*--3rd week--*/
#week03 .caption {
  margin: 40px auto 0;
}
#week03 .column {
  width: calc(100% - 80px);
  margin: 40px auto 0;
  border: 2px solid #000;
}
#week03 .column img {
  width: calc(100% - 80px);
}
#week03 .column p {
  width: calc(100% - 80px);
  margin: 20px auto 0;
  text-align: justify;
}
#week03 .column .btn {
  margin: 30px auto 40px;
}
#week03 .column .btn a {
  padding: 1% 3%;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  color: #000;
  text-decoration: none;
  border: 1px solid #000;
  border-radius: 20px;
  background-color: #fff;
  transition: background 1s;
}
#week03 .column .btn a:hover {
  background-color: #000;
  color: #fff;
}

/*--5th week--*/
#week05 .caption {
  margin: 40px auto 0;
}

/*---related link-*/
.related-link {
  margin: 120px auto;
}
.related-link a {
  padding: 1% 3%;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  color: #000;
  text-decoration: none;
  border: 1px solid #000;
  border-radius: 20px;
  background-color: #fff;
  transition: background 1s;
}
.related-link a:hover {
  background-color: #000;
  color: #fff;
}
}

/*--slick カスタマイズ--*/
.slick-dots {
  bottom: -30px !important;
}
.slick-dots li {
  margin: 0 !important;
}
.slick-dots li button:before {
  font-size: 10px !important;
  opacity: 1 !important;
  color: #ccc !important;
}
.slick-dots li.slick-active button:before {
  opacity: 1 !important;
  color: #52baf6 !important;
}

/*アニメーション*/
.fadeIn {
  opacity: 0;
  transition: 2.5s;
}
.fadeIn.show {
  opacity: 1;
}

.anime {
  -webkit-animation-name: anime1;
  animation-name: anime1;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-transform-origin: top center;
  transform-origin: top center;
}
@keyframes anime1 {
  20% { -webkit-transform: rotate(15deg); transform: rotate(15deg); }
  40% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); }
  60% { -webkit-transform: rotate(5deg); transform: rotate(5deg); }
  80% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); }
  100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
}