@charset "UTF-8";
/* CSS Document */

/* --------------------------------
共通
-------------------------------- */

.pconly{
	display:block;
}

.sponly{
	display:none!important;
}

.inner {
    box-sizing: border-box;
    position: relative;
    padding: 0 min(25px, 4vw);
    width: auto;
}


.btn--base {
	margin: 2rem auto 0;
}

@media screen and (max-width: 768px) {
	.pconly{
		display:none;
	}

	.sponly{
		display:block!important;
	}
}
@media screen and (min-width: 769px) {

	.btn--base {
		width: 40rem;
		font-size: 2.4rem;
	}
}


article p {
	font-size: min(22px, 4.5vw);
	line-height: 2.0;
}


.dot {
	border-bottom: 5px dotted #e8c966;
}

@media screen and (max-width: 768px) {
	p {
		font-size: 1.6rem;
		line-height: 1.8;
	}
}

@media screen and (min-width: 769px) {
	article {
		width: 550px;
		margin: 0 auto;
	}
}
@media screen and (max-width: 768px) {
	article {
		width: 100%;
	}
}

#main {
	background: #fff;
	color: #000;
	font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
}

p.attention {
	font-size: 3vw;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", sans-serif;
}

p.attention span{
	font-weight: bolder;
	border-bottom: 1px solid #000; 
    padding-bottom: 2px;   
}

@media screen and (min-width: 769px) {
	p.attention {
		font-size: 17px;
	}
}


p.limit {
    background-color: #fff;     
    border: 2px solid #b81c22;      
    border-radius: 50px;    
    color: #b81c22;              
    text-align: center;  
	margin:20px auto;
	font-size: 24px;
	line-height: normal;
}

p.f_set{
	font-feature-settings: "palt";
}

.item_text.f_set {
    white-space: nowrap;     
}


/*
p.f_sml{
	font-size: min(19px, 3.7vw);
}
*/

p.m_btm_0{
	margin-bottom: 0;
}

@media screen and (max-width: 768px) {

p.limit {
	font-size: 16px;
}
	}
/* --------------------------------
intro outro
-------------------------------- */

#intro,#outro {
	position: relative;
	display: block;
    background-color: #ab7f00; 
    border-radius: 15px;       
    padding: 5px;        
    width: auto;       
    margin: 30px min(30px, 4vw);   
	box-sizing: border-box;
}

#outro{
	margin-bottom: 70px;
}

#intro::before,
#intro::after {
    content: "";
    position: absolute;
    width: 33px;
    height: 33px;
    background-image: url('../img/honban/shine01.png');
    background-size: contain;
	 background-repeat: no-repeat;
}
#outro::before,
#outro::after {
    content: "";
    position: absolute;
    width: 33px;
    height: 33px;
    background-image: url('../img/honban/shine01.png');
    background-size: contain;
	 background-repeat: no-repeat;
}

#intro::before,#outro::before {
    top: 17px;
    left: 40px;
}

#intro::after,#outro::after {
    bottom: 18px;
    right: 33px;
}



#intro h2 ,#outro h2{
	border: 1px solid #d09748;
	color: #d09748;
	text-align: center;
	font-size: 24px;
	padding: 10px 5px;
}

.countdown {
	text-align: center;
	line-height: 1.4;
}
#countTimer_intro,#countTimer_outro {
	color: #fff;
	font-weight: normal;
	font-size: min(50px,9.5vw);
}

#countTimer_intro span,#countTimer_outro span{
	font-size: min(30px,6.5vw);
}

	.countdown1 {
		font-size:min(29px,5.5vw);
		font-feature-settings: "palt";
		font-family: "ヒラギノ角ゴ ProN W5", "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
        font-weight: 500;
	}
	.countdown2 {
		font-size: min(24px,4.5vw);
		font-family: "ヒラギノ角ゴ ProN W5", "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
        font-weight: 500;
	}

.item_flex .btn {
    margin-top: auto;
}

@media screen and (min-width: 769px) {
	.countdown {
		margin: 2.2rem 0;
	}

	#countTimer_intro,#countTimer_outro  {
		letter-spacing: 0.5rem;
		display: block;
		padding: 0.7rem 0 1.5rem;
		font-family: "ヒラギノ角ゴ ProN W5", "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
        font-weight: 500;
	}

}

@media screen and (max-width: 768px) {
	#intro h2 , #outro h2{
		font-size: 1.8rem;
	}
	.countdown {
/*		margin: 0 2rem 0;*/
		padding: 1rem 0!important;
	}

	#countTimer_intro,#countTimer_outro  {
		letter-spacing: 0.2rem;
		padding-bottom: 0.3rem;
		display: block;
		font-family: "ヒラギノ角ゴ ProN W5", "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
        font-weight: 500;
	}
	
#intro,#outro {  
    margin: 23px min(30px, 4vw);   
}
	
	#outro{
	margin-bottom: 50px;
}
	
	#intro::before,#outro::before {
    top: 17px;
    left: 12px;
}


	

p.end {
	text-align: center;
	padding: 2rem 0 4rem;
	font-size: 1.6rem;
	}

	#intro::before,
#intro::after {
    width: 25px;
    height: 25px;
}
	
	#outro::before,
#outro::after {
    width: 25px;
    height: 25px;
}

#intro::before,#outro::before {
    top: 17px;
    left: 25px;
}

#intro::after,#outro::after {
    bottom: 18px;
    right: 23px;
}
	


}


/* --------------------------------
sec02
-------------------------------- */
#sec02 {
	padding: 2.5rem;
	margin: 0;
}

#sec02 p.btn {
	margin: 2rem 0;
    padding-top: 0;
    box-sizing: border-box;
    display: inline-flex;
    align-content: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 60px;
	align-items: center;
    border: none;
    border-radius: 5px;
    color: #ab7f00 !important;
    text-decoration: none;
    text-align: center;
    line-height: 1;
    cursor: pointer;
    transition: 0.25s;
    background-color: #fff;
    font-size: min(26px, 5vw);
}

#sec02 p.btn:before {
	position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
    vertical-align: middle;
    margin-top: 0px;
    margin-right: 2px;
    margin-left: -5px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 8px;
    border-color: transparent transparent transparent #ab7f00;
    content: "";
}


@media screen and (min-width: 769px) {
	#sec02 {
	padding: 0 min(30px, 4vw);
		margin: 0 0 6rem;
	}
		

}


@media screen and (max-width: 768px) {
	
	#sec02 {
	padding: 0 min(25px, 4vw);
	padding-bottom: 2.5rem;
	margin: 0;
}
}





/* --------------------------------
sec03
-------------------------------- */


#sec03 , #sec04 {
    position: relative;
    overflow: hidden;
}

.sec03_bg , .sec04_bg {
    position: absolute; 
    top: 160px;
    left: 0;
    width: 100%;      
    height: auto;     
    z-index: 0;
    display: block;
}

#sec03 > *:not(.sec03_bg) {
    position: relative;
    z-index: 1;
}

#sec04 > *:not(.sec04_bg) {
    position: relative;
    z-index: 1;
}

.pickup_flex {
    display: flex;
    align-items: center; 
    gap: 16px;
}


.sec03_text {
	    flex: 6; 
    font-size: min(26px, 4.6vw);
    line-height: 1.5;
	color:#ab7f00;
	font-family: "ヒラギノ角ゴ ProN W5", "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
    font-weight: 500;
}


.item_flex {
    display: flex;
    gap: 25px;             
    justify-content: center;
    align-items: stretch;
	margin-bottom: 60px;
}

.item_flex .offer_box_inner {
    width: 330px;          
    box-sizing: border-box;
}

.pickup_title_flex01 {
    display: flex;
    align-items: center;     
    gap: 10px;        
	margin-bottom: 10px;
	
}

.pickup_title_flex02 {
    display: flex;
    align-items: center;     
    gap: 10px;        
	margin-bottom: 10px;
	right: -25px;
}



.pickup_title {
    flex: 4;                 
    margin: 0;               
}

.pickup_title img {
    width: 100%;             
    height: auto;
    display: block;
}



.pickup_item_flex {
    display: flex;            
    align-items: flex-start;
	margin-bottom: 55px;
}

.pickup_item.pickup_left {
    flex: 4.7;                   
}

.pickup_item.pickup_left img {
    width: 100%;              
    height: auto;
    display: block;
}


.pickup_right {
    flex: 5.3;                   
    display: flex;          
    flex-direction: column;    
    gap: 10px;               
}


.pickup_item.pickup_price img {
    width: 100%;              
    height: auto;
    display: block;
}


.pickup_right .btn {
    width: 100%;              
}

.item_text{
	text-align: center;
	color: #ab7f00;
	line-height: normal;
	font-size: min(23px, 3.9vw);
	margin-bottom: 10px;
	font-family: "ヒラギノ角ゴ ProN W5", "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
    font-weight: 500;
}

.item_flex picture{
	margin-bottom: 20px;
	margin-top: auto;
}


#item_eaurosier {
    position: relative; 
}

#item_eaurosier::before,
#item_eaurosier::after {
    content: "";
    position: absolute;
    width: 55px;  
    height: 55px;
    background-image: url('../img/honban/shine02.png');
    background-size: contain;
    background-repeat: no-repeat;
}


#item_eaurosier::before {
    top: -45px;
    right: 0;
}

#item_eaurosier::after {
   bottom: -45px;
    left: 0;
}

#item_mouve {
    position: relative; 
}

#item_mouve::before{
    content: "";
    position: absolute;
    width: 60px;  
    height: 60px;
    background-image: url('../img/honban/shine04.png');
    background-size: contain;
    background-repeat: no-repeat;
}


#item_mouve::before {
    top: -145px;
    right: 0;
}

#item_ravi picture:first-of-type {
    position: relative;         
    margin-right: -31px;     
    max-width: none;          
    width: auto;              
}


.item_flex .offer_id.block {
    flex: 1;                 
    display: flex;
    flex-direction: column;   
    align-items: center;      
    min-width: 0;             
    box-sizing: border-box;
}

#item_xyl .item_text.f_set,
#item_herb .item_text.f_set {
    white-space: nowrap;       
    width: 100%;              
    text-align: center;  
	font-size: min(22px, 3.7vw);
}

.item_flex picture img {
    width: 100%;              
    height: auto;             
    display: block;
}

#nothing{
	margin-top: -25px;
}

#sec04 .item_flex{
	margin-top: 10px;
	
}

#sec04 .item_flex:last-of-type {
  margin-bottom: 30px;
}

@media screen and (max-width: 768px) {
	.sec03_bg , .sec04_bg {
    top: 120px;
}
	
	
	#item_eaurosier::before,
#item_eaurosier::after {
    width: 40px;
    height: 40px;
}


#item_eaurosier::before {
    top: -30px;
    right: 0;
}

#item_eaurosier::after {
   bottom: -40px;
    left: 0;
}
	
	#item_mouve::before {
    top: -100px;
    right: 0;
}
	
	#item_mouve::before {
    content: "";
    position: absolute;
    width: 40px;
    height: 40px;
    background-image: url(../img/honban/shine04.png);
    background-size: contain;
    background-repeat: no-repeat;
}
	
	.item_flex {
    gap: 18px;     
	margin-bottom:40px;
}
	
.item_flex picture {
    margin-bottom: 10px;
}


	
	p.f_set {
    font-feature-settings: "palt";
}
	
	.pickup_item_flex {
	margin-bottom: 40px;
}
	#item_ravi picture:first-of-type {
    margin-right: -21px;     
}
	
}
/* --------------------------------
sec04
-------------------------------- */
#sec04 {
	padding: 2.5rem;
	margin: 0;
}

@media screen and (max-width: 768px) {
	
	#sec04 {
	padding: 0 min(25px, 4vw);
	padding-bottom: 2.5rem;
	margin: 0;
}
}



/* --------------------------------
offer
-------------------------------- */

	#offer{
		padding-bottom:40px;
	}
	
	.offer_box {
		width: auto;
	}
	
	.offer_box_inner {
		margin-top: 40px;
		padding-bottom:20px;
	
	}
	#offer .btn, #offer2 .btn {
		width: 84%;
		margin: 20px auto 7px;
		text-decoration: none!important;
	}
	
	#offer a.awa, #offer2 a.awa {
    display: inline-block;
    margin-top: 5px;
	padding-left:50px;
}
	
	#offer p.pgcd, #offer2 p.pgcd {
		display: block !important;
		text-align: center;
		font-size: 12px;
		margin-top: 15px;
	}


/* --------------------------------
	最下部ボタン
-------------------------------- */
.bottom_btn {
	margin: 70px auto 70px;
	text-align: center;
}
.bottom_btn p {
	margin: auto;
}
.bottom_btn .attention {
	margin-bottom: 15px;
	font-size: 11px;
}
.bottom_btn a:hover {
	opacity: 0.9;
}
.bottom_btn p.attention {
	text-align: center !important;
}

/* --------------------------------
ボタン
-------------------------------- */
	.btn {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #4d6b33;
		position: relative;
		border-radius: 3px;
		font-size: 15px;
		color: #fff !important;
		width: 100%;
		height: 50px;
		font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
		text-decoration: none;
	}
	
	.btn:before {
		display: inline-block;
		position: relative;
		top: -1px;
		margin-right: 10px;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 5px 0 5px 8px;
		border-color: transparent transparent transparent #fff;
		content: "";
	}
	
	a.awa {
		display: inline-block;
		margin-top: 10px;
		text-align: left;
		box-sizing: border-box;
		position: relative;
		color: #ae3623;
		font-size: 12px;
		padding: 1px 0 5px 18px;
		text-decoration: underline;
		line-height: 1;
	}
	
	a.awa:link, a.awa:visited, a.awa:hover, a.awa:active {
		color: #ae3623;
	}
	
	a.awa span {
		content: "";
		display: inline-block;
		width: 14px;
		height: 14px;
		border-radius: 50%;
		background: #ae3623;
		position: absolute;
		left: 30px;
		top: 0;
	}
	
	a.awa span:before, a.awa span:after {
		display: block;
		position: absolute;
		top: calc(50% - 8px);
		width: 3px;
		height: 1px;
		background: #fff;
		top: calc(50% - 1px);
		right: 6px;
		content: "";
		transform: rotate(
		45deg
		);
		transform-origin: right bottom;
	}
	a.awa span:after {
		transform: rotate(
		-45deg
		);
		transform-origin: right top;
	}



.bg_series,
.bg_series > div {
  line-height: 0;
  font-size: 0;
}
.bg_series img {
  display: block;     
  width: 100%;
  height: auto;
}

#sec02_inner {
  background-position: top center;
  background-repeat: repeat-y;
  background-size: 100% auto; 
}

#sec02 .bg_series:first-of-type {   
  margin-bottom: -1px;             
}
#sec02 .bg_series:last-of-type {   
  margin-top: -1px;                
}

#offer2 { margin-bottom: 0; }     


@media screen and (max-width: 768px) {
		.btn {
		height: 35px;
	}
}


/* --------------------------------
.btn_soldout
-------------------------------- */


.btn_soldout {
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  height: 50px;
  padding-left: 1%;
  background-color: #90908e;
  border: none;
  color: #fff;
	border-radius: 3px;
    font-size: 15px;
  text-decoration: none;
  text-align: center;
  line-height: 1;
  transition: 0.25s;
  position: relative;
}
@media (max-width: 768px) {
  .btn_soldout {
    display: flex;
   height: 35px;
  }
}

.kanbai{
	font-size: 35px;
	color: red;
	text-align: center;
	padding: 30px 0 20px;
	line-height: normal;
}

@media (max-width: 768px) {
.kanbai{
	font-size: 25px;
}
}

#nothing picture {
    margin: 0; 
}



/* ============================
   ログイン／未ログイン 出し分け
============================ */

#main.login .btn_logout {
    display: none !important;
}

#main.logout .btn_login {
    display: none !important;
}