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

　   COMMON

--------------------------------------------------------------------------------------------- */

@media only screen and ( max-width : 991px ) {
  h2.top-ttl {
    font-size: 24px;
  }
  h2.ttl{
  text-align: center;
  font-size: 20px;
  margin: 2%;
  }
}

@media only screen and ( max-width : 767px ) {
  h2.top-ttl {
    font-size: 24px;
  }
  
  h2.ttl{
    text-align: center;
    font-size: 20px;
    margin: 2%;
  }
}

@media only screen and ( max-width : 575px ) {
  h2.top-ttl {
    font-size: 20px;
  }
  
  h2.ttl{
    text-align: center;
    font-size: 18px;
    margin: 2% 0% 4% 0%;
  }

  h3{
    font-size: 16px;
    border-bottom: solid 1px;
  }
  
  p{
  font-size: 14px;
  }
}

@media print, screen and ( min-width : 992px ) {
  h2.top-ttl {
    font-size: 24px;
  }
  h2.ttl{
    text-align: center;
    font-size: 36px;
    margin: 2%;  
  }
  h3{
    text-align: center;
    font-size: 28px;
  }
}

@media only screen and ( max-width : 575px ) {
  .japantcg{
    margin-top: 5%;
    margin-bottom: 5%;  
  }
}

@media only screen and ( min-width : 576px ) {
  .japantcg{
    margin-top: -2%;
    margin-bottom: 5%;  
  }
}

.top-ttl {
  display: flex;
  align-items: center;
  justify-content: center;
}

.top-ttl:before, .top-ttl:after{
  border-top: 1px solid #000000;
  content: "";
  flex-grow: 1;
}

.top-ttl:before{
  margin-right: 16px;
}

.top-ttl:after{
  margin-left: 16px;
}


.expert{
  width: 100%;
}



.prohoider{
  width: 80%;
  margin: 0 auto;
}

.nihonkantei{
  padding: 5%;
  margin-bottom: 2%;
}
  
.collection{
  background-color: rgb(0, 0, 0);
  padding-top: 5%;
  padding-bottom: 5%;
  color: white;
}

h2.top-ttl{
  font-size: 20px;
  text-align: center;
}

p{
  text-align: justify;
}


/* ---------------------------------------------------------------------------------------------

　   MV

--------------------------------------------------------------------------------------------- */

.mv-img {
  position: relative;/*相対配置*/
}

.mv-img img {
  width: 100%;
  height: 750px;
  object-fit: cover;
}

.mv-txt{
  position: absolute;
  color: white;
  top: 10%;
  width: 80%;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.4);
  letter-spacing: 0.1rem; 
  text-align: left;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}

p.sub-catch{
  text-align:left;
  font-size: 24px;
}

@media only screen and ( max-width : 575px ) {
  p.sub-catch{
    text-align:left;
    font-size: 18px;
  }
}

@media print, screen and ( min-width : 576px ) {
  p.sub-catch{
    text-align:left;
    font-size: 24px;
  }
}

p.txt{
  text-align: left;
  margin-bottom: 3%;
  text-align: justify;
}

p.txt-mini{
  text-align: left;
  margin-bottom: 1%;
  text-align: justify;
  font-size: 12px;
}

/* ===== フェードインアニメーション ===== */
@keyframes info-fadeIn {
	0% { opacity: 0; transform: translateY(10px); }
	100% { opacity: 1; transform: translateY(0); }
}

/* ===== ガラスカード（INFORMATION / お知らせ） ===== */
.notice-card {
	position: relative;
	width: 92%;
	max-width: 760px;
	margin: 40px auto 0;
	background: rgba(255, 255, 255, 0.93);
	backdrop-filter: blur(10px) brightness(3);
	-webkit-backdrop-filter: blur(10px) brightness(3);
	padding: 24px 28px; 
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.40);
	box-shadow: 0 5px 16px rgba(0,0,0,0.10);
	text-shadow: none;
	
	opacity: 0;
	animation: info-fadeIn 0.8s ease-out 0.2s forwards;
}

.notice-heading {
	margin-bottom: 12px;
	letter-spacing: normal;
}

.notice-heading .en {
	font-size: 0.65rem; 
	letter-spacing: 0.15em;
	font-weight: 600;
	color: #666;
	margin-bottom: 2px;
}

.notice-heading .ja {
	font-size: 1.05rem;
	font-weight: 700;
	color: #111;
}

.notice-content {
	font-size: 0.9rem;
	line-height: 1.65;
	color: #222;
	letter-spacing: 0.01em;
	white-space: pre-wrap;
	word-break: break-all;
}

/* ===== レスポンシブ ===== */
@media (max-width: 768px) {
	.notice-card {
		padding: 20px 22px;
	}
	.notice-heading .ja {
		font-size: 0.98rem;
	}
	.notice-content {
		font-size: 0.87rem;
		line-height: 1.6;
	}
}

@media (max-width: 480px) {
	.notice-card {
		padding: 18px 20px;
	}
	.notice-heading .ja {
		font-size: 0.92rem;
	}
	.notice-content {
		font-size: 0.85rem;
	}
}


.slider .slick-slide:not(.slick-center) {
  -webkit-filter: opacity(60%);
  -moz-filter: opacity(60%);
  -o-filter: opacity(60%);
  -ms-filter: opacity(60%);
  filter: opacity(60%);
  transition: 0.2s linear;
  }
.slider li {
  position: relative;
  }
.slider_txt {
  position: absolute;
  top: -15px;
  left: 10px;
  padding: 0 1rem;
  color: #fff;
  background: #000;
  letter-spacing: .1em;
}
.slick-slide {
  margin: 10px;
  }
.slick-slide img {
  width: 100%;
  }

@media only screen and ( max-width : 991px ) {
  .mv_txt p {
  font-size: 38px;
  }
  .slider_txt {
  font-size: 20px;
  }
  .catch {
  font-size:48px;
  }
}

@media only screen and ( max-width : 767px ) {
  p.txt{
  font-size: 12px;
  }
  .mv_txt p {
  font-size: 34px;
  }
  .catch {
  font-size: 36px;
  }
}

@media only screen and ( max-width : 575px ) {
  .catch {
    font-size: 22px;
  }
  p.txt{
    font-size: 14px;
  }
  
  .mv_txt p {
    font-size: 18px;
  }
  .mv_txt p span {
    display: block;
    text-align: center;
  }
  p.subcatch{
  text-align:left;
  font-size: 14px;
  margin: 2% 0% 2% 0%;
  font-weight: 700;
  }
}

@media print, screen and ( min-width : 992px ) {
  .catch {
  font-size:48px;
  }
  .mv_txt p {
    font-size: 50px;
  }
  .slider_txt {
    font-size: 30px;
  }
}

/*
右から左へ
----------------------------*/
@keyframes infinity-scroll-left {
  from {
  transform: translateX(0);
  }
  to {
  transform: translateX(-100%);
  }
}

/*
IE11対策
----------------------------*/
_:-ms-lang(x)::-ms-backdrop,
.d-demo {
  display: -ms-grid;
  overflow: hidden;
}
/*----------------------------*/

.d-demo-wrap {
  display: flex;
  overflow: hidden;
  bottom: 1%;
  width: 100%;
  height: auto;
}

.d-demo-list {
  display: flex;
  list-style: none;
}

.d-demo-list-left{
  animation :infinity-scroll-left 60s infinite linear 0.5s both;
}

.d-demo-item {
  width: calc(100vw / 10);
}
.d-demo-item > img{
   width: 100%;
   padding-right: 5%;
   height: auto;
}


.ph_img{
  margin: 0 auto;
  text-align: center;
  width: 50%;
  padding-top: 10%;
  padding-bottom: 10%;
  }


.logo_img{
  margin: 0 auto;
  text-align: center;
  width: 10%;
  padding-top: 6%;
  padding-bottom: 8%;
  }


    
.hd-wrapper{
  display: flex;
  justify-content: center;
}

.hd_img{
  width: 16.66%;
  padding-top: 6%;
  padding-right: 1%;
  padding-bottom: 10%;
  float: left;
  }
  
section.kanteisho{
  clear: both;
  padding-top: 4%;
  width: 80%;
  margin: 0 auto;
}

.bc-img{
  width: 100%;
  padding-top:2%;
}

.bc-img img{
    width: 100%;
    margin: 0 auto;
}

.top-cards {
  display: flex;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  justify-content: space-between;
}

.top-cards-item {
  margin: 20px auto;
  padding: 15px 30px;
  border: solid 1px;
  border-radius: 50px;
  text-align: center;
}

@media only screen and ( max-width : 991px ) {
  .top-cards-item {
    width: 80%;
  }
}

@media print, screen and ( min-width : 992px ) {
  .top-cards-item {
    width: 40%;
  }
}


/* ---------------------------------------------------------------------------------------------

　   NEWS

--------------------------------------------------------------------------------------------- */
.top_news {
  display: flex;
  align-items: center;
  flex-direction: column;
}
#top_news_list li {
  margin-bottom: .5rem;
  text-align: left;
}
#top_news_list li a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: #231f20;
}

#top_news_list li a:hover {
  opacity: 0.6;
}
.news_time {
  margin-right: 2.5rem;
}
@media only screen and ( max-width : 991px ) {
  #top_news {
    margin: 30px 0;
  }
  #top_news_list li a {
    font-size: 20px;
  }
}

@media only screen and ( max-width : 767px ) {
}

@media only screen and ( max-width : 575px ) {
  #top_news_list li a {
    font-size: 18px;
  }
}

@media print, screen and ( min-width : 992px ) {
  #top_news_list li a {
    font-size: 24px;
  }
}

@media only screen and ( max-width : 771px ) {
  .mv-img img {
    height: 1350px;
  }
  
  .top-entry {
    display: block;
    margin: 16px auto;
    width: 280px;
  }
}