@charset "UTF-8";

/*==================================================================

FV_AREA

==================================================================*/
@media screen and (min-width:961px) {
.fv_area{
width:100%;
margin:0 auto 100px;
}
.fv_area div{
width:100%;
height:auto;
}
.fv_area h2{
width:60%;
margin:0 2% 50px 38%;
}
.fv_area h1{
width:30%;
margin:0 auto;
}
}
@media only screen and (min-width:768px) and (max-width:960px) {
.fv_area{
width:100%;
margin:0 auto 80px;
}
.fv_area div{
width:100%;
height:auto;
}
.fv_area h2{
width:60%;
margin:0 2% 50px 38%;
}
.fv_area h1{
width:30%;
margin:0 auto;
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
.fv_area{
width:100%;
margin:0 auto 50px;
}
.fv_area div{
width:100%;
height:auto;
}
.fv_area h2{
width:80%;
margin:0 2% 35px 18%;
}
.fv_area h1{
width:40%;
margin:0 auto;
}
}









/*==================================================================

STORY_AREA

==================================================================*/
@media screen and (min-width:961px) {
.story_area{
width:95%;
margin:0 0 100px 5%;
}
.story_area p{
font-size:15px;
line-height:1.8em;
margin:2em 0;
}
.story_area div{
width:40%;
float:right;
margin-left:5%;
}
.story_area div img{
border-radius:20px 0 0 20px;
}
}
@media only screen and (min-width:768px) and (max-width:960px) {
.story_area{
width:95%;
margin:0 0 80px 5%;
}
.story_area p{
font-size:14px;
line-height:1.5em;
margin:1.5em 0;
}
.story_area div{
width:40%;
float:right;
margin:0 0 5% 3%;
}
.story_area div img{
border-radius:15px 0 0 15px;
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
.story_area{
width:95%;
margin:0 auto 50px;
}
.story_area p{
font-size:14px;
line-height:1.35em;
margin:1.5em 0;
}
.story_area div{
width:60%;
margin:0 auto 5%;
}
.story_area div img{
border-radius:15px;
}
}








/*==================================================================

NANGOHI_AREA

==================================================================*/
@media screen and (min-width:961px) {
.nangohi_area{
width:100%;
margin:0 0 100px;
background:url("../../images/nangohi.jpg") no-repeat;
background-size:cover;
padding:100px 0;
}
.nangohi_area p{
width:90%;
margin:0 auto;
background:rgba(255,255,255,0.8);
padding:3em;
border-radius:30px 10px 30px 10px;
}
}
@media only screen and (min-width:768px) and (max-width:960px) {
.nangohi_area{
width:100%;
margin:0 0 80px;
background:url("../../images/nangohi.jpg") no-repeat;
background-size:cover;
padding:100px 0;
}
.nangohi_area p{
width:90%;
margin:0 auto;
background:rgba(255,255,255,0.8);
padding:3em;
border-radius:30px 10px 30px 10px;
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
.nangohi_area{
width:100%;
margin:0 0 50px;
background:url("../../images/nangohi.jpg") no-repeat;
background-size:cover;
padding:100px 0;
}
.nangohi_area p{
width:90%;
margin:0 auto;
background:rgba(255,255,255,0.8);
padding:2em;
border-radius:30px 10px 30px 10px;
}
}









/*==================================================================

CREATOR_AREA

==================================================================*/
@media screen and (min-width:961px) {
.creator_area{
width:100%;
margin:0 0 50px;
}
.creator_area dl{
}
.creator_area dl dt.toyoda{
width:40%;
float:left;
margin:0 5% 20px 0;
}
.creator_area dl dt.toyoda img{
border-radius:0 20px 20px 0;
}
.creator_area dl dd.toyoda{
width:55%;
float:right;
}
.creator_area dl dd.toyoda h5{
font-size:20px;
letter-spacing:0.05em;
font-family: "Tangerine", cursive;
font-weight: 700;
margin-top:8em;
}
.creator_area dl dd.toyoda h5 span{
background:#006A6C;
color:#FFF;
padding:0.2em 1em;
}
.creator_area dl dd.toyoda h3{
width:50%;
margin:30px 50% 50px 0;
}
.creator_area dl dd.toyoda h4{
font-size:64px;
letter-spacing:-0.01em;
font-family:"Tangerine", cursive;
font-weight:400;
word-spacing:0.5em;
}
.creator_area dl dt.kikuchi{
width:55%;
float:left;
text-align:right;
}
.creator_area dl dt.kikuchi h5{
font-size:20px;
letter-spacing:0.05em;
font-family: "Tangerine", cursive;
font-weight: 700;
margin-top:8em;
}
.creator_area dl dt.kikuchi h5 span{
background:#006A6C;
color:#FFF;
padding:0.2em 1em;
}
.creator_area dl dt.kikuchi h3{
width:50%;
margin:30px 0 50px 50%;
}
.creator_area dl dt.kikuchi h4{
font-size:64px;
letter-spacing:-0.01em;
font-family:"Tangerine", cursive;
font-weight:400;
word-spacing:0.5em;
}
.creator_area dl dd.kikuchi{
width:40%;
float:right;
margin:0 0 20px 5%;
}
.creator_area dl dd.kikuchi img{
border-radius:20px 0 0 20px;
}
.creator_area h6{
font-size:24px;
font-style:italic;
line-height:1.8em;
width:62%;
margin:0 auto;
color:#B4AEB1;
}
.creator_area p{
width:90%;
margin:0 auto 60px;
}
}
@media only screen and (min-width:768px) and (max-width:960px) {
.creator_area{
width:100%;
margin:0 0 40px;
}
.creator_area dl{
}
.creator_area dl dt.toyoda{
width:40%;
float:left;
margin:0 5% 20px 0;
}
.creator_area dl dt.toyoda img{
border-radius:0 20px 20px 0;
}
.creator_area dl dd.toyoda{
width:55%;
float:right;
}
.creator_area dl dd.toyoda h5{
font-size:18px;
letter-spacing:0.05em;
font-family: "Tangerine", cursive;
font-weight: 700;
margin-top:7em;
}
.creator_area dl dd.toyoda h5 span{
background:#006A6C;
color:#FFF;
padding:0.2em 1em;
}
.creator_area dl dd.toyoda h3{
width:50%;
margin:30px 50% 30px 0;
}
.creator_area dl dd.toyoda h4{
font-size:50px;
letter-spacing:-0.01em;
font-family:"Tangerine", cursive;
font-weight:400;
word-spacing:0.5em;
}
.creator_area dl dt.kikuchi{
width:55%;
float:left;
text-align:right;
}
.creator_area dl dt.kikuchi h5{
font-size:18px;
letter-spacing:0.05em;
font-family: "Tangerine", cursive;
font-weight: 700;
margin-top:7em;
}
.creator_area dl dt.kikuchi h5 span{
background:#006A6C;
color:#FFF;
padding:0.2em 1em;
}
.creator_area dl dt.kikuchi h3{
width:50%;
margin:30px 0 30px 50%;
}
.creator_area dl dt.kikuchi h4{
font-size:50px;
letter-spacing:-0.01em;
font-family:"Tangerine", cursive;
font-weight:400;
word-spacing:0.5em;
}
.creator_area dl dd.kikuchi{
width:40%;
float:right;
margin:0 0 20px 5%;
}
.creator_area dl dd.kikuchi img{
border-radius:20px 0 0 20px;
}
.creator_area h6{
font-size:20px;
font-style:italic;
line-height:1.8em;
width:68%;
margin:0 auto;
color:#B4AEB1;
}
.creator_area p{
width:90%;
margin:0 auto 50px;
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
.creator_area{
width:100%;
margin:0 0 50px;
}
.creator_area dl{
}
.creator_area dl dt.toyoda{
width:60%;
margin:0 auto 20px 0;
}
.creator_area dl dt.toyoda img{
border-radius:0 20px 20px 0;
}
.creator_area dl dd.toyoda{
width:90%;
margin:0 auto;
}
.creator_area dl dd.toyoda h5{
font-size:18px;
letter-spacing:0.05em;
font-family: "Tangerine", cursive;
font-weight: 700;
}
.creator_area dl dd.toyoda h5 span{
background:#006A6C;
color:#FFF;
padding:0.2em 1em;
}
.creator_area dl dd.toyoda h3{
width:50%;
margin:20px 50% 20px 0;
}
.creator_area dl dd.toyoda h4{
font-size:50px;
letter-spacing:-0.01em;
font-family:"Tangerine", cursive;
font-weight:400;
word-spacing:0.5em;
}
.creator_area dl dt.kikuchi{
width:90%;
margin:0 auto;
}
.creator_area dl dt.kikuchi h5{
font-size:18px;
letter-spacing:0.05em;
font-family: "Tangerine", cursive;
font-weight: 700;
text-align:right;
}
.creator_area dl dt.kikuchi h5 span{
background:#006A6C;
color:#FFF;
padding:0.2em 1em;
}
.creator_area dl dt.kikuchi h3{
width:50%;
margin:30px 0 30px 50%;
}
.creator_area dl dt.kikuchi h4{
font-size:50px;
letter-spacing:-0.01em;
font-family:"Tangerine", cursive;
font-weight:400;
word-spacing:0.5em;
text-align:right;
}
.creator_area dl dd.kikuchi{
width:60%;
margin:0 0 20px auto;
}
.creator_area dl dd.kikuchi img{
border-radius:20px 0 0 20px;
}
.creator_area h6{
font-size:20px;
font-style:italic;
line-height:1.6em;
width:68%;
margin:0 auto;
color:#B4AEB1;
}
.creator_area p{
width:90%;
margin:2em auto 50px;
}
}









/*==================================================================

BRANDING_AREA

==================================================================*/
@media screen and (min-width:961px) {
.branding_area{
width:100%;
margin:0 0 100px;
}
.branding_area div{
width:100%;
height:auto;
}
.branding_area h5{
font-family: "Shippori Mincho", serif;
font-size:26px;
text-align:center;
position:relative;
padding-bottom:26px;
}
.branding_area h5::after{
content:'';
position:absolute;
bottom:0;
left:50%;
transform:translateX(-50%);
width:7px;
height:7px;
background-color:#006A6C;
border-radius:7px;
}
.branding_area p{
width:90%;
margin:2em auto 3em;
}
.branding_area h6{
font-size:15px;
text-align:center;
line-height:1.5em;
margin-top:1.5em;
}
}
@media only screen and (min-width:768px) and (max-width:960px) {
.branding_area{
width:100%;
margin:0 0 80px;
}
.branding_area div{
width:100%;
height:auto;
}
.branding_area h5{
font-family: "Shippori Mincho", serif;
font-size:22px;
text-align:center;
position:relative;
padding-bottom:26px;
}
.branding_area h5::after{
content:'';
position:absolute;
bottom:0;
left:50%;
transform:translateX(-50%);
width:7px;
height:7px;
background-color:#006A6C;
border-radius:7px;
}
.branding_area p{
width:90%;
margin:2em auto 3em;
}
.branding_area h6{
font-size:14px;
text-align:center;
line-height:1.5em;
margin-top:1.5em;
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
.branding_area{
width:100%;
margin:0 0 50px;
}
.branding_area div{
width:100%;
height:auto;
}
.branding_area h5{
font-family: "Shippori Mincho", serif;
font-size:18px;
text-align:center;
position:relative;
padding-bottom:26px;
}
.branding_area h5::after{
content:'';
position:absolute;
bottom:0;
left:50%;
transform:translateX(-50%);
width:7px;
height:7px;
background-color:#006A6C;
border-radius:7px;
}
.branding_area p{
width:90%;
margin:2em auto 3em;
}
.branding_area h6{
font-size:13px;
text-align:center;
line-height:1.5em;
margin-top:1.5em;
}
}









/*==================================================================

PRODUCT_AREA

==================================================================*/
@media screen and (min-width:961px) {
.product_area{
width:100%;
margin:0 0 10px;
}
.product_area h1{
width:30%;
margin:0 auto 30px;
}

.product_area h3{
font-family: "Shippori Mincho", serif;
font-size:28px;
text-align:center;
margin:2em auto 1em;
padding:1rem 0;
border-bottom:3px dotted #006A6C;
width:80%;
}
.product_area .price{
font-size:27px;
text-align:right;
padding-right:1.5em;
}
.product_area .price span{
font-size:0.6em;
margin-right:0.3em;
}
.product_area h4{
width:40%;
margin:3% 7% 0 auto;
}
.product_area h4 img{
position:relative;
left:0;
transition:0.8s;
}
.product_area h4 img:hover{
left:30px;
}
.product_area div.contents{
background:#FFF;
width:84%;
padding:5%;
margin:0 auto;
text-align:justify;
}
.product_area h5{
position:relative;
font-size:18px;
font-weight:500;
text-align:left;
padding:0 1rem;
margin:1em 0 0.8em;
}
.product_area h5:before{
position:absolute;
top:50%;
width:30px;
height:1px;
left:-29px;
background-color:#006A6C;
content:'';
}
.product_area dl{
}
.product_area dl dt{
font-size:13px;
width:15%;
float:left;
margin-bottom:10px;
padding-left:1.5em;
background:#006A6C;
color:#FFF;
padding:0.3em 0;
text-align:center;
line-height:1em;
}
.product_area dl dd{
font-size:13px;
width:80%;
float:right;
margin-bottom:10px;
}
}
@media only screen and (min-width:768px) and (max-width:960px) {
.product_area{
width:100%;
margin:0 0 10px;
}
.product_area h1{
width:30%;
margin:0 auto 30px;
}
.product_area h3{
font-family: "Shippori Mincho", serif;
font-size:24px;
text-align:center;
margin:2em auto 1em;
padding:1rem 0;
border-bottom:3px dotted #006A6C;
width:80%;
}
.product_area .price{
font-size:24px;
text-align:right;
padding-right:1.5em;
}
.product_area .price span{
font-size:0.6em;
margin-right:0.3em;
}
.product_area h4{
width:40%;
margin:3% 7% 0 auto;
}
.product_area h4 img{
position:relative;
left:0;
transition:0.8s;
}
.product_area h4 img:hover{
left:30px;
}
.product_area div.contents{
background:#FFF;
width:84%;
padding:5%;
margin:0 auto;
text-align:justify;
}
.product_area h5{
position:relative;
font-size:18px;
font-weight:500;
text-align:left;
padding:0 1rem;
margin:1em 0 0.8em;
}
.product_area h5:before{
position:absolute;
top:50%;
width:30px;
height:1px;
left:-29px;
background-color:#006A6C;
content:'';
}
.product_area dl{
}
.product_area dl dt{
font-size:12px;
width:15%;
float:left;
margin-bottom:10px;
padding-left:1.5em;
background:#006A6C;
color:#FFF;
padding:0.3em 0;
text-align:center;
line-height:1em;
}
.product_area dl dd{
font-size:12px;
width:80%;
float:right;
margin-bottom:10px;
line-height:1.2em;
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
.product_area{
width:100%;
margin:0 0 20px;
}
.product_area h1{
width:40%;
margin:0 auto 20px;
}
.product_area h3{
font-size:20px;
line-height:1.2em;
margin:3em auto 1em;
padding:1rem 0;
border-bottom:3px dotted #006A6C;
width:80%;
text-align:center;
}
.product_area .price{
font-size:24px;
text-align:center;
}
.product_area .price span{
font-size:0.6em;
margin-right:0.3em;
}
.product_area h4{
width:60%;
margin:3% auto 0;
}
.product_area h4 img{
position:relative;
left:0;
transition:0.8s;
}
.product_area h4 img:hover{
left:20px;
}
.product_area div.contents{
background:#FFF;
width:100%;
padding:5%;
margin:10px auto 0;
text-align:justify;
}
.product_area h5{
position:relative;
font-size:16px;
font-weight:500;
text-align:left;
padding:0 1rem;
margin:1em 0 0.5em;
}
.product_area h5:before{
position:absolute;
top:50%;
width:20px;
height:1px;
left:-15px;
background-color:#006A6C;
content:'';
}
.product_area dl{
}
.product_area dl dt{
font-size:12px;
width:20%;
margin-bottom:5px;
padding-left:1.5em;
background:#006A6C;
color:#FFF;
padding:0.3em 0;
text-align:center;
line-height:1em;
}
.product_area dl dd{
font-size:12px;
width:100%;
margin-bottom:15px;
line-height:1.1em;
}
}









/*==================================================================

SELLER_AREA

==================================================================*/
@media screen and (min-width:961px) {
.seller_area{
background:#EAE5E3;
width:80%;
margin:0 auto 50px;
padding:2em 3em;
font-size:13px;
}
}
@media only screen and (min-width:768px) and (max-width:960px) {
.seller_area{
background:#EAE5E3;
width:80%;
margin:0 auto 50px;
padding:2em 3em;
font-size:12px;
line-height:1.4em;
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
.seller_area{
background:#EAE5E3;
width:90%;
margin:0 auto 50px;
padding:2em 3em;
font-size:11px;
line-height:1.4em;
}
}