@charset "utf-8";
/*--------------------------------------
	copyright : Lampros co.,Ltd.
	-----------------------------------*/

@import url(reset.css);
@import url(font-awesome.min.css);
@import url(common.css);
@import url(page_common.css);
@import url(colorbox.css);

/*
 index
==============================*/

.filter_table{width: 100%;  text-align: center;}
.filter_table thead{background-color: #a0d2ac;}
.filter_table tbody{background-color: #e9f3ea;}
.filter_table tbody th{}
.filter_table,
.filter_table th,
.filter_table td{vertical-align: middle; border: 1px solid #000; line-height: 1.4; font-size: 14px;}
.filter_table .tate{line-height: 1; background-color: #9fd6d3; padding: 0.4em;}
.filter_table thead th{padding: 0.2em;}
.filter_table th.color1{background-color: #7fcaf2;}
.filter_table th.color2{background-color: #00a098;}
.filter_table th.color3{background-color: #86c46e;}
.filter_table tbody th,
.filter_table tbody td{padding: 0.5em;}

@media screen and (max-width: 640px) { 
	.filter_table,
	.filter_table th,
	.filter_table td{font-size: 10px; border-width: 1px; }
	
}

span.paradia_ruby:before{display: block;}

#contents_mechanism .click_and_display{ text-align: left; display: inline-block; line-height: 1.4; font-weight: bold; font-size: 18px; background-color: #bcdfa9; padding: 0.4em 1em; border-radius: 10px;}
#contents_mechanism .click_and_display .click_icon{color: #fff; font-weight: normal; background-color: #74b84f; padding: 1px 10px; border-radius: 10px;margin-right: 10px; font-size: 24px;}
#contents_mechanism span{display: inline-block;vertical-align: middle;}

@media screen and (max-width: 640px) {
	#contents_mechanism .click_and_display{font-size: 100%;}
	#contents_mechanism .click_and_display .click_icon{font-size: 120%;}

}


.about_column{margin-left: auto;
margin-right: auto; width: 94%;}



#contents .about_column .title{color: #584D3D; display: inline-block; background-color: #E9E5DF; padding: 0.5em 1.5em;margin-left:6em;}
.about_column .column_main{border: 4px solid #E9E5DF; padding: 3% 4%;width:760px;margin-left:auto;margin-right:auto;}
.about_column .column_main sup{font-size: 10px;}
#contents .about_column .column_main .atten{font-size: 11px;}
span.attens{font-size: 11px !important;}
.about_column .point{background-color: #E9E5DF; padding: 2% 3%; margin-bottom: 4%;}
.about_column .point p+p{margin-top: 1em;}
.about_column .p1{}
.about_column .p2{color: #D83500;}
.about_column .p3{color: #006CD8;}
#contents .about_column .color{color: #A9987F; margin-bottom: 5px; border: none; }
#contents .about_column .color:after{content: normal;}
.about_column .red{color: #B20000;}
.about_column .title1{font-weight: bold;}
.about_column .title1:before{content: '■'; color: #e39318;}
.mlt{margin-left:35px;}

@media screen and (max-width: 640px) {
.about_column .column_main{width:100%;}
#contents .about_column .title{margin-left:0;}
.mlt{margin-left:0px;}

}

@media screen and (min-width: 641px) {
	.about_column .figure1 {text-align: center;}
	.about_column .half_box{overflow: hidden;}
	.about_column .half_box > *{width: 330px;}
	.about_column .half_box > *:nth-child(odd){float: left;}
	.about_column .half_box > *:nth-child(even){float: right;}
	#contents .about_column .color{font-size: 16px;}
	
}

@media screen and (max-width: 640px) {
	#contents .about_column .column_main .atten{font-size: 10px !important;}
	.about_column .hyoujun_shiyou{margin-bottom: 3%;}
}


img{max-width: 100%;}
.img_box1 .fl{width: 60%;}
.img_box1 .fr{width: 35%;}
.about_table1{width: 100%; table-layout: fixed;}
.about_table1,
.about_table1 th,
.about_table1 td{border: 2px solid #fff;}
.about_table1 th,
.about_table1 td{padding: 0.5em;}
.about_table1 th{background-color: #59c2e1; color: #fff;}
.about_table1 tbody tr:nth-child(odd){background-color:#f2f3f3;}
.about_table1 tbody tr:nth-child(even){background-color: #f8f8f8;}
.about_table1 tbody td:first-child{text-align: left;}
.about_table1 tbody tr:first-child,
.about_table1 tbody tr:first-child,
.about_table1 tbody tr:first-child td:first-child:before,
.about_table1 tbody tr:first-child td:last-child:before,
.about_table1 tbody tr:first-child td:first-child,
.about_table1 tbody tr:first-child td:last-child{position: relative;}
.about_table1 tbody tr:first-child td:first-child:before,
.about_table1 tbody tr:first-child td:last-child:before{content: ''; position: absolute; top: 0; bottom: 0; width: 10px;}
.about_table1 tbody tr:first-child td:first-child:before{right: 0%;}
.about_table1 tbody tr:first-child td:last-child:before{left: 0%;}
.about_table1 th:first-child{width: 11em;}
#contents .about_table1 td .mini{font-size: 12px; }
.about_table1 td .sankaku{color: #4095ff; font-weight: bold; font-family:" ＭＳ Ｐゴシック", MS PGothic,sans-serif;}
#contents section .about_table1_atten{font-size: 90%; margin-top: 1%;}


@media screen and (max-width: 640px) {
	.about_table1 th,
	.about_table1 td{padding: 0.3em;}
	.img_box1 .fl,.img_box1 .fr{float: none; width: auto;}
	.about_table1 caption{font-size: 12px;}
	.about_table1 thead{line-height: 1.1;}
	.about_table1 tbody{line-height: 1.3;}
	.about_table1 tbody tr:first-child td:first-child:before,
	.about_table1 tbody tr:first-child td:last-child:before{width: 0.5em;}
	.about_table1 tbody span.sp{font-size: 10px;}
	
}


#contents .inner816 {width:816px; margin-left: auto; margin-right: auto; max-width: 94%;}
#contents .inner840 {width:840px; margin-left: auto; margin-right: auto; max-width: 94%;}
#contents .toha .inner816 img{width:304px;}
#contents .toha .inner816 img:nth-child(1){margin-right:3%;}
#contents .toha .inner816 strong{font-size:115%;}
#contents h1{margin-bottom: 0;}

#contents h2 { color: #59c2e1; border-color:#59c2e1;}
#contents h2 img.bg_color{ background-color: #59c2e1;}
#contents h2 img.h2{padding-top: 18px;}

#contents section {}
#contents section p{font-size: 15px;}

#contents p a {color:#31AFE1;}
#contents p a:hover {opacity:0.7;}

.dpib{display: inline-block; text-align: left;}


@media screen and (max-width: 640px) {
	#contents{font-size: 14px;}
	/*2023.10.13 add*/
	#contents{padding: 30px 3%;}
	/*//2023.10.13 add*/
	#contents section p{font-size: 14px;}
	#contents .toha .inner816 img{width:100%;}
	#contents .toha .inner816>img{margin-bottom:8%;}
	
	#contents .toha .inner816 strong{font-size:0.8rem;}
}

/* 公開サーバ時には不要*/
@media screen and (min-width: 641px) {
	#contents.support10{
		padding-top: 120px;
	}
}
@media screen and (max-width: 640px) {
	#contents.support10{
		padding-top: 80px;
	}
}
/* //公開サーバ時には不要*/
/*mechanism*/
.mechanism #contents_mechanism h3,
.mechanism figcaption strong,
.mechanism .green_bg strong,
.mechanism #contents_mechanism p a,
.mechanism .key_color{color: #8cc66d;}
.mechanism #contents_mechanism h2 { margin-bottom: 40px; }
.mechanism #contents_mechanism h2 img.bg_color{ }
.mechanism #contents_mechanism h2 img.h2 {padding-top: 20px;}
.mechanism #contents_mechanism h3:before {content:"";}
.mechanism map area { cursor:pointer;}
.mechanism div.rel{position: relative;}
.mechanism .mask{position: absolute; bottom:0; left: 119px;}
.mechanism img.parts{position: relative; left:40px;}

.modal{background-color: #fff;}
.modal .title{background-color: #8cc66d; font-weight: bold; color: #fff; padding: 2px; font-size: 17px;}
.modal .title span{display: inline-block; vertical-align: middle;}
.modal .title .num{color: #8cc66d; background-color: #fff; font-size: 1.5em; width: 1.6em; text-align: center;line-height: 1.6;}
.modal .title .name{margin-left: 0.6em;}
.modal img{width: 50%; vertical-align: middle;}
.modal .img{font-size: 0;}
.modal .img .txt{ font-size: 14px; display: inline-block; vertical-align: middle; padding: 2em;}
.modal .img img+.txt{width: 50%; padding: 1em 1em 1em 0;}
#cboxOverlay{background-color: #000;}
#colorbox, #cboxWrapper{overflow: visible;}
#cboxPrevious{right: 100%; background-image: url(../_img/feature/mechanism/l.png);}
#cboxNext{left: 100%; background-image: url(../_img/feature/mechanism/r.png);}
#cboxPrevious,
#cboxNext{top: 0;  background-position: center;
background-size: 45% auto; height: 100%; width: 30px;}
#cboxPrevious:hover,
#cboxNext:hover{background-position: center;}

#cboxClose:hover,
#cboxClose{background-position: center; background-image: url(../_img/feature/mechanism/close.png); 
background-size: 90% auto; width: 40px; height: 40px; top: -50px;}

#contents_mechanism .maru_list1 li:before{content: '●';}
#contents_mechanism .maru_list1 li{text-indent: -1em; padding-left: 1em;font-size: 10px;margin-left:11px;}
#contents_mechanism .maru_listmae{color: #fff;font-weight: normal;background-color: #74b84f;padding: 0px 10px;border-radius: 10px;margin-right: 10px;font-size: 14px;margin-left:10px;}


@media screen and (min-width: 641px) {
	#cboxPrevious, #cboxNext{width: 60px; background-size: 40% auto;}
	.modal img {width: 25%;}
	.modal .img img+.txt {width: 75%;}
	#contents_mechanism .maru_list1{padding-left: 85px; }
#contents_mechanism .maru_listmae:first-child{margin-left: 95px;}
}

@media screen and (max-width: 640px) {
	#contents_mechanism .maru_listmae:not(:first-child){margin-top: 3%;}
}

@media screen and (max-width: 640px) {
	#cboxPrevious,
	#cboxNext{height: 100%; width:20%;}
	.mechanism #koyaura_sp{position: relative;}
	.mechanism #yukaoki_sp{position: relative;}
	.mechanism .clickable{position: absolute; left: 0;
	top: 0; right: 0; bottom: 0;}
	.mechanism .clickable li{position: absolute; font-size: 0;}
	.mechanism .clickable li a{display: inline-block; width: 10vw; height: 10vw; background-color: #000; opacity: 0; border-radius: 50%;}
	.mechanism #koyaura_sp .clickable .li1{top: 29%;left: 3%;}
	.mechanism #koyaura_sp .clickable .li2{top: 31%;left: 39%;}
	.mechanism #koyaura_sp .clickable .li3{top: 10%;left: 48%;}
	.mechanism #koyaura_sp .clickable .li4{top: 18%;left: 58.5%;}
	.mechanism #koyaura_sp .clickable .li5{top: 31%;left: 73%;}
	.mechanism #koyaura_sp .clickable .li6{top: 50%;left: 57%;}
	.mechanism #koyaura_sp .clickable .li6b{top: 80%;left: 40%;}
	.mechanism #koyaura_sp .clickable .li7{top: 34%;left: 52%;}
	.mechanism #koyaura_sp .clickable .li8{top: 61%;left: 77%;}
	.mechanism #koyaura_sp .clickable .li9{top: 29%;left: 87%;}
	.mechanism #koyaura_sp .clickable .li10{top: 86%;left: 1%;}
	
	.mechanism #yukaoki_sp .clickable .li1{top: 33%;left: 6%;}
	.mechanism #yukaoki_sp .clickable .li2{top: 54%;left: 25%;}
	.mechanism #yukaoki_sp .clickable .li3{top: 55%;left: 36%;}
	.mechanism #yukaoki_sp .clickable .li3 a{ width: 7vw; height: 7vw; }
	.mechanism #yukaoki_sp .clickable .li4{top: 37%;left: 30.5%;}
	.mechanism #yukaoki_sp .clickable .li5{top: 25%;left: 70%;}
	.mechanism #yukaoki_sp .clickable .li6{top: 47%;left: 50%;}
	.mechanism #yukaoki_sp .clickable .li7{top: 46.6%;
    left: 39.1%;}
	.mechanism #yukaoki_sp .clickable .li7 a{ width: 7vw; height: 7vw; }
	.mechanism #yukaoki_sp .clickable .li8{top: 24%;left: 82%;}
	
 	
}

/* fit ----------*/
.fit #contents_life h2 {margin-bottom: 5%;}
.fit #contents_life h2 img.h2 {padding-top: 20px;}
.fit #contents_life div.cases {width:880px; margin:0 auto; padding-left: 50px; max-width: 94%;}
.fit #contents_life div.cases >div{float: left; width: 43%; margin-right: 55px; margin-bottom: 6%;}
@media screen and (min-width: 641px) {
	.fit #contents_life div.cases >div.no_m{margin-bottom: 0;}

}
.fit #contents_life div.cases >div p{line-height: 1.3;margin-bottom: 0.5em;}
.fit #contents_life h3{margin-bottom: 26px; margin-top: 5px;}
.fit #contents_life h4 {font-size: 16px; margin-bottom: 6px;}
.fit #contents_life h4:after{content:"";}

#contents_life h3,
figcaption strong,
.green_bg strong,
#contents_life p a,
.key_color,
.fit #contents_life h4{color:#59c2e1;}
#contents_life h2 {  margin-bottom: 40px; }
#contents_life h2 img.bg_color, .sec4 figcaption div{ }

#contents_life h2 img.h2{padding-top: 28px;}

#contents_life h3 { font-size: 22px;}
#contents_life h3:before {content:"■";}

#contents_life p a {color:#2ea2db;}
#contents_life p a:hover {opacity:0.7;}

@media screen and (max-width: 640px) { 
	.fit #contents_life div.cases {width:94%; margin:0 auto; padding-left: 0; max-width:94%;}
	.fit #contents_life div.cases >div{margin:0 3%; margin-bottom: 6%; }
	.fit #contents_life h3{font-size: 18px;}
	.fit #contents_life div.cases >div p{font-size: 13px; line-height: 1.4;}
	.fit #contents_life h4{line-height: 1.3;}
	.fit #contents_life div.cases >div p{ margin-bottom: 0.5em;}
}

/*//2023.09.01//*/


#contents h1.support_title {
  font-weight: bold;
  font-size: 50px;
  color:#59c2E1;
  line-height: 1.4;
  background-color: #fff;
  text-align: center;
}


.blue{
	color: #c7ECFA;
	}
.orange{
	color:#ED6D46;
}

.cwhite{
	color:white;
}

.custom-link {
	 color: white !important;
}

.downloadbutton{
	display: inline-block;
	background-color: #31AFE1;
	color: #FFFFFF;
	font-weight: bold;
	border:none;
	font-size: 16px;
	padding:16px 70px;
	margin-top:20px; 
	margin-bottom: 0px;
	border-radius: 5px;
	cursor: pointer;
	text-decoration: none;
}
.downloadbutton:hover{
	opacity: 0.8;
}

@media screen and (min-width: 641px) { 
	.tright{
	text-align: right;
	font-size: 9px;
}
}

@media screen and (max-width: 640px) { 
	.downloadbutton{
		padding:16px 20px;
	}
	.tright{
	text-align: left;
	font-size: 9px;
}	
}

/*2023.10.09*/
.bold{
	margin:20px;
	color:#186DAB;
	font-weight: bold;
	padding-left:1em;
	text-indent:-1em;
	font-size:17px;
}
.lista{
	padding-left:5em;
	text-indent:-3em;
	}
.listb{
	padding-left:0em;
	text-indent:-1em;
	}
.txt{
	padding-left:1em;
	font-size:14px;
}
/*2023.10.13*/
@media screen and (max-width: 640px) { 
#contents h1.support_title {
  font-size: 30px;
  height: auto;
}
	.fit #contents_life div.cases > div{
		float: none;
		width: auto; 
	}
}

/*2023.10.30*/
.h2_moji_orange {
    color: #ed6d46;
}
.bg_color_orange{
	background: #ed6d46;
}
.orangeback{
	background:#Fcded5;
	padding: 10px;
}
.downloadbutton02{
	display: inline-block;
	background-color: #ed6d46;
	color: #FFFFFF;
	font-weight: bold;
	border:none;
	font-size: 16px;
	padding:16px 70px;
	margin-top:20px; 
	margin-bottom: 0px;
	border-radius: 5px;
	cursor: pointer;
	text-decoration: none;
}
.price{
	color:#ed6d46;
	font-weight: 800;
	font-size:50px !important;
	background:white;
	border:solid;
	border-color:#ed6d46; 
	text-align: center;
	padding-top: 50px;
	padding-left:20px;
	padding-right:20px;
	padding-bottom:30px;
	width: 80%;
    margin: 0 auto;
	line-height: 23px;
}
.tax{
	font-size:20px !important;
	vertical-align: baseline !important;
}


.fit #contents_life div.cases.about {
	width:auto;
	max-width: initial;
	padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.fit #contents_life div.cases > div.blueback{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 49%;
  margin-right: 0;
  padding: 10px;
  background: #eef9fb;
  margin-bottom: 5%;
	float: none;
}


@media screen and (max-width: 640px) { 
	.fit #contents_life div.cases > div.blueback{
		width: 100%;
		margin: 0 0 5%
	}
}

.fit #contents_life div.cases > div.blueback figure{
	width: 20%;
}
.fit #contents_life div.cases > div.blueback > div{
	width: 78%;
}
#contents_life h4 .red{
	color: #e60012
}

.fit #contents_life h4.mincho{
	font-size: 18px;
	color:#2E98B7
}

.fit #contents_life h4.mincho .red{
	font-size: 18px;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif !important;
}

@media screen and (max-width: 640px) { 
	.fit #contents_life div.cases.about {
		width:auto;
		max-width: initial;
		padding-left: 0;
	}
	.fit #contents_life div.cases > div.blueback{
		width: 100%;
		padding: 10px;
		align-items: flex-start
	}
	  #wrap #contents .blueback h4.mincho {
    font-size: 16px !important;
			border-bottom: none
  }
	.fit #contents_life h4.mincho .red{
		font-size: 16px !important;
		line-height: 1.3
	}
	
}


/* ポップアップ画面表示 2023.11*/
body.support{
	position: relative;
}
body.open{
  overflow-y: hidden;
  padding-right: 15px; 
}
.popUp{
cursor: pointer
	}
/*コンテンツ部分*/
#popUpBox {
  background: #fff;
  padding: 50px;
}

@media screen and (max-width: 640px) { 
	#popUpBox {
		padding: 20px;
	}
}

.popContents h2{
	font-size: 20px !important;
	color: #59c2e1;
}

.popContents h2.center{
	text-align: center;
	margin-top: 40px;
	margin-bottom: 20px
}

.popContents h3{
	font-size: 16px !important;
	margin-top: 20px;
	margin-bottom: 14px;
}

.popContents > ul{
	margin: 20px 0;
}

.attentionlist{
	margin-left: 2em;
}
.attentionlist li{
	margin-bottom: 10px
}
.attentionlist li ul.lista{
	margin-bottom: 1em;
	padding-left: 3em;
  text-indent: -3em;
}

.popContents .btnBox{
	margin-top: 60px;
}

.popContents .btnBox p.chkBox{
	font-size: 16px;
}
.popContents .btnBox p.chkBox input{
  margin-right: 10px;
  width: 2em;
  height: 2em;
}

.popContents .btnBox a.ctllink{
	pointer-events: none;
	background-color: #ccc;
}

/*closeボタン*/
#popUpBox .btnClose {
  display: block;
  position: absolute;
	width: 30px;
	height: 30px;
	background: #fff;
	border: 3px solid #ccc;
	border-radius: 15px;
	color: #ccc;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
  top: 5px;
  right: 5px;
  z-index: 12;
}


/*背景*/
#BlackWindow {
    display: none;
    background: #000;
    opacity: 0.7;
    filter: alpha(opacity=70);
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 10;
}