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

body{
	margin: 0;
}

.sticky-container{
	margin: 0;
	background-color: #375623;
}

.sticky-container img{
	display: block;
	line-height: 0;
}

.pc-box{
	display: none;
}

.wrapper{
	width: 100%;
	margin: 0 auto;
	background-color: #375623;
	padding: 0 0 5%;
	overflow: hidden;
}

@media(min-width:750px){
	.sticky-container{
		display: flex;
		justify-content: center;
		column-gap: 20px;
	}
	
	.pc-box{
		position: sticky;
        left: 0;
        top: 0;
        display: flex;
        width: 33%;
        height: 100vh;
        justify-content: center;
        align-items: center;
	}
	
	.pc-box__left img{
		width: 43vh;
	}
		
	.wrapper{
		width: 33%;
		margin: 0;
	}
	
	.pc-box__right{
		width: 90%;
		margin: 0 auto;
	}
	
	.pc-box__right a{
		display: block;
		width: 60%;
		margin: 0 auto;
		background-color: #EBE8DD;
		color: #C92D14;
		text-decoration: none;
		font-size: 1.9rem;
		text-align: center;
		line-height: 2;
		position: relative;
		font-family: trade-gothic-next-condensed, sans-serif;
		font-weight: 700;
		font-style: normal;
	}

	.pc-box__right a:after{
		display: inline-block;
		position: absolute;
		top: 50%;
		right: 5%;
		right: 15px;
		width: 7px;
		height: 7px;
		border-top: 1px solid #C92D14;
		border-right: 1px solid #C92D14;
		content: "";
		transform: translateY(-50%) rotate(135deg);
	}
}

/*---------- mv ----------*/

.mv{
	padding: 0;
	margin: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
}

.mv li{
	width: 33.3%;
}

.wrapper h1{
	text-align: center;
	color: #fff;
	font-family: trade-gothic-next-condensed, sans-serif;
	font-weight: 700;
	font-style: normal;
	letter-spacing: .05rem;
	font-size: 2.2rem;
	line-height: .8;
	margin: 10% auto;
}

.wrapper h1 span{
	font-size: .9rem;
}

.lead{
	text-align: center;
	color: #fff;
	font-size: .8rem;
	letter-spacing: .05rem;
	line-height: 2;
	margin: 5% auto;
}

@media(min-width:750px){
	.wrapper h1{
		font-size: 3rem;
	}

	.wrapper h1 span{
		font-size: 1.2rem;
	}
	
	.lead{
		font-size: .95rem;
	}

}

/*---------- item-contents ----------*/

.item-contents{
	margin: 10% auto;
}

.item{
	display: flex;
	column-gap: 10px;
}

.gap0{
	column-gap: 0px;
}

.item80{
	width: 90%;
	margin: 5% auto;
}

.mg-Left {
  margin-right: 25px;
}


@media(min-width:750px){
	.item{
		column-gap: 30px;
	}

	.item80{
		margin: 8% auto;
	}
}

/*---------- tex-wrapper ----------*/

/* 全体の横並びラッパー */
.tex-wrapper {
  display: flex;
  align-items: flex-end;      /* テキストと画像エリアの上下中央揃え */
  justify-content: center;  /* 全体を中央配置 */
  gap: 8%;                  /* 左のテキストと右の画像群の間の距離 */
  margin: 10% auto;
  max-width: 1000px;
}

/* 左側：テキストエリア（縮まないように固定） */
.tex-contents {
  flex-shrink: 0;
	margin-left: 5%;
}

.tex-contents a {
  display: block;
  width: fit-content;
  white-space: nowrap;
  color: #fff;
  text-decoration: none;
  line-height: 1.6;
  font-size: 1.6rem;
  letter-spacing: .06rem;
  font-family: trade-gothic-next-condensed, sans-serif;
  font-weight: 700;
  font-style: normal;
  position: relative;
  
  /* ★ 追加：右側に矢印アイコン分の余白を確保 */
  padding-right: 20px; 
}

.tex-contents a::after {
  display: block;
  position: absolute;
  top: 50%;
  right: 0;             /* ★ 右端にぴったり配置 */
  width: 5px;
  height: 5px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  content: "";
  transform: translateY(-50%) rotate(45deg);
}

/* 右側：画像コンテナ（全体枠を小さく） */
.tex-images {
  display: flex;
  flex-direction: column;
  width: 180px;
	box-sizing: border-box;
	padding-right: 5%;
}

/* 上の星 */
.img-star {
  align-self: flex-start;
  width: 60px;              /* ★ 100px から 60px 前後に縮小 */
  height: auto;
  margin-left: 0px;        /* ずらし幅も少し抑える */
}

/* 下のロゴ */
.img-logo {
  align-self: flex-end;
  width: 130px;             /* ★ 180px から 120px 前後に縮小 */
  height: auto;