@charset "utf-8";
/****** トップページ CSS ******/
/*========= pc 全画面(1280px～960px） ===============*/
/*========= TOPスライド =========*/
.swiperTop{
	position: relative;
	top: 0;
	height: 100vh;
	overflow: hidden;
	margin: 0 auto;
}

@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15);
  }
}
.swiperTop .swiper-slide-active .swiper-img,
.swiperTop .swiper-slide-duplicate-active .swiper-img,
.swiperTop .swiper-slide-prev .swiper-img {
  animation: zoomUp 8s linear 0s normal both;
}

@keyframes zoomDown {
  0% {
    transform: scale(1.15);
  }
  40% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}
.swiperTop .swiper-slide-active .swiper-imgLast,
.swiperTop .swiper-slide-duplicate-active .swiper-imgLast,
.swiperTop .swiper-slide-prev .swiper-imgLast {
  animation: zoomDown 8s linear 0s normal both;
}
.swiperTop .swiper-slide img {
	width: 100%;
	height: 100vh;
	object-fit: cover;
}

/* テキストのスタイル */
.swiperTop p {
  color: #ffffff;
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-shadow: 1px 1px 2px #333333;
	text-align: center;
	width: 90%;
}
.swiperTop .tangerineB{
	font-size: 16vw;
	line-height: 18vw;
}
.swiperTop .zenM{
	font-size: 6vw;
	line-height: 7vw;
}

/*========= もっと見る =========*/
#top .viewMore{
	margin:0px auto 0px auto;
	width: 70%;
	max-width: 320px;	
}
#top .viewMore a{
	display:block;
	color: #ffffff;
	background-color: #f08200;
	text-align: center;
	padding: 16px 10px;
	border-radius: 9999px;
	border: none;
	font-size: 1rem;
	cursor: pointer;
}
#top .viewMore a:hover{
	border: 1px solid #44546a;
	box-sizing: border-box;
	background: #ffffff;
	color: #44546a;
	transition: all .3s;
}

/*========= トップメッセージ =========*/
#top_meessage{
	margin: 0px auto 0px auto;
	padding: 60px 0px 60px 0px;
}
#top_meessage .meessageBox{
	width: 90%;
	max-width: 860px;
	margin: 0 auto 60px auto;
	padding:40px 20px 0px 20px;
	position: relative;
}
#top_meessage .meessageBox .comment{
	text-align: center;
	font-size: 1.4rem;
	font-weight: bold;
	margin: 0px 0px 30px 0px;
	background-image: linear-gradient(180deg, #ccc 1px, transparent 1px);
	background-size: 100% 2.5em;
	line-height: 2.5em;
	padding: 0.2em 0.2em;
}
#top_meessage .meessageBox .sign{
	text-align: right;
	margin: 0px 40px 0px 0px;
	font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
	font-weight: bold;
}
#top_meessage .meessageBox .sign .post{
	font-size: 1.4rem;
}
#top_meessage .meessageBox .sign .name{
	font-size: 1.6rem;
}

/*========= 新着情報 =========*/
#top_news {
	width: 100%;
	margin: 0 auto;
	background-color: #eaf2db;
	padding:0px 0px 60px 0px;	
}
#top_news .newsBox{
	max-width: 1280px;
	margin: 0 auto;
	padding: 60px 20px 60px 20px;	
}
#top_news ul.newsList{
	list-style: none outside;
	margin: 40px 0px 0px 0px;
}
#top_news ul.newsList li.item a{
	display: flex;
	flex-wrap: wrap;
	flex-wrap: nowrap;
	text-decoration: none;
	border-bottom: 1px solid #ffffff;
	padding: 25px 20px;
}
#top_news ul.newsList li.item a.nolink:hover{
	color: #44546a;
}
#top_news ul.newsList li.item:first-child a{
	border-top: 1px solid #ffffff;
}
#top_news ul.newsList li.item .date{
	min-width: 140px;
}
#top_news ul.newsList li.item .date span.big{
	font-size: 1.4rem;
}
#top_news ul.newsList li.item .title{
	width: 100%;
}

/*========= キャンペーン =========*/
#top_campaign {
	width: 100%;
	margin: 0 auto;
}
#top_campaign .campaignBox{
	margin: 0 auto;
	padding: 60px 0px 80px 0px;
}
#top_campaign .swiper {
	width: 100%;
	margin: 30px 0px 0px 0px;
	padding: 0px 0;
}

/* swiper */
#top_campaign .swiper-container {
  position: relative;
}
#top_campaign .swiper .swiper-pagination {
  bottom: -20px !important; /* ページネーションを外側に表示 */
}
#top_campaign .swiper .swiper-slide img {
	height: auto;
	width: 100%;
}
#top_campaign .swiper .swiper-slide {
	opacity: .3; /* 左右のスライドを薄くする */
	transform: scale(.8); /* 左右のスライドを小さくする */
	transition: .7s; /* ゆっくり小さくさせる */
}
#top_campaign .swiper .swiper-slide-active {
	opacity: 1; /* 中央のスライドは薄くしない */
	transform: scale(1); /* 中央のスライドは小さくしない */
	z-index: 1; /* 中央のスライドを一番上にする */
}


/*========= ヒストリー =========*/
#top_history {
	width: 100%;
	margin: 0 auto;
	background-color: #eaf2db;
}
#top_history .historyBox{
	margin: 0 auto;
	padding: 60px 0px 100px 0px;
}

/* スライダー */
#top_history .history_wrapper {
  display: flex;
  overflow: hidden;
  margin: 10px 0px 0 0px;
}
#top_history .history_slider {
  animation: scroll-left 50s infinite linear .5s both;
  display: flex;
}
#top_history .slide {
  width: calc(100vw / 4);
  position:relative;
  margin: 0 0 1.6% 0;
}
#top_history .slide img {
  display: block;
  width: 100%;
}
@keyframes scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
#top_history .history_wrapper:hover .history_slider {
  animation-play-state: paused;
}

/* マウスオーバーアクション */
#top_history .film {
  cursor: pointer;
  position:relative;
}
#top_history .film img {
  transition: transform 0.4s;
}
#top_history .film img.color {
  position:absolute;
  top: 0px;
  left: 0px;
  opacity: 0;
}
#top_history .film:hover img {
  transform: scale(1.2);
  position:absolute;
  z-index: 100;
}
#top_history .film img.color:hover {
  opacity: 1;
}

/* スライダー年号 */
#top_history .year{
	background-repeat: no-repeat;
	background-size:contain;
	height: 30%;
	margin: 0px 0px 20px 0px;
}
#top_history .year_1975{background-image: url("../images/top_year_1975.png");}
#top_history .year_1976{background-image: url("../images/top_year_1976.png");}
#top_history .year_1977{background-image: url("../images/top_year_1977.png");}
#top_history .year_1978{background-image: url("../images/top_year_1978.png");}
#top_history .year_1979{background-image: url("../images/top_year_1979.png");}
#top_history .year_1980{background-image: url("../images/top_year_1980.png");}
#top_history .year_1981{background-image: url("../images/top_year_1981.png");}
#top_history .year_1982{background-image: url("../images/top_year_1982.png");}
#top_history .year_1983{background-image: url("../images/top_year_1983.png");}
#top_history .year_1984{background-image: url("../images/top_year_1984.png");}
#top_history .year_1985{background-image: url("../images/top_year_1985.png");}
#top_history .year_1986{background-image: url("../images/top_year_1986.png");}
#top_history .year_1987{background-image: url("../images/top_year_1987.png");}
#top_history .year_1988{background-image: url("../images/top_year_1988.png");}
#top_history .year_1989{background-image: url("../images/top_year_1989.png");}
#top_history .year_1990{background-image: url("../images/top_year_1990.png");}
#top_history .year_1991{background-image: url("../images/top_year_1991.png");}
#top_history .year_1992{background-image: url("../images/top_year_1992.png");}
#top_history .year_1993{background-image: url("../images/top_year_1993.png");}
#top_history .year_1994{background-image: url("../images/top_year_1994.png");}
#top_history .year_1995{background-image: url("../images/top_year_1995.png");}
#top_history .year_1996{background-image: url("../images/top_year_1996.png");}
#top_history .year_1997{background-image: url("../images/top_year_1997.png");}
#top_history .year_1998{background-image: url("../images/top_year_1998.png");}
#top_history .year_1999{background-image: url("../images/top_year_1999.png");}
#top_history .year_2000{background-image: url("../images/top_year_2000.png");}
#top_history .year_2001{background-image: url("../images/top_year_2001.png");}
#top_history .year_2002{background-image: url("../images/top_year_2002.png");}
#top_history .year_2003{background-image: url("../images/top_year_2003.png");}
#top_history .year_2004{background-image: url("../images/top_year_2004.png");}
#top_history .year_2005{background-image: url("../images/top_year_2005.png");}
#top_history .year_2006{background-image: url("../images/top_year_2006.png");}
#top_history .year_2007{background-image: url("../images/top_year_2007.png");}
#top_history .year_2008{background-image: url("../images/top_year_2008.png");}
#top_history .year_2009{background-image: url("../images/top_year_2009.png");}
#top_history .year_2010{background-image: url("../images/top_year_2010.png");}
#top_history .year_2011{background-image: url("../images/top_year_2011.png");}
#top_history .year_2012{background-image: url("../images/top_year_2012.png");}
#top_history .year_2013{background-image: url("../images/top_year_2013.png");}
#top_history .year_2014{background-image: url("../images/top_year_2014.png");}
#top_history .year_2015{background-image: url("../images/top_year_2015.png");}
#top_history .year_2016{background-image: url("../images/top_year_2016.png");}
#top_history .year_2017{background-image: url("../images/top_year_2017.png");}
#top_history .year_2018{background-image: url("../images/top_year_2018.png");}
#top_history .year_2019{background-image: url("../images/top_year_2019.png");}
#top_history .year_2020{background-image: url("../images/top_year_2020.png");}
#top_history .year_2021{background-image: url("../images/top_year_2021.png");}
#top_history .year_2022{background-image: url("../images/top_year_2022.png");}
#top_history .year_2023{background-image: url("../images/top_year_2023.png");}
#top_history .year_2024{background-image: url("../images/top_year_2024.png");}


/*========= tablet_L（960px～768px） ===============*/
@media screen and (max-width:960px){
/*========= TOPスライド =========*/
/* テキストのスタイル */
.swiperTop .tangerineB{
	font-size: 18vw;
	line-height: 20vw;
}
.swiperTop .zenM{
	font-size: 7vw;
	line-height: 8vw;
}

/*========= トップメッセージ =========*/
#top_meessage .meessageBox .comment{
	font-size: 1.3rem;
	margin: 0px 0px 20px 0px;
}
#top_meessage .meessageBox .sign{
	text-align: right;
	margin: 0px 40px 0px 0px;
}
#top_meessage .meessageBox .sign .post{
	font-size: 1rem;
}
#top_meessage .meessageBox .sign .name{
	font-size: 1.4rem;
}
	
/*========= ヒストリー =========*/
/* スライダー */
#top_history .history_wrapper {
  margin: 20px 0px 0px 0px;
}
#top_history .slide {
  width: calc(100vw / 3);
}
}


/*========= tablet_S（768px～480px） ===============*/
@media screen and (max-width:768px){
/*========= TOPスライド =========*/
/* テキストのスタイル */
.swiperTop .tangerineB{
	font-size: 20vw;
	line-height: 22vw;
}
.swiperTop .zenM{
	font-size: 8vw;
	line-height: 9vw;
}
	
/*========= トップメッセージ =========*/
#top_meessage{
	padding: 20px 0px 60px 0px;
}
#top_meessage .meessageBox{
	width: 100%;
	margin: 0px auto 40px auto;
	padding:40px 20px 0px 20px;
	position: relative;
}
#top_meessage .meessageBox .comment{
	font-size: 1rem;
	margin: 0px 0px 20px 0px;
	padding: 0.2em 0.6em;
	text-align: left;
}
#top_meessage .meessageBox .sign{
	text-align: right;
	margin: 0px 40px 0px 0px;
}
#top_meessage .meessageBox .sign .post{
	font-size: 0.9rem;
}
#top_meessage .meessageBox .sign .name{
	font-size: 1.4rem;
}
	
/*========= ヒストリー =========*/
#top_history .historyBox{
	margin: 0 auto;
	padding: 40px 0px 60px 0px;
}
	
/* スライダー */
#top_history .history_wrapper {
  margin: 20px 0px 0px 0px;
}
#top_history .slide {
  width: calc(100vw / 1.8);
}
}


/*========= sp（480px～360px）===============*/
@media screen and (max-width:480px) {
/*========= TOPスライド =========*/
/* テキストのスタイル */
.swiperTop .tangerineB{
	font-size: 20vw;
	line-height: 22vw;
}
.swiperTop .zenM{
	font-size: 7.6vw;
	line-height: 9vw;
}
	
/*========= もっと見る =========*/
#top .viewMore a{
	padding: 12px 10px;
}

/*========= トップメッセージ =========*/
#top_meessage{
	padding: 20px 0px 60px 0px;
}
#top_meessage .meessageBox{
	margin: 0px auto 40px auto;
	padding:40px 20px 0px 20px;
}
#top_meessage .meessageBox .comment{
	font-size: 1rem;
	margin: 0px 0px 20px 0px;
	padding: 0.2em 0.6em;
}
#top_meessage .meessageBox .sign{
	margin: 0px 40px 0px 0px;
}
#top_meessage .meessageBoxx .sign .post{
	font-size: 0.9rem;
}
#top_meessage .meessageBox .sign .name{
	font-size: 1.2rem;
}

/*========= 新着情報 =========*/
#top_news .newsBox{
	padding: 40px 10px 40px 10px;	
}
#top_news ul.newsList{
	margin: 20px 0px 0px 0px;
}
#top_news ul.newsList li.item a{
	display: block;
	padding: 14px 10px;
	font-size: 0.95rem;
	line-height: 1.6rem;
}
}