@charset "UTF-8";
/*
/* プログレスバー 
.progress-container, .progress-marks-container {
  width: 90%;
  margin: 0 auto;
}

.progress-container { background-color: #eee; }

.progress-bar {
  height: 30px;
  background-color: #4CAF50;
}

.progress-marks-container {
  display: flex;
  position: relative;
}

.progress-mark {
	font-size: 0.5em;
  position: absolute;
  transform: translateX(-50%);
}
/* プログレスバー 


/* 星 
.star {
  display: inline-block;
  background: url('/images/star.png') no-repeat center center;
  background-size: contain;
  width: 100px; /* Base width 
  height: 100px; /* Base height 
  margin: 0 5px;
}
/* 星 
*/



/* CSS Document */


/* 
font-family: "haboro", sans-serif;
font-weight: 400 500 600 700;
font-style: normal;

font-family: "tangier", sans-serif;
font-weight: 700;
font-style: normal;
*/


.front_body{
	position: relative;
	font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic Medium",sans-serif;
	font-weight: 400;
	margin: 0;
	background: #eee;
}

.front_content {
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background: #fff;
}

.full-width-image{
	width: 100%;
}

ul,li,p{
	list-style: none;
	margin: 0;
	padding: 0;
}

a{
	text-decoration: none;
}



/* マイページ内ヘッダー */

.mypage-head-f{
	background: #013E6E;
	position: relative;
}


/* 戻るボタン */

.page-back-f{
	margin: 1em 1.5em 0;
}
.page-back-f a{
	color: #fff;
	font-size: 1.5em;
}


/* タイトル */

.mypage-ttl-f{
	width: 90%;
	margin: 1.5em auto 1em;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	color: #fff;
	align-items: center;
}

.mypage-ttl-icon-f{
	width: 13%;
}

.mypage-ttl-txt-f{
	width: 85%;
	letter-spacing: 0.1em;
}

.mypage-ttl-txt-f h2{
	margin: 0;
	font-family: "haboro", sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 1.5em;
}

.mypage-ttl-txt-f h2 span{
	margin: 0 0 0 0.3em;
	font-family: "tangier", sans-serif;
	font-weight: 700;
	font-style: normal;
	letter-spacing: 0;
}

.mypage-ttl-txt-f h3{
	margin: 0;
	font-weight: 500;
	font-size: 0.7em;
}

.sales-ttl-ditail-f h2{
	font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic Medium",sans-serif;
	font-weight: 700;
	line-height: 1.2;
}

.sales-ttl-ditail-f h2 span{
	font-size: 0.7em;
}

.sales-monthly-sign-f{
	position: absolute;
	bottom: 20px;
	right: 20px;
}

.sales-monthly-sign-f a{
	color: #fff;
	font-size: 0.8em;
	margin-right: 1em;
}

.sales-monthly-sign-f a:last-child{
	margin-right: 0;
}

.fa-angles-left{
	padding-right: 0.5em;
}

.fa-angles-right{
	padding-left: 0.5em;
}

.personal-edit-ttl-f h2{
	font-size: 1em;
}




/* フッター */

.footer-f{
	padding: 1.8em;
	background: #013E6D;
	text-align: center;
}

.footer-f{
	font-size: 0.7em;
	color: #fff;
}



/* ログインページ */

.login-page-f{
	text-align: center;
	padding: 5em 0;
}

.min-footer-f{
	flex: 1;
}

.login-page-f h1{
	width: 150px;
	margin: 0 auto;
}

.login-page-f h2{
	font-size: 1.5em;
}

.line-login-f{
	margin: 4em 0 1.5em;
}

.line-login-f input[type="submit"]{
	width: 250px;
    background: #06C755;
    border: 0;
    border-radius: 4px;
    padding: 1em 0;
    color: #fff;
    font-size: 1.1em;
    letter-spacing: 0.1em;
}

.no-login-f{
	font-size: 0.9em;
	color: #808080;
	text-decoration: none;
}



/* ユーザー新規登録ページ */

.signup-head-f{
	text-align: center;
	background: #013E6D;
	padding: 1em 1em 3em;
}

.signup-head-f h1{
	width: 150px;
	margin: 0;
}

.signup-head-f h2{
	color: #fff;
	font-size: 1.3em;
	letter-spacing: 0.1em;
	font-weight: 500;
	margin: 1.5em 0 1em;
}

.signup-step-f {
    display: flex;
    justify-content: space-between;
    width: 220px;
    margin: 0 auto;
    font-size: 0.9em;
	color: #738EA2;
}

.signup-step-icon-f{
	display: inline-block;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: 1px solid #738EA2; 
	text-align: center;
	line-height: 50px;
}

.signup-step-f li p{
	margin: 0.5em 0 0;
}

.signup-border-f{
	width: 35px;
	height: 25px;
	border-bottom: 1px solid #738EA2;
}

.signup-active-f{
	color: #fff;
}

.signup-active-f .signup-step-icon-f{
	color: #013E6D;
	border: 1px solid #fff;
	background: #fff;
}

.signup-info-f{
	font-size: 0.8em;
	background: #A9987F;
	padding: 1em;
	color: #fff;
}



/* 入力フォーム */

.sinup-form-f{
	width: 90%;
	margin: 0 auto;
	padding: 1em 0 3em;
}

.sinup-form-list-f{
	margin: 2em 0;
}

.sinup-form-list-f:first-child{
	margin: 0 0 2em;
}

.sinup-form-list-f:last-child{
	margin: 2em 0 0;
}

.sinup-form-ttl-f{
	width: 100%;
	display: block;
	font-size: 0.9em;
	margin: 0 0 0.5em;
}

.sinup-form-ttl-f span{
	font-size: 0.7em;
	padding-left: 1em;
}

.signup-req-f::before{
	content: "* ";
	color: #D77F5E;
}

.sinup-form-list-f input{
	padding: 1em;
}

input.sinup-form-one-f{
	width: 92%;
	border: 1px solid #000;
}

input.sinup-form-two-f{
	border: 1px solid #000;
	width: 35%;
}

input, select {
	border-radius: 0;
}

select.sinup-form-down-f{
	-webkit-appearance: none;
	appearance: none;
	padding: 1em;
	border: 1px solid #000;
	width: 80px;
	background: #fff;
  color: #000;
}

.sinup-form-selectbox-f{
	width: 100%;
	display: flex;
}

.sinup-form-select-f{
	width: 80px;
	position: relative;
	margin-right: 0.5em;
}

.sinup-form-select-f::before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 5px 0 5px;
    border-color: #2B2B2B transparent transparent transparent;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    pointer-events: none;
}

/* 登録内容確認 */

.confirm-list-f{
	width: 90%;
	margin: 2em auto;
}

.confirm-list-f div{
	font-size: 0.9em;
	margin: 1em 0;
}

.confirm-terms-f{
	font-size: 0.9em;
	text-align: center;
    margin-bottom: 1em;
}

.confirm-terms-f a{
	color: #A9987F;
	border-bottom: 1px solid #A9987F;
}



/* 確認・登録ボタン */
.confirm-btn-f .signup-btn-put-f, .confirm-btn-f .signup-btn-back-f{
	height: 50px;
}

.signup-btn-f{
	width: 80%;
	margin: 0 auto 3em;
	text-align:center;
	font-size: 0.9em;
	display: flex;
    justify-content: center;
}

.confirm-btn-f{
	width: 80%;
	max-width: 320px;
	margin: 0 auto 3em;
	text-align:center;
	font-size: 0.9em;
	display: flex;
	justify-content: space-between;
}

.signup-btn-put-f{
	width: 180px;
	background: linear-gradient(to right, #D77F5F, #B26042);
	border: 0;
	color: #fff;
	border-radius: 5px;
	padding: 1em;
	font-size: 1em;
	margin-top: 1.5em;
	box-shadow: 0 0 5px #ccc;
}

.signup-btn-back-f{
	width: 110px;
	background: #fff;
	border: 1px solid #808080;
	color: #808080;
	border-radius: 5px;
	padding: 1em;
	font-size: 1em;
	margin-top: 1.5em;
	box-sizing: border-box;
}



/* 登録完了 */

.signup-thank-f{
	text-align: center;
	margin: 3em 0 2em;
}

.signup-thank-f h2{
	font-family: "tangier", sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 3em;
	margin-bottom: 0;
	color: #D77F5F;
}

.signup-thank-f h3{
	font-size: 1em;
	font-weight: 400;
	margin-top: 0.5em;
}

.signup-messe-f{
	text-align: center;
}

.signup-messe-f p{
	font-size: 0.9em;
	line-height: 1.8;
	margin-bottom: 1em;
}




/* ログインメッセージ */

.login-message-f{
	font-size: 0.8em;
	background: #A9987F;
	color: #fff;
	padding: 3%;
	/*width: 94%;
	position: absolute; CSS修正*/
	top: 0;
	left: 0;
}

/*CSS修正*/
.flash-message-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1050;
}
/*
.admin_body{
	position: relative;
}
*/


/* マイページ */

.mypage-info-f{
	background: #013E6D;
	color: #fff;
	padding: 3em 0;
	text-align: center;
}

.mypage-info-f h1{
	width: 130px;
	margin: 0 auto;
}



/* ユーザーネーム・IFコード */

.mypage-user-f{
	margin: 2em 0;
}

.mypage-user-name-f{
	font-size: 1.5em;
}

.mypage-user-name-f span{
	font-size: 0.7em;
	padding-left: 0.5em;
}

.mypage-ifcode-box-f{
	background: #fff;
	color: #013E6D;
	width: fit-content;
	margin: 0.5em auto 0;
	display: flex;
	padding: 0.1em 1em;
}

.mypage-ifcode-f{
	font-size: 0.8em;
}

.mypage-ifcode-f span{
	font-size: 1.2em;
	padding: 0 0.5em;
}

#copy_sales_code-f{
	width: 17px;
}

#copy_success_message-f{
	font-size: 0.8em;
	margin: 0.5em 0 0;
	color: #748CA2;
}



/* ランク */

.mypage-rank-f{
	width: 80%;
	max-width: 350px;
	height: 160px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
}

.mypage-rank-left-f{
	width: 50%;
	background: #A9987F;
	position: relative;
	border-radius: 15px 0 0 15px;
}

.mypage-rank-leftbox-f{
	width: 90%;
	height: 90%;
	margin: 0 auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.mypage-rank-current-f{
	width:  80%; /*CSS修正*/
	font-size: 0.8em;
	font-weight: 500;
	letter-spacing: 0.03em;
    background: #fff;
    padding: 0.1em 1em;
    border-radius: 50px;
    color: #2B2B2B;
	position: absolute;
	top: 10px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}

.mypage-rank-number-f{
    width: 100%;
	font-size: 4.5em;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: "haboro", sans-serif;
	font-weight: 400;
	font-style: normal;
}

.rank-bigginer-f{
	font-size: 1.7em;
	letter-spacing: 0.1em;
}

.mypage-rank-stella-f{
	position: absolute;
	bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	font-family: "haboro", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1.2em;
	letter-spacing: 0.2em;
}

.mypage-rank-right-f{
	width: 50%;
	background: #fff;
	border-radius: 0 15px 15px 0;
	position: relative;
}

.mypage-rank-star-f{
	width: 75%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}



/* ポイント */

.mypage-point-f{
	margin: 2em 0 1em;
}

.mypage-point-current-f{
	font-size: 1em;
	letter-spacing: 0.1em;
}

.mypage-point-number-f{
	font-size: 3em;
	color: #D77F5F;
	font-family: "haboro", sans-serif;
	font-weight: 500;
	font-style: normal;
}

.mypage-point-number-f span{
	font-size: 0.7em;
	font-weight: 400;
	color: #fff;
	padding-left: 0.3em;
}



/* プログレスバー */

.progress-container, .progress-marks-container {
	width: 90%;
	margin: 0 auto;
}

.progress-container {
	background-color: #DBDBDB;
	height: 10px;
	border-radius: 50px;
	margin-bottom: 0.2em;
	position: relative;
}

.progress-bar {
	background-color: #D77F5F;
	height: 10px;
	border-radius: 50px;
}

.progress-dots-container{
	display: flex;
	width: 96%;
    position: absolute;
    top: 28%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.progress-dots {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50px;
	background: #fff;
	position: absolute;
	transform: translateX(-50%);
}

.progress-marks-container {
	display: flex;
	position: relative;
	color: #C4C4C4;
	width: 87%;
}

.progress-mark {
	font-size: 0.5em;
	position: absolute;
	transform: translateX(-50%);
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none;   /* Safari */
	-moz-user-select: none;      /* Firefox */
	-ms-user-select: none;       /* Internet Explorer/Edge */
	user-select: none;           /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}



/* ランクアップ */

.mypage-rankup-f {
    font-size: 0.9em;
    margin: 2em 0 0;
	letter-spacing: 0.1em;
}

.mypage-rankup-point-f, .mypage-rankup-rank-f{
	font-size: 1.1em;
	padding: 0 0.3em;
	font-family: "haboro", sans-serif;
	font-weight: 400;
	font-style: normal;
}

.mypage-rankup-point-f{
	color: #D77F5F;
}

.mypage-rankup-rank-f{
	color: #A9987F;
}

.mypage-rankup-info-f{
	width: 90%;
	text-align: right;
	margin: 2em auto 0;
}

.mypage-rankup-info-f a{
	font-size: 0.8em;
	color: #C4C4C4;
}



/* メニューボタン */

.mypage-menu-f{
	text-align: center;
	display: block;
}

.mypage-menu-f h3{
	font-family: "tangier", sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 2.5em;
	margin: 1em 0 0.5em;
}

.mypage-menu-btn-f{
	width: 80%;
	max-width: 350px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}

.mypage-menu-btn-f a{
	color: #fff;
	padding: 1em 0.5em;
	display: block;
	font-family: "haboro", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1.2em;
    letter-spacing: 0.1em;
}

.mypage-menu-btn-f a img{
	width: 50%;
	display: block;
	margin: 0 auto 0.5em;
}

.mypage-menu-btn-f a span{
	display: block;
	font-size: 0.6em;
}

.mypage-menu-per-f{
	width: 49%;
	border-radius: 5px;
	background: linear-gradient(135deg, #013E6E, #002046);
}

.mypage-menu-sales-f{
	width: 49%;
	border-radius:5px;
	background: linear-gradient(135deg, #D77F5F, #B26042);
}

.mypage-menu-logout-f{
	width: 80%;
	margin: 2em auto 3em;
}

.mypage-menu-logout-f a{
	color: #808080;
	border: 1px solid #808080;
	border-radius: 50px;
	padding: 0.5em 2em;
	font-size: 0.8em;
}



/* 会員ランク・ポイントについて */

.infomation-f{
	background: #013E6E !important;
}

.info-f{
	background: #fff;
	margin: 1em auto 3em;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
	width: 90%;
	max-width: 420px;
}

.info-ttl-f{
	background: #002046;
	text-align: center;
	padding: 1.5em 0;
}

.info-ttl-f h3{
	color: #fff;
	margin: 0;
	font-weight: 500;
}

.info-att-f{
	background: #A9987F;
	text-align: center;
	padding: 0.5em 0;
	font-size: 0.8em;
	color: #fff;
}



/* 会員ランク説明 */

.info-rank-f{
	padding: 2em 1em;
}

.info-rank-f li{
	width: 100%; /*CSS修正*/
	border: 0.5px solid #012046;
	border-radius: 5px;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
	padding: 1em;
	margin-bottom: 1em;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.info-rank-f li:last-child{
	margin-bottom: 0;
}

.info-rank-left-f{
	width: 20%;
	font-size: 0;
}

.info-rank-right-f{
	width: 75%;
}

.info-rank-step-f{
	color: #A9987F;
	font-size: 1.3em;
	font-family: "haboro", sans-serif;
	font-weight: 500;
	font-style: normal;
	letter-spacing: 0.05em;
}

.info-rank-step-f span{
	font-size: 0.8em;
	padding-left: 0.5em;
}

.info-rank-point-f{
	font-size: 0.7em;
	letter-spacing: 0;
	margin-bottom: 0.5em;
}

.info-rank-point-f span{
	font-size: 0.8em;
}

.info-rank-condition-f{
	font-size: 0.6em;
	color: #808080;	
}

.info-rank-condition-f i{
	padding-right: 0.5em;
}

.info-point-f{
	padding: 2em 1em;
}

/* 20240725 modiry */
.info-point-f li{
	border: 0.5px solid #012046;
	border-radius: 5px;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
	margin-bottom: 1em;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	text-align: center;
}
/* 20240725 modiry */

.info-point-f li:last-child{
	margin-bottom: 0;
}

.info-point-left-f{
	width: 50%;
	padding: 1em;
	color: #fff;
	background: #013E6D;
	border-radius: 4px 0 0 4px;
}

.info-point-right-f{
	width: 50%;
	padding: 1em;
	font-size: 0.9em;
	align-items: center;
}



/* 登録情報詳細 */

.personal-edit-f{
	position: absolute;
	top: 20px;
	right: 20px;
}

.personal-edit-f a{
	color: #C4C4C4;
	border: 1px solid #C4C4C4;
	border-radius: 3px;
	padding: 0.5em 1em;
	font-size: 0.8em;	
}

.personal-edit-f a i{
	padding-left: 0.5em;
}

.personal-info-f{
	width: 90%;
	margin: 2em auto 0;
}

.personal-info-f:last-of-type{
	margin: 2em auto;
}

.personal-info-ttl-f{
	background: #A9987F;
	color: #fff;
	padding: 0.5em 1em;
	font-size: 0.9em;
}

.personal-info-ttl-f i{
	padding-right: 0.5em;
}

.personal-info-f dl{
	margin: 1em 0 0;
}

.personal-info-list-f{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	border-bottom: 1px solid #D8D8D8;
	font-size: 0.8em;
	padding: 1em 0;
    align-items: center;
}

.personal-info-list-f:last-child{
	border: none;
}

.personal-info-list-f dt{
	width: 35%;
}

.personal-info-list-f dd{
	width: 63%;
	margin: 0;
}



/* 登録情報編集ページ */

.personal-edit-att-ttl-f{
	margin-bottom: 0.5em;
	font-weight: 500;
	font-size: 0.9em;
}

.personal-edit-att-f{
	font-size: 0.9em;
	background: #FAFAFA;
	border-radius: 3px;
	border: 1px solid #D8D8D8;
	padding: 1.5em;
	text-align: justify;
	margin: 0 0 1em;
}

.personal-edit-att-f p{
	margin-bottom: 1em;
}

.personal-edit-att-f p:last-child{
	margin-bottom: 0;
}

.personal-noedit-list-f{
	font-size: 0.9em;
	color: #808080;
	line-height: 1.8;
}



/* 売上・報酬 */

.sales-info-f{
	width: 100%;
	margin: 0 auto;
	padding: 2em 1.5em;
	box-sizing: border-box;
}

div.sales-info-f:nth-of-type(2n){
	background: #FAFAFA;
}

.sales-info-ttl-f{
	font-size: 1.7em;
	font-family: "haboro", sans-serif;
	font-weight: 500;
	font-style: normal;
}

.sales-info-ttl-f i{
	font-size: 0.9em;
	padding-right: 0.5em;
}

.sales-info-ttl-f span{
	font-size: 0.4em;
	padding-left: 1em;
}

.sales-detail-f{
	margin: 1em 0 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.sales-detail-box-f{
	width: 47%;
	margin: 0 0 1em;
}

.sales-detail-ttl-f{
	font-size: 0.8em;
	margin: 0 0 0.5em;
}

.sales-detail-value-f{
	box-shadow: 0 0 5px #ccc;
	border-radius: 0 5px 5px 0;
	border-left: 5px solid #D77F5F;
	padding: 0.5em 0.5em 0.7em;
	text-align: center;
	font-weight: 700;
	font-size: 1.3em;
	position: relative;
	background: #fff;
}

.sales-detail-value-f::after{
	font-size: 0.4em;
	font-weight: 500;
	position: absolute;
	bottom: 3px;
	right: 5px;
}

.sales-detail-score-f:after{
	content: "点";
}

.sales-detail-point-f:after{
	content: "pt";
}

.sales-detail-reward-f:after{
	content: "円(税込)";
}



/* 報酬明細DLボタン */

.statemen-dl-f{
	text-align: center;
    padding: 3em 1em;
}

.statemen-dl-f a{
	padding: 1em 1.5em;
	border-radius: 5px;
	color: #fff;
	background: #A9987F;
	filter: drop-shadow(0 0 2px #ccc);
	font-size: 0.9em;
	letter-spacing: 0.05em;
}

.statemen-dl-f a i{
	padding-right: 0.5em;
}


/* 星 */
.star {
	display: inline-block;
	background: url('/images/star.svg') no-repeat center center;
	background-size: contain;
	width: 70px; /* Base width */
	height: 70px; /* Base height */
	margin: 0 5px;
	filter: drop-shadow(0 0 2px #ccc);
	position: relative;
}


.star a{
	color: #fff;
	text-align: center;
	display: block;
	position: absolute;
	left: 50%;
	top: 54%;
	transform: translate(-50%,-50%);
	line-height: 1.1;
	font-size: 0.5em;
}
.star a span{
	font-family: "haboro", sans-serif;
	font-weight: 500;
	font-style: normal;
	display: block;
	font-size: 1.4em;
}

.sales-bottle-f{
	background:  linear-gradient(rgba(255, 255, 255, 0), rgba(244, 237, 234, 1)), url('/images/bottle-back.svg') no-repeat top center;
	background-size: cover;
	padding: 2em 0;
	position: relative;
}

.sales-bottle-year-f{
	width: 80%;
	max-width: 310px !important;
    height: 510px !important;
	margin: 0 auto;
	background: url('/images/bottle.svg') no-repeat top center;
	background-size: contain;
	position: relative;
}

.sales-bottle-thismonth-f{
	position: absolute;
	top: 37px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}

.sales-bottle-yearbtn-f{
	position: absolute;
	top: 162px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	padding: 0.8em 2em 1em;
}

.sales-bottle-yearbtn-f a{
	font-family: "haboro", sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 1.6em;
	color: #fff;
	letter-spacing: 0.2em;
}

.sales-bottle-pastmonth-f{
	width: 80%;
	display: flex;
	flex-wrap: wrap-reverse;
	justify-content: space-around;
	position: absolute;
	bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}



/* slickスライド */

.slick-list.draggable {
    width: 100% !important;
	padding: 0 !important;
}

.slide-item-f .slick-prev:before,
.slide-item-f .slick-next:before{
	content:""!important;
    width: 130%!important;
    height: 130%!important;
    position: absolute;
    top: 0;
    left: 0;
}

.slide-item-f .slick-prev:before{
	background: url(/images/prev.svg)!important;
    background-size: contain!important;
}

.slide-item-f .slick-next:before{
	background: url(/images/next.svg)!important;
    background-size: contain!important;
}

.slide-item-f .slick-prev{
	left: 5px !important;
}

.slide-item-f .slick-next{
	right: 10px !important;
}

.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before{
	display: none !important;
}




/* チュートリアル（Introjs） */

.introjs-helperLayer{
	box-shadow: rgba(33, 33, 33, 0.5) 0px 0px 0px 5000px!important;
	border: 1px solid #fff;
}

.introjs-tooltip-header{
	display: none !important;
}

.introjs-tooltiptext{
	font-size: 0.9em;
	text-align: justify;
	padding: 25px 20px 20px !important;
}

.introjs-tooltipbuttons{
	border: none !important;
	padding: 0 1.3em 1em !important;
}

.introjs-button{
	font-size: 0.8em !important;
	border: none !important;
	background-color: #fff !important;
	padding: 0 !important;
	border-radius: 0 !important;
}

.introjs-prevbutton{
    color: #aaa !important;
}

.introjs-nextbutton{
    color: #D77F5F !important;
}

.step-five-f{
	content: "";
	width: 15px;
	height: 20px;
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

/*CSS修正*/
.no-sals-f {
  background: linear-gradient(135deg, #b6b6b6, #4d4d4d);
}

.no-sals-f a{
  opacity: 0.5;
}


/*    yearly.html, monthly.html（20240725追加）    */

.prpoint-box-f{
	width: 100%;
	margin: 0 0 1em;
}

.prpoint-detail-f{
	width: 97%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 auto 0.5em;
}

.prpoint-ttl-f{
	font-size: 0.8em;
	color: #7B7B7B;
}

.prpoint-value-f{
	font-weight: 600;
	font-size: 0.9em;
}

.prpoint-value-f.sales-detail-point-f:after{
	content: "pt";
	font-size: 0.7em;
	font-weight: 400;
	color: #7B7B7B;
}

/*    info.html    */

/* ▼▼▼追加▼▼▼ */

.info-point-f.info-prpoint-f{
	padding-bottom: 1em;
}

.info-prpoint-f .info-point-left-f {
	font-size: 0.9em;
	display: flex;
	align-items: center;
	justify-content: center;
}

.info-prpoint-f .info-point-right-f {
	display: flex;
	align-items: center;
	justify-content: center;
}

.info-point-kome-f{
	font-size: 0.6em;
	color: #888;
	padding-left: 0.5em;
}

.info-prpoint-att-f{
	font-size: 0.6em;
	color: #808080;
	text-align: center;
}

.info-prpoint-guide-f{
	width: 85%;
	font-size: 1em;
	text-align: center;
	padding: 1em 0.5em;
    margin: 1.5em auto 3em;
	background: #A9987F;
	color: #fff;
}

.info-prpoint-guide-f a{
	color: #423b31;
	border-bottom: