@charset "UTF-8";
/* CSS Document */

.sp {display: block;}
@media (min-width: 769px)  {
.sp {display: none !important;}}

.pc {display: none;}
@media (min-width: 769px)  {
.pc {display: block !important;}}

.mt8 {margin-top: 8px;}
.mt16 {margin-top: 16px;}
.mb8 {margin-bottom: 8px;}
.mb16 {margin-bottom: 16px;}

h1 {
text-align: center;
font-size: 24px;
margin: 48px auto;
display: inline-block;
}

h1 span {display: block;
font-size: 14px;
border-top: #582b25 solid 1px;
padding-top: 8px;
margin-top: 8px;
}

h2 {margin-bottom: 8px;}

.center {text-align: center;}

small {font-size: 80%}

.dot_list {list-style: disc;
margin-left: 20px;}

.inner {width: 1024px;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 768px)  {
.inner {
padding: 0 16px;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}}
@media (width: 768px)  {
.inner {padding: 0 16px;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;}}

header {
padding: 0 16px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 80px;
background: rgba(255,255,255,1);
width: 100%;
z-index: 10;
}
@media (max-width: 768px)  {
header {height: 60px;
z-index: 12;
width: 85%;
background: none;
border-bottom: none;}}
@media (width: 768px)  {
header {
border-bottom: #CCC solid 1px;
padding: 0 16px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 80px;
background: rgba(255,255,255,1);
width: 100%;
z-index: 10;
}}

#header_content {
display: flex;
-webkit-display: flex;
align-items: center;
-webkit-align-items: center;
justify-content: center;
-webkit-justify-content: center;
width: 1024px;
margin: 0 auto;
height: 80px;
}
@media (max-width: 768px)  {
#header_content {width: 100%;
height: 60px;}}
@media (width: 768px)  {
#header_content {width: 100%;
height: 80px;}}

#header_content nav ul {
display: flex;
-webkit-display: flex;
align-items: center;
-webkit-align-items: center;
}

#header_content nav ul li {
margin:0 16px;
}

#header_content nav a {
padding: 0 .3em;
background-position: 0 0;
background-size: 200% auto;
transition: .3s;
background-image: linear-gradient(to right, rgba(0,0,0,0) 50%, rgba(255,163,163,1) 50%);
color: #582b25;}

#header_content nav a:hover {
background-position: -100% 0;
color: #fff;
}

#row_header  {background:rgba(255,163,163,0.5);}

#row_header #header_content {
justify-content: flex-start;
-webkit-justify-content: flex-start;
}

@media (max-width: 767px)  {
#logo {position: fixed;
z-index: 12;
top: 16px;
left: 16px;}}

#logo img {width: auto;
height: 40px;
max-width: none;}
@media (max-width: 767px)  {
#logo img {height: 30px;
}}

#global-nav {
  position: static;
  top: -30px;
  transition: all 0.3s ease 0s;
}

#global-nav.m_fixed {
  left: 0;
  position: fixed;
  top: 0;
  height: 80px;
  line-height: 80px;
  width: 100%;
  z-index: 9999;
  background: rgba(255,255,255,0.5);
}

#global-nav.m_fixed ul {
display: flex;
-webkit-display: flex;
justify-content: center;
-webkit-justify-content: center;}

#main_section {display: flex;
-webkit-display: flex;
align-items: center;
-webkit-align-items: center;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
margin-top: 0;
}
@media (max-width: 768px)  {
#main_section {
margin-top: 61px;}}

#main_img {
height: 600px;
position: relative;
display: flex;
-webkit-display: flex;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items: center;
color: #FFF;
width: 50%;
}
@media (max-width: 768px)  {
#main_img {
height: 400px;
width: 100%;
}}

#main_img::before {
content: '';
display: block;
position: absolute;
left: 0;
top:0;
width: 100%;
height: 600px;
background: rgba(0,0,0,0.5);
padding-top: 33.75%;
z-index: 1;
}
@media (max-width: 768px)  {
#main_img::before {height: 400px;}}

#main_img h1 {
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
text-shadow: -weebkit- 2px 2px 4px rgba(0,0,0,0.3);
font-size: 54px;
border: none;
position: relative;
z-index: 2;
text-align: center;
width: 100%;
margin-bottom: 0;
}
@media (max-width: 768px)  {
#main_img h1 {
	font-size: 232%;
	margin-bottom: 16px;
}}

#main_img h1 span {font-size: 54px;
border: none;
padding: 0;
display: inline;
margin: 0;}
@media (max-width: 768px)  {
#main_img h1 span {
	font-size: 100%;
	width: 100%;
	display: block;
}}

#main_img p {
	position: relative;
	z-index: 2;
	padding: 0 16px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 98%;
}

#logo_wrap {width: 50%;
display: flex;
-webkit-display: flex;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items: center;}
@media (max-width: 768px)  {
#logo_wrap {width: 100%;
margin-top: 24px;}}

#logo_wrap img {max-width:300px;
margin: 24px auto 0 auto;}
@media (max-width: 768px)  {
#logo_wrap img {max-width:none;
width: 50%;}}

.btn {margin: auto;
width: 100%;}

.primal_btn a {
	line-height: 22px !important;
	padding: 8px 0 !important;
}

.btn a {
	background: #ffa3a3;
	border-radius: 5rem;
	color: #FFF;
	height: 60px;
	display: block;
	width: 330px;
	text-align: center;
	font-weight: bold;
	margin: 48px auto;
	line-height: 60px;
	transition: background-color 0.5s;
	-webkit-transition: background-color 0.5s;
	position: relative;
	text-decoration: none;
}
@media (max-width: 768px)  {
.btn a {width: 90%;}}

.btn a::before {
content: '';
position: absolute;
right: 28px;
top: 26px;
width: 8px;
height: 8px;
border-top: 1px solid #FFF;
border-right: 1px solid #FFF;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

.btn a:hover::before {border-top: 1px solid #ffa3a3;
border-right: 1px solid #ffa3a3;}

.btn a:hover {
background: #FFF;
border:#ffa3a3 solid 1px;
color: #ffa3a3;
transition: background-color 1s;
-webkit-transition: background-color 1s;
}

#text p {margin-bottom: 16px;}

.border_btn a {background: none;
border: #FFF solid 1px;}

#production h1 {margin-top:4px;}

.item {
display: flex;
-webkit-display: flex;
justify-content: space-around;
-webkit-justify-content: space-around;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
list-style-image: inherit;
margin-bottom: 48px;
}

.item li {width: 30%;
margin-bottom: 0;}
@media (max-width: 768px)  {
.item li {width: 45%;
margin-bottom: 16px;}}

.item a p {color: #582b25;}

.item a {text-decoration: none;}

.item h2 {
margin: 0;
text-align: left;
font-size: 18px;
color: #582b25;
}

.price {color: #ffa3a3;
font-weight: bold;
text-align: right;
display: block;
font-size: 24px;}

.yen {font-size: 80%;
margin-right: 2px;}

.bana {
	background-size: cover;
	height: 400px;
	position: relative;
	display: flex;
	-webkit-display: flex;
	align-items: center;
	-webkit-align-items: center;
	justify-content: center;
	-webkit-justify-content: center;
	color: #FFF;
}

.bana h1 {z-index: 2;
color: #FFF;
position: relative;
display: inline-block;}

.bana h1 span {border-top: #FFF solid 1px;}

.bana_content {
width: 100%;
text-align: center;
}
@media (max-width: 768px)  {
.bana_content {margin-top: 0;}}

.bana_content h1 {margin: 0;}

#qa {margin: 24px auto;}

.qa {max-width: 640px;
margin: 24px auto;
display: flex;
-webkit-display: flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
}

.qa dt {width: 40px;
height: 40px;
line-height: 40px;
font-weight: bold;
text-align: center;
color: #FFF;
margin-bottom: 8px;
border-bottom: none;
}

.qa dd {
	width: calc(100% - 40px);
	padding: 0 16px;
	word-break: break-all;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border-bottom: none;
}

.q {background: #a3e5ff;}

.q_title {font-weight:bold;
margin-top: 10px;}

.a {background: #ffa3a3;}

.row_content {
display: flex;
-webkit-display: flex;
margin: 16px 0;
}
@media (max-width: 768px)  {
.row_content {display:block;}}

.row_img, .row_text {width: 50%;}
@media (max-width: 768px)  {
.row_img, .row_text {width: 100%;}}

.row_text {
padding: 0 16px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
@media (max-width: 768px)  {
.row_text {padding: 16px;}}

.row_text h1 {display: block;
text-align: left;
margin: 0;}

.row_text h2, .row_text h1 {margin: 32px 0 8px 0;}

.category {display: inline-block !important;
text-align: center !important;
padding-bottom: 24px;}

.tax {font-size: 80%;}

#flow {margin-bottom: 16px;}

#flow img {margin-bottom: 8px;}

.copy {
	background: #fff2f8 !important;
	margin: 8px;
	padding: 16px;
	border-radius: 8px;
	display: block;
}

dl {display: flex;
-webkit-display: flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
}

dt {
	width: 50%;
	margin-bottom: 8px;
	border-bottom: dashed 1px;
	padding-bottom: 8px;
	padding-right: 8px;
}

dd {width: 50%;
margin-bottom: 8px;
border-bottom: dashed 1px;
padding-bottom: 8px;}

footer {
background: #ffa3a3;
padding: 16px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

#footer_content {display: flex;
-webkit-display: flex;
max-width: 1024px;
margin: 0 auto;}
@media (max-width: 768px)  {
#footer_content {
display: block;
max-width: none;
}}

footer a {
padding: 0 .3em;
background-position: 0 0;
background-size: 200% auto;
transition: .3s;
background-image: linear-gradient(to right, rgba(0,0,0,0) 50%, rgba(255,255,255,1) 50%);
color: #fff;}

footer a:hover {
background-position: -100% 0;
color: #ffa3a3;
}

footer nav {margin-left: auto;
display: flex;
-webkit-display: flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
justify-content: flex-end;
-webkit-justify-content: flex-end;
}
@media (max-width: 768px)  {
footer nav {display: block;}}

footer h2 {margin: 0;
padding: 0 8px 8px 4px;
margin-bottom: 8px;
color: #FFF;
border-bottom: #FFF solid 1px;}

footer nav {width: 70%;
padding-top: 24px;}
@media (max-width: 768px)  {
footer nav {width: 100%;
padding-top: 0;}}

footer nav ul {width: 23%;}
@media (max-width: 768px)  {
footer nav ul {width: 100%;}}

footer nav ul li {
margin-bottom: 8px;}
@media (max-width: 768px)  {
footer nav ul li {
width: 100%;
margin-top: 16px;}}

footer nav div {
width: 21%;
margin: 0 16px;}
@media (max-width: 768px)  {
footer nav div {
width: 100%;
margin: 16px 0;}}

footer nav div ul {
padding-left: 4px;
margin-top: 0;
width: 100%;}

footer nav div ul li {width: 100%;}

#footer_logo {
display: flex;
-webkit-display: flex;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items: center;
width: 18%;
margin: 24px auto;
}
@media (max-width: 768px)  {
#footer_logo {width: 100%;}}

#footer_logo img {max-width:180px;}

#copyright {text-align: center;
font-size: 14px;
display: block;
margin: 16px auto 0 auto;
color: #FFF;}

.check {text-align: center;
margin-top: 32px;}

.fade{
opacity:0;
transform: translateY(80px);
}

.fadein{
transform: translateY(0);
transition: all 0.5s ease-in;
opacity: 1 !important;
}

#pagetop {position: fixed;
bottom: 24px;
right: 24px;
background:rgba(255,163,163,0.5);
width: 40px;
height: 40px;
border-radius: 100%;
z-index: 15;}

#pagetop::before {
content: '';
display: block;
position: relative;
width: 14px;
height: 14px;
border: 2px solid;
border-color: #FFF #FFF transparent transparent;
transform: rotate(-45deg);
margin: auto;
top: 16px;}