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

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

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

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

h2 {margin-bottom: 8px;}

.center {text-align: center;}

small {font-size: 80%}

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

.inner {max-width: 1240px;
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: 100%;
margin: 0 auto;
height: 80px;
max-width: 1240px;
}
@media (max-width: 768px)  {
#header_content {width: 100%;
height: 60px;}}

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

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

#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,199,0,1) 50%);
}

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

/*#logo {position: fixed;
z-index: 99999;
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;
transition: all 0.3s ease 0s;
margin-left: auto;
width: 100%;
}

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

#global-nav.m_fixed ul {
display: flex;
-webkit-display: flex;
justify-content: flex-end;
-webkit-justify-content: flex-end;
margin-left: auto;
width: 50%;}

nav .btn a {
height: 50px;
line-height: 50px;
padding-right: 24px !important;
letter-spacing: normal;
margin: 0;
width: 160px;
background-image: none !important;}

nav .btn a:hover {color:#FFC700 !important; }

nav .btn a::before {top:21px; right: 22px;}


#main_section {display: flex;
-webkit-display: flex;
align-items: center;
-webkit-align-items: center;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
margin-top: 0;
}

#main_section h1 {color: #FFF;
position: absolute;
bottom: calc(200 / 1240 * 100vw);
left:calc(700 / 1240 * 100vw);
font-size: calc(48 / 1240 * 100vw);}
@media (max-width: 768px)  {
#main_section h1 {
bottom: calc(100 / 768 * 100vw);
left: calc(200 / 768 * 100vw);
font-size: calc(48 / 768 * 100vw);
}}

#main_section h1 span {
display: block;
background:#FFC700;
padding: 8px;
}

#main_h1_style {position: relative;
top: 28px;
left:80px;}
@media (max-width: 768px)  {
#main_h1_style {position: relative;
top: 28px;
left:80px;}}

#main_img {position: relative;}

#top_about {background: #F5F5F5;}

#top_about .inner {display: flex;
-webkit-display: flex;
align-items: center;
-webkit-align-items: center;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;}

#top_about .inner div {width: 50%;}
@media (max-width: 768px)  {
#top_about .inner div {width: 100%;}}

#top_about h1, #top_price h1 {display: block;}

#top_about p {padding: 0 16px;}

#top_about .inner div:last-child {display: flex;
-webkit-display: flex;
align-items: center;
-webkit-align-items: center;
justify-content: center;
-webkit-justify-content: center;}

#top_about .inner div:last-child img {width: 50%;
margin-bottom: 0;
}
@media (max-width: 768px)  {
#top_about .inner div:last-child img {margin-bottom: 64px;}}

.price_box {width: 80%;}
@media (max-width: 768px)  {
.price_box {width: 100%;}}

.price_box p {text-align: center;
margin-top: 32px;}
@media (max-width: 768px)  {
.price_box p {text-align: left;}}

.flex {display: flex;
-webkit-display: flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
justify-content: space-between;
-webkit-justify-content: space-between;
}

#top_price dl {width: 48%;}
@media (max-width: 768px)  {
#top_price dl {width: 100%;}}

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

.btn a {
background: #FFC700;
border-radius: 5rem;
color: #FFF;
height: 60px;
line-height: 60px;
display: block;
width: 330px;
text-align: center;
font-weight: bold;
margin: 48px auto;
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 #FFC700;
border-right: 1px solid #FFC700;}

.btn a:hover {
background: #FFF;
border:#FFC700 solid 1px;
color: #FFC700;
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: #FF6584;
	font-weight: bold;
	text-align: right;
	display: block;
	font-size: 24px;
}

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

#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;
justify-content: center;
-webkit-justify-content: center;
}

.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;
justify-content: flex-start;
-webkit-justify-content: flex-start;
}

.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%;}

#row {padding-bottom: 48px;}

#row h1 {display: block}

#row .flex div {width: 50%;
padding:0 16px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;}
@media (max-width: 768px)  {
#row .flex div {width: 100%;}}

#row dl {margin-top: 48px;}

.center_img {
display: flex;
-webkit-display: flex;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items: center;
}

#about .flex div:last-child img {
width: 60%;
}

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

dt {
width: 50%;
margin-bottom: 8px;
border-bottom: #CCC solid 1px;
padding-bottom: 8px;
padding-right: 8px;
display: flex;
-webkit-display: flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
align-items: center;
-webkit-align-items: center;
}

dd {width: 50%;
margin-bottom: 8px;
border-bottom: #CCC solid 1px;
padding-bottom: 8px;
display: flex;
-webkit-display: flex;
align-items: center;
-webkit-align-items: center;
justify-content: flex-end;
-webkit-justify-content: flex-end;
}

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

footer h1, footer p {color: #FFF;
display: block;
text-align: center;}

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

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

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

footer .btn a:hover {
background: #000;
color: #FFC700;
transition: background-color 1s;
-webkit-transition: background-color 1s;
}

.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(217,217,217,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;}

form {max-width: 800px;
margin: 0 auto 64px auto;
padding: 0 16px;}

#price_row {display: flex;
-webkit-display: flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
justify-content: space-between;
-webkit-justify-content: space-between;
width: 80%;
margin-top: 32px;}
@media (max-width: 768px)  {
#price_row {width: 100%;}}

#price_row div {width: 49%;
background: #faf7d6;
margin-bottom: 16px;
border-radius: 8px;
}
@media (max-width: 768px)  {
#price_row div {width: 100%;}}

#price_row h3 {
	background: #FFC700;
	padding: 8px;
	border-radius: 8px 8px 0 0;
	text-align: center;
}

#price_row p {padding: 0 8px 8px 8px;}

#price_row h4 {text-align: center;
margin-bottom: 8px;}

#price_row .price {text-align:center;
margin: 8px 0;}

.work_box {
border: #333 solid 1px;
border-radius: 8px;
padding: 0 16px 16px 16px;
margin:0 auto 32px auto;
display: flex;
-webkit-display: flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
width: 70%;
}
@media (max-width: 768px)  {
.work_box {width: 100%;
margin:0 auto 16px auto;
}}

.work_box > div {width: 50%;}
@media (max-width: 768px)  {
.work_box > div {width: 100%;}
}

.work_box h2 {text-align: center;
margin: 16px 0;}

.work_box img {margin: 32px auto;}
@media (max-width: 768px)  {
.work_box img {margin: 0;}}

.small_text_box {margin: 32px auto;
width: 70%;}
@media (max-width: 768px)  {
.small_text_box {width: 100%;}}

.small_text_box h1 {text-align: center;
display: block;}

.flow li {display: flex;
-webkit-display: flex;
margin-bottom: 64px;
position: relative;}

.flow li::after {content: "▼";
color: #FFC700;
font-size: 24px;
left: 50%;
bottom: -48px;
position: absolute;}

.flow li:last-child::after {content: "";}

.flow li div {width: calc(100% - 80px);
padding-left: 16px;}

.flow h2 {color: #FFC700;
border-bottom: #FFC700 solid 1px;
padding-bottom: 8px;
margin-bottom: 16px;}

.number {
background: #FFC700;
width: 80px;
height: 80px;
font-weight: bold;
color: #FFF;
font-size: 24px;
display: flex;
-webkit-display: flex;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items: center;
border-radius: 100%;
}

.row_top {display: flex;
-webkit-display: flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
margin-top: 32px;}

.row_top p {margin-bottom: 16px;
padding: 0 16px;}
@media (max-width: 768px)  {
.row_top p {padding: 0;}}

.row_top div {width: 50%;}
@media (max-width: 768px)  {
.row_top div {width: 100%;}}

.row_top div {
display: flex;
-webkit-display: flex;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items: center;
margin-top: 0;
}
@media (max-width: 768px)  {
.row_top div:last-child {margin-top: 32px;}}

.row_top div img {max-height: 250px;}

.text_list h2 {border-bottom: #CCC solid 1px;
padding-bottom: 8px;
}

.text_list p {margin-bottom: 16px;}

#plan h1 {display: block;}

.plan_box {display: flex;
-webkit-display: flex;
margin-top: 32px;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;}

.plan_box h2, .plan_box h3 {display: block;
text-align: center;}

.plan_box h3 {border-bottom: #CCC solid 1px;
padding-bottom: 8px;
margin: 16px auto;}

.plan_box div {border: #333 solid 1px;
border-radius: 8px;
padding:16px;
margin:0 auto 32px auto;
width: 49%;
}
@media (max-width: 768px)  {
.plan_box div {width: 100%;}}

.plan_box p {margin-bottom: 8px;}

#about .center_img {margin-top: 0;}
@media (max-width: 768px)  {
#about .center_img {margin-top: 32px;}}

.port_box {width: 49%;
border: #000 solid 1px;
border-radius: 8px;
margin-bottom: 32px;}
@media (max-width: 768px)  {
.port_box {width: 100%;}}

.port_box h2 {text-align: center;
margin-top: 16px;}

.port_box img {padding: 0 16px 16px 16px;
}

.mask img {
width: 100%;
height: 500px;
object-fit: cover;
object-position:top;
}
@media (max-width: 768px)  {
.mask img {height: 300px;}}