@charset "utf-8";

/* ----------------------------------------------------
  ローディング
---------------------------------------------------- */
.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: 300px;   /* 上限 */
  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: #eeaf1b;
  font-size: 20px;
}

.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); }
}

/* ----------------------------------------------------
  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;}
}	

/* ----------------------------------------------------
  円を描くボタン
---------------------------------------------------- */
.maru_button_02 {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  color: #d1a96f !important; /* 文字の色 */  
}
.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: #d1a96f; /* 初期　丸の色 */
  stroke-width: 2;
  fill: none;
}
.maru_icon_02 circle.fg {
  stroke: #222; /* ホバー　丸の色 */
  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;
  pointer-events: none;
  color: #d1a96f; /* 初期　矢印の色 */  
}
.maru_button_02:hover .maru_icon_02 .arrow {
  color: #222; /* ホバー　矢印の色 */
}

/* ----------------------------------------------------
	   ページング
---------------------------------------------------- */
.part_paging{padding:30px 0 0 0}
@media print, screen and (min-width: 992px) {.part_paging{padding:40px 0 0 0}}

.paging { text-align: center; font-size: 90%;}
.paging span.current,
.paging span.paging-text{
	margin:0px 0.5px;
	color:#1c2d53;
	border:1px solid #1c2d53;
	zoom:1;
	display:inline-block;
	overflow:hidden;
	text-decoration:none;
	background: #fff;
  border-radius: 5px;  
}
.paging span.paging-text a{
	padding:5px 8.5px;
	display:block;
	color: #1c2d53;
}
.paging span.current{
	background: #1c2d53;
	border:1px solid #1c2d53;
	color:#fff;
	zoom:1;
	padding:5px 8.5px;
	text-decoration:none;
	display:inline-block;
	cursor:pointer;
  border-radius: 5px;
}
.paging span.paging-text a:hover{
	background: #1c2d53;
	color:#fff;
	text-decoration:none;
	cursor:pointer;
	opacity: 1;
}

@media print, screen and (min-width: 768px) {
	.paging { font-size: 100%;}
	.paging span.current,
	.paging span.paging-text{margin:0px 2px;}
	.paging span.paging-text a{padding:10px 15px;}
	.paging span.current{padding:10px 15px;}
}


/* ----------------------------------------------------
  faq
---------------------------------------------------- */
.accordion_area .accordion_one .ac_header {
  background-color: #fff;
  padding: 20px 50px 20px 20px;
  position: relative;
  z-index: +1;
  cursor: pointer;
  transition: .2s;
}

@media print, screen and (min-width: 768px) {
.accordion_area .accordion_one .ac_header {
  padding: 1.5rem 4rem 1.5rem 2rem;
  position: relative;
  }
}

.accordion_area .accordion_one1:nth-child(odd) .ac_header {background-color: #dde4f2;}
.accordion_area .accordion_one .ac_header .i_box {
  position: absolute;
  top: 50%;
  right: 1.5rem;
  width: 20px;
  height: 20px;
  margin-top: -10px;
}

@media print, screen and (min-width: 768px) {s
.accordion_area .accordion_one .ac_header .i_box {
  right: 2rem;
  }
}

.accordion_area .accordion_one .ac_header .i_box:before, .accordion_area .accordion_one .ac_header .i_box:after {
  position: absolute;
  content: "";
  margin: auto;
  box-sizing: border-box;
  vertical-align: middle;
}
.accordion_area .accordion_one .ac_header .i_box:before {
  border-top: 2px solid #665850;
  width: 20px;
  height: 0;
  top: 0;
  bottom: 0;
  right: 0;
}
.accordion_area .accordion_one .ac_header .i_box:after {
  border-left: 2px solid #665850;
  width: 0;
  height: 20px;
  top: 0;
  bottom: 0;
  right: 9px;
  transition: .3s;
}
.accordion_area .accordion_one .ac_header.open .i_box:after {
  height: 0;
}

.accordion_area .accordion_one .ac_inner {
  display: none;
  padding: 20px;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  box-sizing: border-box;
  background: #fff;
}
@media print, screen and (min-width: 768px) {
.accordion_area .accordion_one .ac_inner {
  padding: 1.5rem 2rem 1.5rem 2rem;
  }
}

/* faq
---------------------------------------------------- */
.p-faq__headinner {
  display: block;
  padding-left: 35px;
  position: relative;
  line-height: 1.5;
}
.p-faq__headinner::before {
  position: absolute;
  top:-1px;  
  left: 0;
  content: "Q．";
  color: #665850;
  font-weight: bold;
}
.p-faq__bodyinner {
  display: block;
  padding-left: 35px;
  position: relative;
  line-height: 1.5;
}
.p-faq__bodyinner::before {
  position: absolute;
  top:5px;
  left: 0;
  content: "A．";
  color: #665850;
  font-weight: bold;
}


/* faq
---------------------------------------------------- */
.p-faq__headinner_02 {
  display: block;
  position: relative;
  line-height: 1.5;
}
.p-faq__bodyinner_02 {
  display: block;
  position: relative;
  line-height: 1.5;
}


/* ----------------------------------------------------
  画像スライド
---------------------------------------------------- */
/* 右からの無限ループ 
---------------------------------------------------- */
@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__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%;
}