@charset "utf-8";



/*CSSカスタムプロパティ（サイト全体を一括管理する為の設定）
---------------------------------------------------------------------------*/
:root {

	--bg-color: #fff;			/*主にテンプレートの背景色*/
	--bg-inverse-color: #47443f;	/*上のbg-colorの対として使う色*/
	
	--content-space: 8.33vw;  /*余白の一括管理用。画面幅100% = 100vwです。（grid-boxと幅を合わせる為に100÷12=8.33にしました）*/

}

	/*画面幅500px以下の追加指定*/
	@media screen and (max-width:500px) {

	:root {
		--content-space: 10px 20px;	/*余白の一括管理用。小さな端末で余白を狭くする。*/
	}

	}/*追加指定ここまで*/


/*animation11のキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes animation1 {
	0% {left: -200px;}
	100% {left: 0px;}
}


/*opa1のキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes opa1 {
	0% {opacity: 0;}
	100% {opacity: 1;}
}


/*全体の設定
---------------------------------------------------------------------------*/
body * {box-sizing: border-box;}
html,body {
	font-size: 19.2px;	/*基準となるフォントサイズ。*/
}

body {
	margin: 0;padding:0;
	font-family: "Sawarabi Mincho", "Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;	/*フォント種類*/
	font-weight: 300;
	-webkit-text-size-adjust: none;
	background: var(--bg-color);	/*背景色*/
	color: var(--bg-inverse-color);		/*文字色*/
	line-height: 1.8;		/*行間*/
	overflow-x: hidden;
}

	/*画面幅500px以下の追加指定*/
	@media screen and (max-width:500px) {
	html, body {
		font-size: 16px;	/*基準となるフォントサイズ。*/
	}
	}/*追加指定ここまで*/


/*リセット*/
figure {margin: 0;}
dd {margin: 0;}
h1,h2,nav,ul,li,ol {margin: 0;padding: 0;}
nav ul {list-style: none;}

/*table全般の設定*/
table {border-collapse:collapse;}

/*画像全般の設定*/
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}

/*videoタグ*/
video {max-width: 100%;}

/*iframeタグ*/
iframe {width: 100%;}

/*他*/
input {font-size: 1rem;}
section > ol,section > ul {margin-left: 2rem;}


/*sectionの設定
---------------------------------------------------------------------------*/
section {
	padding: 4vw var(--content-space);
	margin: 0;
}


/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
	color: inherit;
	text-decoration: none;
	transition: 0.3s;	/*hoverまでにかける時間。0.3秒。*/
}

/*マウスオン時*/
a:hover {
	filter: brightness(1.1);	/*少しだけ明るくする*/
}


/*conatiner（サイト全体を囲むブロック）
---------------------------------------------------------------------------*/
#container {
	animation: opa1 0.2s 0.4s both;  /*0.4秒待機後、0.2秒かけてフェードイン*/
	display: grid;
	grid-template-rows: auto 1fr;	/*主にトップページ以外（※トップはコンテンツが多いので）用。mainの内容が少ない場合にfooterが浮かないように。*/
	min-height: 100vh;
}


/*header（ロゴが入ったブロック）
---------------------------------------------------------------------------*/
header {
	position: relative;
	/*padding-bottom: 6vh;*/
}

/*ロゴ画像*/
#logo {
	margin: 0;
	position: absolute;
	top: -24px;
	left: -24px;
	width: 360px;	/*ロゴの幅*/
}
	/*画面幅500px以下の追加指定*/
	@media screen and (max-width:500px) {
	#logo {
		width: 180px;	/*ロゴの幅*/
	}
	}/*追加指定ここまで*/

#logo img {
	display: block;
}

/*アワードヘッダー*/
.award-header {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100vw;
	height: 60vh;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0;
}

/*アワードロゴ画像*/
#award-logo {
	z-index: 100;
}

#award-logo img {
	display: block;
	width: 50vw;
	max-width: 700px;
	margin-left: -1vw;
}

#award-star01 {
	z-index: 90;
}

#award-star01 img{
	display: block;
	width: 35vw;
	min-width: 300px;
	position: absolute;
	top: -18vw;
	left: -10vw;
}

#award-star02 {
	z-index: 80;
}

#award-star02 img{
	display: block;
	width: 35vw;
	min-width: 300px;
	position: absolute;
	bottom: -18vw;
	right: -10vw;
}

#header-catch {
	width: 100vw;
	height: 60vh;
	overflow: hidden;
}

#header-image {
	position: absolute;
	top: 0;
	left:  0;
}

	/*画面幅500px以下の追加指定*/
	@media screen and (max-width:500px) {
	.award-header {
		height: 50vh;
	}

	#award-logo img {
		width: 80vw;	/*ロゴの幅*/
		margin-left: -5vw;
	}
	#award-star01 img{
		width: 60vw;
		min-width: inherit;
		top: -30vw;
		left: -20vw;
	}
	#award-star02 img{
		width: 60vw;
		min-width: inherit;
		bottom: -30vw;
		right: -20vw;
	}
	#header-catch {
		height: 50vh;
	}
	}/*追加指定ここまで*/


/*見出し
---------------------------------------------------------------------------*/
/*h2と、grid-box内のh3*/
#container h2 {
	font-size: 2rem;
	font-weight: 800;
}

#container h3 {
	font-size: 1.5rem;
	font-weight: 800;
}

	/*画面幅500px以下の追加指定*/
	@media screen and (max-width:500px) {
	#container h2 {
		font-size: 1.5rem;
		margin: 4vh 0;
	}

	#container h3 {
		font-size: 1.25rem;
	}
	}/*追加指定ここまで*/

#container h2, #container h3 {
	display: flex;
	flex-direction: column;	/*spanと表示順を入れ替える*/
	line-height: 1.5;	/*行間を少しつめる*/
}

/*上記のh2とh3の中で使うspan（小文字）*/
#container h2 span, #container h3 span {
	font-size: 0.8rem;	/*文字サイズ0.8倍*/
	font-weight: 300;
	opacity: 0.5;		/*透明度50%*/
	letter-spacing: 0.2em;	/*文字間隔を少しだけ広く*/
}


/*list-grid（2列に並んだリストブロック）
---------------------------------------------------------------------------*/
/* .list-grid .list *:not(.btn1 a) {margin: 0;padding: 0;} */

/*ブロック全体を囲むブロック*/
.list-grid {
	display: grid;
    grid-template-columns: repeat(2, 1fr);	/*3列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
	gap: 4vw 6vw;	/*ブロックの間に空けるスペース*/
	margin: 3vw 0;
}

/*ボックス１個あたり*/
.list-grid .list {
	display: grid;
	position: relative;
}

.list-grid .list .text{
	padding: 0 4vw 2vh;
}

	/*画面幅500px以下の追加指定*/
	@media screen and (max-width:500px) {
	.list-grid {
		grid-template-columns: repeat(1, 1fr);
	}

	.list-grid .list {
		margin-bottom: 6vh;
	}

	}/*追加指定ここまで*/

/*ボックス自体がボタン*/
.list-grid .list a.box_btn {
	display: block;
	background: var(--bg-color);	/*背景色*/
	color: var(--bg-inverse-color);	/*文字色*/
	border-radius: 5px;	/*角を丸くする指定。大きければ適当でOK。*/
	box-shadow: 0px 0px 20px rgba(0,0,0,0.1);	/*ボタンの影。右に、下に、ぼかす量、0,0,0は黒のことで0.1は色が10%出た状態。*/
	overflow: hidden;
}

/*マウスオン時*/
.list-grid .list a.box_btn:hover {
/*	background: var(--bg-inverse-color);	/*背景色*/
/*	color: var(--bg-color);		/*文字色*/
/*	box-shadow: none;	/*ボタンの影を消す*/
	background: linear-gradient(
    135deg,
    #e0e0e0 0%,
    #ffffff 30%,
    #b0b0b0 50%,
    #ffffff 70%,
    #e0e0e0 100%
	);
	box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
}

/*ランキング用（２位）の場所をずらす設定*/
.list-grid.step .list:nth-of-type(2) {
	margin-top: 30px;	/*上に空けるスペース*/
}

/*ランキング用（３位）の場所をずらす設定*/
.list-grid.step .list:nth-of-type(3) {
	margin-top: 60px;	/*上に空けるスペース*/
}

/*ボックス内のfigure画像（※アスペクト比を1:1にした場合）*/
.list-grid.square .list figure {
	width: 100%;
	aspect-ratio: 1 / 1;	/*幅に対して高さを同じにする*/
}
.list-grid.square .list figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;			/*コンテナいっぱいにカバー、余分な部分はカット*/
	object-position: center;	/*中央部分を表示*/
}

/*ボックス内のh3（見出し）*/
.list-grid h3 {
	text-align: center;		/*テキストをセンタリング*/
	margin-bottom: 0.5rem;
}

/*ボックス内のp（文章）*/
.list-grid p {
}

/* ランキングの旗 */
.rank-flag {
	position: absolute;
	left: -5px;	/*左からの配置場所*/
	top: -5px;	/*上からの配置場所*/
	width: 3rem;	/*幅*/
	height: 3rem;	/*高さ*/
	font-weight: bold;	/*太字に*/
  
  /* マスクの設定 */
  --mask-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L100,0 L100,100 L50,70 L0,100 Z' fill='%23000000'/%3E%3C/svg%3E");
  -webkit-mask-image: var(--mask-url);
  mask-image: var(--mask-url);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* 色のバリエーション */
.rank1 {
  background: #fddc00; /*背景色（金）*/
  color: #111;	/*文字色*/
}
.rank2 {
  background: #c0c0c0; /*背景色（銀）*/
  color: #fff;	/*文字色*/
}
.rank3 {
  background: #cd7f32; /*背景色（銅）*/
  color: #fff;	/*文字色*/
}


/*grid-box（色々なレイアウト用）
---------------------------------------------------------------------------*/
/*ボックス全体*/
.grid-box {
	padding: 0 5vw;
}

/*section内で使うgrid-boxの左右の余白をなくす*/
section .grid-box {
	margin-left: calc(-1 * var(--content-space));
	margin-right: calc(-1 * var(--content-space));
}

/*ボックス内のh2*/
.grid-box h2 {
	grid-column: 2 / 12;
}

/*ボックス内のh3*/
.grid-box h3{
	margin: 0;
}

/*画像と文字を囲むブロック*/
.grid-box article {
	display: grid;
	grid-template-columns: repeat(12, 1fr); /* 12等分 */
	gap: 4vw; /* 要素間の隙間 */
	margin-bottom: 5vw;	/*下に空けるスペース*/
	grid-auto-flow: dense;
}
.grid-box article:last-child {
  margin-bottom: 2vw;	/*最後のブロックの下マージンをなくす*/
}

/*imageとtextの設定*/
.grid-box .image,
.grid-box .text {
	align-self: center;
	position: relative;
}

/*imageのみの設定*/
.grid-box .image {
	grid-column: 1 / -1;
}

/*textのみの設定*/
.grid-box .text {
	grid-column: 2 / 12;
}

/*装飾イラスト用*/
.grid-box .kazari {
	display: block;
	position: absolute;
	z-index: 99;
	transform: translate(-50%, -50%);
	width: 150px;	/*幅*/
}

/*image-wide（横長で使う場合）*/
.grid-box .image-wide {
	grid-column: 2 / 12;
}

/*image-01*/
.grid-box .image-01 {
	grid-column: 8 / 12;
}
/*.text-01*/
.grid-box .text-01 {
	grid-column: 2 / 8;
}
/*image-01（左右入れ替え用）*/
.grid-box article.reverse .image-01 {
	grid-column: 2 / 6;
}
/*text-01（左右入れ替え用）*/
.grid-box article.reverse .text-01 {
	grid-column: 6 / 12;
}
/*image-01（ピックアップ用）*/
.grid-box article.pickup .image-01 {
	grid-column: 1 / 8;
}
/*text-01（ピックアップ用）*/
.grid-box article.pickup .text-01 {
	grid-column: 8 / 13;
}

	/*画面幅500px以下の追加指定*/
	@media screen and (max-width:500px) {

	.grid-box {
		padding: 0;
	}
	
	.grid-box .text {
		padding: 0 4vw 3vh;
	}

	/*飾り位置変更*/
	.grid-box .kazari {
		transform: translate(-20%, -50%);
	}

	/*section内で使うgrid-boxの左右の余白をデフォルトに戻す*/
	section .grid-box {
		margin-left: var(--content-space);
		margin-right: var(--content-space);
	}

	/*画像と文字を囲むブロック*/
	.grid-box article {
		display: block;
		margin-bottom: 60px;
	}
	
	}/*追加指定ここまで*/


/*btn1（ボタン）
---------------------------------------------------------------------------*/
.btn1 a {
	display: block;text-decoration: none;
	width: fit-content;
	margin: 0 auto;
	background: var(--bg-color);	/*背景色*/
	color: var(--bg-inverse-color);	/*文字色*/
	padding: 0.5rem 3rem;	/*ボタン内の余白。上下に0.5文字分、左右に3文字分。*/
	border-radius: 100px;	/*角を丸くする指定。大きければ適当でOK。*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広く*/
	box-shadow: 0px 0px 20px rgba(0,0,0,0.1);	/*ボタンの影。右に、下に、ぼかす量、0,0,0は黒のことで0.1は色が10%出た状態。*/
}

/*マウスオン時*/
.btn1 a:hover {
/*	background: var(--bg-inverse-color);	/*背景色*/
/*	color: var(--bg-color);		/*文字色*/
/*	box-shadow: none;	/*ボタンの影を消す*/
	background: linear-gradient(
    135deg,
    #e0e0e0 0%,
    #ffffff 5%,
    #b0b0b0 25%,
    #ffffff 45%,
    #e0e0e0 100%
	);
  box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
}


/*ボタン
---------------------------------------------------------------------------*/
.btn {
	-webkit-appearance: none;
	appearance: none;
	border: none;
	cursor: pointer;
	background: rgba(0,0,0,0.7);	/*背景色*/
	color: #fff;  /*文字色*/
	padding: 1rem 2rem;
	border-radius: 5px;
	transition: 0.3s;
}


/*フッター
---------------------------------------------------------------------------*/
footer * {margin: 0;padding: 0;}
footer ul {list-style: none;}

/*ブロック全体*/
footer {
	position: relative;
	line-height: 2;
	padding: 9vw var(--content-space) 3vw;
}

/*ロゴが入ったブロック（大きな画面だと左側）*/
footer .footer1 {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 1rem;	/*このブロック内のボックス同士の間に空ける余白。１文字分。*/
	margin-bottom: 30px;
	padding: 0 4vw;
}

footer .footer2 {
	padding: 0 4vw;
}

footer .footer3 {
	padding: 0 4vw;
}

/*フッター内のロゴ*/
footer .logo {
	width: 200px;	/*幅*/
	/*margin-left: calc(-1 * var(--content-space)); */
	/*margin-top: calc(-1 * var(--content-space)); */
}

/*SNSアイコン
---------------------------------------------------------------------------*/
footer .sns {
	list-style: none;
	margin: 0;padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;		/*アイコン同士のマージン的な要素。１文字分。*/
}

footer .sns i {
	font-size: 30px;	/*アイコンサイズ*/
}

/*地図が入ったブロック（大きな画面だと右側）*/
footer .footer2 {
    flex: 1;
	align-content: flex-end;
}

	/*画面700px以上の追加指定*/
	@media screen and (min-width:700px) {

	footer {
		display: flex;
		gap: 2rem;		/*ロゴのブロックとメニューのブロックとの間の余白。2文字分。*/
	}

	/*ロゴが入ったブロック*/
	footer .footer1 {
		margin-bottom: 0;
		text-align: left;
	}

	}/*追加指定ここまで*/

footer dl {
	width: 100%;
	display: flex;
	flex-wrap: wrap; /* 折り返しを許可 */
	border-top: 1px dashed var(--bg-inverse-color);
	border-bottom: 1px dashed var(--bg-inverse-color);
	margin-bottom: 4vh;
}

footer dt {
  width: 80px; /* dtの幅 */
}

footer dd {
  width: calc(100% - 80px); /* ddの幅 */
  margin-left: 0; /* デフォルトの余白を消す */
}


/*Copyright部分*/
footer small {
	display: block;
}


/*SNSアイコン
---------------------------------------------------------------------------*/
.icons {
	z-index: 1000;
	list-style: none;
	margin: 0;padding: 0;
	line-height: 2;
	display: flex;
	flex-direction: column;  /*縦並び*/
	text-align: center;
	position: absolute;  /*アイコンを固定*/
	gap: 10px;
	left: 2vw;
	top: 1vw;  /*上からの配置場所*/
}
.icons i {
	font-size: 20px;	/*アイコンサイズ*/
}
.icons img {
	width: 6vw;	/*アイコンサイズ*/
	max-width: 50px;
	filter: invert(93%) sepia(13%) saturate(762%) hue-rotate(338deg) brightness(96%) contrast(89%); /*黒svgにシャンパンゴールド*/
}

/*bg1背景
---------------------------------------------------------------------------*/
.bg0 {
}

.bg1 {
	background: #f4f4f2;
}

.bg2 {
	background: url(../images/sub_bg01.jpg) repeat;
}

.bg3 {
	background: url(../images/sub_bg02.jpg) repeat;
}

.bg4 {
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 1) 100%), url(../images/sub_bg03.jpg) center center / cover no-repeat;
}

.bg5 {
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 1) 120%), url(../images/sub_bg04.jpg) repeat;
}

.bg6 {
	background: url(../images/sub_bg06.jpg) center center / cover no-repeat;
}


/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {display: block;}

/*ボタンの設定*/
.pagetop a {
	display: block;text-decoration: none;text-align: center;z-index: 99;
	animation: opa1 1s 0.4s both;
	position: fixed;	/*スクロールに追従しない(固定で表示)為の設定*/
	right: 20px;		/*右からの配置場所指定*/
	bottom: 20px;		/*下からの配置場所指定*/
	color: #fff;		/*文字色*/
	font-size: 1.5rem;	/*文字サイズ*/
	background: rgba(0,0,0,0.2);	/*背景色。0,0,0は黒の事で0.2は色が20%出た状態。*/
	width: 60px;		/*幅*/
	line-height: 60px;	/*高さ*/
	border-radius: 50%;	/*円形にする*/
}


/*その他
---------------------------------------------------------------------------*/
.clearfix::after {content: "";display: block;clear: both;}
.color-check, .color-check a {color: #c02340 !important;}
.l {text-align: left !important;}
.c {text-align: center !important;}
.r {text-align: right !important;}
.ws {width: 95%;display: block;}
.wl {width: 95%;display: block;}
.padding0 {padding: 0 !important;}
.mb0 {margin-bottom: 0px !important;}
.mb3rem {margin-bottom: 3rem !important;}
.mb30 {margin-bottom: 30px !important;}
.look {display: inline-block;padding: 0px 10px;background: rgba(0,0,0,0.7); color: #fff; border-radius: 3px;margin: 5px 0; word-break: break-all;}
.look .color-check {color: yellow !important;}
.small {font-size: 0.75em;}
.large {font-size: 2em; letter-spacing: 0.1em;}
.block {display: block !important;}
.opacity {opacity: 0.8;}
.grayscale {filter: grayscale(100%);}
.gold-gradient-image {background: linear-gradient(to bottom, rgba(212, 175, 55, 0.2) 0%, rgba(255, 237, 171, 0.9) 90%, rgba(255, 255, 255, 1) 100%), url("../images/main_bg03.jpg") center center / cover no-repeat;}
.gold-gradient-image-top {background: linear-gradient(to bottom, rgba(212, 175, 55, 0) 50%, rgba(255, 237, 171, 1) 100%), url("../images/main_bg04.jpg") center center / cover no-repeat;}
.gold-gradient-image-bottom {background: linear-gradient(to bottom, rgba(255, 237, 171, 1) 0%, rgba(255, 255, 255, 1) 120%);}
.gold-gradient-image-nofadeout {background: linear-gradient(to bottom, rgba(212, 175, 55, 0.2) 0%, rgba(255, 237, 171, 0.9) 100%), url("../images/main_bg03.jpg") center center / cover no-repeat;}
.gold-gradient {
  background: linear-gradient(
    to bottom,
    #d4af37 0%,     /* 標準的なゴールド（中間） */
    #ffedab 90%,     /* 明るいシャンパンゴールド */
    #ffffff 100%      /* 白に近い明るい色 */
  );}
.gold-gradient-reverse {
  background: linear-gradient(
    to bottom,
    #ffffff -20%,      /* 白に近い明るい色 */
    #ffedab 10%,     /* 明るいシャンパンゴールド */
    #d4af37 100%     /* 標準的なゴールド（中間） */
  );}
.pink-gold-gradient {
  background: linear-gradient(
    to bottom,
    #e5b3a3 0%,     /* ピンクゴールドの中間色 */
    #f8d7d0 90%,     /* 淡いピンク（シェルピンク） */
    #ffffff 100%      /* 白に近いハイライト */
  );}
.silver-gradient {
  background: linear-gradient(
	to bottom, 
	#a8a9ad 0%, 
	#e3e3e3 10%, 
	#ffffff 30%
  );}
.gold-border {
  /* 枠線の太さと、グラデーションの適用 */
  border-top: 10px solid;
  border-bottom: 10px solid;
  border-image: linear-gradient(to bottom right, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c) 1;
  /* 輝きを追加（ぼかし） */
  box-shadow: 0 0 10px rgba(191, 149, 63, 0.5);
}
.metallic-silver {
  border: 3px solid #ccc;
  border-image: linear-gradient(
    45deg, 
    #999 5%, 
    #fff 10%, 
    #ccc 30%, 
    #ddd 50%, 
    #ccc 70%, 
    #fff 80%, 
    #999 95%
  ) 1;
}
 
.fade-out {
  /* 下に向かって100%から0%の透明度へ */
  -webkit-mask-image: linear-gradient(to bottom, black 75%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 75%, transparent 100%);
}

.fade-out-full {
  /* 下に向かって100%から0%の透明度へ */
  -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
}

.t_fix {
	white-space: nowrap;
}

.c-pc {text-align: center;}

	@media screen and (max-width:500px) {
	.c-pc {text-align: left;}
	.br-none {display: none;}
	}

	@media screen and (min-width:501px) {
	}