/* CSS Document */


/*- menu -*

変更領域, fv

* filetop *
------------------------------------------------------------------------------------------------------------------------------------------*/

/*- File name [ style.css ] -*/

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

* 変更領域

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

/* screen width 768px未満
---------------------------------------------------------------------*/



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

* 20240901登録者数2万人バナー追加

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

/* screen width 768px未満
---------------------------------------------------------------------*/
#user20000{
	background-color: #FFFFFF;
}

#user20000 .inhalt{
	padding: clamp(40px, 5.3vw, 80px) clamp(10px, 1.4vw, 20px) 0;
}

#user20000 .inhalt img{
	margin-right: auto;
	margin-left: auto;
}




/* 横向き用
---------------------------------------------------------------------*/

@media (orientation: landscape) {
}




/* TAB用768px～（TAB）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 768px) {
	
	
	
}




/* iPad pro・ノートPC用1024px～（NPC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1024px) {
	
	
	
}




/* PC用1280px～（PC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1280px){
	
	
	
}








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

* case

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

/* screen width 768px未満
---------------------------------------------------------------------*/
#case{
	background-color: #FFFFFF;
}

#case .inhalt{
	padding: clamp(40px, 5.3vw, 80px) clamp(10px, 1.4vw, 20px) 40px;
}

#case .inhalt img{
	margin-right: auto;
	margin-left: auto;
}




/* 横向き用
---------------------------------------------------------------------*/

@media (orientation: landscape) {
}




/* TAB用768px～（TAB）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 768px) {
	
	
	
}




/* iPad pro・ノートPC用1024px～（NPC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1024px) {
	
	
	
}




/* PC用1280px～（PC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1280px){
	
	
	
}







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

* point

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

/* screen width 768px未満
---------------------------------------------------------------------*/
#point{
	background-color: #f7f1ed;
	
}

#point .inhalt{
	padding: 40px clamp(10px, 1.4vw, 20px) clamp(40px, 5.3vw, 80px);
}

#point .inhalt img{
	margin-right: auto;
	margin-left: auto;
}

#point .inhalt h3 + *{
	margin-top: clamp(12px, 0.3vw, 24px);
}

#point article > div.point_inr{
	position:relative;
	max-width:1302px;
	margin:0 auto;

}

/*置き配ボタン*/
#point article > div > .btn_okihai > .sp{
	position:absolute;
	top:50.1%;
	width:72%;
	left:14%;
}

/* 横向き用
---------------------------------------------------------------------*/

@media (orientation: landscape) {
}




/* TAB用768px～（TAB）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 768px) {
	
	/*置き配ボタン*/
	#point article > div > .btn_okihai > .pc{
		position:absolute;
		top:46%;
		left:8.5%;
		width:clamp(200px,26.04vw,400px)
	}
	
	
}




/* iPad pro・ノートPC用1024px～（NPC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1024px) {
	
	
	
}




/* PC用1280px～（PC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1280px){
	
	#point .inhalt h3 + *{
		margin-top: 30px;
	}
	
}


/* 調整用
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1300px) {
	
		/*置き配ボタン*/
		#point article > div > .btn_okihai > .pc{
			position:absolute;
			top:46%;
			left:8.5%;
			width:400px;
		}
	
}








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

* flow

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

/* screen width 768px未満
---------------------------------------------------------------------*/
#flow{
	padding: clamp(40px, 5.3vw, 80px) clamp(20px, 2.7vw, 40px);
	padding-bottom:clamp(40px,5.208vw,120px)!important;
}

#flow > *{
	margin-right: auto;
	margin-left: auto;
	max-width: 1040px;
}

#flow > * > * + *{
	margin-top: clamp(20px, 2.7vw, 40px);
}

#flow .flowList{
	display: grid;
	row-gap: clamp(40px, 5.3vw, 80px);
}

#flow .flowList > li{
	box-sizing: border-box;
	position: relative;
	border: 10px solid #f7f1ed;
	background-color: #FFFFFF;
}

#flow .flowList > li::before{
	content: "";
	display: block;
	position: absolute;
	background-image: linear-gradient(45deg, #ffe99f, #e14779);
	transform: translate(clamp(10px, 1.4vw, 20px), 30px);
	z-index: -1;
	filter: blur(15px);
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
}

#flow .flowList > li h4{
	border-image: linear-gradient(45deg, #ffe99f, #e14779) 1;
	border-bottom: 5px solid;
	padding: clamp(30px, 4vw, 60px) clamp(10px, 1.4vw, 20px) clamp(20px, 2.7vw, 40px);
}

#flow .flowList > li h4 span{
	position: absolute;
	width: clamp(100px, 13.1vw, 160px);
	left: -10px;
	top: -10px;
}

#flow .flowList > li div{
	padding: clamp(20px, 2.7vw, 40px) clamp(10px, 1.4vw, 20px) clamp(10px, 1.4vw, 20px);
}

#flow .flowList > li div > * + *{
	margin-top: 14px;
}

/* 横向き用
---------------------------------------------------------------------*/

@media (orientation: landscape) {
}




/* TAB用768px～（TAB）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 768px) {
	
	#flow{
		padding: 40px clamp(20px, 2.7vw, 40px);
	}
	
	#flow .flowList{
		grid-template-columns: repeat(3, 1fr);
		column-gap: clamp(20px, 2.7vw, 40px);
		align-items: flex-start;
	}
	
	#flow .flowList > li:nth-of-type(2){
		margin-top: clamp(20px, 2.7vw, 40px);
	}
	
	#flow .flowList > li:nth-of-type(3){
		margin-top: clamp(40px, 5.3vw, 80px);
	}
	
	#flow .flowList > li div{
		padding: clamp(20px, 2.7vw, 40px) 0 clamp(10px, 1.4vw, 20px);
	}
	
	#flow .flowList > li div > *:not(picture){
		padding: 0 clamp(10px, 1.4vw, 20px);
	}

	.adjust_img_01 {
		position:relative;
	}
	.adjust_img_01 img{
		width:calc(100% + 12px);
		max-width: none;
		position:relative;
		right:0;
	}
	

}




/* iPad pro・ノートPC用1024px～（NPC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1024px) {
	
	
	
}




/* PC用1280px～（PC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1280px){
	
	
	
}



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

* Shipping

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

/* screen width 768px未満
---------------------------------------------------------------------*/

/*- title -*/
#shipping h3.title img{
	width: clamp(225px, 29.29vw, 345px);
}

#shipping .inhalt{
	padding: 0 clamp(20px, 2.7vw, 40px) clamp(40px,5.208vw,120px);
}

#shipping .inhalt > *{
	margin-right: auto;
	margin-left: auto;
	max-width: 1040px;
}

#shipping .inhalt > * > * + *{
	margin-top: clamp(20px, 2.7vw, 40px);
}

.shipping_img img{
	margin:0 auto;
}

/* how to payment */

.how2payment{
	margin-top:clamp(40px,5.208vw,80px)!important;
}
.how2payment h4 img{
	margin:0 auto;
	width:clamp(85px,11.67vw,136px);
}

.how2payment_inr{
	margin-top:clamp(20px,2.604vw,40px)
}

.how2payment_inr img{
	margin:0 auto;
}


/* 横向き用
---------------------------------------------------------------------*/

@media (orientation: landscape) {
}




/* TAB用768px～（TAB）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 768px) {

	
}




/* iPad pro・ノートPC用1024px～（NPC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1024px) {
	
	
	
}




/* PC用1280px～（PC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1280px){
	
	
	
}








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

* guide

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

/* screen width 768px未満
---------------------------------------------------------------------*/
#guide .inhalt{
	padding: 0 clamp(20px, 2.7vw, 40px) 40px;
}

#guide .inhalt > *{
	margin-right: auto;
	margin-left: auto;
	max-width: 1040px;
}

#guide .inhalt > * > * + *{
	margin-top: clamp(20px, 2.7vw, 40px);
}

#guide .inhalt .menuBox{
	display: grid;
	row-gap: clamp(25px, 3.26vw, 50px);
}

#guide .inhalt .menuBox > * > * + *{
	margin-top: clamp(20px, 2.7vw, 40px);
}

#guide .inhalt .menuBox h4{
	width: clamp(175px, 22.8vw, 280px);
}

#guide .inhalt .menuBox ul{
	display: grid;
	row-gap: clamp(10px, 1.4vw, 15px);
}




/* 横向き用
---------------------------------------------------------------------*/

@media (orientation: landscape) {
}




/* TAB用768px～（TAB）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 768px) {

	#guide .inhalt .menuBox{
		grid-template-columns: repeat(2, 1fr);
		column-gap: clamp(40px, 5.3vw, 80px);
	}
	
}




/* iPad pro・ノートPC用1024px～（NPC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1024px) {
	
	
	
}




/* PC用1280px～（PC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1280px){
	
	
	
}