@charset "UTF-8";

/*
	Reset CSS
-----------------------------------------------------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
html{
	font-size:62.5%;
}
body{
	margin:0 auto;
	padding:0;
	font-size:1.5em;
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
	font-weight:700;
	font-feature-settings: "palt";
	overflow-wrap: break-word;
}
p{
	line-height: 1.6;
}
ol li, ul li{
	list-style: none;
}
@media screen and (min-width:813px){
	/* iPad背景切れ対策 */
	body{
		min-width:1200px;
	}
	/* 電話リンクなし */
	a[href^=tel]{
		pointer-events:none;
	}
}
*,*::before,*::after{
	box-sizing:border-box;
}
img {
	width: 100%;
	border: none;
	vertical-align: top;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
a {
	color: #000;
	text-decoration: none;
	transition: color 0.2s, opacity 0.2s;
}
a:link {
	color: var(--bk);
}
a:visited {
	color: var(--bk);
}
a:hover {
	color: var(--bk);
	opacity: 0.7;
	text-decoration: none;
}
/* 表示切替 */
.switch {
	visibility: hidden;
}
.sp{
	display:none;
}
@media screen and (max-width:812px){
	body{
		-webkit-text-size-adjust:100%;
	}
	.pc{
		display:none;
	}
	.sp{
		display:block;
	}
	br.sp{
		display:inline-block;
	}
}


/*
	common
-----------------------------------------------------------------------------------------------*/
:root{
	/* color */
	--main: #003758;
	--mainL:#1a5274;
	--mainBg: #003e65;
	--gl: #aa8b11;
	--glD: #8f760f;
	--am: #eb5f48;
	--sk: #ff8087;
	--sm: #99bd33;
	--mr: #b66633;
	--bh: #e19e1b;
	--wh: #fff;
	--bk: #000;
	--bl:#004098;
	--or:#ff8b02;
	/* font-weight */
	--fw-light: 300;
	--fw-medium: 400;
	--fw-semiB: 600;
	--fw-bold: 700;
	--fw-black: 900;
	/* line-height */
	--lh-none: 1.0;
	--lh-small: 1.4;
	--lh-normal: 1.8;
    --lh-tall: 2.2;
	--lh-taller: 2.5;
	/* letter-spacing */
	--ls-tight: -0.02em;
	--ls-normal: 0;
	--ls-wide: 0.05em;
	--ls-wider: 0.1em;
	/* font-family */
	--ff-en: linotype-didot-headline, serif;
	--ff-min: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', YuMincho, serif;
}

/* テキストリンク */
a.txtLink{
	text-decoration:underline;
	transition:color 0.2s;
}
a[class^="txtLink"]:hover{
	text-decoration:none;
	opacity: 1.0;
}
a.txtLink:hover{
	color:#000;
}
a.txtLink_window{
	position: relative;
}
a.txtLink_window::after{
	content: "";
	width: 15px;
	height: 14px;
	background: url("../images/ico_window.svg") center center no-repeat;
	background-size: cover;
	position: absolute;
	top: 50%;
	right: -20px;
	transform: translateY(-50%);
}

/* flexBox */
.flexBox{
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.flexBox__jstCtt_btwn{
	-ms-justify-content: space-between;
	justify-content: space-between;
}
.flexBox__jstCtt_cntr{
	-ms-justify-content: center;
	justify-content: center;
}
.flexBox__jstCtt_end{
	-ms-justify-content: flex-end;
	justify-content: flex-end;
}
.flexBox__alinItm_cntr{
	-ms-align-items: center;
	align-items: center;
}
.flexBox__alinItm_top{
	-ms-align-items: flex-start;
	align-items: flex-start;
}
.flexBox__alinItm_end{
	-ms-align-items: flex-end;
	align-items: flex-end;
}
.flexBox__direction_colu{
	-ms-flex-direction: column;
	flex-direction: column;
}
.flexBox__direction_rore{
	-ms-flex-direction: row-reverse;
	flex-direction: row-reverse;
}

/* フェードイン */
.fadeIn {
	opacity : 0;
	transform: translateY(40px);
	transition: transform 1.0s;
}
@media screen and (max-width:812px){	
	.fadeIn {
	  transform: translateY(20px);
	}
}

/* コンテンツ */
#wrapper{
	min-width: 1400px;
	position: relative;
	overflow: hidden;
}
@media screen and (min-width:812px){
	/* iPad背景切れ対策 */
	#wrapper{
		min-width:1300px;
	}
}
@media screen and (max-width:812px){
	#wrapper{
		min-width: 100%;
	}
}

/* タイトル */
.tit__slash{
	margin-bottom: 20px;
	text-align: center;
}
.tit__slash span{
	display: inline-block;
	font-size: 2.4rem;
	font-weight: var(--bold);
	color: var(--br);
	position: relative;
}
.tit__slash span::before,
.tit__slash span::after{
	content: '';
	width: 3px;
	height: 100%;
	background-color: var(--br);
	position: absolute;
	bottom: 0;
}
.tit__slash span::before{
	left: -25px;
	transform: rotate(-45deg);
}
.tit__slash span::after{
	right: -25px;
	transform: rotate(45deg);
}
@media screen and (max-width:812px){
	.tit__slash{
		margin-bottom: 15px;
	}
	.tit__slash span{
		font-size: 2.0rem;
	}
	.tit__slash span::before,
	.tit__slash span::after{
		height: 90%;
	}
	.tit__slash span::before{
		left: -20px;
	}
	.tit__slash span::after{
		right: -20px;
	}
}

/* ボタン */
.btnBase{
	-ms-flex-direction: row-reverse;
	flex-direction: row-reverse;
	padding: 30px 0 0;
}
a.btnBase__item{
	display: block;
	width: 390px;
	padding: 30px;
	font-size: 1.9rem;
	font-weight: var(--bold);
	color: #2e1000;
	background-color: #cfa961;
	text-align: center;
	border-radius: 5px;
	filter: drop-shadow(0 0 10px rgba(0,0,0,.1));
	position: relative;
}
a.btnBase__item::after{
	content:' ';
	display:block;
	width:10px;
	height:10px;
	border-top:2px solid #2e1000;
	border-right:2px solid #2e1000;
	transform:translateY(-50%) rotate(45deg);
	transform-origin:0 0;
	position:absolute;
	top:50%;
	right:25px;
	margin-top: -2px;
}
a.btnBase__item_s{
	width: 300px;
	padding: 20px;
	font-size: 1.6rem;
	color: var(--wh);
	background-color: var(--em);
}
	a.btnBase__item_s::after{
		border-top:3px solid var(--wh);
		border-right:3px solid var(--wh);
	}

a.btnBase__item::before{
	content: "";
	width: 100%;
	height: 100%;
	border-radius: 50px;
	background: rgba(255, 255, 255, 0.15);
	transform-origin: center;
	transform: scaleX(0);
	position: absolute;
	left: 0;
	top: 0;
	transition: transform 0.3s;
}
a.btnBase__item:last-of-type{
	margin: 0;
}
@media screen and (max-width:812px){
	.btnBase{
		display: block;
		padding: 40px 0 0;
	}
	a.btnBase__item{
		width: 100%;
		padding: 20px;
		margin: 0 auto 10px auto;
		font-size: 1.6rem;
		filter: drop-shadow(0 0 10px rgba(0,0,0,.1));
	}
	a.btnBase__item::after{
		right:20px;
		margin:-2px 0 0 0;
	}
	a.btnBase__item:last-of-type{
		margin: 0 auto;
	}
}

/* 別窓リンク */
a.btnBase__item .window::after{
	content: " ";
	display: inline-block;
	width: 14px;
	height: 14px;
	margin: 0 0 0 5px;
	background:url(../images/ico_window.svg) center center no-repeat;
	background-size: contain;
}
@media screen and (max-width:812px){
	a.btnBase__item .window::after{
		width: 15px;
		height: 13px;
	}
}

/* table */
.tblBase{
	width:100%;
	border-collapse:collapse;
	border-top:1px solid #bec6c6;
	border-bottom:1px solid #bec6c6;
}
.tblBase th,.tblBase td{
	padding:25px 0;
	line-height:1.6;
	border-bottom:1px solid #bec6c6;
}
.tblBase th{
	width:160px;
	font-size: 1.6rem;
	font-weight:600;
	color: #0075C1;
	text-align: left;
	vertical-align: top;
}
@media screen and (max-width:812px){
	.tblBase{
		width:100%;
		border-top:none;
	}
	.tblBase tr,.tblBase th,.tblBase td{
		display:block;
	}
	.tblBase th,.tblBase td{
		width:100%;
	}
	.tblBase th{
		min-width:auto;
		padding:10px;
		border-top:1px solid #bec6c6;
		border-bottom:none;
		text-align: center;
		background-color: #F5F5F5;
	}
	.tblBase td{
		padding:10px 0 25px 0;
		border-bottom:none;
	}
}

/* list */
.listBase{
	margin: -5px 0 0;
	position:relative;
}
.listBase__item{
	display: inline-block;
	padding:5px 20px 0 15px;
	position: relative;
}
.listBase__item::before {
	content:'●';
	font-size:1.0rem;
	color:#06A33E;
	position:absolute;
	top: 8px;
	left:0;
}
/*
	header
-----------------------------------------------------------------------------------------------*/
#header{
	width: 100%;
	position: relative;
}
#header__logo{
	width: 170px;
	margin: 15px 0 15px 25px;
}
@media screen and (max-width:812px){
	#header__logo{
		width: 140px;
		margin: 20px 0 20px 20px;
	}
	#header__logo img{
		width: 140px;
	}
}

/* subNav */
.subNav{
	position: absolute;
	right: 80px;
	z-index: 500;
}
#subNav__top{
	top: 0;
}
#subNav__btm{
	top: -37px;
}
.subNav__item:first-of-type{
	margin-right: 10px;
}
a.subNav__btn{
	display: inline-block;
	padding: 12px 25px 12px 12px;
	font-size: 1.3rem;
	font-weight: var(--bold);
	color: var(--wh);
	line-height: 1.0;
	border-radius: 0 0 5px 5px;
	position: relative;
}
#subNav__btm a.subNav__btn{
	border-radius: 5px 5px 0 0;
}
a.subNav__btn::after{
	content:' ';
	display:block;
	width:8px;
	height:8px;
	margin-top: -2px;
	border-top:2px solid var(--wh);
	border-right:2px solid var(--wh);
	transform:translateY(-50%) rotate(45deg);
	transform-origin:0 0;
	position:absolute;
	top:50%;
	right:8px;
}
.subNav__btn_01{
	background-color: var(--bl);
}
.subNav__btn_02{
	background-color: var(--or);
}
@media screen and (max-width:812px){
	.subNav{
		right: 0;
		margin: 0 15px 0 0;
	}
	.subNav__item:first-of-type{
		margin-right: 0;
	}
	#subNav__top{
		display: none;
	}
	#subNav__btm{
		display: none;
	}
}
/* gNav */
@keyframes fadeUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
#gNav{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	flex-direction: column;
	align-items: end;
	gap: 10px;
	width: 60px;
	height: 60px;
	position: fixed;
	top: 0px;
	right: 20px;
	cursor: pointer;
	z-index: 1005;
}
[class^="gNav__line"]{
	display:block;
	height:3px;
	background-color: var(--mainL);
}
.gNav__line01{
	width: 35px;
}
.gNav__line02{
	width: 35px;
}
.gNav__line03{
	width: 35px;
}
#gNav:hover .gNav__line{
	opacity: 0.6;
}
/* close */
#gNav.active [class^="gNav__line"]{
	position: absolute;
	background-color: var(--wh);
}
#gNav.active .gNav__line01{
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
	width: 35px;
}
#gNav.active .gNav__line02{
	opacity: 0;
}
#gNav.active .gNav__line03{
	top: 50%;
	transform: translateY(-50%) rotate(-45deg);
	width: 35px;
}
#gNav__wrapper{
	width: 500px;
	height: 100vh;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 1000;
	display: none;
}
#gNav__area{
	width: 500px;
	height: 100%;
	padding: 80px 0px;
	position: absolute;
	top:0;
	right:0;
	z-index:1002;
	overflow-y: scroll;
	-ms-overflow-style: none;
	scrollbar-width: none;
	display: none;
}
.gNav__areaTit{
	font-size: 3.5rem;
	font-family: var(--ff-en);
	color: var(--wh);
	text-align: center;
}
#gNav__area::-webkit-scrollbar {
	display:none;
}
#gNav__overlay{
	width: 500px;
	height: 100%;
	background-color: var(--mainL);
	position:absolute;
	top:0;
	right:0;
	opacity: 0.98;
	z-index: 1001;
	cursor: zoom-out;
	display: none;
}
#gNav__wrapper.active,
#gNav__area.active,
#gNav__overlay.active{
	width: 500px;
	height: 100%;
	display: block;
}
.gNav__list{
	width: 500px;
	padding: 0 30px;
	display: flex;
	flex-direction: column;
}
.gNav__list li{
	border-bottom: 2px dotted var(--wh);
	opacity: 0;
}
.gNav__list li:last-of-type{
	border: none;
}
a.gNav__btn{
	display: flex;
	align-items: center;
	padding: 20px 60px 20px 0;
	position: relative;
}
a.gNav__btn::after{
	content: "";
	width: 40px;
	height: 40px;
	background: url("../images/arrow_wh.svg") var(--gl) no-repeat center center / 35%;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	right: 0;
	transform: rotate(90deg) translateX(-50%);
	transition: background 0.2s;
}
.gNav__listSub{
	padding: 0 30px;
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}
.gNav__listSub li{
	width: calc((100% - 15px)/2);
	opacity: 0;
}
a.gNav__btn-sub{
	display: block;
	padding: 15px 10px;
	font-size: 1.3rem;
	font-weight: var(--fw-bold);
	color: var(--wh);
	text-align: center;
	background-color: var(--bl);
	border: var(--wh) 1px solid;
}
.gNav__listSub li:last-of-type a.gNav__btn-sub{
	background-color: var(--or);
}
.gNav__img{
	width: 80px;
	margin-right: 10px;
}
.gNav__tit{
	font-size: 1.8rem;
	font-weight: var(--fw-bold);
	color: var(--wh);
	line-height: var(--lh-small);
}
.gNav__tit span{
	display: inline-block;
	margin-right: 20px;
	font-family: var(--ff-en);
	font-size: 6.0rem;
	color: var(--main);
	vertical-align: middle;
}
/* hover */
a.gNav__btn:hover{
	opacity: 1.0;
}
a.gNav__btn:hover:after{
	background: url("../images/arrow_wh.svg") var(--glD) no-repeat center right 10px / 35%;
}
/* active */
#gNav__area.active .gNav__list li,
#gNav__area.active .gNav__listSub li{
	animation: fadeUp .7s ease forwards;
}
#gNav__area.active .gNav__list li:nth-of-type(2){
	animation-delay: .2s;
}
#gNav__area.active .gNav__list li:nth-of-type(3){
	animation-delay: .3s;
}
#gNav__area.active .gNav__list li:nth-of-type(4){
	animation-delay: .4s;
}
#gNav__area.active .gNav__list li:nth-of-type(5){
	animation-delay: .5s;
}

@media screen and (max-width:812px){
	#gNav{
		gap: 10px;
		width: 70px;
		height: 70px;
		padding: 10px;
		top: 0px;
		right: 15px;
	}
	.gNav__line01{
		width: 30px;
	}
	.gNav__line02{
		width: 30px;
	}
	.gNav__line03{
		width: 30px;
	}
	#gNav:hover .gNav__line02{
		width: 30px;
	}
	/* close */
	#gNav.active .gNav__line01{
		top:29px;
		transform:rotate(45deg);
	}
	#gNav.active .gNav__line02{
		width: 30px;
		top:29px;
	}
	#gNav__area{
		width: 100%;
		margin: 0 auto;
		padding: 50px 20px;
		left:0;
		transform: none;
	}
	.gNav__areaTit{
		font-size: 3rem;
	}
	#gNav__wrapper.active,
	#gNav__area.active,
	#gNav__overlay.active{
		width: 100%;
		height: 100%;
	}
	.gNav__list{
		width: 100%;
		margin: 0 auto;
	}
	a.gNav__btn{
		padding: 10px 0px 10px 0;
	}
	a.gNav__btn::after{
		width: 30px;
		height: 30px;
	}
	.gNav__listSub{
		max-width: 500px;
		display: flex;
		flex-direction: column;
		gap: 10px 0;
		margin: 0 auto;
	}
	.gNav__listSub li{
		width:100%;
		margin-top: 10px;
	}
	a.gNav__btn-sub{
		padding: 12px;
		font-size: 1.3rem;
	}
	.gNav__img{
		width: 60px;
		margin-right: 10px;
	}
	.gNav__tit{
		font-size: 1.6rem;
	}
}

/*
	kv
-----------------------------------------------------------------------------------------------*/
#kv{
  width: 100%;
  min-width: 1400px;
  height: 590px;
  background: url("../images/bg_kv.png") center center no-repeat;
  background-size: cover;
  display: flex;
  align-items: center; 
}
.kv__logoArea{
	width: 604px;
	margin-left: 8%;
}

@media screen and (max-width:812px){
	#kv{
		width: 100%;
    	min-width: auto;
    	height: 100%;
		background: url("../images/bg_kv_sp.png") center center no-repeat;
		justify-content: center;  /* logo横中央 */
    	background-size: 100% auto;
	}
	.kv__logoArea{
		width: 90%;
		margin-left: 0px;
		padding: 30px 0;
	}
}

/*
	lineup
-----------------------------------------------------------------------------------------------*/
#lineup{
	width: 100%;
	padding: 80px 0 55px 0;
	background-color: var(--mainBg);
	overflow: hidden;
}
#lineup::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url("../images/img_lineup_Year.svg");
	background-repeat: no-repeat;
	background-size: 660px auto;
	background-position: center 200px;
	opacity: 0.9;
	pointer-events: none; /* クリック影響防止 */
}
#lineup p {
	color: var(--wh);
	text-align: center;
}
.lineupTit {
	margin-bottom: 30px;
	font-size: 2.6rem;
	font-family: var(--ff-min);
	font-weight: var(--fw-medium);
	line-height: var(--lh-tall);
	letter-spacing: var(--ls-wider);
	text-align: center;
	color: var(--wh);
}
.lineupTxt {
	margin-bottom: 100px;
	font-size: 1.6rem;
	font-weight: var(--fw-medium);
	line-height: var(--lh-tall);
	letter-spacing: var(--ls-wider);
}
#lineup ul {
	width: 1030px;
	margin: 0 auto;
	display: flex;
	justify-content: space-around;
}
#lineup ul li a {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: var(--wh);
	font-size: 1.6rem;
	font-weight: var(--fw-light);
	letter-spacing: var(--ls-wide);
	text-decoration: none;
}
#lineup ul li a img{
	width: 150px;
	margin-bottom: 10px;
}
.lineupDate {
	font-size: 1.2rem;
	line-height: var(--lh-tall);
	letter-spacing: var(--ls-wide);
	position: relative;
	display: inline-block;
	padding-bottom: 10px; /* 矢印との距離 */
}
.lineupDate::before,
.lineupDate::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 8px; /* 線の長さ */
	height: 2px;/* 線の太さ */
	background: var(--gl);
}
.lineupDate::before {
	transform: translateX(-100%) rotate(45deg);
	transform-origin: right center;
}
.lineupDate::after {
	transform: rotate(-45deg);
	transform-origin: left center;
}
@media screen and (max-width:812px){
	#lineup{
		width: 100%;
		padding: 40px 0 20px 0;
		background-size: 300px auto;
		background-position: center 250px;
	}
	#lineup::before {
		background-size: 90% auto;
		background-position: center auto;
	}
	.lineupTit {
		padding: 0	20px;
		margin-bottom: 25px;
		font-size: 1.8rem;
	}
	.lineupTxt {
		padding: 0	20px;
		margin-bottom: 30px;
		font-size: 1.3rem;
	}
	/*#lineup ul {
		width: 100%;
		padding: 0 40px;
		flex-wrap: wrap;
		justify-content:center;
		gap: 0 20px;
	}*/
	  #lineup ul {
	    width: 90%;
		display: grid;
		grid-template-columns: repeat(3, 1fr); 
		gap: 20px;
		justify-content: center;
  	}
	#lineup ul li a {
		margin-bottom: 15px;
	}
	#lineup ul li a img{
		width: 130px;
		margin-bottom: 10px;
	}
}
@media screen and (max-width:480px){
	#lineup ul {
    	grid-template-columns: repeat(2, 1fr);
    	justify-items: center;
  	}
	/* 最後の1つだけ左揃え */
	#lineup ul li:nth-child(5) {
		justify-self: start;
	}
}

/*
	ctsArea
-----------------------------------------------------------------------------------------------*/
.ctsArea{
	width: 100%;
	margin: 0 auto;
	position: relative;
}
.ctsAreaIn{
	width: 1030px;
	margin: 0 auto;
	padding: 70px 0px 40px 0;
	display: flex;
	justify-content: space-between;
	position: relative;
}
Img {
	width: auto;
	position: relative;
	right: 0;
	z-index: 1;
}
.ctsImgIn{
	width: auto;
	height: 496px;
	display: block;
	margin-left: auto;
}
.ctsTit{
	font-size: 7.2rem;
	font-family: var(--ff-min);
	font-weight: var(--fw-semiB);
	letter-spacing: var(--ls-wide);
}
.ctsTxtL p{
	overflow: visible;
	white-space: nowrap;
}
.ctsTitL{
	overflow: visible;
	white-space: nowrap;
}
.ctsDate {
	font-size: 1.4rem;
	padding: 8px 10px;
	color: var(--wh);
	font-weight: var(--fw-light);
}
.ctsTxt p{
	margin: 15px 0 30px 0;
	font-size: 2.0rem;
	font-family: var(--ff-min);
	font-weight: var(--fw-semiB);
	line-height: var(--lh-tall);
	letter-spacing: var(--ls-wide);
}
.ctsTxt .note {
	font-weight: var(--fw-light);
}
.ctsTxt .note::before {
  content: "※";
  margin-right: 0.2em;
}
.ctsTxt ul{
	width: 400px;
	margin: 15px 0 5px 0;
	display: flex;
	flex-wrap: wrap;
	gap: 5px 10px;
}
.ctsTxt ul li {
	position: relative;
	font-weight: var(--fw-medium);
	padding-left: 1.2em; /* ◆分のスペース */
}
.ctsTxt ul li::before {
	content: "◆";
	position: absolute;
	left: 0;
	top: 0;
}
.ctsTxt ul .break{
	width: 100%;
	display: block;
}
.columnArea{
	width: 100%;
	margin: 0 auto;
	color: var(--wh);
}
.columnAreaIn{
	width: 1030px;
	margin: 0 auto;
	padding: 40px 0px;
	display: flex;
	justify-content: space-between;
	gap: 0 30px;
}
.colImg img{
	width: 420px;
}
.colNote {
	letter-spacing: var(--ls-wide);
	display: inline-block;
}
.colTit {
	margin-bottom: 10px;
	font-size: 2.2rem;
	letter-spacing: var(--ls-wider);
}
.colTxt {
	font-size: 1.4rem;
	font-weight: var(--fw-light);
	line-height: var(--lh-tall);
}

@media screen and (max-width:812px){
	.ctsAreaIn{
		width: 100%;
		padding: 30px 0 0 0;
		display: block;
	}
	.ctsTxt{
		width: 100%;
		padding: 0 20px;
	}
	.ctsTit{
		font-size: 4rem;
	}
	.ctsDate {
		font-size: 1.2rem;
	}
	.ctsTxt p{
		margin: 10px 0 20px 0;
		font-size: 1.5rem;
	}
	.ctsTxt .note {
		font-size: 1.2rem;
	}
	.ctsTxt span{
	}
	.ctsTxt ul{
		width: 100%;
		font-size: 1.2rem;
	}
	.ctsImg{
		width: 100%;
	}
	.ctsImgIn{
		width: 100%;
		height: auto;
		display: block;
		margin-left: none;
	}
	.columnAreaIn{
		width: 100%;
		padding: 30px 20px;
    	flex-direction: column;
		gap: 20px 0px;
	}
	.colTit {
		font-size: 2.0rem;
	}
	.colImg img{
		width: 100%;
	}
	.colImg{
		width: 100%;
		order: 2;
	}
	.colNote {
		width: 100%;
		order: 1;
	}
}
/* 各ラインナップカラー */
.amaou {
	color:var(--am);
}
.bg_amaou{
	background-color: var(--am);
}
.sakura {
	color:var(--sk);
}
.bg_sakura{
	background-color: var(--sk);
}
.shineM {
	color:var(--sm);
}
.bg_shineM{
	background-color: var(--sm);
}
.maron {
	color:var(--mr);
}
.bg_maron{
	background-color: var(--mr);
}
.beniH {
	color:var(--bh);
}
.bg_beniH{
	background-color: var(--bh);
}

/* 国産ラベル */
.kokusan {
	position: relative;
	display: inline-block;
	padding-top: 53px;/* ラベル高さ＋間隔*/
}
.kokusan:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	transform: none;
	width: 135px;/* ラベル幅 */
	height: 43px;/* ラベル高さ */
	background: url("../images/ico_kokusan.svg") no-repeat left center / contain;
}
/*国産じゃない時*/
.mt20{
	margin-top: 20px;
}
@media screen and (max-width:812px){
	.kokusan {
		padding-top: 27px;/* ラベル高さ＋間隔*/
	}
	.kokusan:before {
		width: 85px;/* ラベル幅 */
		height: 27px;/* ラベル高さ */
	}
	/*国産じゃない時*/
	.mt20{
		margin-top: 0px;
	}
}
/* アレルゲン情報 */
a.aboutAl {
	margin: 15px 0 0 0;
	padding: 0 0 0 20px;
	text-decoration:underline;
	position: relative;
	display: block;
	color: var(--main);
	font-weight: var(--fw-light);
}
.aboutAl::before {
	content: "";
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: var(--main);
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
}
.aboutAl::after {
	content: "";
	width: 4px;
	height: 4px;
	border-top: 1px solid var(--wh);
	border-right: 1px solid var(--wh);
	position: absolute;
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
	left: 5px;
}
@media screen and (max-width:812px){
	a.aboutAl {
		margin: 10px 0 0 0;
		font-size: 1.2rem;
	}
}
/* 好評販売中 */
.onSale{
	width: 135px;
	height: 128px;
	position: absolute;
	right: 2%;
	top: 8%;
	z-index: 5;
}
@media screen and (max-width:812px){
	.onSale{
		width: 100px;
		height: auto;
		position: absolute;
		right: 2%;
		top: 48%;
		z-index: 5;
	}
}
/*
	message
-----------------------------------------------------------------------------------------------*/
.message{
	width: 100%;
	padding: 80px 0;
	background: url("../images/bg_grada.png") no-repeat center / cover;
	text-align: center;
}
.message p {
	color: var(--main);
	font-size: 2.6rem;
	font-family: var(--ff-min);
	font-weight: var(--fw-semiB);
	line-height: var(--lh-tall);
	letter-spacing: var(--ls-wide);
}
@media screen and (max-width:812px){
	.message{
		padding: 30px 0;
	}
	.message p {
			font-size: 1.7rem;
			line-height: var(--lh-normal);
	}
}
/*
	info
-----------------------------------------------------------------------------------------------*/
.info{
	padding: 70px 0;
	text-align: center;
}

.infoTit{
	margin-bottom: 30px;
	color: var(--main);
	font-size: 2.6rem;
	font-family: var(--ff-min);
	font-weight: var(--fw-semiB);
	letter-spacing: var(--ls-wide);
}
.infoTxt{
	font-size: 1.6rem;
	font-weight: var(--fw-light);
	letter-spacing: var(--ls-wide);
}
.info ul{
	display: flex;
	justify-content: center;
	gap: 20px;
}

.info ul li{ 
	width: 345px;
	margin-top: 30px;
	padding: 20px 0;
	background-color: var(--gl);
	font-size: 1.8rem;
	color: var(--wh);
	letter-spacing: var(--ls-wide);
	font-weight: var(--fw-light);
}
.info ul li a { 
	color: var(--wh);
	text-decoration: none;
	display: block; 
	position: relative;
}
.info ul li a::after {
	content: "";
	width: 8px;
	height: 8px;
	border-top: 2px solid var(--wh);
	border-right: 2px solid var(--wh);
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%) rotate(45deg);
}
@media screen and (max-width:812px){
	.info{
		padding: 55px 20px 80px 20px;
		text-align: center;
	}
	.infoTit{
		margin-bottom: 30px;
		font-size: 2rem;
	}
	.info ul{
		margin-top: 30px;
		display: block;
	}
	.info ul li{ 
		width: 100%;
		margin-top: 15px;
		padding: 15px 0;
	}
}
/*
	footer
-----------------------------------------------------------------------------------------------*/
#footer{
	padding: 30px;
	color: var(--wh);
	font-weight: var(--medium);
	background: var(--main);
	position: relative;
}
.footer__top{
	margin: 0 0 15px;
}
@media screen and (max-width:812px){
	#footer{
		display: block;
		padding: 15px 20px;
		text-align: center;
	}
	.footer__top{
		display: block;
	}
	.footer__btm{
		display: block;
	}
	#footer_copyright{
		margin: 10px 0 0;
	}
}

a.footer__txtLink{
	padding: 0 0 0 20px;
	position: relative;
	color: var(--wh);
}
.footer__txtLink::before{
	content: "";
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: var(--wh);
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
}
.footer__txtLink::after{
	content: "";
	width: 4px;
	height: 4px;
	border-top: 1px solid var(--main);
	border-right: 1px solid var(--main);
	position: absolute;
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
	left: 5px;
}
@media screen and (max-width:812px){
	a.footer__txtLink{
		display: inline-block;
		margin: 10px 0 0;
	}
}

#footer__list li{
	margin: 0 15px 0 0;
	padding: 0 20px 0 0;
	font-size: 1.3rem;
	position: relative;
}
#footer__list li:last-of-type{
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}
#footer__list li::after{
	content:'|';
	position: absolute;
	right: 0;
}
#footer__list li a{
	color: var(--wh);
}
#footer__list li a:hover{
	opacity: 1.0;
	text-decoration: none;
}
#footer__list li:last-of-type::after{
	content:none;
}
@media screen and (max-width:812px){
	#footer__list{
		-ms-justify-content: center;
		justify-content: center;
		margin: 0 0 -5px;
	}
	#footer__list li{
		margin: 0 15px 5px 0;
	}
	#footer__list li:last-of-type{
		margin: 0 0 5px 0;
	}
}
/*
	pageTop
-----------------------------------------------------------------------------------------------*/
#pageTop{
	width:70px;
	height:70px;
	background:url("../images/pageTop.svg") center no-repeat;
	position: absolute;
	right: 30px;
	z-index: 98;
}

@media screen and (max-width:812px){
	#pageTop{
		width:55px;
		height:55px;
		margin-bottom: 10px;
		right: 15px;
	}
}