@charset "UTF-8";
:root{
	--body : #333;
	--link : #333;
	--red : #a5c13a;
	--gray : #e7e7e7;
}
@media screen and (max-width: 768px){
	html{
		font-size : calc( 10 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	html{
		font-size : 10px;
	}
}
body{
	letter-spacing : .1em;
}
.wrap{
	margin-left : auto;
	margin-right : auto;
}
@media screen and (max-width: 768px){
	.wrap{
		padding-left : calc( 24 * 100% / 768 );
		padding-right : calc( 24 * 100% / 768 );
	}
}
@media print,screen and (min-width: 769px){
	.wrap{
		width : 1080px;
		padding-left : 10px;
		padding-right : 10px;
	}
}
@media print,screen and (min-width: 769px){
	.wrap.fluid{
		width : inherit;
		min-width : 1080px;
		max-width : 1620px;
	}
	.wrap.fluid-mini{
		width : inherit;
		min-width : 1080px;
		max-width : 1420px;
	}
	.wrap.fluid .wrap-inner{
		width : 1060px;
		margin-left : auto;
		margin-right : auto;
	}
}
/*--------------------------------------------
HEADER
---------------------------------------------*/
#header .wrap{
	display : flex;
	align-items : center;
}
@media screen and (max-width: 768px){
	#header{
		background-color : #fff;
	}
	#header .wrap{
		height : calc( 140 * 100vw / 768 );
	}
	#header .logo img{
		height : calc( 83 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	#header .wrap{
		justify-content : space-between;
		height : 120px;
	}
	#header .logo img{
		height : 47px;
	}
}
/*--------------------------------------------
MENU BUTTON
---------------------------------------------*/
@media screen and (max-width: 768px){
	body.is-open{
		overflow : hidden;
	}
	body.is-open [data-aos^=fade]{
		opacity : 1!important;
	}
	@media screen and (max-width: 768px){
		body.is-open #nav{
			max-height : 100vh;
		}
	}
	@media screen and (max-width: 768px){
		body.is-open #drawerPanel{
			position : fixed;
			z-index : -1;
			width : 100%;
		}
	}
	body.is-open #header #menuBtn > span:nth-of-type(1) span:nth-of-type(1){
		transform : translateY( calc( 10 * 100vw / 768 ) ) scale(0);
	}
	body.is-open #header #menuBtn > span:nth-of-type(1) span:nth-of-type(2){
		transform : rotate(-45deg);
	}
	body.is-open #header #menuBtn > span:nth-of-type(1) span:nth-of-type(3){
		transform : rotate(45deg);
	}
	body.is-open #header #menuBtn > span:nth-of-type(1) span:nth-of-type(4){
		transform : translateY( calc( -10 * 100vw / 768 ) ) scale(0);
	}
	@media screen and (max-width: 768px) and (-ms-high-contrast:none){
		body.is-open #header #menuBtn > span:nth-of-type(1) span:nth-of-type(1){
			transform : translateY( 10px ) scale(0);
		}
		body.is-open #header #menuBtn > span:nth-of-type(1) span:nth-of-type(4){
			transform : translateY( -10px ) scale(0);
		}
	}
	#menuBtn{
		z-index : 11;
		position : absolute;
	}
	#menuBtn span{
		font-size : 0;
	}
	#menuBtn > span:nth-of-type(1){
		width : 100%;
		height : 100%;
		position : relative;
		display : block;
	}
	#menuBtn span span{
		display : block;
		position : absolute;
		left : 0;
		transition : all .4s;
		width : 100%;
	}
	#menuBtn span span:nth-of-type(1){
		top : 0;
	}
	#menuBtn span span:nth-of-type(4){
		bottom : 0;
	}
}
#menuBtn{
	z-index : 11;
	position : absolute;
}
#menuBtn span{
	font-size : 0;
}
#menuBtn > span:nth-of-type(1){
	width : 100%;
	height : 100%;
	position : relative;
	display : block;
}
#menuBtn span span{
	display : block;
	position : absolute;
	left : 0;
	transition : all .4s;
	width : 100%;
}
#menuBtn span span:nth-of-type(1){
	top : 0;
}
#menuBtn span span:nth-of-type(4){
	bottom : 0;
}
@media screen and (max-width: 768px){
	#menuBtn{
		position : fixed;
		background-color : var(--red);
		right : calc( 10 * 100% / 768 );
		top : calc( 20 * 100vw / 768 );
		width : calc( 100 * 100% / 768 );
		height : calc( 100 * 100vw / 768 );
		z-index : 11;
		padding-top : calc( 27 * 100vw / 768 );
		padding-bottom : calc( 27 * 100vw / 768 );
		padding-left : calc( 14 * 100% / 768 );
		padding-right : calc( 14 * 100% / 768 );
	}
	#menuBtn span span{
		background-color : #fff;
		height : calc( 6 * 100vw / 768 );
	}
	#menuBtn span span:nth-of-type(2) , #menuBtn span span:nth-of-type(3){
		top : calc( 20 * 100vw / 768 );
	}
}
@media screen and (max-width: 768px){
	body:not(.is-open) #menuBtn span span:nth-of-type(2) , body:not(.is-open) #menuBtn span span:nth-of-type(3){
		width : calc( 60 * 100% / 72 );
		left : calc( 12 * 100% / 72 );
	}
}
/*--------------------------------------------
NAV
---------------------------------------------*/
@media screen and (max-width: 768px){
	#nav{
		position : fixed;
		left : 0;
		width : 100%;
		z-index : 10;
		transition : max-height .5s ease-in;
		max-height : 0;
		overflow : hidden;
		overflow-y : scroll;
		top : 0;
		background-color : rgba(255,255,255,.95);
		height : 100vh;
	}
	#nav .scroll{
		padding-left : calc( 84 * 100% / 768 );
		padding-right : calc( 84 * 100% / 768 );
		padding-top : calc( 140 * 100vw / 768 );
		padding-bottom : calc( 64 * 100vw / 768 );
	}
	#nav #closeBtn{
		margin-left : auto;
		margin-right : auto;
		text-align : center;
		display : block;
		margin-top : calc( 48 * 100vw / 768 );
	}
	#nav #closeBtn img{
		height : calc( 59 * 100vw / 768 );
	}
}
/*--------------------------------------------
GLOBAL NAVI
---------------------------------------------*/
@media screen and (max-width: 768px){
	#grobalNav li + li{
		border-top : solid calc( 3 * 100vw / 768 ) #ccc;
	}
	#grobalNav a{
		font-size : 2.8rem;
		display : flex;
		align-items : center;
		justify-content : center;
		text-align : center;
		height : calc( 87 * 100vw / 768 );
		letter-spacing : 0;
	}
}
@media print,screen and (min-width: 769px){
	#grobalNav{
		display : flex;
		flex-wrap : wrap;
		justify-content : flex-end;
        margin-left: 20px;
        max-width: 1060px;
	}

	#grobalNav li{
		font-size : 1.5rem;
		letter-spacing : 0;
        margin-bottom: 8px;
	}

	#grobalNav li + li:not(:nth-child(1)):before{
		content : "/";
		margin-left : 1em;
		margin-right : 1em;
	}
	#grobalNav .is-current a{
		border-bottom : solid 1px var(--red);
	}
	#grobalNav a{
		letter-spacing : 0;
	}
	#grobalNav a.active{
		border-bottom : solid 1px var(--red);
	}
	#grobalNav a.active.sab{
		border-bottom : none;
	}
}
/*--------------------------------------------
MAIN TITLE
---------------------------------------------*/
#mainTitle{
	background-position : center top;
	background-size : cover;
	background-repeat : no-repeat;
	display : flex;
	align-items : center;
}
#mainTitle h1{
	display : flex;
	align-items : center;
	justify-content : center;
	text-align : center;
	flex-direction : column;
	background-color : rgba( 255,255,255,.4 );
	font-weight : 300;
}
#mainTitle h1:after{
	content : "";
	display : block;
	margin-left : auto;
	margin-right : auto;
	background-color : var(--red);
}
@media screen and (max-width: 768px){
	#mainTitle{
		height : calc( 259 * 100vw / 768 );
		background-image : url("../images/ui/bg/title_sp.png");
	}
	#mainTitle h1{
		width : calc( 696 * 100% / 768 );
		padding-left : 0;
		padding-right : 0;
		height : calc( 162 * 100vw / 768 );
		font-size : 4rem;
		padding-top : calc( 27 * 100vw / 768 );
	}
	#mainTitle h1:after{
		width : calc( 300 * 100% / 696 );
		height : calc( 4 * 100vw / 768 );
		margin-top : calc( 23 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	#mainTitle{
		height : 260px;
		background-image : url("../images/ui/bg/title_pc.png");
	}
	#mainTitle h1{
		height : 162px;
		font-size : 3.4rem;
		padding-top : 27px;
	}
	#mainTitle h1:after{
		width : 300px;
		height : 4px;
		margin-top : 23px;
	}
}
@media screen and (max-width: 768px){
	.isWebp #mainTitle{
		background-image : url("../images/ui/bg/title_sp.png.webp");
	}
}
@media print,screen and (min-width: 769px){
	.isWebp #mainTitle{
		background-image : url("../images/ui/bg/title_pc.png.webp");
	}
}
/*--------------------------------------------
SSABNAVI
---------------------------------------------*/
.sabnavi li a.is-current{
    border-bottom : solid 1px var(--red);
}
@media screen and (max-width: 768px){
	.sabnavi{
	}
	.sabnavi ul{
        display: flex;
        justify-content: center;
            list-style: none !important;
	}
        .sabnavi li{
            list-style: none !important;
            margin: 2em .5em;
        }
            .sabnavi li a{
            }
                .sabnavi li a:hover{
                }
                .sabnavi li a.is-current{
                border-bottom : solid 1px var(--red);
                }
}
@media print,screen and (min-width: 769px){
	.sabnavi{
        padding-top: 20px;
	}
	.sabnavi ul{
        display: flex;
        justify-content: center;
            list-style: none !important;
	}
        .sabnavi li{
            list-style: none !important;
            margin: 1em;
        }
            .sabnavi li a{
            }
                .sabnavi li a:hover{
                }
                .sabnavi li a.is-current{
                border-bottom : solid 1px var(--red);
                }
}


/*--------------------------------------------
COLUMN
---------------------------------------------*/
@media print,screen and (min-width: 769px){
	.column02 .wrap{
		display : flex;
		align-items : flex-start;
		justify-content : space-between;
	}
	.column02 .column0201{
		width : 700px;
	}
	.column02 .column0202{
		width : 340px;
	}
}
/*--------------------------------------------
SIDEBAR
---------------------------------------------*/
#sidebar{
	letter-spacing : 0;
}
#sidebar .title{
	border-bottom-style : solid;
	border-bottom-color : var(--red);
}
@media screen and (max-width: 768px){
	#sidebar{
		margin-top : calc( 105 * 100vw / 768 );
	}
	#sidebar .title{
		font-size : 3.6rem;
		border-bottom-width : calc( 6 * 100vw / 768 );
		padding-bottom : calc( 15 * 100vw / 768 );
	}
	#sidebar .title + ul{
		margin-top : calc( ( 34 - 7 ) * 100vw / 768 );
	}
	#sidebar li + li{
		margin-top : calc( 10 * 100vw / 768 );
	}
	#sidebar li a{
		font-size : 2.6rem;
		line-height : 1.54;
	}
	#sidebar ul + .title{
		margin-top : calc( ( 89 - 7 ) * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	#sidebar{
		padding-top : 4px;
	}
	#sidebar .title{
		font-size : 1.8rem;
		border-bottom-width : 2px;
		padding-bottom : 7px;
		padding-left : 7px;
		padding-right : 7px;
	}
	#sidebar .title + ul{
		margin-top : calc( 24px - 4px );
	}
	#sidebar li + li{
		margin-top : 10px;
	}
	#sidebar li a{
		font-size : 1.6rem;
		line-height : 1.5;
		padding-left : 7px;
		padding-right : 7px;
	}
	#sidebar ul + .title{
		margin-top : calc( 68px - 4px );
	}
}
/*--------------------------------------------
FILE VIEWER
---------------------------------------------*/
#fileViewer iframe{
	width : 100%;
}
@media screen and (max-width: 768px){
	#fileViewer .wrap{
		padding-left : 0;
		padding-right : 0;
	}
	#fileViewer iframe{
		height : calc( 885 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	#fileViewer iframe{
		height : 745px;
	}
}
/*--------------------------------------------
CRUMBS
---------------------------------------------*/
#crumbs{
	background-repeat : no-repeat;
	background-position : 0 0;
	background-size : cover;
	letter-spacing : 0;
}
#crumbs .wrap{
	display : flex;
	align-items : center;
	padding-bottom : 26px;
	justify-content : space-between;
}
@media screen and (max-width: 768px){
	#crumbs{
		background-image : url("../images/ui/bg/crumbs_sp.png");
	}
	#crumbs .wrap{
		padding-top : calc( 17 * 100vw / 768 );
		padding-bottom : calc( 21 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	#crumbs{
		background-image : url("../images/ui/bg/crumbs_pc.png");
	}
	#crumbs .wrap{
		padding-top : 74px;
		padding-bottom : 26px;
	}
}
#crumbs ol{
	flex-grow : 1;
}
#crumbs ol li{
	display : inline;
}
#crumbs ol li + li:before{
	content : "／";
	margin-left : 1em;
	margin-right : 1em;
}
@media screen and (max-width: 768px){
	#crumbs ol li{
		font-size : 1.8rem;
		line-height : 1.78;
	}
}
@media print,screen and (min-width: 769px){
	#crumbs ol li{
		font-size : 18px;
		line-height : 1.22;
	}
}
#crumbs #toTop{
	display : flex;
	align-items : center;
	color : #333;
	background-color : #fff;
	flex-shrink : 0;
}
@media screen and (max-width: 768px){
	#crumbs #toTop{
		width : calc( 100 * 100% / 720 );
		height : calc( 80 * 100vw / 768 );
		font-size : 2.2rem;
		line-height : 1.18;
		justify-content : center;
		margin-left : calc( 13 * 100% / 720 );
	}
}
@media print,screen and (min-width: 769px){
	#crumbs #toTop{
		width : 150px;
		height : 50px;
		font-size : 1.6rem;
		padding-left : 19px;
		padding-right : 19px;
		margin-left : 21px;
	}
}
@media screen and (max-width: 768px){
	.isWebp #crumbs{
		background-image : url("../images/ui/bg/crumbs_sp.png.webp");
	}
}
@media print,screen and (min-width: 769px){
	.isWebp #crumbs{
		background-image : url("../images/ui/bg/crumbs_pc.png.webp");
	}
}
/*--------------------------------------------
FOOTER
---------------------------------------------*/
#footer{
	background-color : #949494;
	color : #fff;
}
#footer a{
	color : #fff;
	letter-spacing : 0;
}
#footer p{
	line-height : 1.2;
}
		#footer .banner p {
			display: flex;
			flex-direction: column;
		}
			#footer .banner p span {
			}

@media screen and (max-width: 768px){
	#footer .wrap{
		padding-top : calc( ( 36 - 2.4 ) * 100vw / 768 );
		padding-bottom : calc( ( 90 - 2.4 ) * 100vw / 768 );
	}
	#footer p.copy{
		text-align : center;
		font-size : 2.4rem;
		margin-top: 2em;
	}
	#footer .banner {
		display: flex;
		column-gap: 10px;
		align-items: center;
		margin-bottom: 15px;
	}
		#footer .banner p img {
			width: calc( 250 * 100vw / 768 );
			height: auto;
		}
	#footer .login-bt {
		display: flex;
		justify-content: center;
	}
		#footer .login-bt a {
			font-size: calc( 30 * 100vw / 768 );
			display: block;
			border: 1px solid #fff;
			padding: .5em 1em;
			margin-top: .5em;
			background: #fff;
			color: #323232;
			width: calc( 500 * 100vw / 768 );
			text-align: center;
		}
		#footer .banner p span {
			font-size : 2rem;
			padding-bottom: 5px;
		}
}
@media print,screen and (min-width: 769px){
	#footer .wrap{
		padding-top : 46px;
		padding-bottom : calc( 35px - 1.4px );
		position: relative;
		min-height: 400px;
		width: auto;
		min-width: 1060px;
		max-width: 1660px;
	}
	#footer .logo{
		display : block;
		position: absolute;
	}
	#footer .logo img{
		height : 52px;
	}
	#footer .box{
		display : flex;
		justify-content : flex-end;
	}
	#footer ul{
		display : flex;
		flex-wrap : wrap;
		justify-content: flex-end;
		width : calc(100% - 400px);
		margin-left : auto;
		margin-top : 8px;
	}
	#footer ul > li{
		text-align : right;
		margin-bottom: 5px;
		margin-left: 2em;
	}

	#footer li a{
		font-size : 1.5rem;
		display : block;
		line-height: 1.3;
	}
	#footer .login-bt {
		display: flex;
		justify-content: flex-end;
		font-size: 16px;
	}
		#footer .login-bt a {
			display: block;
			border: 1px solid #fff;
			padding: .5em 1em;
			margin-top: .5em;
			background: #fff;
			color: #323232;
		}
	#footer  p.copy{
		font-size : 1.4rem;
		margin-top : calc( 43px - 1.4px );
		text-align: right;
		}
	#footer .banner {
		margin-top: 30px;
		display: flex;
		column-gap: 15px;
	}
		#footer .banner p img {
			height: 40px;
		}
		#footer .banner p span {
			font-size: 14px;
			padding-bottom: 5px;
		}
}

.font-color01 {
	color: var(--red);
}

.page {
}
    .page .frame {
        border: 1px solid #ccc;
        padding: 2em;
        margin: 1.5em 0 ;
    }
    .page .frame-2 {
    }
		.page .frame-2 ol {
			margin: 0px;
			padding: 0px;
		}
			.page .frame-2 ol li {
				list-style: none;
				padding: 1em;
				margin-left: 1em;
				background: #E7E8E8;
				margin-bottom: 1em;
				position: relative;
			}
				.page .frame-2 ol li span {
					background: var(--red);
					color: #fff;
					display: flex;
					justify-content: center;
					align-items: center;
					position: absolute;
				}
				.page .frame-2 ol li p {
					margin-bottom: 10px;
				}
    .page .frame-3 {
		position: relative;
		margin-top: 4em;
    }
		.page .frame-3 .icon {
			position: relative;
			margin-top: -2em;
			margin-bottom: .5em;
		}
			.page .frame-3 .icon strong {
				background: var(--red);
				color: #fff;
				padding: .3em .5em;
				display: inline-block;
				min-width: 20em;
			}

    .page strong {
        font-weight: 600;
    }
    .page em{
        font-style: italic;
    }
    .page ul , .page ol {
        margin-left:2em;
    }
        .page ul > li {
            list-style: circle;
        }
        .page ol > li {
            list-style: decimal;
        }
    .page .title01 {
        margin-bottom: .5em;
		line-height: 1.3;
    }
    .page .title04 {
        background: #efefef;
        padding: .5em;
        margin-bottom: 10px;
        margin-top: 1em;
        line-height: 1.3;
    }
@media screen and (max-width: 768px){
    .page .wrap{
    }
    .page .title02 {
        font-size: 3.6rem;
        line-height: 1.3;
        margin-bottom: 10px;
        margin-top: 2em;
        border-left: 10px solid var(--red);
        padding-left: .5rem;
    }
    .page .title04 {
        font-size: 3.2rem;
    }
    .page p , .page li , .page dt , .page dd {
        font-size: 2.6rem;
        line-height: 1.8;
    }
    .page .frame {
        
    }
    .page ul , .page ol {
        margin-left:3.5em;
    }
	.page .frame-2 ol li {
		background: #E7E8E8;
		margin-bottom: 1em;
		position: relative;
		padding-left: 4rem;
	}
		.page .frame-2 ol li span {
			height: 6rem;
			width: 6rem;
			font-size: 3rem;
			left: -3rem;
			top: calc(1em);
		}
}

@media print,screen and (min-width: 769px){
    .page .wrap{
        padding-top: 45px;
        padding-bottom: 45px;
    }
    .page .title02 {
        font-size: 2.0rem;
        line-height: 1.3;
        margin-bottom: 10px;
        margin-top: 2em;
        border-left: 10px solid var(--red);
        padding-left: .5rem;
    }
    .page .title04 {
        font-size: 2.4rem;
    }
    .page p , .page li , .page dt , .page dd {
        font-size: 1.6rem;
        line-height: 1.8;
    }
    .page dl.corporate {
    }
        .page dl.corporate div {
            display: flex;
            flex-wrap: wrap;
        }
        .page dl.corporate div dt {
            width: 6em;
        }
        .page dl.corporate div dd {
            width: calc(100% - 7em);
        }
			.page .frame-2 ol li {
				padding-left: 2em;
			}
				.page .frame-2 ol li span {
					height: 40px;
					width: 40px;
					font-size: 22px;
					left: -20px;
					top: calc(50% - 20px);
				}
}
/*---trouble-----------*/

#trouble {
}
.trouble-list {
    margin-bottom: 6em;
}
    .trouble-list dt {
        margin-bottom: 1em;
        border: 1px solid #ccc;
        padding: 2em .5em .5em .5em;
        position: relative;
        margin-top: 2em;
        
    }
        .trouble-list dt::before {
            content: "問題／トラブルの内容";
            background-color: maroon;
            padding: 5px;
            display: block;
            width: 20em;
            margin-bottom: 5px;
            color: #fff;
            position: absolute;
            top: -1em;
        }
    .trouble-list dd {
    }
        .trouble-list dd::before {
            content: "対策";
            background-color: darkcyan;
            padding: 5px;
            display: block;
            width: 300px;
            margin-bottom: 5px;
            color: #fff;
        }
    .trouble-list dd u {
        color: #BB080B;
    }
@media screen and (max-width: 768px){

}
@media print,screen and (min-width: 769px){

}


#service .title02 {
    margin-top: 1em !important;
}
@media screen and (max-width: 768px){

}
@media print,screen and (min-width: 769px){

}
#service .wrap a {
    text-decoration: underline !important;
}
    #service .wrap a:hover {
        text-decoration: none !important;
        color: #666;
    }

.table01 {
    border-collapse: collapse;
    border: 1px solid #999;
}
.table01 th , .table01 td {
    border: 1px solid #666;
    padding: 5px;
}
.table01 thead th , .table01 thead td {
    background:  #efefef;
}

/*---- policy ---------*/
#policy p strong {
	display: block;
	margin-top: 1em;
}

.mb-1em {
	margin-bottom: 1em;
}
.mb-2em {
	margin-bottom: 2em;
}
.mb-5em {
	margin-bottom: 5em;
}