@charset "utf-8";
/*------------------------------------------------------------------

	SP
	
-----------------------------------------------------------------*/


/* module
-------------------------------------------------------*/
.pc {
display: none;
}
.sp {
display: block;
}
.in {
width:100%;
max-width:100%;
}
.area {
padding:30px 20px;
}
h3 {
font-size: 120%;
padding: 15px;
margin-bottom: 30px;
}
.btn-orange a {
padding: 10px 15px;
width: 90%;
}


/* header
-------------------------------------------------------*/
#header {
text-align: center;
padding:10px 45px;
}
#header .box {
width: 100%;
}
#header .in {
justify-content: center;
}
#header .logo img {
max-width:;
}
#header ul {
justify-content: center;
position: fixed;
left:0;
bottom:0;
z-index: 999;
background:#fff;
padding:10px 5px;
width: 100%;
box-sizing: border-box;
border-top: 1px solid #333;
}
#header ul li {
padding: 0 5px;
}

/* nav
-------------------------------------------------------*/
#menu-btn {
position: fixed;
cursor: pointer;
right: 10px;
top: 12px;
z-index: 9999;
height: 18px;
}
#menu-btn span {
display: block;
background:#000;
width: 25px;
height: 2px;
transition: 0.5s;
position: relative;
}
#menu-btn span:nth-child(2) {
top: 6px;
}
#menu-btn span:last-child {
top: 12px;
}
#menu-btn.on span {
background: #fff;
}
#menu-btn.on span:first-child {
transform: translateY(8px) rotate(45deg);
}
#menu-btn.on span:nth-child(2) {
transform: scaleX(0);
}
#menu-btn.on span:last-child {
transform: translateY(-8px) rotate(-45deg);
}
#menu {
background: rgba(148,200,33,0.6);
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: -100%;
z-index: 999;
overflow: hidden;
}
#menu .box {
display: flex;
flex-flow: column;
justify-content: center;
height:100%;
}
#menu ul {
over-flow:auto;
}
#menu ul li {
text-align: center;
}
#menu ul li:first-child {
border-top:1px solid #fff;
}
#menu ul li {
color: #fff;
border-bottom: 1px solid #fff;
}
#menu ul li a {
color:#fff;
display: block;
transition: .2s;
padding: 10px;
margin:0 auto;
line-height:1.2;
}
#menu ul li a:hover {
opacity: 0.7;
}
#menu-bg {
width: 100%;
height: 100%;
background: rgba(148,200,33,0.9);
overflow: hidden;
position: fixed;
top: 0;
right: -110%;
z-index: 998;
}


/* breadcrumb
-------------------------------------------------------*/
#breadcrumb ul {
padding:10px;
}


/* visual
-------------------------------------------------------*/
#index #visual .visual-in {
background: none;
padding: 0;
}
#index #visual .visual-in img{
max-width:640px;
margin:0 auto;
}
#index #visual .visual-in .in {
width: 100%;
}
#index #visual .box {
padding: 20px;
}
#index #visual .box .img {
display: none;
}
#index #visual .box .in {
justify-content: center;
}
#index #visual .box .in .txt-box {
margin-right: 0;
}
#index #visual .box .in .txt-box .ttl {
text-align: center;
}
#index #visual .box .in .txt-box .ttl>b::before {
background: url(../img/index/top_icon.png)no-repeat left center/35px 30px;
width: 35px;
height: 30px;
bottom: -15px;
}
#index #visual .box .in .txt-box .ttl img {
max-width: 250px;
}
#index #visual .box .in .txt-box ul li::before {
background: url(../img/index/top_check.png)no-repeat left center/26px 20px;
width: 26px;
height: 20px;
margin-bottom: 15px;
vertical-align: top;
}
#index #visual .box .in .txt-box ul li {
font-size: 100%;
display: table;
width: 100%;
}
#index #visual .box .in .txt-box ul li > * {
display: table-cell;
}
#other #visual .visual-in {
padding: 50px 20px;
box-sizing: border-box;
}
#other #visual .visual-in .in {
font-size: 130%;
}
@media screen and (max-width:350px){
#index #visual .box .in .txt-box .ttl img {
max-width: 235px;
}
#index #visual .box .in .txt-box .ttl>b::before {
background: url(../img/index/top_icon.png)no-repeat left center/24px 20px;
width: 24px;
height: 30px;
}
}


/* banner
-------------------------------------------------------*/
.banner {
padding:0 20px;
box-sizing: border-box;
}
.banner .border-box {
padding: 10px;
}
.banner h3 img {
max-width: 300px;
margin:0 auto;
}
.banner .img {
display: none;
}
.banner .txt img {
max-width: 280px;
margin:0 auto 10px;
}
.banner ul li {
margin-right: 0;
	margin-bottom: 10px;
padding:0 5px;
}
.banner ul {
	display: block;
padding: 10px;
}


/* footer
-------------------------------------------------------*/
#footer {
padding:30px 0 0;
}
#footer .in {
padding: 30px 20px;
box-sizing: border-box;
}
#footer .footer-nav ul {
padding: 20px;
flex-flow: row wrap;
}
#footer .footer-nav ul li {
margin:5px 0;
}
#footer .box {
flex-flow: column nowrap;
align-items: center;
}
#footer .box .txt-box {
margin-bottom:20px;
}
#footer .box ul li {
padding:0 5px;
box-sizing: border-box;
}
#footer .box ul li:last-child img {
margin: 0;
}
#footer .copy {
padding-bottom:150px;
}

/* index
-------------------------------------------------------*/
#index #area01 {
padding-bottom: 10px;
}
#index #area01 ul li .num {
position: initial;
}
#index #area01 ul li .img>span {
width: 120px;
height: auto;
flex-flow: row nowrap;
align-items: center;
justify-content: flex-start;
}
#index #area01 ul {
flex-flow: column nowrap;
align-items: center;
}
#index #area01 ul li {
width: 100%;
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: flex-start;
margin-bottom:20px;
}
#index #area01 ul li .img {
margin:0;
}
#index #area01 ul li .num img {
max-width: 50px;
margin-right: 10px;
}
#index #area01 ul li .icon img {
max-width: 50px;
margin-right: 10px;
}
#index #area02 .btn-orange img {
max-width: 200px;
}
#index #area02 ul {
margin-bottom: 30px;
}
#index #area02 ul li {
width: 100%;
	margin-bottom: 15px;
}
#index #area02 ul {
display: block;
flex-flow: row nowrap;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 30px;
}
#index #area03 ul {
flex-flow: column nowrap;
}
#index #area03 ul li {
width: 100%;
display: flex;
flex-flow: row nowrap;
align-items: flex-start;
justify-content: flex-start;
}
#index #area03 ul li:not(:last-child) {
margin-bottom:20px;
}
#index #area03 ul li .img img {
width: 100px;
margin:0 15px 0 0;
}
@media screen and (max-width:410px){
#index #area01 ul li {
flex-flow: column nowrap;
}
#index #area01 ul li .img {
margin-bottom:20px;
}
#index #area01 ul li .num img {
margin:0 10px;
}
#index #area01 ul li .icon img {
margin:0 10px;
}
}
@media screen and (max-width:400px){
#index #area03 ul li {
flex-flow: column nowrap;
align-items: center;
}
#index #area03 ul li .img {
text-align: center;
}
#index #area03 ul li .img img {
margin: 0 0 10px;
}
}


/* example
-------------------------------------------------------*/
#example #area01 ul li {
flex-flow: column nowrap;
align-items: center;
}
#example #area01 ul li .img-box .img img {
width: 100%;
margin-right: 0;
max-width: 300px;
margin-bottom:20px;
}
#example #area01 ul li .txt b {
font-size: 110%;
}
#example #area02 .ul01 {
margin-bottom: 0;
}
#example #area02 h4 {
font-size: 110%;
}
#example #area02 .ul02 li {
margin-bottom: 10px;
width: 48%;
}
@media screen and (max-width:600px){
#example #area02 .ul01 li {
width: 48%;
}
#example #area02 .ul01 li .txt > * {
display: block;
}
#example #area02 .ul01 li .txt .big {
font-size: 110%;
}
}


/* flow
-------------------------------------------------------*/
#flow #area01 ul {
flex-flow: column nowrap;
}
#flow #area01 ul li {
width: 100%;
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: flex-start;
position: relative;
margin-bottom:60px;
}
#flow #area01 ul li .img {
border-bottom:none;
margin-bottom: 0;
}
#flow #area01 ul li .txt b {
font-size: 110%;
margin-bottom: 10px;
}
#flow #area01 ul li:not(:last-child) .img::after {
display: none;
}
#flow #area01 ul li:not(:last-child)::after {
content: "";
display: inline-block;
background: url(../img/flow/arrow.png)no-repeat center center/20px 31px;
width: 20px;
height: 31px;
position: absolute;
left: 0;
bottom: -40px;
right: 0;
margin: auto;
transform: rotate(90deg);
}
#flow #area01 ul li .img img {
width: 100px;
max-width: 100px;
margin-bottom: 0;
margin-right: 20px;
}
#flow #area01 ul li .txt {
width: 100%;
}
#flow #area01 ul li .txt b {
text-align: left;
}


/* company
-------------------------------------------------------*/
#company #area01 dl dt {
width: 80px;
}
#company #area01 dl > * {
padding: 10px;
font-size: 90%;
line-height: 1.3;
}
#company #area01 .map-area {
flex-flow: column nowrap;
align-items: center;
}
#company #area01 .map-area li {
width: 100%;
margin-bottom:30px;
}
#company #area01 .map-area li iframe {
width: 100%;
}
#company #area02 {
padding-bottom: 30px;
}
#company #area02 h3 {
margin-bottom:0;
}
#company #area02 dl>* {
display: block;
}
#company #area02 dl dt {
width: 100%;
padding-bottom:0;
}
#company #area02 dl dd {
padding-top:10px;
}




/* contact
-------------------------------------------------------*/
#contact .ttl-txt {
font-size: 90%;
line-height: 1.2;
}
#contact tr {
width: 100%;
}
#contact tr > * {
padding: 15px;
display: block;
}
#contact tr th {
font-size: 100%;
width: 100%;
background-position: right 15px center;
border-right: none;
}
#contact tr:last-child th {
background-position: right 15px center;
}
#contact .radio-area {
padding-botom:5px;
}
#contact .text {
height: 30px;
}
#contact.conf .f-box {
display: block;
}
#contact .contact-btn {
font-size: 100%;
padding: 10px;
width: 100%;
margin: 30px auto 0;
display: block;
max-width:250px;
background: url(../img/contact/btn_check.png)no-repeat center center/250px 47px;
height:47px;
}
#contact.conf .contact-btn {
background:url(../img/contact/btn_send.png)no-repeat center center/250px 47px;
}
#contact .back-btn {
font-size: 100%;
padding: 10px;
width: 100%;
margin: 30px auto 0;
display: block;
box-sizing: border-box;
max-width:250px;
background: url(../img/contact/btn_back.png)no-repeat center center/250px 47px;
height:47px;
}
#contact .thanks-btn {
font-size: 100%;
padding: 10px;
width: 100%;
margin: 30px auto 0;
display: block;
box-sizing: border-box;
max-width:250px;
background: url(../img/contact/btn_thanks.png)no-repeat center center/250px 47px;
height:47px;
}
.btn-orange span::after {
bottom: 20px;
right: 100px;
}
#contact .btn-orange input {
margin: 30px 10px 0;
}
.btn-orange span {
width: 100%;
}


@media screen and (max-width: 480px) {
}