@charset "utf-8";

/* Google fonts import */
@import url("https://fonts.googleapis.com/earlyaccess/notosansjapanese.css"); /* gothic [font-family: "Noto Sans Japanese";] */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&display=swap&subset=japanese');


/*■reset----------------------------------------------*/
*{
	padding:0;
	margin:0;
}
h1,h2,h3,h4,h5,h6{
	font-size:14px;
	font-weight:normal;
}
ul,ol,li{
	list-style-type:none;
}
a{
	font-size:14px;
	transition:all 0.5s;
	text-decoration:none;
}
a:hover{
	opacity:0.72;
}
img{
	border:none;
	display:block;
}
p{
	font-size:14px;
	line-height:140%;
}

body{
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-family: "Noto Sans Japanese";
	background-attachment: fixed;
	background-size: cover;
	background-position: center left;
	height:100%;
}


/* PC view 
-------------------------------------------------------------------------------------*/
#MainWrap{
	width:100%;
	height:100%;
}

/* コンテンツ箇所設定 */
.Main{
	width:850px;
	position: relative;
	margin:0 27% 0 auto;
	background:#000000;
	box-shadow:0 0 8px rgba(0,0,0,0.98);
	z-index:10;
}
.Main img{
	width:100%;
	display:block;
}
@media screen and (max-width: 1060px) {
	.Main{
		margin:0 auto;
	}
}
@media screen and (max-width: 860px) {
	.Main{
		width:100%;
	}
}


/* ボタン箇所設定 */
.BtnWrap{
	position: fixed;
	top:0;
	right:0;
	background: url(../../images/lp_kani2025/m_bg.jpg) no-repeat bottom left #000000;
	width:27%;
	height:100%;
}
.BtnWrap .Navi{
	position: relative;
	width:100%;
	height:100%;
}
.BtnWrap .Navi .NaviArea{
	position: absolute;
	top:50%;
	left:50%;
	width:65%;
	transform:translate(-50%,-50%);
}
.BtnWrap .Navi .NaviArea .Links{
	width:100%;
	margin-bottom:20px;
}
.BtnWrap .Navi .NaviArea .Links p{
	padding:10px 0 10px 0;
	text-align:center;
	color:#FFFFFF;
	font-weight:bold;
	font-family: 'Noto Serif JP', serif;
	font-size:18px;
	line-height:1;
	letter-spacing:1px;
	text-shadow:0 1px 2px rgba(0,0,0,0.35);
	background-color:#8e7a42;
	background:-webkit-linear-gradient(top,#bc9118,#8e7a42);
	background:linear-gradient(top,#bc9118,#8e7a42);
}
.BtnWrap .Navi .NaviArea .Links .LinkArea{
	padding:12px;
	background:#E2DFC9;
	border:solid 2px #AC8E2B;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}
.BtnWrap .Navi .NaviArea .Links .LinkArea ul{
	width:48%;
}
.BtnWrap .Navi .NaviArea .Links .LinkArea ul li{
	border-bottom:solid 1px #FFFFFF;
	padding-bottom:6px;
	margin-bottom:6px;
}
.BtnWrap .Navi .NaviArea .Links.SubNav .LinkArea ul li{
	border-bottom:none;
	padding-bottom:0px;
	margin-bottom:0px;
}
.BtnWrap .Navi .NaviArea .Links .LinkArea ul li a{
	color:#000000;
	font-size:11px;
	letter-spacing:1px;
	font-weight:500;
	padding-left:20px;
	position:relative;
	display:block;
}
.BtnWrap .Navi .NaviArea .Links .LinkArea ul li a::after{
	content:"";
	display:block;
	width:14px;
	height:14px;
	background: url(../../images/lp_kani2025/link_allow.png) no-repeat left center;
	background-size:14px;
	position:absolute;
	top:0px;
	left:0;
}

@media screen and (max-width: 1520px) {
	.BtnWrap .Navi .NaviArea .Links p{
		padding:12px 0 14px 0;
		font-size:18px;
	}
	.BtnWrap .Navi .NaviArea .Links .LinkArea{
		padding:10px;
	}
	.BtnWrap .Navi .NaviArea .Links .LinkArea ul li a{
		font-size:12px;
		padding-left:22px;
	}
	.BtnWrap .Navi .NaviArea .Links .LinkArea ul li a::after{
		width:17px;
		height:17px;
		background-size:17px;
		top:3px;
	}
}
@media screen and (max-width: 1060px) {
	.BtnWrap .Navi .NaviArea{
		display:none;
	}
}

/* コンテンツエリア設定 */
section{
  background: #000000 url("../../images/lp_kani2025/sec_bg01.png") no-repeat top center !important;
  background-size: 100% auto !important; /* 横幅100% */
}
.contentsWrap{
  padding: 0% 1.6% 0%;
  margin: 0% 0% 4.5%;
}
.contentsWrap .innerWrap{
  background: #820000;
  padding: 1.6% 1.6% 1.6%;
}
.contentsWrap .innerWrap02{
  background: url("../../images/lp_kani2025/sec_bg02.png") !important;
  padding: 1.6% 1.6% 1.6%;
}
.thumb-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2列 */
  gap: 0.8rem;
  margin: 0;
  padding: 1.6% 0 0 0 ;
}
@media screen and (max-width: 860px) {
	.thumb-grid{
  gap: 0.4rem;
	}
}

/* MV
-------------------------------------------------------------------------------------*/
#MV {
  position: relative;
}
#MV .img01{
  position: relative;
  z-index: 2;
}
#MV .img02{
  width: 67%;
  position: absolute;
  bottom: 0;
  left: 0;
}
#MV .img03{
  width: 55%;
  position: absolute;
  bottom: 0;
  right: 0;
}
#MV .img04{
  width: 55%;
  position: absolute;
  top: 0;
  right: 0;
}

/* manzoku
-------------------------------------------------------------------------------------*/
#manzoku {
  background: #000000 url("../../images/lp_kani2025/manzoku_bg01.png") no-repeat top center !important;
  background-size: 100% auto !important; /* 横幅100% */
}

#manzoku h2{
  padding: 10% 0% 0% 1.6%;
}

/* .movie */
#manzoku .movie{
  display: flex;
  padding: 2.6% 0%;
}
#manzoku .movie .mov01 {
  width: 46.5%;
  height: auto;
  padding: 1% 3% 0% 0%;
}
#manzoku .movie .mov02 {
  width: 51.5%;
  height: auto;
}

/* .item */
#manzoku .item{
  position: relative;
  margin: 0% 0% 2.3% ;
}
#manzoku .item.end{
  position: relative;
  margin: 0% 0% 0% ;
}
#manzoku .item ul{
  width: 93.2%;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2列 */
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0% 3.4% 0%;
}
#manzoku .item ul li{

}
#manzoku .item .btn01{
  position: absolute;
  bottom: 2.3%;
}
#manzoku .item .btn02{
  position: absolute;
  bottom: 2.4%;
}
#manzoku .item .btn03{
  position: absolute;
  bottom: 3%;
}

/* diff
-------------------------------------------------------------------------------------*/
#diff h2{
  padding: 4.5% 1.6% 4.5%;
}

/* mukimi
-------------------------------------------------------------------------------------*/
#mukimi{
  background: #000000 url("../../images/lp_kani2025/mukimi_bg01.png") no-repeat top center !important;
  background-size: 100% auto !important; /* 横幅100% */
}
#mukimi h2{
  padding: 51% 0% 0% 0%;
}
#mukimi .contentsWrap .innerWrap{
  padding: 2.8% 1.6% 0%;
}
#mukimi .contentsWrap .innerWrap.end{
  padding: 2.8% 1.6% 1.6%;
}

/* premium
-------------------------------------------------------------------------------------*/
#premium {
  background: #000000 url("../../images/lp_kani2025/premium_bg01.png") no-repeat top center !important;
  background-size: 100% auto !important; /* 横幅100% */
}
#premium h2{
  padding: 9% 0% 3.8% 0%;
}
#premium .contentsWrap .innerWrap02 {
    padding: 0% 1.6% 1.6%;
}
/* chart
-------------------------------------------------------------------------------------*/
#chart {
  background: #000000 url("../../images/lp_kani2025/chart_bg01.png") no-repeat top center !important;
  background-size: 100% auto !important; /* 横幅100% */
}
#chart h2{
  padding: 13% 0% 7% 0%;
}
#chart h4.first{
  padding: 3.8% 0% 0% 0%;
}
#chart .contentsWrap.end {
    padding: 0% 1.6% 2.6%;
}
#chart .contentsWrap .innerWrap02 {
    padding: 0% 1.6% 2.6%;
}
#chart .contentsWrap .innerWrap02 .thumb-grid.even  {
  background: url("../../images/lp_kani2025/sec_bg04.png") no-repeat bottom right !important;
  background-size: 100% auto !important; /* 横幅100% */
}

/* reason
-------------------------------------------------------------------------------------*/

#reason h2{
  padding: 0% 0% 0% 0%;
}
#reason .contentsWrap{
  margin: 0% 0% 0%;
}
#reason #award{
  margin: 0% 0% 4.5%;
}
#reason .contentsWrap .innerWrap02 ul.commitment li{
  padding: 0% 0% 1.6%;
}
#reason .contentsWrap .innerWrap02 ul.commitment li:last-child {
  padding: 0% 0% 0%;
}

/* .accordion */
.accordion li{
  list-style: none;
  position:relative;
  line-height:0;
  background: #ffffff;
}
.accordion li.Wrap{
	border: 4px solid #a48d4f;
	margin: 0 0 1.6%;
}
.accordion li.Wrap:last-child {
  margin: 0% 0% 0%;
}
@media screen and (max-width: 860px) {
	.accordion li.Wrap{
	border: 3px solid #a48d4f;
	}
}
.accordion li.Wrap .btn_reason02 {
  text-align: center;
  padding: 3% 0 2%;
}

.accordion li.Wrap .btn_reason02 a {
  display: inline-block;
  font-size: 18px;
  color: #000;
  text-decoration: underline;
}
@media screen and (max-width: 860px) {
	.accordion li.Wrap .btn_reason02 a{
	font-size: 14px;
	}
}

.accordion li.Wrap .btn_reason02 a:hover{
	text-decoration: none;
}
.accordion li .act{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	display:none;
}
.accordion .active .act{
	display:block;
}
ul.accordion{
  width:100%;
  overflow: hidden;
  margin-top: -1px;
}
ul.accordion ul{
    /*display: none;*/
}
ul.accordion li p{
     /*cursor: pointer;カーソルを通常の物に*/
}
ul.accordion_act ul{
    display: none;
}
ul.accordion_act li p{
     cursor: pointer;
}
ul.accordion ul li{
}
ul.accordion ul li:last-child{
     border:none;
}
ul.accordion li p{
}
ul.accordion li p.active{
}

/* detail
-------------------------------------------------------------------------------------*/
#item01{
  background: #000000 url("../../images/lp_kani2025/sec_bg01.png") no-repeat top center !important;
  background-size: 100% auto !important; /* 横幅100% */
}
section.detail{
  padding: 4.5% 1.6% 0%;
  background-image: none !important;
}

.detail .detailWrap{
  background: #820000;
} 
.detail .detailWrap.taraba{
  background: #6b0848;
}
.detail .detailWrap h3{
  padding: 0% 1.6% 2.5%;
}
.detail .detailWrap .detailTxt{
  padding: 0% 1.6% 3.2%;
  font-size: 24px;
  color: #ffffff;
}
@media screen and (max-width: 860px) {
.detail .detailWrap .detailTxt{
	font-size: 13px;
	}
}
.detail .detailWrap .detailNotes{
  padding: 0% 1.6% 3.2%;
  font-size: 22px;
  color: #ffffff;
}
@media screen and (max-width: 860px) {
.detail .detailWrap .detailNotes{
	font-size: 11px;
	}
}
.detail .detailWrap .thumb-grid {
  padding: 0 1.6% 4.5% ;
}
.detail .detailWrap .thumb-grid.even  {
  background: url("../../images/lp_kani2025/sec_bg05.png") no-repeat bottom right !important;
  background-size: 100% auto !important; /* 横幅100% */
}
.detail .detailWrap .itemWrap{
  background: #820000 url("../../images/lp_kani2025/sec_bg03.png") no-repeat top center !important;
  background-size: 100% auto !important; /* 横幅100% */
}
.detail .detailWrap .itemWrap h3{
  padding: 4.5% 1.6% 3.2%;
}

/* icon */
.detail .detailWrap ul.icon{
  display: flex;
  padding: 3.2% 0 2%;
}
.detail .detailWrap ul.icon li{
  padding: 0 0 0 1.6%;
}
.detail .detailWrap ul.icon .heat {
  width: 22%;
  height: auto;
}
.detail .detailWrap ul.icon .cool {
  width: 9.6%;
  height: auto;
}
.detail .detailWrap ul.icon .boil {
  width: 19%;
  height: auto;
}
.detail .detailWrap ul.icon .raw {
  width: 13.6%;
  height: auto;
}

/* Rank
-------------------------------------------------------------------------------------*/
#Rank {
  padding:4.5% 1.6%;
  background-image: none !important;

}
#Rank .RankWrap{
  padding:1.6%;
  border: 3px #bd8414 solid;
  background: url("../../images/lp_kani2025/sec_bg02.png") !important;

}
@media screen and (max-width: 860px) {
  #Rank .RankWrap{
  border: 2px #bd8414 solid;
	}
}

/* Slide_wr
-------------------------------------------------------------------------------------*/
#Slide_wr {
	margin: 0 1.6% 4.5%;
}

#cover {
  position: relative;
  width: 100%;
  aspect-ratio: 18 / 5; /* 縦横比を指定 */
  overflow: hidden;
}

#cover > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;   /* aspect-ratio で決まった高さにフィット */
  opacity: 0;
  transition: opacity 2s ease-in;
}

#cover > div img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 縦横比維持しつつトリミング */
  display: block;
}


/* #Footer
-------------------------------------------------------------------------------------*/
footer {
	margin:0 auto ;
	padding:0% 0% 0%;
	text-align:center;
	color:#FFFFFF;
	background:#333333;
}
@media screen and (max-width: 860px) {
	footer{
	padding:0% 0% 13%;
	}
}
footer .copy{
	padding: 3% 0 3%;
	font-size: 18px;
}
@media screen and (max-width: 860px) {
footer .copy{
	font-size: 8px;
	}
}
footer .copy a:link{
	font-size: 16px;
	text-decoration: underline;
	color: #ffffff;
}
@media screen and (max-width: 860px) {
footer .copy a:link{
	font-size: 8px;
	}
}
footer .copy a:hover{
	text-decoration: none;
}
footer .copy a:visited{
	color: #ffffff;
}

/* #Utility
-------------------------------------------------------------------------------------*/
#Utility{
	width: 100%;
	max-width: 850px;
	overflow:hidden;
	z-index:99999;
	position: fixed;
	bottom:0;
}
@media screen and (min-width: 860px) {
	#Utility{
	display: none;
	}
}
#Utility ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  padding: 0% 0 0 0 ;
}

#Utility ul a:hover{
	opacity:100;
}

/* .l-header__item */
.l-header__item:hover img {
      /*opacity: .6;*/
      cursor: pointer;
}
.l-header__item:last-of-type{
    /*display: flex;
    cursor: pointer;*/
}
.l-header__item a{
  /*color: #000;
  font-size: 14px;
  transition: 0.4s ease;*/
}
.l-header__item a:hover{
  /*opacity: 0.7;*/
}
.l-header__search{
  opacity: 0;
  transition: 0.6s ease;
  pointer-events: none;
  background: #000;
  padding: 10px;
}
.l-header__search form{
  display: flex;
  align-items: center;
  width: 100%;
  height: 28px;
}
.l-header__search input[name=Search]{
  padding: 10px;
  box-sizing: border-box;
  background: #eee;
  border: solid #ccc 1px;
  font-size: 16px;
  width: 100%;
  height: 28px;
  line-height: 28px;
  border-radius: 0;
}
.l-header__search input[name=Search]:focus {
    outline: 0;
    border: solid #000 1px;
}
.l-header__search input[type=image]{
    width: 50px;
    height: auto;
    display: block;
    border-radius: 0;
}

#js-search{
  /*color: transparent;
  background-color: transparent;
  border-radius: 50%;
  height: 20px;
  width: 20px;
  border: 3px solid #000;*/
  position: relative;
}
#js-search::before{
/*  content: '';
  position: absolute;
  width: 3px;
  top: 11px;
  right: -4px;
  height: 11px;
  background-color: #000;
  transform: rotate(-45deg);*/
}
.l-header__item {
  /*height: 45px;*/
}

.is-search .l-header__search{
    pointer-events: auto;
    opacity: 1;
    padding: 10px;
    border-top: solid 1px #474039;
    /*padding-right: 10px;*/
}
.is-search:hover img {
  /*opacity: 1;*/
}

.Bg_over{
	width:28.39895013%;
	overflow:hidden;
	height:100%;
	position:fixed;
	top:0;
	left:0;
	z-index:0;
	background:#000000;
}
.Bg_over div{
	position:relative;
	width:100%;
	height:100%;
}
.Bg_over div img{
	width:550px !important;
	position:absolute;
	bottom:0;
	left:50%;
	transform:translateX(-50%);
}
@media screen and (max-width: 1300px) {
	.Bg_over div img{
		display:none;
	}
}