:root {
	--main-text-color: #323e48;
	--secondary-text-color:#213567;
	--main-bg-color:#ffffff;
	--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:#5b83c1;
	--main-btn-text-color:#fff;
	--main-btn-hover-color:#213567;

	--secondary-btn-color:#a0b9e5;
	--secondary-btn-text-color:#fff;
	--secondary-btn-hover-color:#5b83c1;

	--tertiary-btn-color:#a22f35;
	--tertiary-btn-text-color:#fff;
	--tertiary-btn-hover-color:#762228;
}
body {
	font-size: 1.15rem !important;
	line-height: 2 !important;
}

/* bootstrap4 hack*/
/* フロント側のボタン */
.front .btn{
	font-size: 1rem !important;
	font-family: "Noto Sans JP";
	letter-spacing: 0.05em;
	border: 2px solid;
}

.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-gray{background-color:#767b7f;}
.bg-dark-gray{background-color:#24292e;}
.bg-black{background-color:#000000;}
.bg-white{background-color:#ffffff;}
.bg-light-glay{background-color:#e4e4e4;}
.bg-light-blue{background-color:#5b83c1;}
.bg-light-brown{background-color:#cdc9b7;}


/* ランク背景 */
.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-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-darkblue{color:#323e48}

.text-yellow{color:#e8b400;}

.text-light-gray{color:#767b7f;}
.text-light-gray2{color:#edeff0;}
.text-gray{color:#4b4b4b;}
.text-winered{color:#a22f35;}
.text-light-blue{color:#5b83c1;}

.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;
}

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

.btn-primary.outline {
    border: 3px solid #ccb88d; /*アウトラインのみのボタンの線の色*/
    color: var(--main-btn-text-color); /*アウトラインのみのボタンのテキストの色 */
}
.btn-primary:hover{
	background: var(--main-btn-hover-color)!important;
    border-color: var(--main-btn-hover-color)!important;
    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: var(--main-btn-color);
    color: var(--main-btn-color);
	border-radius: .3rem!important;
}
.btn-outline-primary:hover{
    border-color: var(--main-btn-color)!important;
    color: #fff;
	background-color: var(--main-btn-color)!important;
}


/*--------------- secondary color ---------------*/
.btn-secondary {
    background: var(--secondary-btn-color)!important;
    border: 2px solid #a0b9e5!important;
    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)!important;
    border: 2px solid #5b83c1!important;
    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);
}

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

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

.btn-tertiary:hover{
	background: #fff;
    border-color: var(--tertiary-btn-hover-color);
    color: var(--tertiary-btn-hover-color);
}

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

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

/*----------------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-face{
	font-family:"brandon_printed_one";
	src:url("/fonts/brandon_printed_one.ttf") format('truetype');
}
.font-brandon_printed_one{
	font-family: "brandon_printed_one";
}


.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;
}

@font-face {
	font-family:"font-montserrat";
	src:url("/fonts/Montserrat/Montserrat-VariableFont_wght.ttf") format("opentype"),
		url("/fonts/Montserrat/Montserrat-VariableFont_wght.ttf") format("truetype");	
	font-display:auto;
	font-style:normal;
	font-weight:100 900;
	font-stretch:normal;
}
.font-montserrat-bold{
	font-family: "font-montserrat";
	font-weight: 400;
	font-style:normal;
}
.font-montserrat-black{
	font-family: "font-montserrat";
	font-weight: 700;
	font-style:normal;
}
.font-lato{
	font-family: "Lato";
	font-weight: 300;
}


.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:90vh;
}
.screen_bg_vh{
	height:30vh;
/* 暫定的な定義開始 */
}
/* @media screen and (max-width: 767px) {
	.screen_bg_vh{height:50vh;}
}@media screen and (max-width: 480px) {
	.screen_bg_vh{height:30vh;}
}@media screen and (max-width: 320px) {
	.screen_bg_vh{height:30vh;}
} */
/* 暫定的な定義終了 */


.screen_title_vh{
	height:20vh;
}


/* ボタン */

/* ハリスでは利用していない */
/* .btn-outline-yellowocher{
	color: #ccb88d;
	background-color: transparent;
	background-image: none;
	border-color: #ccb88d;
}

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

.btn-outline{
	padding : 12px;
}

/* red */
.btn-outline-redocher{
	color: #a22f35;
	background-color: transparent;
	background-image: none;
	border-color: #a22f35;
	border-radius: .3rem!important;
	font-weight: 500;
	padding : 12px;
	font-size: 1.3rem!important;
}
.btn-outline-redocher:hover{
	color: #fff;
	background-color: #a22f35;
	background-image: none;
	border-color: #a22f35;
}

/* white -> blue */
.btn-outline-whiteocher_blue{
	color: #fff;
	background-color: transparent;
	background-image: none;
	border-color: #fff;
	border-radius: .3rem!important;
	font-weight: bold;
	padding : 12px;
	font-size: 1.3rem!important;
	font-weight: 400;
}
.btn-outline-whiteocher_blue:hover{
	color: #fff;
	background-color: rgba(255,255,255,0.3);
	background-image: none;
	border-color: #fff;
	border-radius: .3rem!important;
	font-weight: 400;
}

/* white -> gray */
.btn-outline-whiteocher_gray{
	color: #fff;
	background-color: transparent;
	background-image: none;
	border-color: #fff;
	border-radius: .3rem!important;
	font-weight: 400;
	padding : 12px;
	font-size: 1.3rem!important;
}
.btn-outline-whiteocher_gray:hover{
	color: #fff;
	background-color: rgba(255,255,255,0.3);
	background-image: none;
	border-color: #fff;
}

/* white -> red (redius on) */
.btn-whiteocher_red{
	color: #a22f35;
	background-color: #fff;
	background-image: none;
	border-color: #fff;
	font-weight: 400;
	padding : 12px;
	font-size: 1.3rem!important;
	border-color: #fff!important;
}
.btn-whiteocher_red:hover{
	color: #fff;
	background-color: transparent;
	background-image: none;
	border-color: #a22f35;
}

/* white -> blue (redius on) */
.btn-whiteocher_blue{
	color: #5B83B1;
	background-color: #fff;
	background-image: none;
	border-color: #fff!important;
	font-weight: 500;
	padding : 12px;
	font-size: 1.3rem!important;
	border-radius: .3rem!important;
}
.btn-whiteocher_blue:hover{
	color: #fff;
	background-color: transparent;
	background-image: none;
}

/* white -> blue (redius on) mypage point btn */
.btn-point-white_blue{
	background-color: #fff;
	background-image: none;
	border-color: #fff!important;
	border-radius: 0.75rem;
}
.btn-point-white_blue:hover{
	background-color: transparent;
	background-image: none;
	opacity: 0.7;
}


.btn-onlineshop{
	width: 200px;
	margin: auto;
}

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


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

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

.product-name{
	min-height:5em;
	font-size:1.5rem;
	font-family: 'font-montserrat';
	font-weight: 700;
	letter-spacing: .06rem;
}
@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.0em;
	/* 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;
}

.login-bg-gray{
	background-color: #767b7f;
}

.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: #fff;
}
div.error_container{
	min-height: 600px;
}

nav.mobile_menu{
	position : fixed;
	top : 0;
	right : 0;
	left : 0;
	z-index: 20;
	padding : 1rem;
	display: flex;
	justify-content: flex-end;
}


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

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

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_iconbtn{
	min-height:55px;
	min-width:55px;	
}

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

.mypage_conteinar .triangle{
	border-top:   solid 16px #5b83c1;
	border-left:  solid 16px transparent;
	border-right: solid 16px transparent;
	margin: 0 auto;
}

.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:#fff; 
	word-wrap:break-word;
}
/* @media (max-width:540px) {
	.mypage_menutab a{ font-size:0.8rem; };
} */
.mypage_menutab a:hover{
	opacity: 0.7;
	text-decoration: none;
}
/* ページング処理 */
.page-item.active .page-link{
	z-index: 1;
    color: #fff;
    background-color: #213567;
    border-color: #213567;
}

.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;
}


/* メインコンテンツ */
.my_container {
	flex: 1;
	font-family: 'bpo','Lato', Arial, sans-serif;
}

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

/*------ 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;
}

/* 水平線(HTML5からhrは非推奨なのでdiv等で使用) */
.hr-gray{
	border-top: 2px solid #767b7f;
    width : 95%;
}

.top-border_red{
	border-right: 1px solid #a22f35;
	padding-top : 200px;
}
.top-border_white{
	border-right: 1px solid #fff;
	padding-top : 200px;
}

/* ウルトラワイドモニター対策 */
@media (max-width:1440px){
	.top-border_red,.top-border_white{
		padding-top : 17%;
	}
	.top-border_white_harris{
		padding-top : 14%;
	}
}

.top-border_white_harris{
	border-right: 1px solid #fff;
	padding-top : 150px;
}

/* bootstrapでpadding設定をして使用する */
.gene-border_white{
	border-right: 1px solid #fff;
}

/* bootstrapでpadding設定をして使用する */
.gene-border_red{
	border-right: 1px solid #a22f35;
}

/* bootstrapでpadding設定をして使用する */
.gene-border_gray{
	border-right: 1px solid #767b7f;
}

/* bootstrapでpadding設定をして使用する */
.gene-border_darkblue{
	border-right: 1px solid #323e48;
}

#page_top{
	width: 73px;
	height: 70px;
	position: fixed;
	right: 0;
	bottom: 0;
	opacity: 1;
	z-index: 20;
}
#page_top a{
	width: 60px;
	height: 60px;
	text-decoration: none;
}
#page_top a::before{
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	content: '\f139';
	font-size: 38px;
	color: #4b4b4b;
}


/*----- Journal -------*/
.journal-card a{
	text-decoration:none;
	color:var(--main-text-color);
}
.journal-catch-img{
	width:100%;
	height:auto;
}

.journal-card-img{
	width:100%;
	max-height:300px;
	overflow: hidden;;
}
.journal-card-title{
	padding: 0.75rem 1.25rem;
    margin-bottom: 0;
}
.journal-card-title-text{
	font-family: Brandon Grotesque W01;
	font-size:3rem;
	line-height: 1;
}
.journal-card-body{
	min-height:150px;
	margin-bottom:1rem;
}

.journal-card-body img{
	max-width: 100%;
	height: auto;
}

.journal-breadcrumb {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	padding: 0.75rem 0rem;;
	margin-bottom: 1rem;
	list-style: none;
	font-size:1rem;
}
.journal-breadcrumb a{
	text-decoration:none;
	color:var(--main-text-color);
}