@charset "utf-8";

#glue {
    width: 100%;
	font-size: 14px;
	line-height: 1.8;
    color: #333;
}

#glue img{
	width: 100%;
	height: auto;
	margin: 0 auto;
}

#glue .inner{
	width: 100%;
	max-width: 1170px;
    padding: 0 15px;
    margin: 0 auto;	
}

#glue a:hover {
	opacity: 0.7;
	text-decoration: none;
}

#glue .center {
    text-align: center;
}

#glue .notes{
	font-size: 90%;
}

/*--table基本設定-----------------------------------*/
#glue table {
    border-collapse: collapse;
	margin: 2rem auto 0;
	padding: 0;
}

#glue table tr {
    background-color: #F9F9F9;
    padding: .35em;
    border-bottom: 2px solid #fff;
}
#glue table tr:last-child {
    border-bottom: none;
}
#glue table th, #glue table td{
    border-right:4px solid #fff;
	border-bottom: 4px solid #fff;
    padding: 1rem 1.5rem;
    vertical-align: middle;
    text-align: center;
}
#glue table th:last-child {
    border-right: none;
}

#glue table td:last-child {
    border-right: none;
}
#glue table td.last{
	background-color: #fff!important;
}

#glue table td.last img{
	max-width: 655px;
}
#glue table .non{
	background: #fff;
}

#glue table thead .col1{
	background-color: #FFD4E5;
}

#glue table thead .col2{
	background-color: #D3E8CB;
}

#glue table thead .col3{
	background-color: #CBE2F6;
}

#glue table tbody th{
	background-color: #F1F1F1;
	width: 20%;
}

#glue table .lock{
	position: sticky;
	left: 0;
}



/*-------------------*/

	
#glue .kv h1{
	background: url(../img/kv_pc.jpg) no-repeat;
    background-size: contain;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: content-box;
    padding-top: 12%;
}

#glue .kv + p{
	text-align: center;
	margin-top: 2rem;
    color: #333;
    font-weight: bold;
	line-height: 1.6;
}

#glue h2{
	text-align: center;
    border-top: 1px solid;
    border-bottom:1px solid;
    margin: 2rem 0;
    padding: 1rem;
	font-size: 30px;
}

#glue h2 .point-color{
	color: #F55181;
	font-size: 38px;
}

#glue h4{
	color: #F55181;
	text-align: center;
	padding-bottom: 5%;
	font-size: 18px;
}

#glue .fbox{
	display: flex;
	justify-content: space-between;
	width: 100%;
	margin: 6rem auto;
}	
#glue .fbox li{
	width: calc(100% / 3 - 1.5rem);
	padding: 5% 3% 3%;
	border: 1px solid;	
	position: relative;
}

#glue .fbox li:nth-child(1) p{
	width: 80%;
	margin: 0 auto;
}

#glue .fbox li::before{
	content: "1";
    display: inline-block;
    background: #F55181;
    color: #fff;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    text-align: center;
    line-height: 48px;
    font-size: 24px;
    font-weight: 600;
    position: absolute;
    left: 50%;
    top: -2rem;
    transform: translateX(-50%);
}

#glue .fbox li:nth-child(2)::before{
	content: "2";
}

#glue .fbox li:nth-child(3)::before{
	content: "3";
}

#glue .fbox li p img{
	display: block;
	margin: 2rem auto 0;
}

/* sec04*/

#glue .sec04{
	padding-bottom: 6%;
}

#glue .lead{
	font-size: 20px;
	text-align: center;
	color: #F55181;
	font-weight: 600;
}

#glue .list{
	width: 720px;
	margin: 2rem auto ;
	line-height: 1.8;
}

#glue .list02{
	display: flex;
    justify-content: space-between;
    width:720px;
    margin: 0 auto;
}

#glue .list02 li{
	position: relative;
}

#glue .list02 .list02_p_01{
	font-size: 16px;
    font-weight: bold;
    padding-bottom: 5px;
    color: #F55181;
	
}

#glue .list02 .list02_p_02{
	position: absolute;
    bottom: 0;
    background: rgba(333, 333, 333, 0.6);
    width: 100%;
    padding: 4%;
    text-align: center;
	font-weight: bold;
}

#glue dl{
	margin: 4rem auto 6rem;
    border: 1px solid;
    border-radius: 2rem;
    padding: 4%;
	text-align: center;
	width: 980px;
}

#glue dl dt{
	width: 282px;
	margin: 0 auto;
}

#glue dl .point-color{
	color: #F55181;
	font-size: 28px;
	font-weight: 600;
	padding: 2% 0;
}

#glue dl .arrowImg{
	width: 480px;
    margin: 0 auto;
    padding: 4% 0;
}

#glue .sec03 table{
	margin: 0;
}

#glue .sec03 table tr{
	background-color: #fff;
	border-bottom: none;
}

#glue .sec03 table th, #glue .sec03 table td{
	border-bottom: none;
}


#glue dl .txt:last-child{
	text-align: left;
	padding: 0 3%;
	margin: 0 auto;
	line-height: 1.8;
		
}

#glue .gluemap{
	background: #F9F9F9;
	padding: 4rem 0;
}

#glue .gluemap .catch{
	text-align: center;
    font-size: 16px;
    font-weight: 600;
}

#glue .gluemap h2{
	margin: 0;
	padding: 0;
	border: none;
	padding-bottom: 1.5rem;
}

#glue .gluemap .gluemapImg{
	width:939px;
	margin: 0 auto;
	padding: 2% 0;
}

#glue .btn{
	padding: 0;
	width: calc(100% / 3 - 0.5rem);

}

#glue .btn a{
	position: relative;
	background: #fff;
	padding: 2rem;
	display: block;
}

#glue .btn a::before{
	content: '\f138';
	position: absolute;
	right: 6%;
	font-family: FontAwesome;
    color: #F55181;
    font-size: 18px;
}

#glue .gluemap .fbox{
	width: 710px;
	margin: 1rem auto;
}

#glue .btn.mapbtn{
	width: 710px;
	margin: 0 auto;
	display: block;
	border: 1px solid;
}

#glue .btn.mapbtn a::before{
	content: '\f1c1';
	color: #333;
	font-weight: 400;
}



.point-color1{
	border: 1px solid #333;
	color: #EE73A3;
	border-bottom: 5px solid #EE73A3;
}

.point-color1:hover{
	background-color: #fff;
    border-bottom: 2px solid #EE73A3;	
}

.point-color2{
	border: 1px solid #333;
	color: #8FBF7C;
	border-bottom: 5px solid #8FBF7C;
}

.point-color2::before{
	color: #8FBF7C!important;
	
}
.point-color2:hover{
	background-color: #fff;
    border-bottom: 2px solid #8FBF7C;	
}

.point-color3{
	border: 1px solid #333;
	color: #689DCB;
	border-bottom: 5px solid #689DCB;
}

.point-color3::before{
	color: #689DCB!important;
	
}

.point-color3:hover{
	background-color: #fff;
    border-bottom: 2px solid #689DCB;	
}



@media screen and (max-width: 1024px){
	#glue .kv h1{
		padding-top: 10%;
	}
	
	#glue dl{
		width: 100%;
	}
	
	#glue .fbox li{
		width: calc(100% / 3 - 0.5rem);
		padding: 6% 2%;
	}
	
	#glue .list,
	#glue .list02,
	#glue .gluemap .gluemapImg,
	#glue .gluemap .fbox,
	#glue .btn.mapbtn,
	#glue .chatbotarea .chatbotBtn{
		width: 100%;
	}
}
@media screen and (max-width: 767px) {

    #glue .inner{
        max-width: 100%;
		padding: 0;
    }
	
	#glue .kv h1{
	background: url(../img/kv_sp.jpg) no-repeat;
    background-size: contain;
    padding-top: 45%;
}

	
	#glue h2{
		font-size: 18px;
		padding: 2rem;
	}
	
	#glue .sec03 h2{
		padding: 0 2rem;
	}
	
	#glue table{
		width: 100%;
		font-size: 12px;
	}
	
	#glue table tbody th{
		width: 27%;
	}
	
	#glue table td.last{
		padding: 0;
	}
	
	#glue section{
		padding: 0 4%;
	}

	
	#glue dl {
		padding: 5rem 2rem;
		width: 100%;
	}
	
	#glue dl .point-color {
		font-size: 18px;
		text-align: center;
			
		}
	
	#glue dl .arrowImg{
		width: 100%;
		padding: 4% 0 8%;
	}
	
	#glue dl dt{
		width: 190px;
	}
	#glue dd{
		line-height: 1.8;
		text-align: left;
		padding: 3%;
	}
	
	#glue .fbox{
		flex-direction: column;
		width: 85%;
	}
	#glue .fbox li{
		width: 100%;
		margin-bottom: 4rem;
		padding: 16% 8%;
	}
	#glue .fbox li::before{
		top: -3rem;
		width: 40px;
		height: 40px;
		font-size: 18px;
		line-height: 40px;
	}
	
	#glue .fbox li:last-child{
		margin-bottom: 0;
	}
	
	#glue .sec04{
		padding-bottom: 12%;
	}
	
	#glue .lead {
		font-size: 18px;
		padding: 2% 0 0;
		line-height: 1.6;
			
		}
	
	#glue .list {
		padding: 0 2%;
	}
	
	#glue .list02 li{
		width: calc(100% / 3 - 2%);
	}
	
	#glue .list02 .list02_p_01{
		line-height: 1.4;
		font-size: 14px;
	}
	
	#glue .list02 .list02_p_02{
		font-size: 10px;
	}
		

	#glue .gluemap .gluemapImg{
		padding: 0 4% 4%;
	}
	
	#glue .gluemap .fbox{
		padding: 0 4%;
		flex-direction: row;
	}
	#glue .btn{
		margin-bottom: 1rem;
	}
	
	#glue .btn a{
		font-size: 12px;
	}
	
	#glue .btn.mapbtn{
		padding: 0 4%;
		border: none;
	}
	
	#glue .btn.mapbtn a{
		border: 1px solid;
	}
	
	#glue .btn.mapbtn a::before,#glue .btn a::before{
		font-size: 12px;
	}
	
	#glue .btn.mapbtn a:after{
		right: -8%;
	}
	
	
	}