﻿@import url("https://fonts.googleapis.com/css?family=Zilla+Slab&display=swap");
@import url("https://fonts.googleapis.com/css?family=Open+Sans&display=swap");
.upcycle, .upcycle *  {
  font-family: YuGothic, "Yu Gothic", 游ゴシック体, "游ゴシック", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "MS ゴシック", "MS Gothic", sans-serif !important;
}

.upcycle {
padding-bottom: 10px;
background-image: url(/g6/feature/image/upcycle_background.jpg);
background-size: 780px;
background-repeat: repeat-y;
}

.upcycle-hero {
  position: relative
}

.upcycle-lead { margin: 40px auto 0; }


.upcycle-desc__text {
  color: #000;
  line-height: 1.8;
	text-align: center;
  font-size: 14px;
  letter-spacing: .1rem;
}

.upcycle__title {
margin-bottom: 12px;
font-size: 18px;
color: #000;
text-align: center;
line-height: 1.8;
}


/* about */
.upcycle-about-box {
margin: 0 96px 20px;
padding: 30px 20px;
border: 1px solid #8e995d;
border-radius: 3px;
background: #fff;
}

.upcycle-about-inner {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

.upcycle-about-inner img {
	margin-right: 30px;
}

.upcycle-about-text {
  color: #000;
  font-size: 14px;
  line-height: 2.0;
  text-align: left;
}

a.upcycle-about-link {
display: block;
margin: 0 96px;
font-size: 14px;
line-height: 2.0;
color: #8e995d;
text-align: right;
}

a.upcycle-about-link:hover {
opacity: 0.7;
}
	
.upcycle-item {
	margin: 40px 0 80px;
}

.upcycle-item .upcycle-title {
padding: 20px 40px;
font-size: 20px;
line-height: 1.8;
color: #fff;
font-weight: bold;
text-align: center;
background: #8e995d;
}

.upcycle-main-item-block { margin: 32px 96px; }

.upcycle-item-block { margin: 22px 96px 16px; }

.upcycle-item-block-text {
padding: 0 39px;
color: #000;
line-height: 1.8;
font-size: 14px;
letter-spacing: .1rem;
}

.upcycle-item-block-image {	margin-top: 40px; text-align: center; }

/* story */
.upcycle-story {
margin: 20px 96px 72px;
padding: 34px 40px;
background: #e8e5d2;
}

.upcycle-story-logo { margin-bottom: 18px; }

.upcycle-story p { text-align: center; }

.upcycle-h3title {
margin: 0 0 30px;
font-size: 18px;
line-height: 1.6;
color: #000;
font-weight: bold;
text-align: center;
letter-spacing: .0rem;
}


.upcycle-item-h3title {
display: flex;
display: -webkit-flex;
margin: 0 96px 24px;
-weblit-align-items: center;
align-items: center;
}

.upcycle-item-h3title span {
padding: 0 34px;
font-size: 20px;
line-height: 1.6;
color: #000;
}

.upcycle-item-h3title:before,
.upcycle-item-h3title:after{
content: "";
display: block;
flex-grow: 1;
height: 2px;
background-color:#8e995d;
}

.upcycle-item-block-inner {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
align-items: center;
}

.upcycle-item-block-inner li {
  color: #000;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: .1rem;
}

.upcycle-item-block-inner li:first-child { margin-right: 30px !important; }


/* 21.08追加 start */
.upcycle__content_attention {
font-size: 12px;
line-height: 1.4;
color: #000;
font-weight: normal;
margin: 8px 0 0;
letter-spacing: .1rem;
word-wrap: break-word;
}


.upcycle__content_attention { padding-left: 12px; }

.upcycle__content_attention::before {
content: "※";
display: inline-block;
margin-left: -1em;
}

.upcycle__content_attention.asterisk {
margin: 0 135px 16px
}

.upcycle__content_attention.asterisk::before {
  content: "＊";
  display: inline-block;
  margin-left: -1em;
}


.upcycle__content_attention.num1,
.upcycle__content_attention.num2,
.upcycle__content_attention.num3 {
padding-left: 20px;
}

.upcycle__content_attention.num1::before {
content: "※1";
display: inline-block;
margin-left: -2em;
padding-right: 4px;
}

.upcycle__content_attention.num2::before {
content: "※2";
display: inline-block;
margin-left: -2em;
padding-right: 4px;
}
.upcycle__content_attention.num3::before {
content: "※3";
display: inline-block;
margin-left: -2em;
padding-right: 4px;
}

.upcycle__content_attention a {
color: #8e995d;
}

.upcycle__content_attention.t-right { text-align: right;}

.upcycle-h1title {
font-size: 18px;
line-height: 1.2;
color: #8e995d;
font-weight: 700;
margin-bottom: 24px;
text-align: center;
}

		
.upcycle-h1title:before {
content: "＼";
}
.upcycle-h1title:after {
content: "／";
}

.upcycle-h1title span {
font-weight: bold;
text-align: center;
font-size: 18px;
line-height: 1.5;
color: #8e995d;
margin: 0 10px;
}

.t-left { text-align: left !important;}
.mb12 { margin-bottom: 12px; }
.mb0 { margin-bottom: 0; }


.upcycle-h2title {
margin: 0 auto;
display: block;
padding: 24px 0 0;
font-size: 20px;
line-height: 1.8;
color: #000;
font-weight: bold;
text-align: center;
}

.upcycle-h2title span {
padding-bottom: 4px;
border-bottom: 2px solid #8e995d;
}

.upcycle-secound-item-block {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
align-items: center;
margin: 38px 28px 32px;
}

.upcycle-secound-item-block li {
color: #000;
font-size: 14px;
line-height: 1.6;
letter-spacing: .1rem;
padding-right: 20px;
}

.upcycle-secound-item-block li.okara-01{
order: 2;
padding-right: 0;
}
.upcycle-secound-item-block li.okara-02 {
order: 1;
padding-right: 20px;
}

.upcycle-secound-item-block li img.animation,
.upcycle-secound-item-block li img.upcycle-image{
width: 350px;
}



/* 21.08追加 end */


/* cart */
.upcycle-item-cart, .upcycle-item-cart.valentine { margin: 40px 96px; }


div.shouhintag {
border: 1px solid #8e995d;
border-radius: 0;
}

.upcycle-item-cart.valentine div.shouhintag {
border: 1px solid #f28e9e;
}

.upcycle-item-cart a:link { color: #8e995d; }

.upcycle-item-banner {
display: block;
margin: 0 96px;
text-align: right;
}

/* animation */
.anim-image-zoom-out {
opacity: 0;
-webkit-transform: scale(1.1) translateY(10%);
-ms-transform: scale(1.1) translateY(10%);
transform: scale(1.1) translateY(10%);
}

.anim-image-zoom-out.inview--show {
-webkit-transition: 1s;
transition: 1s;
opacity: 1;
-webkit-transform: matrix(1, 0, 0, 1, 0, 0);
-ms-transform: matrix(1, 0, 0, 1, 0, 0);
transform: matrix(1, 0, 0, 1, 0, 0);
}

.anim-block-rise {
opacity: 0;
-webkit-transform: translateY(10%);
-ms-transform: translateY(10%);
transform: translateY(10%);
}

.anim-block-rise.inview--show {
-webkit-transition: 1s;
transition: 1s;
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}

/*.purplecarrot-item-image__mask--slide {
  position: absolute;
  top: 0;
  left: 0;
  background: #351D4F;
  z-index: 1;
  width: 100%;
  height: 450px
}*/

.anim-block-slide {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.anim-block-slide.inview--show {
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}

.upcycle .wappen_newitem { border-radius: 0; }

.color-red { color: #ff0000; }


.upcycle-secound-image-block {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin: 0 28px 64px;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: space-between;
justify-content: space-between;
}

.upcycle-staff-msg {
	margin: 0 auto 72px;
	text-align: center;
}

.upcycle-secound-image-block02 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin: 0 28px 19px;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: space-between;
justify-content: space-between;
}

/* umeshu */
.upcycle-secound-umeshu-block {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
align-items: center;
margin: 0 28px 26px;
}

.upcycle-secound-umeshu-block:last-of-type {
	margin-bottom: 76px;
}

.upcycle-secound-umeshu-block li {
color: #000;
font-size: 14px;
line-height: 1.6;
letter-spacing: .1rem;
padding-right: 20px;
}

.upcycle-secound-umeshu-block li.umeshu-01 {
order: 2;
padding-right: 0;
}

.upcycle-secound-umeshu-block li.umeshu-02 {
order: 1;
padding-right: 25px;
}

.upcycle-secound-umeshu-block li img.umeshu { width: 350px; }

.upcycle-h3title.umeshu01, .upcycle-h3title.umeshu02 {
position: relative;
}
.upcycle-h3title.umeshu01:after {
content: "";
display: block;
position: absolute;
background-image: url(/g6/feature/image/upcycle_slice.png);
background-repeat: no-repeat;
background-size: 100% auto;
width: 144px;
height: 76px;
top: -30px;
left: -43px;
}

.upcycle-h3title.umeshu02:after {
content: "";
display: block;
position: absolute;
background-image: url(/g6/feature/image/upcycle_teatime.png);
background-repeat: no-repeat;
background-size: 100% auto;
width: 172px;
height: 74px;
top: -38px;
right: -45px;
}

.umeshu-pdl { padding-left: 68px; }

.umeshu-pdr { padding-right: 68px; }
.t-center { text-align: center;}

.upcycle-umeshu-image { position: relative; }

.upcycle-umeshu-attention {
position: absolute;
right: 10px;
bottom: 10px;
color: #fff;
font-size: 12px;
line-height: 1.4;
letter-spacing: .1rem;
text-align: center;
text-shadow: rgba(0,0,0,0.2) 0 1px 0;
}

.upcycle__content_stext {
font-size: 12px;
line-height: 1.4;
color: #8e995d;
font-weight: normal;
margin: 8px 0 0;
letter-spacing: .1rem;
word-wrap: break-word;
}

/* 22.01.13 追加 */
.upcycle__content_recipe {
margin: 38px 0 32px;
padding: 40px 96px;
background-color: #e1dbb3;
}

.asterisk_text {
vertical-align: super;
font-size: 10px !important;
margin: 0 4px !important;
}

.att_text {
vertical-align: super;
font-size: 10px !important;
}

.upcycle__content_recipe_inner {
margin: 0 auto 24px;
text-align: center;
}

.upcycle__content_recipe_list {
margin: 0 auto;
text-align: center;
}

.upcycle__content_recipe_list li { padding-bottom: 24px;}
.upcycle__content_recipe_list li:last-child { padding-bottom: 0; }

.upcycle__info {
padding: 20px;
font-size: 14px;
color: #c00;
font-weight: 700;
line-height: 1.5;
}

/* valentine */
.upcycle-valentine-bg {
background-image: url(/g6/feature/image/common_220203_bg.jpg);
background-size: contain;
padding-bottom: 40px;
}

.upcycle-valentine-top {
border: 16px solid #f28e9e;
background-color: #fff;
padding: 34px;
text-align: center;
}

.upcycle-valentine-block-text {
color: #f28e9e;
line-height: 1.8;
font-size: 14px;
letter-spacing: .1rem;
}

.upcycle-title-valentine {
padding: 20px 40px;
font-size: 20px;
line-height: 1.8;
color: #fff;
font-weight: bold;
text-align: center;
background: #f28e9e;
}

.sub-image { width: 350px; }
.upcycle-story-img { width: 114px; }
.story-image { width: 248px; }

.upcycle-valentine-image { position: relative; }

.upcycle-valentine-attention {
position: absolute;
right: 10px;
bottom: 2px;
color: #fff;
font-size: 12px;
line-height: 1.4;
letter-spacing: .1rem;
text-align: center;
text-shadow: rgba(0,0,0,0.2) 0 1px 0;
}

/* choosebaseへのリンクボタン */
.btn-choosebase {
display: block;
margin: 0 auto 70px;
padding: 14px 44px 14px 20px;
position: relative;
width: 340px;
border: 1px solid #000;
background-color: #fff;

-webkit-box-sizing: border-box;
box-sizing: border-box;
}

.btn-choosebase:after {
content: "";
display: block;
position: absolute;
width: 10px;
height: 10px;
border-top: 1px solid #000;
border-right: 1px solid #000;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
right: 22px;
top: 50%;
margin-top: -5px;
margin-left: 10px;
}

.btn-choosebase img { margin-right: 14px; }
