/* CSS Document */
:root {
	--main-wid: 1000px;
	--main-body-wid: calc(var(--main-wid) - 80px);
	--main-body-mag: 20px;
	--main-body-ttl-hei: 50px;
	--main-body-pad: 30px;
	--main-body-bar-rad: 3px;
	--main-font-size-j: 18px;
	--main-font-size-e: 22px;
	--main-font-color: #d2dfda;
	--hover-font-color: #87bca7;
	--detail-font-size-j: 34px;
	--detail-font-size-e: 42px;
}

html { scroll-behavior: smooth; }

header {
	position: fixed;
	inset: 0;
	z-index: 100;
	/*DEBUG用BOREDER
border: 3px solid black;
*/
}

body {
	padding: 50px;
	margin: 0;
	font-family: main;
	background-size: cover;
}

hr {
	margin: 20px;
	width: 90%;
}

.hover_on {
	cursor: pointer;
	width: fit-content;
	height: fit-content;
	white-space: nowrap;
	padding: auto 0px;
}
.hover_on:hover {
	opacity: 0.7;
}
.hover_on a {
	color: #f3fcfe;
}

img {
	vertical-align: middle;
}

/* LINK設定 */
a {
	color: #87bca7;
	text-decoration: none;
	cursor: pointer;
}

iframe {
	margin: 55px auto 0 auto;
}

/* FONT-FACE設定 main   [Maiandra GD] */
@FONT-FACE {
	font-family: 'main';
	/* src: url('../font/GenEiLateGoN_v2-W2.woff') format('woff'); */
	src: url('../font/main.woff') format('woff');
}
/* FONT-FACE設定 song_j [BIZ UDGothic] */
@FONT-FACE {
	font-family: 'song_j';
	/* src: url('../font/NtMotoyaAporoStd-W2.woff') format('woff'); */
	src: url('../font/main.woff') format('woff');
}
/* FONT-FACE設定 song_e [Maiandra GD] */
@FONT-FACE {
	font-family: 'song_e';
	src: url('../font/Maiandra.TTF') format('truetype');
}
/* FONT-FACE設定 others [NtMotoyaAporoStd-W2] */
@FONT-FACE {
	font-family: 'others';
	src: url('../font/NtMotoyaAporoStd-W2.woff') format('woff');
}
/* FONT-FACE設定 LOADING  [Exan] */
/* @FONT-FACE {
	font-family: 'loading';
	src: url('../font/Exan.woff') format('woff');
} */

/* Footer */
#footer {
	margin-top: 40px;
}
#footer a {
	color: var(--main-font-color);
}

.flex_on {
	display: -webkit-flex;	/* Chrome 21-27 */
	display: -moz-box;		/* Firefox 2-21 */
	display: -ms-flexbox;	/* IE9 */
	display: flex;
	position: relative;
}

.bg {
	padding: 0px;
	background-image: url(../img/background_forest.jpg);
	background-attachment: fixed;
	background-position: center;
}

/* Container:中央寄せ */
.main_body_all {
	width: fit-content;
	height: fit-content;
	margin: 30px auto;
/*DEBUG用BOREDER
border: 3px solid red;
*/
}
.main_body_all_c, 
.main_body_all_l, 
.main_body_all_r {
	/* width: 350px; */
	/* height: 100%; */
	position: relative;
	/* display: flex; */
	font-size: 9px;
	z-index: 10;
}
.main_body_all_c {
	width: fit-content;
	margin: 0 auto 10px auto;
}
.main_body_all_l {
	margin: 0 auto 0 var(--main-body-mag);
}
.main_body_all_r {
	margin: 0 var(--main-body-mag) 0 auto;
}

.main_body_sub, 
.main_body_line, 
.main_body_desc, 
.main_body_desc_c {
	width: fit-content;
	margin: 0px auto;
}

.main_body_sub {
	display: flex;
	align-items: center;
	margin: 15px 0;
	font-family: "song_j", "song_e", sans-serif;
	font-size: 26px;
	font-weight: bold;
	color: #5b3009;
	text-shadow: 0 0 3px rgba(255, 255, 255, 0.8);
	img {
		width: 30px;
		height: auto;
		vertical-align: middle;
		filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.6));
	}
}

.main_body_line {
	padding-bottom: 15px;
}

.main_body_desc {
	text-align: left;
	font-size: 12px;
	padding: 10px;
	color: #737373;
	line-height: 25px;
}

.main_body_desc_c {
	text-align: center;
	font-size: 10px;
	color: #737373;
	line-height: 25px;
	a {
		display: inline-block;
		margin: 15px auto;
	}
}

/* ************************/
/*	SONG関連
/* ************************/
.main_body_song {
	width: fit-content;
	margin: 35px auto;
	color: var(--main-font-color);
	text-shadow: 0 0 2px rgba(83, 177, 146, 0.8);
}
.main_body_song_j, 
.main_body_song_e {
	width: fit-content;
	margin: 0px auto;
}
.main_body_song_j,
.song_title_j {
	font-family: "song_j", "song_e", sans-serif;
}
.main_body_song_e,
.song_title_e {
	font-family: "song_e", "song_j", sans-serif;
}
.main_body_song_j {
	font-size: var(--main-font-size-j);
	letter-spacing: 5px;
	padding: 12px 0 0 0;
}
.main_body_song_e {
	font-size: var(--main-font-size-e);
	letter-spacing: 2px;
	padding: 5px;
}

.song_lylics {
	margin-top: 15px;
}

/* ************************/
/*	各種部品
/* ************************/
.mark_s {
	width: 14px;
	height: auto;
	margin: -2px;
	vertical-align: middle;
	filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.6));
}
.line_art {
	width: 550px;
	/* height: 10px; */
	filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
}
.caution {
	margin-top: 20px;
}
.caution_row {
	display: grid;
	align-items: center;
	grid-template-columns: repeat(7, auto);	/* 列の数と幅 繰り返し（repeat(4, 90px 40px)の書き方も可 */
	gap: 0 4px;								/* 行・列間の間隔 */
	color: var(--main-font-color);
}
.caution_row_desc {
	padding: 0 7px;
	color: #520808;
	font-size: 10px;
	font-weight: bold;
	text-shadow: 0 0 2px rgb(225, 255, 245);
}

/* ************************/
/*	MENU・SUB-MENU
/* ************************/
.menu {
	display: grid;
	font-size: 12px;
	margin-top: 15px;
	justify-content: center;				/* 横位置 */
	align-content: center;				/* 縦位置 */
	grid-auto-rows: 25px;				/* 行の高さ */
	grid-template-rows: 30px;			/* 行の高さ(1行だけor先頭行にのみ適用したい時) */
	grid-template-columns: repeat(4, 100px);	/* 列の数と幅 */
	gap: 10px							/* 行・列間の間隔 */
}
.menu div {
	display: table-cell;
	text-align: center;
	align-content: center;				/* 縦位置 */
	color: var(--main-font-color);
	font-family: "song_e", "song_j", sans-serif;
	font-weight: bold;
	text-shadow: 0 0 2px rgba(211, 255, 240, 0.8);
	letter-spacing: 1px;
	background-image: url(../img/link_bg.svg);
	background-size: contain;
	background-repeat: no-repeat;
}
.sub_menu {
	width: 170px;
	height: 50px;
	margin: 20px auto;
	justify-content: center;				/* 横位置 */
	align-content: center;				/* 縦位置 */
	background-image: url(../img/link_bg.svg);
	background-size: cover;
	background-repeat: no-repeat;
}
.sub_menu div {
	font-size: 20px;
	text-align: center;
	font-family: "song_e", "song_j", sans-serif;
	color: var(--main-font-color);
}

/* ************************/
/*	SONG_LINK
/* ************************/
.song_name_j,
.song_name_e {
    display: inline-block;
	height: 20px;
    text-decoration: none;
    transition: .3s;
	color: var(--main-font-color) !important;
}
.song_name_j:hover,
.song_name_e:hover, 
#footer a:hover {
    transform: translateY(-1px);
	color: var(--hover-font-color) !important;
	text-shadow: 1px 0 3px rgba(47, 73, 66, 0.8);
}

/* ************************/
/*	SONG_DETAIL
/* ************************/
.song_title_j, 
.song_title_e {
	margin-bottom: 8px;
	text-shadow: 0 0 3px rgba(33, 42, 39, 0.8);
}
.song_title_j {
	font-size: var(--detail-font-size-j);
	letter-spacing: 5px;
}
.song_title_e {
	font-size: var(--detail-font-size-e);
	letter-spacing: 2px;
}
.song_detail {
	line-height: 30px;
	text-align: center;
	color: #004848;
	font-size: 12px;
	font-family: "main", "song_e", "song_j", sans-serif;
	img {
		margin-bottom: 25px;
	}
}
.song_credit {
	margin-bottom: 25px;
	line-height: 17px;
	color: #77220d;
	font-size: 12px;
	font-family: "song_e", "song_j", sans-serif;
	text-shadow: 0 0 2px rgba(33, 42, 39, 0.8);
}

#tb_sub {
	width: 600px;
	border-style: outset;
	border-width: 1px;
	padding: 0px;
}
#tb_sub td {
	font-size: 9pt;
	border-top: 1px solid #333333;
	border-right: 1px solid #909090;
	border-bottom: 1px solid #999999;
	border-left: 1px solid #333333;
	margin: 0.5px;
	padding: 0px;
}
#tb_recommends TD {
	border: 0px;
	border-style: none;
	border-collapse: collapse;
	padding: 3px;
	vertical-align: top;
	font-size: 9px;
	color: var(--main-font-color);
}
#jacket 			 { width: 170px; }
#song_no 			 { width:  30px; font-weight: bold; text-align: right; }
#song_nm 			 { width: 260px; font-weight: bold; }
#recom_comment { width: 750px; }
#credit_stuff  { width:  80px; font-weight: bold; text-align: right; }
#credit_act 	 { width:  40px; font-weight: bold; text-align: right; }
#credit_nm     { width: 215px; font-weight: bold; }
#recom_nm 		 {
	width: 580px;
	background-color: #663333;
	font-weight: bold;
	font-size: 10px;
	border: 0px;
	margin: 0px 0px 3px 0px;
	padding: 5px;
}

/* ************************/
/*	MAIL送信
/* ************************/
/* MAIL送信ページ ヘッダー */
.mail_inp_tb {
	font-size: 10pt;
	color: var(--intro-line-color);
	padding: 0px;
	border-collapse: collapse;
}
/* MAIL送信ページ 入力欄 */
.mail_inp_td1 {
	text-align: right;
	/* background-color: var(--intro-line-color); */
	padding: 10px;
	border-top: 1px solid var(--intro-line-color);
	border-bottom: 1px solid var(--intro-line-color);
	border-right: 1px solid var(--intro-line-color);
}
.mail_inp_td2 {
	padding: 10px;
	border-top: 1px solid var(--intro-line-color);
	border-bottom: 1px solid var(--intro-line-color);
	border-left: 1px solid var(--intro-line-color);
}
.mail_inp_td3 {
	padding-top: 15px;
	text-align: center;
	align-items: center;
}

.mail_inp_mark {
	margin-left: 3px;
}

/* ************************/
/*	LINKへJUMP装飾用
/* ************************/
:root {
	--trn:  10px;
	--trn_0: 1px;
	--trn_1: calc(var(--trn) + 1px);
	--trn_2: calc(var(--trn) * 2 + 1px);
	--trn_3: calc(var(--trn) * 3 + 1px);
	--trn_4: calc(var(--trn) * 4 + 1px);
	--dulation: 3.0s;
	--sec_2: calc(var(--dulation) * 0.25);
	--sec_3: calc(var(--dulation) * 0.5);
	--sec_4: calc(var(--dulation) * 0.75);
	--bd-color: rgb(28, 69, 105);
	--bd-size: 7px;
}
.arrow_container {
	display: flex;
	margin: 20px auto;
}
.arrow_all {
	position: relative;
	width: 40px;
	height: 20px;
	display: flex;
	margin: auto 10px;
	justify-content: center;
	align-items: center;
}
.slide_1, 
.slide_2, 
.slide_3, 
.slide_4 {
	position: absolute;
}
.slide_l {
	right: 0;
}
.slide_r {
	left: 0;
}
.slide_r.slide_1 {
	-webkit-animation: slide_r_1 var(--dulation) linear infinite; 
	animation: slide_r_1 var(--dulation) linear infinite;
}
.slide_r.slide_2 {
	-webkit-animation: slide_r_2 var(--dulation) linear infinite; 
	animation: slide_r_2 var(--dulation) linear infinite;
}
.slide_r.slide_3 {
	-webkit-animation: slide_r_3 var(--dulation) linear infinite; 
	animation: slide_r_3 var(--dulation) linear infinite;
}
.slide_r.slide_4 {
	-webkit-animation: slide_r_4 var(--dulation) linear infinite; 
	animation: slide_r_4 var(--dulation) linear infinite;
}
.slide_l.slide_1 {
	-webkit-animation: slide_l_1 var(--dulation) linear infinite; 
	animation: slide_l_1 var(--dulation) linear infinite;
}
.slide_l.slide_2 {
	-webkit-animation: slide_l_2 var(--dulation) linear infinite; 
	animation: slide_l_2 var(--dulation) linear infinite;
}
.slide_l.slide_3 {
	-webkit-animation: slide_l_3 var(--dulation) linear infinite; 
	animation: slide_l_3 var(--dulation) linear infinite;
}
.slide_l.slide_4 {
	-webkit-animation: slide_l_4 var(--dulation) linear infinite; 
	animation: slide_l_4 var(--dulation) linear infinite;
}

.fade_1, 
.fade_2, 
.fade_3, 
.fade_4 {
	width: var(--bd-size);
	height: var(--bd-size);
	border: 2px solid;
	border-color: var(--bd-color) transparent transparent var(--bd-color);
	transform: rotate(-45deg);
}
.fade_l {
	transform: rotate(135deg);
}
.fade_r {
	transform: rotate(-45deg);
}

.fade_1, 
.fade_2, 
.fade_3 {
	-webkit-animation: fade var(--dulation) linear infinite; 
	animation: fade var(--dulation) linear infinite;
}
.fade_2 {
	-webkit-animation-delay: var(--sec_2); 
	animation-delay: var(--sec_2);
}
.fade_3 {
	-webkit-animation-delay: var(--sec_3); 
	animation-delay: var(--sec_3);
}
.fade_4 {
	-webkit-animation: fade_4 var(--dulation) linear infinite; 
	animation: fade_4 var(--dulation) linear infinite;
}

@keyframes slide_l_1 {
    0% { transform: translateX(calc(var(--trn_1) * -1)); }	
   25% { transform: translateX(calc(var(--trn_0) * -1)); }	
   26% { transform: translateX(calc(var(--trn_4) * -1)); }	
   50% { transform: translateX(calc(var(--trn_3) * -1)); }	
   75% { transform: translateX(calc(var(--trn_2) * -1)); }	
  100% { transform: translateX(calc(var(--trn_1) * -1)); }	
}
@keyframes slide_l_2 {
    0% { transform: translateX(calc(var(--trn_2) * -1)); }	
   25% { transform: translateX(calc(var(--trn_1) * -1)); }	
   50% { transform: translateX(calc(var(--trn_0) * -1)); }	
   51% { transform: translateX(calc(var(--trn_4) * -1)); }	
   75% { transform: translateX(calc(var(--trn_3) * -1)); }	
  100% { transform: translateX(calc(var(--trn_2) * -1)); }	
}
@keyframes slide_l_3{
    0% { transform: translateX(calc(var(--trn_3) * -1)); }	
   25% { transform: translateX(calc(var(--trn_2) * -1)); }	
   50% { transform: translateX(calc(var(--trn_1) * -1)); }	
   75% { transform: translateX(calc(var(--trn_0) * -1)); }	
   76% { transform: translateX(calc(var(--trn_4) * -1)); }	
  100% { transform: translateX(calc(var(--trn_3) * -1)); }	
}
@keyframes slide_l_4{
    0% { transform: translateX(calc(var(--trn_4) * -1)); }	
   25% { transform: translateX(calc(var(--trn_3) * -1)); }	
   50% { transform: translateX(calc(var(--trn_2) * -1)); }	
   75% { transform: translateX(calc(var(--trn_1) * -1)); }	
   99% { transform: translateX(calc(var(--trn_0) * -1)); }	
  100% { transform: translateX(calc(var(--trn_4) * -1)); }	
}
@keyframes slide_r_1 {
    0% { transform: translateX(var(--trn_1)); }	
   25% { transform: translateX(var(--trn_0)); }	
   26% { transform: translateX(var(--trn_4)); }	
   50% { transform: translateX(var(--trn_3)); }	
   75% { transform: translateX(var(--trn_2)); }	
  100% { transform: translateX(var(--trn_1)); }	
}
@keyframes slide_r_2 {
    0% { transform: translateX(var(--trn_2)); }	
   25% { transform: translateX(var(--trn_1)); }	
   50% { transform: translateX(var(--trn_0)); }	
   51% { transform: translateX(var(--trn_4)); }	
   75% { transform: translateX(var(--trn_3)); }	
  100% { transform: translateX(var(--trn_2)); }	
}
@keyframes slide_r_3{
    0% { transform: translateX(var(--trn_3)); }	
   25% { transform: translateX(var(--trn_2)); }	
   50% { transform: translateX(var(--trn_1)); }	
   75% { transform: translateX(var(--trn_0)); }	
   76% { transform: translateX(var(--trn_4)); }	
  100% { transform: translateX(var(--trn_3)); }	
}
@keyframes slide_r_4{
    0% { transform: translateX(var(--trn_4)); }	
   25% { transform: translateX(var(--trn_3)); }	
   50% { transform: translateX(var(--trn_2)); }	
   75% { transform: translateX(var(--trn_1)); }	
   99% { transform: translateX(var(--trn_0)); }	
  100% { transform: translateX(var(--trn_4)); }	
}
@keyframes fade {
    0% { opacity: 1; }
   25% { opacity: 0; }
   28% { opacity: 0; }
   75% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes fade_4 {
    0% { opacity: 0; }
    3% { opacity: 0; }
   25% { opacity: 1; }
   75% { opacity: 1; }
  100% { opacity: 0; }
}

/* ************************/
/*	実サイトへ移動用
/* ************************/
#jump_site {
	width: fit-content;
	padding: 15px 20px;
	position: fixed;
	text-align: center;
	font-size: 10px;
	font-weight: bold;
	left: 10px;
	bottom: -80px;
	/* bottom: 10px; */
	opacity: 0.8;
	background-color: #f4f9fa;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.2);
	z-index: 100;
}

/* ************************/
/*	ページトップへ移動用
/* ************************/
#page_top {
	width: 50px;
	height: 50px;
	position: fixed;
	right: 10px;
	bottom: -50px;
	opacity: 0.6;
	background-image: url("../img/pagetop.svg");
	z-index: 100;
}

#page_top a {
	position: relative;
	display: block;
	width: 50px;
	height: 50px;
}

#page_top a::before {
	position: absolute;
}

.dv_banner {
	position: fixed;
	left: 0px;
	bottom: 0px;
	z-index: 1000;
/*DEBUG用
*/
}

/* ************************/
/*	PR
/* ************************/
.dv_tbl {
	display: table;
	position: relative;
}
.dv_cel {
	min-width: 234px;
	padding: 0px 10px 10px 10px;
	font-size: 9px;
	display: table-cell;
}
.dv_cel_s {
	padding: 0px 10px 10px 10px;
	font-size: 9px;
	display: table-cell;
}

.dv_pr {
	width: fit-content;
	margin: 10px auto 50px auto;
	padding: 20px 10px 10px 20px;
	background-color: #ceb584;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	box-shadow: 0px 0px 3px 2px rgba(50, 50, 50, 0.1) inset;	/* 内側 */
}

.dv_pr_top {
	width: 100px;
	height: 20px;
	margin: 0px auto 10px auto;
	text-align: center;
	position: relative;
	color: #ffffff;
	font-size: 10px;
	font-weight: bold;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	border-radius: 15px;
	background-color: #747474;
}
.dv_pr_top span {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 100%;
}