:root {
	--main-text-color: #fff;
	--secondary-text-color:#2d0304;
	--navy-color:#0d1727;
	--main-bg-color:#0d1727;
	--secondary-bg-color:#ad8242;
	
	/* --main-btn-color:#213567;
	--main-btn-text-color:#f2d496;
	--main-btn-hover-color:#213567CC;

	--secondary-btn-color:#f2d496;
	--secondary-btn-text-color:#213567;
	--secondary-btn-hover-color:#f2d496CC; */

	--main-btn-color:#fff;
	--main-btn-outlite-color:#2d0304;
	--main-btn-text-color:#2d0304;
	--main-btn-hover-color:#f2d496CC;

	--secondary-btn-color:#2d0304;
	--secondary-btn-text-color:#fff;
	--secondary-btn-hover-color:#1a0304;
}


/* bootstrap4 hack*/
/* フロント側のボタン */
/* .front .btn{
	font-size:1.5rem;
} */

.no-gutters {
	margin:0;
	padding:0;
}
   
.no-gutters > .col,.no-gutters > [class*="col-"] {
	margin:0;
	padding:0;
}


/* 背景 */
.bg-main{background-color:var(--main-bg-color);}
.bg-secondary{background-color:var(--secondary-bg-color)!important;}
.bg-yellowocher{background-color:#b6893c;}
.bg-glay{background-color:#c6c6c6;}
.bg-black{background-color:#000000;}
.bg-white{background-color:#ffffff;}
.bg-aqua{background-color:aqua}
.bg-cream{background-color:#e5e3c6}
.bg-red{background-color:#f00}
.bg-pink{background-color:rgb(255, 115, 105)}

/* ランク背景 */
.bg-regular{background-color:#0066ad;}
.bg-bronze{background-color:#6c3c00;}
.bg-silver{background-color:#4e4e4e;}
.bg-gold{background-color:#ad8242;}
.bg-rank{
	border-radius: 1.75rem;
}
.bg-mypage{background-color: #f2d496;}

/* テキスト */
.text-main{color:var(--main-text-color);}
.text-secondary{color:var(--secondary-text-color)!important;}
.text-navy{color: var(--navy-color);}
.text-white{color:#FFF;}
.text-green{color:#28a745;}
.text-black{color:#000;}
.text-red{color:#ff0000;}
.overflow-hidden{overflow:hidden;}
.text-yellowocher{color:#AD8242;}
.text-bg{color:#213567!important;}


.text-yellow{color:#e8b400;}

.border-yellowocher{
	border-color:#f2d496!important;
	border-bottom:double;

}

.border-1{border-width:1px!important;}
.border-2{border-width:3px!important;}
.border-3{border-width:5px!important;}
.border-4{border-width:7px!important;}

/* 改行 */
@media screen and (min-width: 767px){	
	.br-pc { display:block; }
	.br-sp { display:none; }
}
@media screen and (max-width: 767px){	
	.br-pc { display:none; }
	.br-sp { display:block; }
}
/* 画像(縦横比を維持し、横幅いっぱい */
img.width_fill{
	width: 100%;
	height : auto;
}

img.inline{
	display: inline!important;
}

/*--------------- primary color ---------------*/
.btn-primary {
    background: var(--main-btn-color);
    border-color: var(--main-btn-color);
    color: var(--main-btn-text-color);
}

.btn-primary.outline {
    border: 3px solid var(--main-btn-outlite-color); /*アウトラインのみのボタンの線の色*/
    color: var(--main-btn-text-color); /*アウトラインのみのボタンのテキストの色 */
}
.btn-primary:hover{
	background: var(--main-btn-hover-color);
    border-color: var(--main-btn-hover-color);
    color: var(--main-btn-text-color);
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    background: var(--main-btn-color);
    border-color: var(--main-btn-color);
    color: var(--main-btn-text-color);
}

.btn-primary:focus, .btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem var(--main-btn-hover-color);
}

.btn-primary.disabled, .btn-primary:disabled,.btn-primary.focus, .btn-primary:focus{
	background-color:  var(--main-btn-hover-color);
	border-color:  var(--main-btn-hover-color);
}

.btn-primary.disabled,
.btn-primary.disabled:hover, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus, .btn-primary[disabled]:focus, fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus, .btn-primary[disabled].focus, fieldset[disabled] .btn-primary.focus {
    background: var(--main-btn-hover-color);
    border-color: var(--main-btn-hover-color);
    color: var(--main-btn-text-color);
}

.btn-outline-primary{
    border-color: #2d0304;
    color: #2d0304;
}
.btn-outline-primary:hover{
    border-color: #756a51;
    color: #756a51;
	background-color:initial;
}


/*--------------- secondary color ---------------*/
.btn-secondary {
    background: var(--secondary-btn-color);
    border-color: var(--secondary-btn-color);
    color: var(--secondary-btn-text-color);
}

.btn-secondary.outline {
    border: 3px solid var(--secondary-btn-color); /*アウトラインのみのボタンの線の色*/
    color: var(--secondary-btn-text-color); /*アウトラインのみのボタンのテキストの色*/
}

.btn-secondary:hover{
	background: var(--secondary-btn-hover-color);
    border-color: var(--secondary-btn-hover-color);
    color: var(--secondary-btn-text-color);
}

.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle {
    background: var(--secondary-btn-color);
    border-color: var(--secondary-btn-color);
    color: var(--secondary-btn-text-color);
}

.btn-secondary:focus, .btn-secondary.focus,
.btn-secondary:not(:disabled):not(.disabled):active:focus,
.btn-secondary:not(:disabled):not(.disabled).active:focus,
.show > .btn-secondary.dropdown-toggle:focus {
	box-shadow: 0 0 0 0.2rem var(--secondary-btn-hover-color);
}

/*--------------- navy color ---------------*/
.btn-navy {
    background: var(--navy-color);
    border-color: var(--navy-color);
    color: var(--secondary-btn-text-color);
	padding: 12px;
}
.btn-navy:hover {
	opacity: 0.5;
	color: #ffffff;
}




/*----------------show color ---------------*/
.btn-show {
    background: #ffffff;
    border-color: #AD8242;
    color: #000000;
    border-width:4px;
}

.btn-show:hover, .btn-show:focus,
.btn-show:active, .btn-show:active:focus, .btn-show:active:hover, .btn-show:active.focus,
.btn-show.active, .btn-show.active:focus, .btn-show.active:hover, .btn-show.active.focus,
.open > .dropdown-toggle.btn-show,
.open > .dropdown-toggle.btn-show:hover,
.open > .dropdown-toggle.btn-show:focus,
.open > .dropdown-toggle.btn-show.focus,
.btn-show.disabled:hover, .btn-show[disabled]:hover, fieldset[disabled] .btn-show:hover,
.btn-show.disabled:focus, .btn-show[disabled]:focus, fieldset[disabled] .btn-show:focus,
.btn-show.disabled.focus, .btn-show[disabled].focus, fieldset[disabled] .btn-show.focus {
    background: #212121;
    border-color: #AD8242;
    color: #ffffff;
}

.btn-show.outline {
    border: 3px solid #212121; /*アウトラインのみのボタンの線の色*/
    color: #ffffff; /*アウトラインのみのボタンのテキストの色*/
}

/*--------------------------------------------------------*/

/* エラーボックスHack */
.alert-danger {
    color: #ffffff;
    background-color: #ff4c5d;
    border-color: #f5c6cb;
}

.font-ab{
	font-family: ab;
}
.font-ltc-broadway{
	font-family: "ltc-broadway-engraved";
	font-weight: 400;
	font-style:normal;
}

.font-filmotype{
	font-family: "filmotype-lacrosse";
	font-weight: 400;
	font-style:normal;
}

.largefont{ font-size: 5.0em; }
@media (max-width:767px) {
	.largefont{font-size:3.5em;}
}

.middlelarge_font{font-size:2em;}
.middle_font{font-size:1.5em;}
.middlesmall_font{font-size:1.2rem;}

.top_welcome_font{font-size:2em;}
@media (max-width:767px) {
	.top_welcome_font{font-size:1.5em;}
}

.screen_head_vh{
	height:20vh;
}

/* 各画面 */
.screen_topbg_vh{
	height:40vh;
}
.screen_bg_vh{
	height:50vh;
}
.screen_title_vh{
	height:30vh;
}


/* ボタン */
.btn-outline-yellowocher{
	color: #ccb88d;
	background-color: transparent;
	background-image: none;
	border-color: #ccb88d;
}


.btn-outline-black{
	color: #b6893c;
	background-color: transparent;
	background-image: none;
	border-color: #222221;
}

.btn-outline-black_white{
	color: #fff;
	background-color: transparent;
	background-image: none;
	border-color: #222221;
}

.btn-outline-yellowocher_white,.btn-outline-yellowocher_white:hover{
	color: #fff;
	background-color: #b6893c;
	background-image: none;
	border-color: #b6893c;
}


.main-font{
	font-family: 'Yatra One', cursive;
}


/* TOP */
.top-title-line-height{
	line-height:2em;
}

/* Whisky */
.whisky-detail{
	min-height:8em;
}
@media (max-width:769px) {
	.whisky-detail{
		min-height:0em;
	}
}

.product-name{
	min-height:4em;
	font-size:1.5rem;
}
@media (max-width:769px) {
	.product-name{
		min-height:2em;
	}
}

.menu_loginout{
	position:absolute;
	right:1em;
	top : 3em;
	transform: translate(0%,0%);
}
@media (max-width:540px) {
	.menu_loginout{
		top : 1em;
		right:0em;
	}
}

/* ヘッダー */
header{
	font-size:13px;		/* 13px = タブレット横  */
}


div.header_sentence{
	font-size:3.5rem;
	font-family: "filmotype-lacrosse";
	font-weight: 400;
	font-style:normal;
	line-height: 2.5rem;
}

div.footer_contents{
	position : relative;
}

div.footer_copyright{
	font-size:1.25em;
	font-weight:bold;
}

/* ログイン画面背景画像 */
.login-bg-img{
	background: url(/images/login-background.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.timeline-btn{
	font-size:1rem!important;
	padding: 0.2rem 0.4rem;
}

.rank_desc-bg-img:before{
	content:"";
	display:block;
	position:fixed;
	top:0;
	left:0;
	z-index:-1;
	width:100%;
	height:100vh;
	background:url(/images/mypage/status-bg.jpg) center/cover no-repeat;
	-webkit-background-size:cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	overflow:hidden;
}

div.login_bg_height,div.contents_bg_height{
	min-height: 690px;
}

div.contents_bg{
	background-color: rgba(45, 3, 4, 0.9);
}
div.error_container{
	min-height: 600px;
}

nav.mobile_menu{
	position : fixed;
	top : 0;
	right : 0;
	z-index: 20;
	padding : 0.15rem;
}

nav.desktop_menu{
	position : fixed;
	top : 0;
	right : 0;
	z-index: 20;
	padding : 0.5rem;
}


/* regist */
div.box_scroll{
	overflow:auto;
	height:320px;
	border:1px solid #000;
	background-color:#F9F9F9;
	color:#000;
	font-size:12px;
}

div.top_card{
	min-height:600px;
	position: relative;
	overflow: hidden;
}

@media (max-width:767px) {
	div.top_card{
		min-height:350px;
		position: relative;
		overflow: hidden;
	}
}

div.top_card > img.bg{
	left: 50%;
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    object-fit: cover; /* 比率保持して拡大 */
}

div.top_contents_glay{
	background : url(/images/top_glay.png)  center repeat;
	/* background-size: cover; */
	min-height: 335px;
}
@media (max-width:767px) {
	div.top_contents_glay{
		background : url(/images/top_glay.png)  center repeat;
		/* background-size: cover; */
		min-height: 200px;
	}
}

/* 画像を丸く切り抜く */
.image-round1{
  border-radius: 50%;
}

/* 中央寄せ */
img {
	display: block;
	margin: 0 auto;
}

/*----------------------------- mypage -----------------------*/
.mypage_conteinar .mypage_contents{
	min-height:650px;
}

.mypage_conteinar .mypage_headimg{
	min-height:500px;	
}
@media (max-width:767px) {
	.mypage_conteinar .mypage_contents{
		min-height:450px;
	}
	.mypage_conteinar .mypage_headimg{
		min-height:250px;
	}
}

.mypage_conteinar .rank-box{
	height:3rem;
}
.mypage_conteinar .rank-text{
	font-size:2.5rem;
}
@media (max-width:480px) {
	.mypage_conteinar .rank-text{ font-size:1.7rem; }
}
.mypage_conteinar .rank-badge{
	height:13rem;
}

.mypage_conteinar .triangle{
	border-top:   solid 16px var(--main-bg-color);
	border-left:  solid 16px transparent;
	border-right: solid 16px transparent;
}

.mypage_conteinar .my_parent{
	position:relative
}
.mypage_conteinar .my_child{
	position:absolute;
	left:50%;
	top:50%;
	transform: translate(-50%,-50%);
}

.mypage_conteinar .post_contents{
	word-wrap:break-word;
}

.mypage_menutab a{ 
	color:var(--secondary-text-color); 
	word-wrap:break-word;
}
/* @media (max-width:540px) {
	.mypage_menutab a{ font-size:0.8rem; };
} */
.mypage_menutab a:hover{
	color:#c6c6c6;
	text-decoration: none;
}
/* ページング処理 */
.page-item.active .page-link{
	z-index: 1;
    color: #fff;
    background-color: #ad8242;
    border-color: #ad8242;
}

.page-link:focus, .page-link.focus,
.page-link:not(:disabled):not(.disabled):active:focus,
.page-link:not(:disabled):not(.disabled):focus,
.show > .page-link.dropdown-toggle:focus {
	box-shadow: 0 0 0 0.2rem rgba(33, 33, 33, 0.5);
}

/* フッタの最下部固定 */
html {
  height: 100%;
  font-size:14px;
  overscroll-behavior: none;	/* バウンススクロール */
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  color:#fff;
  font-family: 'Times New Roman', Times, serif; 
  /* font-family:"arial", "Meiryo", "MS PGothic", "sans-serif"; */
  font-weight: bold;
  font-size: 1.2rem;
}


/* メインコンテンツ */
.my_container {
	flex: 1;
}

/* 共通モーダルの設定 */
.commonModal{
	color:#000000;
}

.font-18{
	font-size: 18px;
}

/*------ POST ----------*/
/* POSTコンテンツ内の画像はレスポンシブ */
div.post_contents * img{
    height:auto;
    max-width:100%;
}
.post_img{
	max-height:400px;
}

/*------ タイムライン -----*/


div.timeline_pageing .page-link{
	color:#6c757d;
}

@media (min-width:767px) {
	div.tl-card{
		min-height:250px;
	}
}
@media (max-width:767px) {
	div.tl-card{
		max-height:150px;
	}
}



img.tl-img{
	width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
}

div.tl-box{
	margin : 0 1em;
	border-radius: 6px;
	padding: 0.5em;
	background-color:#c0c0c0;
	/* -webkit-box-shadow: 0px 2px rgba(0,0,0,0.3);*/
	/* box-shadow: 0px 2px rgba(0,0,0,0.3); */
}

table thead th{
	white-space: nowrap;
}

/* 疑似Readonly */
.pseudo_readonly{
	background-color: #e9ecef;
	pointer-events: none;
}