@charset "utf-8";

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

/* module
-------------------------------------------------------*/

/*input[type=text] {
  font-size: 16px;
  transform: scale(0.8);
}*/

.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 {
margin-bottom: 20px;
}
.ttl01 img {
max-width: 280px;
}
.ttl01 span:last-child {
font-size: 100%;
margin-top: 5px;
}
.txt-r {
text-align: left;
font-size: 80%;
line-height: 1.3;
}
.ttl-txt {
font-size: 120%;
line-height: 1.2;
}
.orange.big {
font-size: 100%;
}

/* header
-------------------------------------------------------*/
#header {
text-align: center;
padding:10px;
}
#header .box {
width: 100%;
}
#header .logo img {
max-width: 160px;
}
#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(75,70,69,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 {
overflow: 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 span {
font-size: 80%;
line-height: 1.2;
}
#menu ul li a:hover {
opacity: 0.7;
}
#menu-bg {
width: 100%;
height: 100%;
background: rgba(75,70,69,0.9);
overflow: hidden;
position: fixed;
top: 0;
right: -110%;
z-index: 998;
}

/* footer
-------------------------------------------------------*/
#footer {
padding:30px 20px 100px;
}
#footer .logo img {
max-width:160px;
}
#footer .txt {
font-size: 90%;
line-height: 1.3;
}
#footer .copy {
margin-top:30px;
}

/* visual
-------------------------------------------------------*/
#visual {
background:none;
}
#visual h2 {
position: inherit;
}
#visual .in {
width: 100%;
max-width:inherit;
margin: 0 auto;
}
#visual h2 img {
max-width:inherit;
width: 100%;
margin:0 auto;
}

/* banner
-------------------------------------------------------*/
.banner {
padding: 30px 20px;
}
.banner .txt {
font-size: 100%;
margin-bottom: 20px;
line-height: 1.2;
}
.banner ul li {
padding: 0 5px;
}
.banner ul {
display: block;
}
.banner ul li {
padding:0 20px;
width: 80%;
margin: 0 auto;
}
.banner ul li:first-child {
margin-bottom: 20px;
}
.banner .tel img {
max-width:inherit;
}
.banner .contact img {
max-width:inherit;
}
@media screen and (max-width:400px) {
.banner .txt {
font-size: 80%;
}
}

/* area01
-------------------------------------------------------*/
#area01 {
padding:30px 0 0;
}
#area01 .in {
padding:0 20px;
box-sizing: border-box;
}
#area01 .txt-t {
margin-bottom: 20px;
font-size: 90%;
line-height: 1.3;
}
#area01 .in>.txt {
padding: 20px 0;
font-size: 90%;
line-height: 1.3;
}
#area01 .ul01 {
flex-flow: column wrap;
}
#area01 .ul01 li {
width:100%;
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: flex-start;
padding:0;
}
#area01 .ul01 li .img img {
width: 150px;
margin-right: 10px;
}
#area01 .ul01 li:not(:last-child){
margin-bottom:20px;
}
#area01 .ul01 li .txt {
line-height: 1.2;
font-size: 90%;
text-align: left;
margin:0;
}
#area01 .ul02 {
flex-flow: row wrap;
}
#area01 .ul02 li {
width: 50%;
}
@media screen and (max-width:600px){
#area01 .ul01 li .img img {
width: 100px;
}
#area01 .ul01 li .txt {
font-size: 80%;
}
}

/* area02
-------------------------------------------------------*/
#area02 {
padding:30px 0 0;
}
#area02>.in {
width: 100%;
padding: 0 20px;
box-sizing: border-box;
}
#area02 .top-box .f-box {
flex-flow: row nowrap;
}
#area02 .top-box .f-box .img img {
width: 171px;
}
#area02 .top-box .f-box ul {
flex-flow: column wrap;
}
#area02 .top-box .f-box .txt-border {
padding: 5px 10px;
font-size: 110%;
margin-bottom: 10px;
line-height: 1.2;
}
#area02 .top-box .f-box .txt .big {
font-size: 100%;
line-height: 1.2;
}
#area02 .top-box .f-box .txt span:last-child {
line-height: 1.4;
margin-bottom: 10px;
font-size: 90%;
}
#area02 .top-box .f-box ul li {
width: 100%;
font-size: 90%;
line-height: 1.2;
}
#area02 .top-box .f-box ul li:not(:last-child) {
margin-bottom: 10px;
}
#area02 .top-box .f-box {
justify-content: flex-start;
margin-bottom: 30px;
}
#area02 .top-box::after {
border: 40px solid transparent;
border-top: 30px solid #fff;
bottom: -100px;
}
#area02 .bg-box {
padding: 50px 0 30px;
}
#area02 h4 {
border-top: 1px solid #dcdcdc;
}
#area02 .txt-t {
font-size: 100%;
margin-bottom: 10px;
}
#area02 .top-box .f-box {
flex-flow: column nowrap;
}
#area02 .top-box .f-box .img {
margin-right: 0;
margin-bottom:20px;
}
@media screen and (max-width:500px){
#area02 .top-box .f-box .txt-border{
font-size: 100%;
}
#area02 .top-box .f-box .txt span:last-child {
font-size: 80%;
}
#area02 .top-box .f-box .img img {
width: 100px;
}
#area02 .top-box .f-box ul li {
font-size: 75%;
}
}
#area02 h4 .num img {
max-width: 30px;
width: 30px;
}
#area02 h4 .ttl {
padding: 10px;
box-sizing: border-box;
}
#area02 h4 .ttl b {
font-size: 110%;
margin-bottom: 2px;
}
#area02 h4 .num {
padding: 10px;
}
#area02 h4 .ttl span {
font-size: 90%;
}
#area02 .p-box {
padding: 30px 20px;
}
#area02 .num01 .img-box {
margin-right: 0;
}
#area02 .num01 .img-box .ttl-slash {
margin-bottom: 10px;
line-height: 1.2;
}
#area02 .num01 .img-box .img {
margin-bottom: 20px;
}
#area02 .num01 .txt-box .ttl {
font-size: 100%;
}
#area02 .num01 .txt-box .ttl-slash {
margin-bottom: 10px;
font-size: 100%;
}
#area02 .num01 .txt-box .txt {
font-size: 90%;
line-height: 1.3;
}
#area02 .num01 .txt-box .txt-bottom {
padding: 0 0 5px;
}
#area02 .num01 .txt-box .caution {
font-size: 80%;
line-height: 1.2;
}
#area02 .box:not(:last-of-type) {
margin-bottom:0;
}
#area02 .num02 .txt:nth-of-type(2) {
margin-bottom: 10px;
}
#area02 .num02 .txt span {
font-size: 90%;
line-height: 1.3;
margin-top: 7px;
}
#area02 .num02 .box-in:first-of-type {
margin-bottom:30px;
}
#area02 .num02 .img {
text-align: center;
}
@media screen and (max-width:500px){
#area02 .num02 .img img {
width: 80%;
}
}
#area02 .num03 .img-box {
margin-right: 0;
margin-bottom:20px;
}
#area02 .num03 .txt-box .txt {
font-size: 90%;
line-height: 1.3;
}
#area02 .num03 .txt-box .ttl-slash {
margin-bottom: 7px;
}

#area02 .num03 .img-box .img:first-child img {
position: initial;
}
@media screen and (max-width:500px){
#area02 .num03 .img-box .img {
text-align: center;
}
#area02 .num03 .img-box .img img {
width: 80%;
}
#area02 .num04 .f-box .img01, #area02 .num04 .f-box .img02 {
text-align: center;
}
#area02 .num04 .f-box .img01 img, #area02 .num04 .f-box .img02 img {
width: 80%;
}
}
#area02 .num04 .p-box>.img img {
max-width: 543px;
}
#area02 .num04 .f-box:first-child .txt {
margin-right: 0;
line-height: 1.3;
font-size: 90%;
margin-bottom:20px;
}
#area02 .num04 .txt-border {
border: 1px solid #b9adaa;
padding: 5px 15px;
position: initial;
font-size: 100%;
display: block;
text-align: center;
margin-bottom: 20px;
}
#area02 .num04 .ttl-slash:first-of-type {
margin-bottom: 30px;
line-height: 1.2;
}
#area02 .num04 .ttl-slash {
padding: 10px;
line-height: 1.2;
}
#area02 .num04 .f-box .img01 > span:last-of-type, #area02 .num04 .f-box .img02 > span:last-of-type {
margin-bottom: 30px;
font-size: 90%;
line-height: 1.3;
}
#area02 .num04 .f-box:first-child .img {
text-align: center;
}
#area02 .num04 .f-box:first-child img {
max-width: 334px;
}
@media screen and (max-width:500px){
#area02 .num04 .f-box:first-child img {
width:80%;
}
}
#area02 .num04 .f-box:first-child .img, #area02 .num04 .f-box .img01, #area02 .num04 .f-box .img02 {
max-width: 410px;
}
#area02 .num04 .ttl-slash:last-of-type b {
margin-right: 0;
display: block;
}
#area02 .num05 .txt {
line-height: 1.3;
font-size: 90%;
margin-bottom:20px;
}
#area02 .num05 img {
max-width: 356px;
}
@media screen and (max-width:500px){
#area02 .num05 .img {
text-align: center;
}
#area02 .num05 img {
width: 80%;
}
}
#area02 .num06 .gold {
font-size: 100%;
line-height: 1.2;
margin-bottom:7px;
}
#area02 .num06 .txt span {
margin-bottom: 20px;
font-size: 90%;
line-height: 1.3;
}
#area02 .num06 .txt-box {
margin-right: 0;
}
#area02 .num06 .txt-box .img {
text-align: center;
margin-bottom:20px;
}
#area02 .num06 .img-box .img:first-child {
margin-bottom: 20px;
}
#area02 .num06 .img-box {
min-width: auto;
}
#area02 .num06 .img-box img {
max-width: 380px;
}

/* area03
-------------------------------------------------------*/
#area03 {
padding-top: 30px;
}
#area03 h4 {
font-size: 110%;
padding: 10px 20px;
line-height: 1.2;
}
#area03 .f-box {
padding: 20px;
}
#area03 .txt {
margin-right: 0;
font-size: 90%;
line-height: 1.3;
margin-bottom: 20px;
}
#area03 .img img {
width: 100%;
max-width: 330px;
}

/* area04
-------------------------------------------------------*/
#area04 .txt-t {
text-align: center;
font-size: 90%;
line-height: 1.3;
margin-bottom: 20px;
}
#area04 .box01 .f-box > * {
width: 100%;
}
#area04 .box01 .txt {
padding: 20px;
}
#area04 .box01 .f-box {
flex-flow: column-reverse nowrap;
}
#area04 .ttl-item {
font-size: 100%;
}
#area04 .box01 .txt {
font-size: 90%;
line-height: 1.3;
}
#area04 .box:not(:last-of-type) {
margin-bottom: 30px;
}
#area04 .box03 ul {
flex-flow: column nowrap;
}
#area04 .box03 ul li {
font-size: 100%;
width: 100%;
padding: 10px 0;
}
#area04 .box03 ul li span {
top: -30px;
font-size: 80%;
width: 115px;
}
#area04 .box03 ul li:not(:last-child) {
margin-bottom:50px;
}
#area04 .box03 ul li:not(:last-child)::after {
content: "";
position: absolute;
bottom: -117px;
left:0;
right: 0;
margin: auto;
width: 0;
height: 0;
border: 15px solid transparent;
border-top: 20px solid #bea778;
}
#area04 .box03 ul li:nth-child(2) {
margin-bottom:80px;
}
#area04 .box03 .ttl-item {
margin-bottom: 45px;
}
#area04 .box04 dl dt {
width: 100px;
}
#area04 .box04 dl > * {
padding: 10px;
font-size: 80%;
line-height: 1.2;
}
#area04 .box05 h4 img {
max-width: 269px;
}
#area04 .box05 .box-in {
border: 1px solid #0db597;
padding: 20px;
}
#area04 .box05 h4 {
margin: 0 0 20px;
}
#area04 .box05 .box-in>ul {
flex-flow: column nowrap;
}
#area04 .box05 .box-in>ul>li {
padding: 10px;
width: 100%;
}
#area04 .box05 .box-in>ul>li:not(:last-child) {
margin-bottom:20px;
}
#area04 .box05 .ttl {
font-size: 100%;
line-height: 1.2;
padding-bottom: 10px;
margin-bottom: 10px;
}
#area04 .box05 .box-in>ul>li ul li {
font-size: 90%;
}

/* area05
-------------------------------------------------------*/
#area05 {
padding:0 ;
}
#area05 .box01 {
padding: 30px 20px;
}
#area05 .box01 h3 img {
max-width: 385px;
}
#area05 .box01 .txt .bg img {
max-width: 360px;
}
#area05 .box01 .txt {
line-height: 1.3;
font-size: 90%;
}
#area05 .box01 .txt:first-of-type {
margin-bottom: 50px;
}
#area05 .box01 .txt:first-of-type::after {
bottom: -43px;
background: url(../img/arrow02.png)no-repeat center center/41px 24px;
width: 41px;
height: 24px;
}
#area05 .box02 {
padding: 30px 20px;
}
#area05 .box02 .img {
position: initial;
}
#area05 .box02 .img img {
max-width: 175px;
}
#area05 .box02 h3 {
margin-bottom: 10px;
line-height: 1.2;
font-size: 100%;
text-align: center;
}
#area05 .box02 .ttl {
padding: 3px 10px;
font-size: 100%;
width: 275px;
text-align: center;
}
#area05 .box02 .in {
display: flex;
flex-flow: column nowrap;
align-items: center;
}
#area05 .box02 .txt {
font-size: 90%;
line-height: 1.3;
margin-bottom:20px;
}
#area05 .box03 {
padding:30px 20px 0;
}
#area05 .box03 h4 b {
font-size: 100%;
line-height: 1.2;
}
#area05 .box03 h4 span img {
width: 45px;
margin-right: 0;
padding-right: 7px;
}
#area05 .box03 h4 {
padding-bottom: 10px;
margin-bottom: 20px;
display: flex;
flex-flow: row nowrap;
align-items: center;
}
#area05 .box03 .txt-t {
font-size: 90%;
line-height: 1.3;
}
#area05 .box03 .img img {
max-width: 489px;
}
#area05 .box03 .box-in .txt {
font-size: 90%;
line-height: 1.3;
margin-bottom:30px;
}
#area05 .box03 ul li:not(:last-child) {
margin-bottom: 0;
}

/* area06
-------------------------------------------------------*/
#area06 {
padding-top: 30px;
}

/* area07
-------------------------------------------------------*/
#area07 {
padding-top: 30px;
}

#area07 ul {
	display: block;
}

#area07 ul li {
margin-right: 20px;
	width: 100%;
	
}

#area07 ul li .txt {
/*margin-right: 20px;*/
	
}
#area07 ul li .txt b {
line-height: 1.2;
margin-bottom: 10px;
font-size: 100%;
}
#area07 ul li .txt span {
font-size: 90%;
line-height: 1.3;
}
#area07 ul li .img img {
/*width: 200px;*/
}
#area07 ul li:not(:last-of-type) {
margin-bottom: 20px;
}
@media screen and (max-width: 550px) {
#area07 ul li {
flex-flow: column-reverse nowrap;
}
#area07 ul li .img {
margin-bottom:10px;
}
#area07 ul li .txt {
margin-right: 0;
}
}

/* area08
-------------------------------------------------------*/
#area08 {
padding:30px 0 0;
}
#area08 .in {
width: 100%;
}
#area08 .box-wrap {
flex-flow: column nowrap;
align-items: center;
}
#area08 .box-wrap > * {
width: 100%;
height: auto;
padding:30px 20px;
box-sizing: border-box;
}
#area08 .box-wrap .box .ttl {
font-size: 120%;
line-height: 1;
margin-bottom: 10px;
}
#area08 .box-wrap .box .txt {
font-size: 90%;
line-height: 1.3;
}


/* contact
-------------------------------------------------------*/
#contact .ttl_txt {
font-size: 100%;
}
#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;
}
.nini {
background-position: right center !important;
}

#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;
}
#contact .privacy {
padding: 10px;
margin-top:10px;
}
#contact .privacy .ttl {
font-size: 120%;
line-height: 1.2;
margin-bottom: 10px;
}
#contact .privacy .txt-r {
margin-bottom: 10px;
}
#contact .privacy .txt {
font-size: 90%;
line-height: 1.3;
}
#contact .ttl-txt {
font-size: 90%;
}

/* 20200423 onlin banner 
-------------------------------------------------------*/
.fix_online {
    display: none;
}

#header ul li {
    width: 30%;
}

/* @media screen
-------------------------------------------------------*/
#header ul {
    flex-flow: row wrap;
}
#header ul li {
    width: 40%;
    box-sizing: border-box;
}
#header ul li:nth-child(-n+2) {
    margin: 0 0 10px;
}
#header ul li img {
    width: 100%;
}
#header .tel img {
    max-width: 100%;
}
#header .contact img {
    max-width: 100%;
}

#header ul {
    position: fixed;
    bottom: 0;
    transition: .5s;
    width: 100%;
    z-index: 999;
}
 
#header ul.hide{
    transform: translateY(100%);
}


/*20200924*/
#area02 .top-box .f-box .img {
    margin-top: 0px;
}

/*========
area01
=========*/

#area01_2 {
	padding-bottom: 50px;
}

#area01_2 .column03 {
	padding:10px;
}

#area01_2 .column03 li{
    width: 100%;
    margin-right: 0;
}

#area01_2 .column03 li img {
	width:100%;
}

#area01_2 .column03 li:last-child{margin-right:0;}
#area01_2 .column03 li h4{
	text-align:center;
	font-weight:900;
	font-size:1em;
	padding:10px 0 0px 0;
}
#area01_2 .column03 li p:last-of-type{
	padding:0px 0 15px 0;
	font-size:0.8em;
    border-bottom: none;
}

#area05 .box01 .txt:first-of-type::after {
	display: none;
}

#area05 .box01 .txt:first-of-type {
    margin-bottom: 0px;
}

.contact_under {
	padding: 30px 20px;
	box-sizing: border-box;
	background: #f6f4f4;
}

.contact_under p {
	font-size: 120%;
	text-align: center;
	color: #93817d;
}


.hyoujun ul {
        flex-flow: column;
        align-items: center;
        justify-content: center;
    }
.hyoujun ul li {
        width: 100%;
        margin: 0 0 40px;;
    }
.hyoujun ul li:nth-child(-n+3) {
        margin: 0 0 40px;
    }
.hyoujun ul li:last-child {
        margin: 0;
    }

/* 20200929 */
#area01_2 {
    padding-bottom: 0;
}
#knowhow.area {
    padding: 30px 20px;
}
#knowhow ul {
    flex-flow: column;
    align-items: center;
    justify-content: center;
}
#knowhow ul li {
    width: 100%;
}
#knowhow ul li .icon img {
    max-width: 100px;
}
#knowhow ul li .ttl {
    text-align: center;
    font-weight: 900;
    font-size: 1em;
    padding: 10px 0 0px 0;
}
#knowhow ul li .txt {
    padding: 0px 0 15px 0;
    font-size: 0.8em;
    border-bottom: none;
}
#reason.area {
    padding: 30px 20px;
}
#reason ul {
    flex-flow: column;
    align-items: center;
    justify-content: center;
}
#reason ul li {
    width: 100%;
}
#reason ul li .icon {
    width: 80%;
    margin: 0 auto;
}
#reason ul li .ttl {
    text-align: center;
    font-weight: 900;
    font-size: 1em;
    padding: 10px 0 0px 0;
}
#reason ul li .txt {
     padding: 0px 0 15px 0;
    font-size: 0.8em;
    border-bottom: none;
}
#area06.area {
    padding: 40px 20px 0;
}