/*====================================================================================*/
/* Common
/*====================================================================================*/

.pageWrapper{
	width: 100%;
	position:relative;
}

.pageWrapper > .backgroundWrapper{
	position:fixed;
	top:0;
	left:0;
	/*
	width:100vw;
	height:100vh;
	
	overflow:hidden;
*/
}
.pageWrapper > .backgroundWrapper > .contents{
	position:absolute;
	top: 0;
	opacity:0;
	
	/* animation */	
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}
.pageWrapper > .backgroundWrapper > .video{
	width:100vw;
	height:100vh;
	opacity:1;
}
.pageWrapper > .backgroundWrapper > .video video{
	width:100%;
	height:100%;
	object-fit:cover;

}

.pageWrapper > .backgroundWrapper > .image{
	width:100vw;
	height:100vh;
}	
.pageWrapper > .backgroundWrapper > .image img{
	width:100%;
	height:100%;
	object-fit:cover;
}
.pageWrapper > .backgroundWrapper > .bgColorFill{
	width:100vw;
	height:100vh;
}
.pageWrapper > .backgroundWrapper > .bgColorFill.jam1{
	
}
.pageWrapper > .backgroundWrapper > .bgColorFill.jam1 img{
	position:absolute;
    width: calc(50% - 130px);
	top:50%;
	left:50%;
	transform:translateY(-50%);
}
.pageWrapper > .backgroundWrapper > .bgColorFill.jam2 img{
	position:absolute;
    width: calc(50% - 130px);
	top:50%;
	left:50%;
	transform:translateY(-50%);

}
.pageWrapper > .backgroundWrapper > .bgColorFill.bread1 img{
	position:absolute;
    width: calc(50% - 130px);
	top:50%;
	left:50%;
	transform:translateY(-50%);
}
.pageWrapper > .backgroundWrapper > .bgColorFill.bread2 img{
	position:absolute;
    width: calc(50% - 130px);
	top:50%;
	left:50%;
	transform:translateY(-50%);
}

.pageWrapper > .backgroundWrapper > .contents >.body{
    height: 100vh;
	width: 100vw;
	position:absolute;
	top: 0;
	left:0;
	display: inline-block;
	font-size:120%;
}

.pageWrapper > .backgroundWrapper > .contents >.body.title{
	font-size:200%;
    text-align: center;
}
.pageWrapper > .backgroundWrapper > .contents >.body > .text{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}

.pageWrapper > .contentsWrapper{
	position:relative;
	
}
.pageWrapper > .contentsWrapper > .contents{
    position: relative;
	width:100vw;
	min-height:150vh;	
	margin-bottom:200px;
}
.pageWrapper > .contentsWrapper > #jam{
	font-size:110%;
}
.pageWrapper > .contentsWrapper > #jam > .body{
}
.pageWrapper > .contentsWrapper > #jam > .body > .parts{
	margin-bottom:50px;s
}
.pageWrapper > .contentsWrapper > #jam > .body > .parts > .captionArea{
	width:40%;
	display:inline-block;
	vertical-align:top;
	padding:0 80px;
}
.pageWrapper > .contentsWrapper > #jam > .body > .parts > .captionArea > .title{
	margin-bottom:30px;
	font-size:140%;
}
.pageWrapper > .contentsWrapper > #jam > .body > .parts > .captionArea > .text{
}
.pageWrapper > .contentsWrapper > #jam > .body > .parts > .imageArea{
	width:40%;
	display:inline-block;
	vertical-align:top;
}
.pageWrapper > .contentsWrapper > #jam > .body > .parts > .imageArea img{
}
/*rightImageLayout*/

.pageWrapper > .contentsWrapper > .contents#bread1{
	font-size:110%;
}
.pageWrapper > .contentsWrapper > .contents#bread2{
	font-size:110%;
}

.pageWrapper > .contentsWrapper > .contents >.body{
    height: 100vh;
    width: 100vw;
    position: sticky;
    top: 0;
    display: inline-block;
}

.pageWrapper > .contentsWrapper > .contents >.body.title{
	font-size:200%;
    text-align: center;
}
.pageWrapper > .contentsWrapper > .contents >.body > .text{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}

.dummy{
	height:50vh;
}
.dummy.gap{
	min-height:20vh !important;
	height:20vh;
}
#top{
	position: relative;
}
#top > .logo{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:100px;
}
#top > .logo img{
	width:100%;
}
#concept{
	font-size: 130%;
	line-height: 2rem;
	color:black;
	margin-bottom:200px;
}
#bgConcept{
	font-size: 110%;
	line-height: 2rem;
	color:black;
	margin-bottom:200px;
}

#concept > .body{
	
}
#concept > .body > .text{
	
}
#concept > .body > .text div{
	margin-bottom:50px;
}
#jam,#bread{
	padding: 0 120px;
    width: calc(100% - 240px);
	margin-bottom:200px;
}
:is(#jam, #bread) > .title{
    padding-left: 20px;
    font-size: 170%;
    margin-bottom: 50px;
}
:is(#jam, #bread) > .body{
	position: relative;
    top: initial;
    left: initial;
	transform: initial;
	width:100%;
}
:is(#jam, #bread) > .wrapper > .imageArea{
/*	
	position:absolute;
	top:50%;
	left:50%;
	transform:translateY(-50%);
	*/
	width:48%;
	display:inline-block;

}
:is(#jam, #bread) > .wrapper > .imageArea img{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	aspect-ratio;2/3;
	object-fit:cover;
		
}
:is(#jam, #bread) > .wrapper > .textArea{
	width:48%;
	display:inline-block;
}
:is(#jam, #bread) > .wrapper > .textArea > .slideText{
}
:is(#jam, #bread) > .wrapper > .textArea > .slideText div{
	margin-bottom:30px;
}
:is(#jam1, #jam2,#bread1,#bread2) > .body{
	position: absolute;
	width: calc(50% - 260px);
	top: 50%;
	left: 130px;
	transform: translate(0%, -50%);
	line-height: 1.6;
}
:is(#jam1, #jam2,#bread1,#bread2) > .body .title{
	font-size:150%;
	margin-bottom:50px;
}

:is(#jam1, #jam2,#bread1,#bread2) > .body > textJP{
	
}
:is(#jam1, #jam2,#bread1,#bread2) > .body > textEN{
	
}

#marmalade{
	position: relative;
    padding-top: 20%;
}
#marmalade > .body{
    position: sticky;
    left: 10%;
    top: 50%;
    transform: translateY(-50%);
    height: auto;
    display: inline-block;
    width: 100%;
}
#marmalade > .body > .wrapper{
	width: 52%;
	display:inline-block;
	vertical-align:middle;


}
#marmalade > .body > .wrapper > .captionArea{
	padding: 0 140px;
	padding-right: 90px;
}
#marmalade > .body > .wrapper .title{
	font-size: 200%;
	margin-bottom: 30px;
}
#marmalade > .body > .wrapper .caption{
    font-size: 110%;
    line-height: 2rem;
}
#marmalade > .body > .imageArea{
	width:35%;
	display:inline-block;
	vertical-align:middle;
}
#marmalade > .body > .caption div{
	margin-bottom:50px;
}

:is(#cjam, #cBread){
	width:100vw;
	min-height:150vh;
}
:is(#cjam, #cBread) > .cover{
	min-height:100vh;
    padding: 0 150px;
	position:sticky;
	top:0;
}
:is(#cjam, #cBread) > .cover > .wrapper{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
}

:is(#cjam, #cBread) > .cover > .wrapper > .image{
	width:50%;
	display:inline-block;
	vertical-align:middle;
	
		
}
:is(#cjam, #cBread) > .cover > .wrapper > .image img{
	
}
:is(#cjam, #cBread) > .cover > .wrapper > .captionArea{
    width: calc(50% - 90px);
    padding-left: 70px;
	display:inline-block;
	vertical-align:middle;
}
:is(#cjam, #cBread) > .cover > .wrapper > .captionArea > .title{
	font-size:140%;
	margin-bottom:30px;
	
}
:is(#cjam, #cBread) > .cover > .wrapper > .captionArea > .text{
	margin-bottom:30px;
}
:is(#cjam, #cBread) > .cover > .wrapper > .captionArea > .readmore{
	
}

:is(#news, #contact){
	text-align: left;
    padding: 0 120px;
    height: initial;
    min-height: initial;
    width: calc(100vw - 300px);
}
:is(#news, #contact) > .title{
	font-size: 170%;
	margin-bottom: 50px;
}
:is(#news, #contact) > .body{
    position: initial;
    transform: initial;
	width: 100%;
	height:initial;
    min-height: 20vh;
}
:is(#news, #contact) > .body > .wrapper a{
	text-decoration:none;
	color:black;
}
:is(#news, #contact) > .body > .wrapper .list{
	margin-bottom:10px;
}
:is(#news, #contact) > .body > .wrapper .list > .date{
	width:100px;
	display: inline-block;
}
:is(#news, #contact) > .body > .wrapper .list > .title{
	width: calc(100% - 120px);
	display: inline-block;
}
#contact{
	margin-bottom:0;
}
:is(#profile, #stockists){
	padding:0 120px;
    width: calc(100vw - 300px);
    min-height: initial;
}
#stockists{
	min-height: initial;
	height: initial;
}
#profile > .profileName{
	font-size:120%;
	margin-bottom:30px;
		
}
#profile > .text{
	
}
#stockists{
	
}
#stockists > .title{
	font-size:130%;
	margin-bottom:30px;
}
#stockists > .body{
	width:100%;
}
#stockists > .body > .caption{
	margin-bottom:30px;
}
#stockists > .body {
	
}
#stockists > .body .parts{
	border-bottom: solid 0.5px #bbbbbb;
    padding: 20px 0;
	
	/* animation */	
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
	transition: all 1s;
		
	
}

#stockists > .body .parts a{
	color: #999999;
	/* animation */	
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
	transition: all 1s;
}
#stockists > .body .parts a:hover{
	color:#cccccc;
}

#stockists > .body .parts > .shopName{
	margin-bottom:5px;
	color:black;
}
#stockists > .body .parts >  a .shopName{
	padding-bottom:5px;
	display: inline-block;
	color:black;
}
.linkLine{
	display:inline-block;
}
.linkLine > .dLine{
	background:black;
	content:" ";
	width:5px;
	height:1px;
	display:inline-block;
	transform:translate(-10px,-2px) rotate(45deg);
}
.linkLine > .hLine{
	background:black;
	content:" ";
	width:20px;
	height:1px;
	display:inline-block;
}
#stockists > .body .parts > .shopInfo{
	
}
#stockists > .body .parts a{
	padding-bottom:5px;

	/* animation */	
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
	transition: all 1s;
	
}

.formArea > .caption{
	margin-bottom:50px;
}
.formArea > .parts{
	margin-bottom:15px;
}
.formArea > .parts > .label{
	    margin-bottom: 5px;
}
.formArea > .parts > .text{
	
}
:is(#news, #contact) > .FooterWrapper{
	padding-top: 100px;
	margin-bottom:20px;
}
/* for formパーツ*/
input[type="text"] {
    background: rgb(255, 255, 255, 0.5);
	border: 0.5px solid;
	padding:10px;
}
textarea{
    background: rgb(255, 255, 255, 0.5);
    padding: 5px;
    width: 300px;
    height: 160px;
    border: solid 0.5px;
}
button, [type="button"], [type="reset"], [type="submit"] {
    font-size: 80% !important;
	letter-spacing: 0.3em !important;
	background:rgb(0,0,0,0);
}
button:hover{
	background:black;
	color:white;
}

/*-----------------------*/
/*  for scroll           */
/*-----------------------*/
/* 1. 全体のレイアウト */
.scrollWraper {
	/* 位置の固定 */
	position: fixed;
	bottom: 20px;
	left: 20px;
	z-index:50;
	/* 伸びるのを防ぐための指定 ★重要 */
	top: auto;          /* 上端の固定を強制解除 */
	height: auto;       /* 高さを中身（線と文字）に合わせる */
}

/* 2. スクロールを促す記号（縦線） */
.symbolWrapper {
	position: relative;
	width: 1px;             /* 線の太さ */
	height: 60px;           /* 線の長さ */
	background-color: rgb(255,255,255,0.5);
	overflow: hidden;       /* 線からはみ出た○を隠す（好みで調整） */
	display:inline-block;
	
	/* animation */	
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
	transition: all 1s;

}

/* 3. テキスト（先ほどのフォント設定を活かす） */
.scrollWraper .text {
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #000;
	display:inline-block;
	margin-left: 10px;
	
		/* animation */	
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
	transition: all 1s;

	color: #ffffff;
}

.scrollWraper.blackStyle > .symbolWrapper{
	background-color: rgb(0,0,0,0.1);
	
}

.scrollWraper.blackStyle > .text{
	color: #000000;
}

/* 3. 上下に動く○ */
.symbolWrapper::before {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 6px;             /* ○のサイズ */
	height: 6px;
	background-color: #ffffff; /* ○の色はハッキリと */
	border-radius: 50%;
	
	/* アニメーションの指定 */
	animation: scrollSlide 2.2s ease-in-out infinite;
}
.scrollWraper.blackStyle > .symbolWrapper::before {
	background-color: #000000; /* ○の色はハッキリと */
}
/* 5. スライドアニメーションの定義 */
@keyframes scrollSlide {
	0% {
		transform: translate(-50%, 0);
		opacity: 0;
	}
	20% {
		opacity: 1;
	}
	80% {
		opacity: 1;
	}
	100% {
		/* translateYを使うことで、より滑らかな挙動になります */
		transform: translate(-50%, 50px); /* 線の長さに合わせて調整 */
		opacity: 0;
	}
}
/*====================================================================================*/
/* スマフォ縦表示
/*====================================================================================*/
/* ipad pro? */
@media only screen and (max-width: 1024px) and (orientation:portrait){
	.pageWrapper > .backgroundWrapper > .contents >.body > .text{
		
        top: 50%;
        transform: translateY(-50%) !important;
        left: initial;
        transform: initial;
        padding: 0 40px;
	}
	.pageWrapper > .contentsWrapper > .contents {
		min-height: 100vh;
	}
	#bgConcept {
		font-size: 105%;
		line-height: 1.8rem;
		color: black;
		margin-bottom: 200px;
	}
	#marmalade{
        min-height: initial;
	}
	#marmalade > .body{
		position: initial;
		transform: translateY(0);
	}
	#marmalade > .body > .wrapper {
		width: 100%;
	}
	#marmalade > .body > .wrapper > .captionArea {
		padding: 0 40px;
	}
	#marmalade > .body > .wrapper  .imageArea {
		width: 100%;
	}
	#marmalade > .body > .wrapper  .imageArea img{
	}
	:is(#cjam, #cBread) {
		width: 100vw;
		min-height: initial;
	}
	:is(#cjam, #cBread) > .cover {
		padding: 0 40px;
		position: initial;
		min-height: 100vh;
		margin-bottom: 10px;
	}
	:is(#cjam, #cBread) > .cover > .wrapper {
		position: initial;
        top: 0;
        width: 100%;
        transform: initial;
	}
	:is(#cjam, #cBread) > .cover > .wrapper > .image{
        width: 100%;
	}
	:is(#cjam, #cBread) > .cover > .wrapper > .captionArea{
		width: 100%;
		padding-left: 0;
	}
	:is(#news, #contact){
		width:calc(100% - 80px);
		padding: 0 40px;
	}
	:is(#news, #contact) > .body > .wrapper .list > .date{
		width:100%;
	}
	:is(#news, #contact) > .body > .wrapper .list > .title{
		width:100%;
	}
	:is(#profile, #stockists) {
        width: 100vw;
        padding: 0 40px;
        width: calc(100vw - 80px);
        min-height: initial;
    }
}
/*====================================================================================*/
/* スマフォ　横表示
/*====================================================================================*/
@media only screen and (max-width: 1024px) and (orientation:landscape){


}

/* EndMobile */