@charset "utf-8";

/* ----------------------------------------------------
  h2
---------------------------------------------------- */
.eachTextAnime span{opacity: 0;}
.eachTextAnime.appeartext span{ animation:text_anime_on 1s ease-out forwards; }
@keyframes text_anime_on {
	0% {opacity:0;}
	100% {opacity:1;}
}	

/* ----------------------------------------------------
  ローディング
---------------------------------------------------- */
.fadeUp{
  animation-name: fadeUpAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.start {
  background: #f9f8f6;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 9999;
}

.start img {
  width: 40vw;        /* 画面幅の40% */
  max-width: 392px;   /* 上限 */
  min-width: 200px;   /* 下限 */
  height: auto;
}

/* 小さいスマホ用 */
@media only screen and (max-width: 480px) {
  .start img {
    width: 80vw;  /* 画面幅の60%に拡大 */
    max-width: none;
  }
}

.start p {
  position: fixed;
  left: 50%;
  top: 48%;
  transform: translate(-50%,-50%);
  display: none;
  z-index: 9999;
}

.loading {
  font-family: "Literata", serif;  
  position: fixed;
  top: 69%;
  transform: translate(-50%,-50%);
  display: none;
  z-index: 9999;
  left: 50%;
  color: #d2b07f;
  font-size: 28px;
}

.loading span {
  display: inline-block;
  margin: 0 -.075em 50px;
  animation: loading .7s infinite alternate;
}
.loading span:nth-child(2) {animation-delay: .1s;}
.loading span:nth-child(3) {animation-delay: .2s;}
.loading span:nth-child(4) {animation-delay: .3s;}
.loading span:nth-child(5) {animation-delay: .4s;}
.loading span:nth-child(6) {animation-delay: .5s;}
.loading span:nth-child(7) {animation-delay: .6s;}

@keyframes loading {
  0% { transform: scale(1); }
  100% { transform: scale(0.8); }
}
/* ----------------------------------------------------
  画像スライド
---------------------------------------------------- */
/* 右からの無限ループ */
@keyframes infinity-scroll-left {
from {
  transform: translateX(0);
}
  to {
  transform: translateX(-100%);
}
}
.scroll-infinity__list--left {
  animation: infinity-scroll-left 100s infinite linear 0.5s both;
}
.scroll-infinity__wrap {
  display: flex;
  overflow: hidden;
}
.scroll-infinity__list {
  display: flex;
  list-style: none;
  padding: 0
}
.scroll-infinity__list--left {
  animation: infinity-scroll-left 100s infinite linear 0.5s both;
}

.scroll-infinity__item {
  width: calc(100vw / 3);
}
@media print, screen and (min-width: 992px) {
  .scroll-infinity__item {
    width: calc(100vw / 5);
  }
}

.scroll-infinity__item>img {
  width: 100%;
}

/* ----------------------------------------------------
  円のテキストアニメ
---------------------------------------------------- */
.circleyou_box{
  position: relative;
}

@media only screen and (max-width: 767px) {
.circleText_area_02{
  position: absolute;
	z-index: 1;
	max-width: 130px;
	max-height:130px;  
	bottom: -10px;
	left: 40%;
  right:40%;
  transition: all 0.3s ease;
	}
}
@media print, screen and (min-width: 768px){
.circleText_area_02 {
  position: absolute;
	z-index: 1;  
	bottom: -20px;
  width: 200px;
  height:200px;
  margin: auto;
	left: 40%;
  right:40%;
  transition: all 0.3s ease;
  }
}
@media print, screen and (min-width: 1200px){
.circleText_area_02 {
	bottom: -40px;
  width: 250px;
  height:250px;
	left: 30%;
  right:30%;  
  }
}

.circleText_02 {
  overflow: visible;
  animation: rotation 24s linear infinite; /* 数値が大きいとスピードが遅くなる */
 } 
.circleText__circle_02 {
  fill: none;
}
.circleText__text_02 {
  fill: #d2b07f;
  font-family: "Literata", serif;  
  font-size: 7.7px;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ----------------------------------------------------
  拡大
---------------------------------------------------- */
.zoomIn{
	animation-name:zoomInAnime;
	animation-duration:1.0s;
	animation-fill-mode:forwards;
}

@keyframes zoomInAnime{
  from {
	transform: scale(0.85);
  }

  to {
      transform: scale(1);
  }
}

/* ----------------------------------------------------
  ぼかしから出現
---------------------------------------------------- */
.blur{
	animation-name:blurAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}

@keyframes blurAnime{
  from {
	filter: blur(10px);
	transform: scale(1.02);
  }

  to {
	filter: blur(0);
	transform: scale(1);
  }
}

/* ----------------------------------------------------
  文字スライド
---------------------------------------------------- */
.marquee {
  font-family: "Literata", serif;
  overflow: hidden;
  display: flex;
  color: #ebe3d8;
  padding:25px 0 30px 0;
}
.marquee-inner {
  display: flex;
  white-space: nowrap;
  animation: marquee 25s linear infinite;
}
.marquee-inner span {
  padding-right: 50px;
  font-size: 50px;
  line-height: .9;
  margin-top: -0.1em;
  }

@media print, screen and (min-width: 768px) {
.marquee {
  padding: 65px 0 80px 0;
}
.marquee-inner span {
  font-size: 9em;
  }
}

@media print, screen and (min-width: 1200px) {
.marquee {
  padding: 85px 0 100px 0;
}
.marquee-inner span {
  font-size: 17rem;
  }
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ----------------------------------------------------
  オンマウスでぐるっと円を描くボタン
---------------------------------------------------- */
.maru-button_02 {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #d2b07f !important;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
}
.maru-icon_02 {
  width: 45px;
  height: 45px;
  position: relative;
  flex-shrink: 0;
}
.maru-icon_02 svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.maru-icon_02 circle.bg {
  stroke: #d2b07f; /* 背景の円の色 */
  stroke-width: 2;
  fill: none;
}
.maru-icon_02 circle.fg {
  stroke: #402012; /* アニメで描かれる円の色 */
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 125.66;
  stroke-dashoffset: 125.66;
  transition: stroke-dashoffset 0.6s ease;
}
.maru-button_02:hover .maru-icon_02 circle.fg {
  stroke-dashoffset: 0;
}

/* 中央矢印 */
.maru-icon_02 .arrow {
  position: absolute;
  top: 48%;
  left: 51%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  color: #d2b07f; /* 矢印の色 */
  pointer-events: none;
}
.maru-button_02:hover .maru-icon_02 .arrow {
  color: #402012; /* オンマウスで変更　矢印の色 */
}

/* ----------------------------------------------------
  タブ切り替え
---------------------------------------------------- */
.js-tab{margin-bottom: 8px;}
.nav-tabs {border-bottom: 0px}
.nav-tabs > li{margin-right: 5px;}
.nav-tabs i{margin-left: 5px;}

.nav-tabs > li > a,
.nav-tabs > li > a:focus {
	display: block;
	color: #fff; /* タブ文字色 */
	text-align: center;
  background-color: #937764; /* タブ背景色 */
	font-size: 12px;
  padding: 8px 15px;
  border-radius: 10px;
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;  
	}
.nav-tabs > li > a:hover,
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
	display: block;
	color: #fff; /* タブ文字色 */
	text-align: center;
  background-color: #402012; /* タブ背景色 */
	font-size: 12px;
  padding: 8px 15px;
  border-radius: 10px;
}

@media print, screen and (min-width: 768px)  {
.js-tab{margin-bottom: 20px;} 
.nav-tabs > li{margin-right: 5px;}
.p-news .nav-tabs::before,
.p-news .nav-tabs::after {display: none;}

.nav-tabs > li > a,
.nav-tabs > li > a:focus {
	font-size: 14px;
  padding: 10px 30px;
	}
.nav-tabs > li > a:hover,
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
	font-size: 14px;
  padding: 10px 30px;
	}
}

/* お知らせ
---------------------------------------------------- */
/* 共通 */
.news_area{
  background: #f7f5f2;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 10px;
  position: relative;
  transition: box-shadow .3s ease;　/* 変化時シャドウ */
}

/* リンクありの記事（aにつくクラス） */
.news_area_link{
  display: block;
  text-decoration: none;
  color: inherit;
}

/* リンクありの場合　右に余白 */
.news_area_link .news_area {
  padding-right: 65px;
}
@media print, screen and (min-width: 768px) {
.news_area_link .news_area {
  padding-right: 130px;
  }
}

.news_area_link:hover .news_area{
  box-shadow: 0px 0px 5px 0px rgba(64,32,18,0.2);
}

.news_link_arrow{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50px;
  background: #937764;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0 10px 10px 0;
  transition: background .3s ease;
}

@media print, screen and (min-width: 768px) {
.news_link_arrow{
  width: 100px;
  }
}

.news_link_arrow::before {
  content: "";
  width: 14px;
  height: 14px;
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
  transform: rotate(-45deg);
  display: block;
  transition: transform .3s ease;
}

/* 背景暗く */
.news_area_link:hover .news_link_arrow{
  background: #402012;
}

/* 矢印スライド */
.news_area_link:hover .news_link_arrow::before{
  transform: translateX(5px) rotate(-45deg);
}

/* デフォルトは非表示 */
.news_link_arrow {
  display: none;
}

/* リンクの場合　表示 */
.news_area_link .news_link_arrow {
  display: flex;  /* もともとの flex 指定を反映 */
}

/* 記事　詳細 */
.news_ctgr{
  display: inline-block;
  color: #fff;
  font-size: 13px;
  line-height: 20px;
  border-radius: 100px;
  padding:5px 15px;
  margin:0 8px 4px 0;
}
.news_day{
  display: inline-block;
  color: #937764;
  font-size: 13px;
  margin:0 8px 4px 0;
}
.news_new{
  display: inline-block;
  color: #937764;
  font-size: 13px;
  margin:0 0 4px 0;
}

@media print, screen and (min-width: 768px) {
.news_ctgr{
  margin:0 15px 6px 0;
}
.news_day{;
  margin:0 15px 6px 0;
}
.news_new{
  margin:0 0 8px 0;
  }
}