@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-image: url("../images/bg_paper_01.jpg") !important; /* 背景 */
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 9999;
}

.start img {
  max-width: 340px;
  min-width: 300px;
  height: auto;
}

/* 小さいスマホ用 */
@media only screen and (max-width: 480px) {
  .start img {
    width: 60vw;
    max-width: none;
  }
}

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

.loading {
  color: #d0aa4e; /* 文字色 */  
  font-family: "Cormorant Garamond", serif;
  position: fixed;
  top: 69%;
  transform: translate(-50%,-50%);
  display: none;
  z-index: 9999;
  left: 50%;
  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); }
}


/* ----------------------------------------------------
  slick-slider
---------------------------------------------------- */
.slider {width:94%;	margin:0 auto;}
.slider .slick-slide {margin:0 10px;}
.slick-prev, 
.slick-next {
    position: absolute;
    top: 42%;
    cursor: pointer;
    outline: none;
    border-top: 2px solid #111;
    border-right: 2px solid #111;
    height: 15px;
    width: 15px;
}
.slick-prev {left: -1.5%; transform: rotate(-135deg);}
.slick-next {right: -1.5%;transform: rotate(45deg);}
.slider {width:94%; margin:0 auto;}
.slider .slick-slide {margin:0 20px;}
.slick-prev, 
.slick-next {
    position: absolute;
    top: 42%;
    cursor: pointer;
    outline: none;
    border-top: 2px solid #111;
    border-right: 2px solid #111;
    height: 15px;
    width: 15px;
}
.slick-prev {left: -1.5%; transform: rotate(-135deg);}
.slick-next {right: -1.5%; transform: rotate(45deg);}

/* 日付
---------------------------- */
.slider_card_area_day{
  margin-bottom: 4px;
}

/* photo
---------------------------- */
.slider_card_area_photo {
	height: 0;
	display: block;
	overflow: hidden;
	position: relative;
	padding-bottom: 75%;
	background: #eee;
  margin-bottom: 9px;
}
.slider_card_area img {
	max-width: inherit;
	max-height: inherit;
	width: 100%;
	height: 100%;
	object-fit: scale-down;
	font-family: 'object-fit: scale-down;';
	position: absolute;
	left: 0;
	top: 0;
}

/* タグ
---------------------------- */
.slider_card_area_tag{
  display: inline-block;
  font-size: 15px;
  padding: 1px 8px;
  margin-bottom: 3px;
}

.tag_color{
  color: #fff;  
  background: #52606e;
}

/* text
---------------------------- */
.slider_card_area_text{
  margin-bottom: 10px;
}

.slider_card_area_text a:link,
.slider_card_area_text a:visited{text-decoration:none; color:#222;}

.slider_card_area_text a:hover,
.slider_card_area_text a:active{text-decoration:underline; color:#222;}



/* ----------------------------------------------------
  h2
---------------------------------------------------- */
.h2_midasi_01{
  padding:30px 0;
  color: #fff;
  text-align: center;
  transition: all 0.3s ease;
}

.h2_02{background:url("../images/h2_02.jpg") no-repeat scroll 50% 0% / cover;}
.h2_03{background:url("../images/h2_03.jpg") no-repeat scroll 50% 0% / cover;}
.h2_04{background:url("../images/h2_04.jpg") no-repeat scroll 50% 0% / cover;}
.h2_05{background:url("../images/h2_05.jpg") no-repeat scroll 50% 0% / cover;}
.h2_06{background:#333}
.h2_07{background:url("../images/h2_07.jpg") no-repeat scroll 50% 0% / cover;}
.h2_08{background:url("../images/h2_08.jpg") no-repeat scroll 50% 0% / cover;}

@media print, screen and (min-width: 768px) {.h2_midasi_01{padding:40px 0 55px 50px; text-align: left;}}
@media print, screen and (min-width: 992px) {.h2_midasi_01{padding:40px 0 55px 65px;}}

.h2_midasi_01_bgimg {
  position: relative;
  color: white;
  z-index: 0;
  overflow: hidden;
}
.h2_midasi_01_bgimg::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: -1;
}


.h2_midasi_01 p::first-letter {	color: #d0aa4e;}

.h2_midasi_01 p{
	font-size: 40px;
	line-height: 50px;
	letter-spacing: 2px;
  font-weight: 400;
	}
.h2_midasi_01 h2{
	font-size: 18px;
	letter-spacing: 2px;
  font-weight: 600;
}
@media print, screen and (min-width: 768px) {
.h2_midasi_01 p{
	font-size: 55px;
	line-height: 65px;
	letter-spacing: 3px;  
	}
.h2_midasi_01 h2{
	font-size: 22px;
	letter-spacing: 5px;
	}
}
@media print, screen and (min-width: 992px) {
.h2_midasi_01 p{
	font-size: 80px;
	line-height: 105px;
	}
.h2_midasi_01 h2{
	font-size: 25px;
	}
}

@-webkit-keyframes passing-bar{
	0% {
		left: 0;
		right: auto;
		width: 0;
	}
	50% {
		left: 0;
		right: auto;
		width: 100%;
	}
	51% {
		left: auto;
		right: 0;
		width: 100%;
	}
	100% {
		left: auto;
		right: 0;
		width: 0;
	}
}
@keyframes passing-bar{
	0% {
		left: 0;
		width: 0;
	}
	50% {
		left: 0;
		width: 100%;
	}
	51% {
		left: 0;
		width: 100%;
	}
	100% {
		left: 100%;
		width: 0;
	}
}
@-webkit-keyframes passing-txt{
	0% { opacity: 0; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes passing-txt{
	0% { opacity:0; }
	50% { opacity:0; }
	100% { opacity:1; }
}
/* css */
.passing .passing-box {
	display: block;
}
.passing .passing-bar {
	position: relative;
	display: inline-block;
	-webkit-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.passing .passing-bar:before {
	content: '';
	display: inline-block;
	width: 0;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	background: #222;/* 帯の色 */
}
.passing .passing-txt {
	opacity: 0;
	-webkit-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.passing.move .passing-bar:before {
	-webkit-animation: passing-bar 1s ease 0s 1 normal forwards;
	animation: passing-bar 1s ease 0s 1 normal forwards;
}
.passing.move .passing-txt {
	-webkit-animation: passing-txt 0s ease .5s 1 normal forwards;
	animation:passing-txt 0s ease .5s 1 normal forwards;
}

/* ----------------------------------------------------
  円を描くボタン
---------------------------------------------------- */
.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: #d0aa4e !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: #d0aa4e; /* 初期　丸の色 */
  stroke-width: 2;
  fill: none;
}
.maru_icon_02 circle.fg {
  stroke: #fff; /* ホバー　丸の色 */
  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: #d0aa4e; /* 初期　矢印の色 */  
}
.maru_button_02:hover .maru_icon_02 .arrow {
  color: #fff; /* ホバー　矢印の色 */
}


/* ----------------------------------------------------
  帯からのテキスト出現
---------------------------------------------------- */
/* 1
--------------------------- */
.animated__colorBox {
  position: relative;
  white-space: nowrap;
  width: fit-content;
  clip-path: inset(0 100% 0 0);
  color: #fff;
  background-color: #d0aa4e;
  font-size: 20px;
  padding:9px 10px 10px 15px;
  letter-spacing: 2px;
  text-align: center;
  margin:0 auto;
}

.animated__colorBox::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #222;
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}

.animated__colorBox.js-show {
  animation: 0.8s forwards ease-in-out textView;
}

.animated__colorBox.js-show::after {
  animation: 0.8s forwards ease-in-out colorBox;
}

/* keyframes
--------------------------- */
@keyframes textView {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes colorBox {
  0%, 50% {
    transform-origin: 0 50%;
  }
  60%, 100% {
    transform-origin: 100% 50%;
  }
  60% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}


/* ----------------------------------------------------
   linkbox
---------------------------------------------------- */
.arrow-button{
  display:block;
  width:100%;
  padding:15px 10px 40px 10px;
  border-radius: 15px;
  background:#fff;
  color:#5f655b;
  text-decoration:none;
  box-sizing:border-box;
  position:relative;
  border:1px solid #eee;
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background .3s ease,
    color .3s ease;
  box-shadow:0 6px 14px rgba(0,0,0,.05);
}

/* hover */
.arrow-button:hover{
  background:#222;
  color:#fff;
  transform:translateY(-6px);
  box-shadow:0 18px 35px rgba(0,0,0,.12);
}

/* icon
--------------------------- */
.arrow-button .icon i{
  font-size: 30px;
  display:block;
  text-align: center;
  margin: 0 auto;
  padding-bottom: 10px;
}

/* button-label
--------------------------- */
.button-label{
  display:block;
  font-size:16px;
  line-height:20px;
  text-align: center;
}
.company-title{
  display:block;
  font-size:12px;
  color:#aaa;
  margin-top:4px;
}
.arrow-button:hover .company-title{
  color:#ccc;
}

/* arrow
--------------------------- */
.css-arrow{
  position:absolute;
  right:40px;
  bottom:25px;
  width:40px;
  height:1px;
  background:currentColor;
  transition:transform .3s ease;
}

.css-arrow::after{
  content:"";
  position:absolute;
  top:50%;
  right:-10px;
  transform:translateY(-50%);
  width:10px;
  height:6px;
  background:currentColor;
  clip-path:polygon(0 0,100% 50%,0 100%);
}

/* hover arrow */
.arrow-button:hover .css-arrow{
  transform:translateX(20px);
}


/* layout
--------------------------- */
/* PCで高さ揃える */
@media print, screen and (min-width: 768px) {
.arrow-button{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  width:100%;
  padding:35px 25px 55px;
  }
.button-label{
  font-size:18px;
  }
}

/* large */
@media print, screen and (min-width: 1200px) {
.arrow-button{
  padding:30px 30px 50px;
  }
.button-label{
  font-size:22px;
  }
}


/* ----------------------------------------------------
  accordion news
---------------------------------------------------- */
.new{
  color: #d0aa4e;
	font-size: 13px;
	margin-left: 10px;
}

.accordion_area{
  margin-bottom: 20px;
}

.accordion_area .accordion_one .ac_header {
  background-color: #fff;
  padding: 20px 55px 20px 20px;
  border-bottom: 1px solid #eee;
  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: #fff;}
.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) {
.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 #eee;
  border-right: 1px solid #eee;
  border-bottom: 1px solid #eee;
  box-sizing: border-box;
  background: #f7f7f7;
}
@media print, screen and (min-width: 768px) {
.accordion_area .accordion_one .ac_inner {
  padding: 1.5rem 2rem 1.5rem 2rem;
  }
}

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



/* ----------------------------------------------------
  ギャラリー
---------------------------------------------------- */
/* スライダー共通のスタイル */
.slider_container {
  box-sizing: border-box;
}
.slider_container img {
  max-width: 100%;
}

/* メインスライダーのスタイル */
#slider {
  margin-bottom: 20px; 
}
@media print, screen and (min-width: 768px) {
#slider {
  margin-bottom: 20px; 
  }
}

#slider .slick-slide {
  margin: 0 5px;　/* スライドの間隔 */
}

/* サムネイルスライダーのスタイル */
#thumbs {
  max-width:100%;
  margin:0 auto;
}

#thumbs .slick-slide {
  margin: 0 5px;　/* スライドの間隔 */
}

/* 選択中のスライドの画像に枠をつける */
#thumbs .slick-current img {
  border: 4px solid #000;
}

/* 追加：矢印のデザイン */
.slick-prev:before,
.slick-next:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900; /* solid */
  font-size: 30px !important;
  line-height: 1;
  color: #fff;
}

/* 追加：センター画像だけ大きく表示 */
#slider .slick-slide img {
transition: transform 0.3s ease, opacity 0.3s ease;
/*  transform: scale(0.85);*/
  opacity: 0.5;
}

#slider .slick-center img {
/*  transform: scale(1);*/
  opacity: 1;
}

/* 追加：各画像ごとの説明文　*/
#slider .slide-caption{
  padding-top: 20px;
  height: 120px;
  /*background: red;*/
}

@media only screen and (max-width: 767px) {
#slider .slide-caption{
  text-align: left;
  height: 40px;
  padding:20px;
  }
#slider .slide-caption h3 {
  font-size: 16px;
  margin-bottom: 3px;
  text-align: center;
  }
#slider .slide-caption p {
  font-size: 13px;
  line-height: 18px;
  }
}

@media print, screen and (min-width: 768px) {
#slider .slide-caption{
  height: 50px;
  text-align: center;
  }
#slider .slide-caption h3 {
  font-size: 18px;
  margin-bottom: 10px;
  }
#slider .slide-caption p {
  font-size: 15px;
  line-height: 25px;
  }
}



/* ----------------------------------------------------
	  アコーディオン
---------------------------------------------------- */
.part_ctrg{padding:20px 0;}
@media print, screen and (min-width: 768px) {.part_ctrg{padding:30px 0 40px 0}}
@media print, screen and (min-width: 1200px) {.part_ctrg{padding:30px 0 30px 0}}

.accordion dt {
	display: inline-block;
	padding: 15px;
	width: 100%;
	font-weight: normal;
	color: #fff;
	background:#222;
	cursor:pointer;
}
.accordion dd{ display:none}
.accordion dd ul {
	list-style: none;
	padding: 0px;
	margin:0px;
}
.accordion dd li a {
	display: block;
	padding: 15px;
	text-align: center;
  border-bottom: 1px solid #eee;
  transition-duration: 300ms;
}

.accordion dd li a:link,
.accordion dd li a:visited,
.accordion dd li a:hover,
.accordion dd li a:active{color:#222; background: #fff;}
.accordion dd li a:hover{background:#222 !important; color:#fff !important}
.accordionIcon,
.accordionIcon span{display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
}
.accordionIcon {
	position: relative;
	width: 24px;
	height: 24px;
	float: right;
	display: block;
}
.accordionIcon span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: #fff;
}
.accordionIcon span:nth-of-type(1) {top: 0;}
.accordionIcon span:nth-of-type(2) {top: 11px;}
.accordionIcon span:nth-of-type(3) {bottom: 0;}
.active .accordionIcon span:nth-of-type(1) {
	-webkit-transform: translateY(11px) rotate(-315deg);
	transform: translateY(11px) rotate(-315deg);
}
.active .accordionIcon span:nth-of-type(2) {
	opacity: 0;
}
.active .accordionIcon span:nth-of-type(3) {
	-webkit-transform: translateY(-11px) rotate(315deg);
	transform: translateY(-11px) rotate(315deg);
}

@media print, screen and (min-width: 768px) {
  .accordion dd ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, 200px); /* 横幅300pxの列を画面に入るだけ自動で並べる 画面が広いほど列数が増え狭くなると折り返す */
    justify-content: center; /* 左右中央配置 */
    gap: 10px; /* 上下左右間隔 */
  }
  .accordion dd li {
    width: 200px;
    margin: 0;
  }
  .accordion dd li a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 2px;
    border-radius: 100px;
    border:1px solid #222 !important;
    border-bottom: 0;
    background: #fff;
    text-align: center;
    white-space: normal;
    word-break: break-word;
    box-sizing: border-box;
  }
}

@media print, screen and (min-width: 992px) {
  .accordion dd ul {
    grid-template-columns: repeat(auto-fit, 300px);
    gap: 20px; /* 上下左右間隔 */    
  }
  .accordion dd li {
    width: 300px;
  }
}

@media only screen and (max-width: 767px) {.accordion .navon {background:#eee !important; color:#222 !important}}
@media print, screen and (min-width: 768px) {.accordion .navon { background:#222 !important; color:#fff !important}}


/* ----------------------------------------------------
	  paging
---------------------------------------------------- */
.paging { text-align: center; font-size: 90%;}
.paging span.current,
.paging span.paging-text{
	margin:0px 0.5px;
	color:#333;
	border:1px solid #333;
	zoom:1;
	display:inline-block;
	overflow:hidden;
	text-decoration:none;
	background: #fff;
}
.paging span.paging-text a{
	padding:5px 8.5px;
	display:block;
	color: #333;
}
.paging span.current{
	background: #333;
	border:1px solid #333;
	color:#fff;
	zoom:1;
	padding:5px 8.5px;
	text-decoration:none;
	display:inline-block;
	cursor:pointer;
}
.paging span.paging-text a:hover{
	background: #333;
	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;}
}


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