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

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


/* module
-------------------------------------------------------*/
.pc {
display: none;
}
.sp {
display: block;
}
.in {
width:100%;
max-width:100%;
}
.area {
padding:30px 20px;
}
.f-box,
.f-box.rev {
flex-flow: column nowrap;
align-items: center;
}
h3 {
font-size: 150%;
}
h3::after {
background: url(../img/common/ttl_bar.png)no-repeat center center/50px 3px;
width: 50px;
height: 3px;
margin: 10px auto 20px;
}


/* header
-------------------------------------------------------*/
#header {
text-align: center;
/*padding: 15px 45px 10px;*/
padding: 10px;
margin:0;
}
#header h1 {
text-align: left;
	margin-bottom: 7px;
}

#header .logo img {
    max-width: 180px;
}

/*#header .box {
width: 100%;
justify-content: center;
flex-flow: column nowrap;
align-items: center;
}
#header h1 {
margin: 0;
text-align: left;
}
#header .logo img {
left: 0;
max-width: 150px;
}*/
#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 #EE605E;
}
#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(237,98,103,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(237,98,103,0.9);
overflow: hidden;
position: fixed;
top: 0;
right: -110%;
z-index: 998;
}


/* visual
-------------------------------------------------------*/
#index #visual {
background:none;
padding:0;
}
#index #visual .img {
display: none;
}


/* banner
-------------------------------------------------------*/
.banner {
padding:30px 20px;
box-sizing: border-box;
}
.banner .in {
padding: 0;
}
.banner .img {
display: none;
}
.banner .txt-box .ttl img {
max-width: 439px;
margin:10px auto;
}
.banner ul li:first-child {
margin-right: 5px;
}
.banner ul li:last-child {
margin-left: 5px;
}

.banner .txt-box ul {
	display: block;
}

.banner .txt-box ul li:first-child img {
    max-width: inherit;
	margin-bottom: 10px;
	margin-left: 5px;
}

.banner .txt-box ul li:last-child img {
     max-width: inherit;
}


/* footer
-------------------------------------------------------*/
#footer .footer-nav {
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: center;
}
#footer .footer-nav.in {
max-width: 100%;
padding:15px 20px;
box-sizing: border-box;
}
#footer .footer-nav li {
padding: 0 10px;
margin:5px 0;
}
#footer .box {
padding: 30px 20px;
box-sizing: border-box;
}
#footer .box .in {
flex-flow: column nowrap;
align-items: center;
}
#footer .box .box-in {
flex-flow: column nowrap;
align-items: center;
}
#footer .box .logo img {
margin-right: 0;
margin-bottom:20px;
max-width: 100px;
}
#footer .box .dl-box {
margin-bottom:20px;
}
#footer .copy {
padding-bottom:100px;
}


/* index
-------------------------------------------------------*/
#index #area01 ul li {
padding: 0 5px;
}
#index #area01 .ttl {
width: 50%;
font-size: 100%;
}
#index #area01 .txt {
    text-align: left;
}
#index #area02 ul li {
border-radius: 5px;
flex-flow: column nowrap;
align-items: center;
padding: 20px;
}
#index #area02 ul li .img {
margin-bottom:20px;
}
#index #area02 ul li .txt-box {
margin-left: 0;
}
#index #area02 ul li .ttl {
font-size: 110%;
}
#index #area02 ul li img {
width: 100%;
max-width: 350px;
}
#index #area02 .box .img {
	display: none;
max-width: 152px;
top: 50px;
}
#index #area02 .box {
border: 2px solid #ee605e;
padding: 40px 15px 15px 15px;
}
#index #area02 .box .ttl {
font-size: 120%;
}
#index #area02 .box .item {
max-width: 110px;
top: -5px;
left: -10px;
}
#index #area03 p.buttom{
width: 50%;
}
#index #area03 p.buttom a{
font-size: 120%;
}

/* other
-------------------------------------------------------*/
#other #visual {
height: 150px;
}
#other #visual h2 {
padding-left: 20px;
}
#other #visual h2 .big {
font-size: 120%;
}
#other #visual h2 .small {
font-size: 80%;
}


/* company
-------------------------------------------------------*/
#other.company #area01 .dl-box {
width: 100%;
}
#other.company #area01 dl dt {
width: 110px;
}
#other.company #area01 dl > * {
padding: 10px 20px;
}
#other.company #area02 {
padding:30px 20px;
}
#other.company #area02 .ttl {
font-size: 110%;
}
@media screen and (max-width:420px){
#other.company #area01 dl {
font-size: 80%;
}
#other.company #area01 dl > * {
padding: 10px;
}
#other.company #area01 dl dt {
width: 75px;
}
}


/* flow
-------------------------------------------------------*/
#other.flow #area01 ul {
display: flex;
flex-flow: row wrap;
}
#other.flow #area01 ul li {
padding:20px;
width: 48%;
margin-bottom:20px;
}
#other.flow #area02 dl dt::before {
background: url(../img/flow/q.png)no-repeat left center/30px 30px;
width: 30px;
height: 30px;
padding-right: 10px;
}
#other.flow #area02 dl dd::before {
background: url(../img/flow/a.png)no-repeat left center/30px 30px;
width: 30px;
height: 30px;
padding-right: 10px;
}
#other.flow #area02 dl dd {
line-height: 1.3;
}
@media screen and (max-width:510px){
#other.flow #area01 ul li {
width: 100%;
}
}


/* voice
-------------------------------------------------------*/
#other.voice #area01 .txt {
font-size: 100%;
line-height: 1.2;
}
#other.voice #area03 .table tr > * {
padding: 10px;
line-height: 1.2;
}
#other.voice #area03 .table tr td.a_txt ul,
#other.voice #area03 .table tr td .big {
font-size: 100%;
}
#other.voice #area03 .table tr th,
#other.voice #area03 .table tr th.a_ttl,
#other.voice #area03 .table tr th.b_ttl,
#other.voice #area03 .table tr td.a_txt,
#other.voice #area03 .table tr td.b_txt,
#other.voice #area03 .table tr td .ul01 {
font-size: 100%;
}
#other.voice #area03 .table tr td .txt {
font-size: 80%;
}
#other.voice #area03 .table tr th:first-child {
width: 20%;
}
#other.voice #area02 ul li {
display: block;
padding: 20px;
}
#other.voice #area02 ul li .img {
text-align: center;
margin-bottom:20px;
margin-right: 0;
}
#other.voice #area02 ul li img {
width: 100%;
}
@media screen and (max-width:400px){
#other.voice #area03 .table tr th,
#other.voice #area03 .table tr th.a_ttl,
#other.voice #area03 .table tr th.b_ttl,
#other.voice #area03 .table tr td.a_txt,
#other.voice #area03 .table tr td.b_txt,
#other.voice #area03 .table tr td .ul01 {
font-size: 90%;
}
}


/* contact
-------------------------------------------------------*/
#other.contact-page #area01 .in,
#contact .in {
max-width: 100%;
width: 100%;
}
#contact .ttl_txt {
font-size: 90%;
line-height: 1.2;
}
#contact tr {
width: 100%;
}
#contact tr > * {
padding: 15px 0;
display: block;
}
#contact tr th {
font-size: 100%;
width: 100%;
background-position: right center;
}
#contact tr:last-child th {
background-position: right center;
}
#contact tr td {
padding-top:0;
}
#contact .radio-area {
padding-botom:5px;
}
#contact .text {
height: 30px;
}
#contact .contact-btn {
font-size: 120%;
padding: 10px;
width: 80%;
margin: 30px 5px 0;
display: block;
}
#contact .back-btn {
font-size: 120%;
padding: 10px;
width: 80%;
margin: 30px 5px 0;
display: block;
}



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