@charset "utf-8";


.fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
	/*width:calc(100vw - 15px);*/
	width:100%;
 }


/* mainarea */
.mainarea {
    width: 100%;
    height:100%;
	position:relative;
}

.mainarea .wrapper {
	position:relative;
	z-index:1;
}


/* mainvisual */
.mainvisual {
	text-align:center;
	padding:100px 0 0;
}

.mainvisual h2 {
	margin-bottom:70px;
	overflow:hidden
}

.mainvisual .human {
	margin-bottom:150px;
	overflow:hidden
}

@media screen and (max-width: 768px) {
.fixed {
	width:100%;
 }
 
.mainvisual {
	text-align:center;
	padding:60px 0 0;
}
.mainvisual h2 {
	margin-bottom:30px;
}
.mainvisual h2 img {
	width:100%;
}
.mainvisual .human {
	margin-bottom:40px;
}
}



/* mainlead */
.mainlead_outer {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100vh;
	background:rgba(255, 255, 255, 0.95);
	text-align:center;
	transform: translateY(-200vh);
	      transition: 1.2s;
		  z-index:999;
		  overflow-y:scroll;
}

.mainlead_outer.action {
	transform: translateY(0);
}

.mainlead_outer.endaction {
	  animation-name:endaction;
  animation-duration:2s; 
  animation-fill-mode: forwards;
}


@keyframes endaction {
0% {
	transform: translateY(0);
}

50% {
	transform: translateY(0);
}

 100% {
	transform: translateY(-200vh);
 } 
}


.mainlead {
	padding:100px 0 0px;
}

.mainlead::after {

}
.mainlead.action {
	transform: translateY(0);
}

.mainlead p {
	font-size:2.0rem;
	font-weight:500;
	margin-bottom:60px;
	line-height:3.0;
	letter-spacing: 0.15em;
}

.mainlead h2 {
	padding:40px 0 40px;
	margin:0 auto;
}

.mainlead h2 img {
	width:100%;
	max-width:900px;
}

@media screen and (max-width: 768px) {
.mainlead_outer {
	padding:0 4%;
}
.mainlead {
	padding:80px 0  200px;
}
.mainlead p {
	font-size:1.4rem;
	margin-bottom:20px;
	line-height:2.5;
	letter-spacing: 0.15em;
}

.mainlead h2 {
	padding:10px 0 30px;
	margin:0 auto;
	width:80%;
}
}


.mainlead p.fade-in-nomal:nth-child(1) {
	animation-delay: 0s;
}

.mainlead p.fade-in-nomal:nth-child(2) {
	animation-delay: 1s;
}

.mainlead p.fade-in-nomal:nth-child(3) {
	animation-delay: 2s;
}

.mainlead p.fade-in-nomal:nth-child(4) {
	animation-delay: 3s;
}


/*
.mainarea {
    width: 100%;
    background-image:url(../images/top/mainvisual_bg.jpg);
    background-repeat: no-repeat;
    background-position: center left;
	background-attachment:fixed;
	}
*/



/* mainvisual スクロール表記 */
.scroll_txt {
	position:relative;
	width:100%;
	margin-top:100px;
}

.scroll_txt span {
  position: absolute;
  top: -30px;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #000;
  border-bottom: 1px solid #000;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  box-sizing: border-box;
}

.scroll_txt p {
	text-align:center;
}
 


/*背景の円*/
.area {
	width:100%;
	height:100%;
	position:fixed;
	z-index:-1;
	
}


.area:after {
    content: '';
    display: inline-block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    background: url(../images/cercle.jpg) center 0 repeat-y;
    animation-name: xmax;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 1.5s;
}

.circles{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.circles li{
    position: absolute;
    display: block;
    list-style: none;
    width: 269px;
    height: 269px;
	border:10px solid #c9a059;
    animation: animate 30s linear infinite;
    bottom: -269px;
    border-radius: 50%;
}

@media screen and (max-width: 768px) {
.area:after {
    background: url(../images/cercle.jpg) center 0 repeat-y 80%;
	background-size:180% auto;

}

.circles li{
    width: 80px;
    height: 80px;
	border:4px solid #c9a059;
}
}

.circles li:nth-child(1){
    left: -5%;
    animation-delay: -5s;
}


.circles li:nth-child(2){
    left: 8%;
    animation-delay: -3s;
    animation-duration: 17s;
}

.circles li:nth-child(3){
    left: 20%;
    animation-delay: -1s;
}

.circles li:nth-child(4){
    left: 30%;
    animation-delay: -5s;
    animation-duration: 23s;
}

.circles li:nth-child(5){
    left: 40%;
    animation-delay: -10s;
}

.circles li:nth-child(6){
    left: 50%;
    animation-delay: 0s;
}

.circles li:nth-child(7){
    left: 60%;
    animation-delay: -2s;
    animation-duration: 17s;
}

.circles li:nth-child(8){
    left: 70%;
    animation-delay: -1s;
    animation-duration: 30s;
}

.circles li:nth-child(9){
    left: 80%;
    animation-delay: -3s;
    animation-duration: 21s;
}

.circles li:nth-child(10){
    left: 90%;
    animation-delay: -5s;
    animation-duration: 16s;
}



@keyframes animate {

    0%{
        transform: translateY(0) rotate(0deg);
    }
	
	90%{
		opacity:1;
    }

    100%{
        transform: translateY(-1000px) rotate(720deg);
		opacity:0;
    }

}


 

/* lead
---------------------------------------------------------- */

.lead {
	width:100%;
	/*background:#c9a059;*/
	background:#fff;
	padding:30px 0 40px;
	position:relative;
	z-index:2;
}

.lead .wrapper {
	text-align:center;
}

.lead h2 {
	font-size:4.4rem;
	color:#fff;
	line-height:1.8;
	margin-bottom:10px;
	font-weight:500;
	letter-spacing:0.1em;
}

.lead h2 span.en {
	font-family: 'Montserrat', sans-serif;
	font-size:4.7rem;
}

.lead h2 span.en02 {
	font-size:5.0rem;
	font-weight:bold;
}

.lead p {
	font-size:1.8rem;
	color:#fff;
}

@media screen and (max-width: 768px) {
.lead {
	padding:20px 0 30px;
}

.lead h2 {
	font-size:2.0rem;
	line-height:1.4;
}

.lead h2 span.en {
	font-family: 'Montserrat', sans-serif;
	font-size:2.2rem;
	display:block;
}

.lead h2 span.en02 {
	font-size:2.6rem;
}

.lead p {
	font-size:1.3rem;
}
}


/* campaign
---------------------------------------------------------- */
.campaign {
	background:#fff;
	padding:0 0 120px;
}

.campaign_col2 {
	display:flex;
	justify-content: space-between;
	padding:50px 0;
	border-bottom:5px dotted #c9a059;
}

.campaign_col2:first-child {
	display:flex;
	justify-content: space-between;
	padding:50px 0;
	border-bottom:none;
}
.campaign_col3 {
	display:flex;
	justify-content: space-between;
	padding:50px 0;
	border-bottom:5px dotted #c9a059;
}

.campaign_col2 .txt_block {
	width:600px;
	padding:0 10px 0 30px;
}

.campaign_col2 .txt_block .date {
	margin-bottom:40px;
}

.campaign_col2 .txt_block h3 {
	font-size:4.0rem;
	line-height:2.0;
}

.campaign_col2 .txt_block h3 span {
	display:block;
	font-size:2.2rem;
	line-height:1;
}

.campaign_col2 .txt_block p {
	font-size:1.8rem;
	margin-bottom:25px;
}

.campaign_col2 .txt_block p small {
	line-height:1.6;
	display:block;
	margin-bottom:30px;
}

.campaign_col2 .img_block {
	width:600px;
	display:flex;
	align-items: center;
	justify-content: center;
}

.campaign_col3 .img_block {
	width:600px;
	display:flex;
	align-items: center;
	justify-content: center;
}

.campaign_col2.small .txt_block {
	width:700px;
	padding:0 30px 0 10px;
}

.campaign_col2.small .img_block {
	width:500px;
	display:flex;
	align-items: center;
	justify-content: center;
}

.campaign_col2.small .img_block.seal img {
	max-width:373px;
	width:100%;
}

.campaign_col2.small .txt_block h3 {
	font-size:2.8rem;
}

.campaign_col2.small .txt_block h3 span {
	font-size:1.8rem;
}

@media screen and (max-width: 768px) {
.campaign {
	padding:0 0 30px;
}

.campaign_col2 {
	flex-direction: column-reverse;
	padding:30px 0;
}

.campaign_col3 {
	flex-direction:column;
	padding:0 0 30px 0;
}

.campaign_col2.small {
	flex-direction: column;
	padding:30px 0 0px;
}

.campaign_col2 .txt_block {
	width:100%;
	padding:0;
}

.campaign_col2 .img_block {
	width:70%;
	margin:0 auto 20px;
	padding:0;
}

.campaign_col3 .img_block {
	width:100%;
	margin:0 auto 20px;
	padding:0;
}

.campaign_col2 .txt_block .date {
	width:50%;
	margin:0 auto 20px;
}

.campaign_col2 .txt_block h3,
.campaign_col2.small .txt_block h3 {
	font-size:1.8rem;
	line-height:1.5;
	margin-bottom:15px;
}

.campaign_col2 .txt_block h3 span,
.campaign_col2.small .txt_block h3 span {
	font-size:1.4rem;
	line-height:1.3;
}

.campaign_col2 .txt_block p {
	font-size:1.2rem;
	margin-bottom:15px;
}

.campaign_col2 .txt_block p small {
	line-height:1.3;
	margin-bottom:20px;
}

.campaign_col2.small .txt_block {
	width:100%;
	padding:0;
}

.campaign_col2.small .img_block {
	width:70%;
	margin:0 auto 20px;
	padding:0;
	display:block;
}

.campaign_col2.small .img_block.seal img {
	margin-left:-10%;
}

.campaign_col2.small .img_block.bag img {
	margin-left:8%;
}

.campaign_col2 .img_block img {
	width:100%;
}

}


/* xmas
---------------------------------------------------------- */
.xmas {
	padding:160px 0 200px;
	position:relative;
	z-index:1;
}

@keyframes xmax {
    0% {
        transform: translate(0,0px);
    }

    100% {
        transform: translate(0,-15px)
    }
}

.xmas:after {
	content:'';
	display:inline-block;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	z-index:-1;
	background:url(../images/top/xmas_bg.jpg) center 0 repeat-y;
    animation-name: xmax;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 1.5s;
}

.xmas_col2 {
	display:flex;
	position:relative;
	margin-bottom:100px;
}

.xmas_col2:last-child {
	margin-bottom:0;
}

.xmas_col2 .img_block {
	width:560px;
	position:absolute;
	top:25px;
	transition:0.8s;
	z-index:1;
}

.xmas_col2 .img_block img {
	width:100%;
}

.xmas_col2 .txt_block {
	width:690px;
	height:520px;
	background:#fff;
	border:4px solid #c9a059;
	margin-left:500px;
	padding:50px 0 0;
	text-align:center;
}

.xmas_col2.reverse .txt_block {
	padding-top:60px;
}

.xmas_col2 .txt_block h3 {
	margin-bottom:15px;
}

.xmas_col2 .txt_block p {
	font-weight:bold;
	font-size:1.6rem;
	margin-bottom:20px;
}

.xmas_col2 .txt_block .btn {
	margin-bottom:30px;
}

.xmas_col2.reverse .txt_block {
	padding-top:70px;
}

.xmas_col2.reverse .img_block {
	width:560px;
	position:absolute;
	top:25px;
	right:0;
}

.xmas_col2.reverse .txt_block {
	margin-left:0px;
}

/* animation */

.xmas_col2[data-scroll="true"] .img_block {
}


.txt_block[data-scroll="true"]{
	animation-delay: 0.2s;
}


@media screen and (max-width: 768px) {
.xmas {
	padding:30px 0 100px;
}
.xmas_col2 {
	display:block;
	margin-bottom:50px;
	position:inherit;
}

.xmas_col2 .img_block {
	width:90%;
	position:inherit;
	margin:0 auto;
}

.xmas_col2 .txt_block {
	width:100%;
	height:auto;
	margin-left:0px;
	margin-top:-40px;
	padding:60px 20px 20px;
}

.xmas_col2.reverse .txt_block {
	padding-top:60px;
}


.xmas_col2 .txt_block h3 {
	width:60%;
	margin:0 auto 15px;
}

.xmas_col2 .txt_block p {
	font-size:1.5rem;
}

.xmas_col2.reverse .img_block {
	width:90%;
	position:inherit;
	margin:0 auto;
}

}

/* food_grocery
---------------------------------------------------------- */
.food_grocery {
}

.foodgrocery_col2 {
	display:flex;
}

.foodgrocery_col2 .img_block {
	width:600px;
}

.foodgrocery_col2 .txt_block {
	width:600px;
	height:430px;
	background:#c9a059;
	padding:0 0 20px;
	display:flex;
	justify-content: center;
	align-items: center;
	text-align:center;
}

.foodgrocery_col2 .txt_block h3 {
	margin-bottom:30px;
}

.foodgrocery_col2 .txt_block p {
	font-weight:bold;
	font-size:1.6rem;
	margin-bottom:30px;
	color:#fff;
}


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

.foodgrocery_col2 .img_block,
.foodgrocery_col2 .txt_block {
	width:100%;
	height:auto;
}

.foodgrocery_col2 .txt_block {
	padding:20px 20px 30px;
}

.foodgrocery_col2 .txt_block h3 {
	width:80%;
	margin:0 auto 20px;
}

.foodgrocery_col2 .txt_block p {
	margin-bottom:20px;
	font-size:1.5rem;
}

}



/* uryu
---------------------------------------------------------- */
.uryu {
	background:#0d6fb8;
	padding:90px 0 100px;
	margin-top:-20px;
	position:relative;
	z-index:2;
}

.uryu .wrapper {
	padding:0 70px;
}

.uryu_col2 {
	display:flex;
	justify-content:space-between;
	 align-items: center;
}

.uryu_col2 .txt_block {
	width:600px;
}

.uryu_col2 .txt_block h2 {
	color:#c9a059;
	font-size:6.0rem;
	font-family: 'Montserrat', sans-serif;
	font-weight:600;
	line-height:1;
	margin-bottom:25px;
}

.uryu_col2 .txt_block h3 {
	font-size:1.8rem;
	color:#fff;
	line-height:1;
	font-weight:normal;
	margin-bottom:30px;
}

.uryu_col2 .txt_block h3 span {
	font-size:4.0rem;
	font-family: 'Montserrat', sans-serif;
	font-weight:600;
	display:block;
	margin-bottom:5px;
}

.uryu_col2 .txt_block p {
	font-size:1.8rem;
	color:#fff;
}

.uryu_col2 .img_block {
	width:382px;
	text-align:center;
}

@media screen and (max-width: 768px) {
.uryu {
	padding:20px 0 40px;
}

.uryu .wrapper {
	padding:0 4%;
}

.uryu_col2 {
	display:block;
}

.uryu_col2 .txt_block,
.uryu_col2 .img_block {
	width:100%;
}

.uryu_col2 .txt_block {
	margin-bottom:30px;
}

.uryu_col2 .txt_block h2 {
	font-size:3.0rem;
	margin-bottom:15px;
}

.uryu_col2 .txt_block h3 span {
	font-size:2.0rem;
}

.uryu_col2 .txt_block h3 {
	font-size:1.4rem;
	margin-bottom:20px;
}

.uryu_col2 .txt_block p {
	font-size:1.3rem;
}

.uryu_col2 .img_block img {
	width:50%;
}

}