@charset "utf-8";
/* -----------------------------------------
-- 1. set / box
-- 2. title
-- 3. text
-- 4. list
-- 5. table
-- 6. other
-- 7. form
-- 8. blog
----------------------------------------- */
/*--------------------------------------------------------------------
1. set / box
---------------------------------------------------------------------*/
#container.second section{padding-bottom: 80px;}

/* 2column box
------------------------------------------------------*/
.cBox2col{overflow: hidden;}
.cBox2col + .cBox2col{margin-top: 70px;}
.cBox2col .img{
	width: 34.5%;
	float: left;
}
.cBox2col .txt{
	width: 62.5%;
	float: right;
}

/* service 3column box
------------------------------------------------------*/
.cBoxService01{
	padding-bottom: 40px;
	overflow: hidden;
}
.cBoxService01 .item{
	width: calc(370/1160 * 100%);
	float: left;
	margin-right: calc(25/1160 * 100%);
	margin-bottom: 30px;
}
.cBoxService01 .item:nth-child(3){margin-right: 0;}

.cBoxService01 .item a{
	display: block;
	border: #e7f1f6 4px solid;
	border-radius: 10px;
	padding: 30px 25px 40px;
	position: relative;
}
.cBoxService01 .item a:hover{border-color: #2179ac;}
.cBoxService01 .item a::after{
	content: "";
	display: block;
	width: 33px;
	height: 33px;
	background: url("../images/ico_arrow01.svg") 0 0 no-repeat;
	background-size: contain;
	position: absolute;
	right: 16px;
	bottom: 12px;
}
.cBoxService01 .item a .img{
	display: block;
	min-height: 100px;
	margin-bottom: 15px;
	position: relative;
}
.cBoxService01 .item a .img img{
	width: auto;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}
.cBoxService01 .item a .tit{
	display:flex;
	margin-bottom: 10px;
}
.cBoxService01 .item a .tit span{
	flex-grow: 1;
	align-self: center;
	text-align: center;
	font-size: 	1.059em;
	line-height: 1.66;
	font-weight: bold;
	color: #555555;
}
.cBoxService01 .item a p{
	font-size: 0.882em;
	line-height: 1.66;
	text-align: center;
}
.cBoxService01 .item#seriviceItem01 a .img,
.cBoxService01 .item#seriviceItem02 a .img,
.cBoxService01 .item#seriviceItem03 a .img{margin-bottom: 0;}

.cBoxService01 .item#seriviceItem01 a .img img{height: 75%;}
.cBoxService01 .item#seriviceItem02 a .img img{height: 66%; margin-top: 0;}
.cBoxService01 .item#seriviceItem03 a .img img{height: 86%; margin-top: 0;}

/*--------------------------------------------------------------------
2. title
---------------------------------------------------------------------*/
/* kazariMoji blue - 48px (sub--16px)
---------------------------------*/
.cTitSc01{
	margin-bottom: 40px;
	text-align: center;
	color: #2179ac;
	font-size: 2.824em;
	letter-spacing: 0.025em;
}
.cTitSc01 span{
	display: block;
	padding-top: 20px;
	padding-bottom: 20px;
	font-size: 0.333em;
	font-weight: bold;
}

/* before after line blue - 18px
---------------------------------*/
.cTitLine01{
	margin-bottom: 40px;
	text-align: center;
}
.cTitLine01 span{
	display: inline-block;
	padding-left: 45px;
	padding-right: 45px;
	text-align: center;
	font-size: 	1.059em;
	font-weight: bold;
	line-height: 1.5;
	color: #2179ac;
	position: relative;
}
.cTitLine01 span::before,
.cTitLine01 span::after{
	content: "";
	display: block;
	width: 25px;
	height: 1px;
	background-color: #2179ac;
	position: absolute;
	top: 50%;
}
.cTitLine01 span::before{left: 0;}
.cTitLine01 span::after{right: 0;}

/* normal bold - 28px
---------------------------------*/
.cTitB01{
	margin-bottom: 25px;
	text-align: center;
	font-size: 1.647em;
	font-weight: bold;
	line-height: 1.76;
}

/*--------------------------------------------------------------------
3. text
---------------------------------------------------------------------*/

/*--------------------------------------------------------------------
4. list
---------------------------------------------------------------------*/
/* normal mark
------------------------------------------------------*/
ul.cList01{margin-left: 1em;}
ul.cList01 > li{
	padding-left: 1.2em;
	position: relative;
}
ul.cList01 > li::before{
	content: "";
	display: block;
	width: 7px;
	height: 7px;
	background-color: #6f6f6f;
	border-radius: 50vw;
	position:absolute;
	top: 12px;
	left: 0;
}

/*--------------------------------------------------------------------
5. table
---------------------------------------------------------------------*/
/* gray line 16
------------------------------------------------------*/
table.cTb01{
	width: 100%;
	border-top: #dedede 1px solid;
	table-layout: fixed;
}
table.cTb01 th,
table.cTb01 td{
	border-bottom: #dedede 1px solid;
	padding: 35px 10px;
	text-align: left;
	line-height: 2.35;
}
table.cTb01 th{
	width: 30%;
	color: #8c8c8c;
	font-weight: bold;
}
/*--------------------------------------------------------------------
6. other
---------------------------------------------------------------------*/
/* morebtn
-----------------------*/
.morebtn{
	max-width: 100%;
	position: relative;
	text-align: left;
}
.morebtn::after{
	content: "";
	display: block;
	width: 34px;
	height: 34px;
	background-image: url("../images/ico_arrow02.svg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top: 0;
	right: 0;
}
.morebtn a,
.morebtn.btn02 span{
	height: 100%;
	width:auto;
	display: inline-block;
	text-align: left;
	letter-spacing: 0.05em;
	color: #2179ac;
	font-size: 0.941em;
	line-height: 34px;
	position: relative;
}
.morebtn a::after,
.morebtn.btn02 span::after{
	position: absolute;
	bottom: 0;
	left: 0;
	content: '';
	width: 100%;
	height: 1px;
	background-color: #2179ac;
	transform-origin: right top;
	transform: scale(0,1);
	transition: transform .3s;
	z-index: 1150;
}
.morebtn a:hover::after,
a:hover .morebtn.btn02 span::after{
  transform: scale(1, 1);
  transform-origin: left top;
}
.morebtn.btn01{
	width: 120px;
	height: 34px;
}
.morebtn.btn02{
	width: 155px;
	height: 34px;	
}

#serviceList .morebtn{
	margin-top: 40px;
	padding-right: 45px;
	width: auto;
	text-align: right;
}
#serviceList .item .morebtn a{
	width:auto;
	white-space: nowrap;
	font-family:"游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
	letter-spacing: 0.05;
}

/*--------------------------------------------------------------------
7. form
---------------------------------------------------------------------*/
input[type="checkbox"],
input[type="radio"] { 
     vertical-align:middle; 
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
    font-weight: 400;
     position:relative; 
     margin: 0 4px 0 0;
     top:-1px;  
}
#form table,
#form table th,
#form table td{position: relative;}

#form table::before,
#form table th::before,
#form table td::before{
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	background: url("../images/dot.gif") repeat-x;
	position: absolute;
	left: 0;
}
#form table::before{top: 0;}
#form table th::before,
#form table td::before{bottom: 0;}

#form table{
	width: 100%;
	margin-bottom: 70px;
}
#form table th,
#form table td{
	padding: 25px 0;
	text-align: left;
	vertical-align: top;
	font-size: 0.882em	;
}
#form table th{
	width: 250px;
	padding-top: 28px;
	padding-left: 10px;
	padding-right: 10px;
	font-weight: bold;
	color: #555;
}
#form table th div{
	display: inline-block;
	font-weight: bold;
	vertical-align: top;
}
#form th span{
	display: inline-block;
	width: 32px;
	height: 18px;
	margin-left: 1.5em;
	background-color: #d05959;
	text-align: center;
	color: #fff;
	line-height: 18px;
	font-size: 10px;
	vertical-align: middle;
	letter-spacing: 0.05em;
}

#form input[type="text"],
#form input[type="email"],
#form input[type="url"],
#form textarea{
    background-color:#f3f3f3;
    padding:7px 7px;
    width:100%;
}
#form textarea{height:10em;}

#form td.chk label{display: block;}
#form td.chk label + label{margin-top: 10px;}

#form td.privacy p{padding-bottom: 10px;}
#form td.privacy span,
#form td.privacy label{font-weight: bold;}
#form td.privacy span{font-size: 1.067em;}

#form table + p{
	padding-bottom: 40px;
	text-align: center;
	font-size: 	0.941em;
	font-weight: bold;
}

.btnThanks{
	padding-top: 60px;
	padding-bottom: 60px;
}

#form .formBtn input,
.btnThanks a{
	display: block;
	width: 340px;
	height: 64px;
	margin: 0 auto;
	border: #2179ac 1px solid;
	border-radius: 50vw;
	background-color: #fff;
	line-height: 62px;
	text-align: center;
	font-size: 	0.941em;
	font-weight: bold;
	color: #2179ac;
  transition: all 0.5s;
	cursor: pointer;
}

#form .formBtn input:hover,
.btnThanks a:hover{
	background-color: #2179ac;
	color: #fff;}

@media screen and (min-width : 768px) and (max-width: 1079px) {
	#form table th{width: 220px;}
}

#form .formBtn input.back,
#form .formBtn input.back + input{
	display: inline-block;
	max-width: calc((100% - 60px)/2);
}
#form .formBtn input.back + input{margin-left: 50px;}

/*--------------------------------------------------------------------
8. blog
---------------------------------------------------------------------*/
.post {padding-bottom:60px;}

.post >img,
.post p img{
    display:block;
    width:100%;
    max-width:700px;
    margin:30px auto;
}

.post h3{
	margin-bottom: 30px;
	text-align: left;
	font-weight: bold;
	font-size: 	1.176em;
	line-height: 1.5;
}
.post h4,
.post h5,
.post h6{
    font-weight:bold;
    text-align:left;
    margin-bottom:20px;
	line-height: 1.5;
}
.post p ,
.post li{line-height: 2.25;}

.post * + h3{margin-top:50px;}
.post * + h4{margin-top:20px;}
.post * + h5,
.post * + h6{margin-top:20px;}
.post * + p,
.post * + ul{margin-top: 15px;}

.post ul li{position:relative; padding-left:1.5em;}
.post ul li::before{
    content:"・";
    position:absolute;
    top:0;
    left:0;
}

/* pager
--------------*/
.pagination{    
    width:1000px;
    max-width:100%;
    margin:80px auto 0;
    text-align:center;}
.pagination li{
    display:inline-block;
    margin:0 4px;
}
.pagination li a,
.pagination li span{
    display:block;
    border:#d5d5d5 1px solid;
	border-radius: 3px;
    background-color:#fff;
    width:28px;
    line-height:28px !important;
    font-size:12px;
    text-align:center !important;
    color:#444 !important;
    text-decoration:none !important;
}
.pagination li a:hover{ color:#333 !important; background-color:#eeeeee;}
.pagination li span.dots{border:none; width:auto; color:#444; background:none;}
.pagination li span.current{
    background-color:#2179ac !important;
    color:#fff !important;
}

/* pager2
--------------*/
.pageNav ul{
    width: 530px;
    max-width: 100%;
    margin: 0 auto;
    overflow:hidden;
    position:relative;
}
.pageNav ul li{
    width: 27%;
    height:42px;
    float: left;	
}
.pageNav ul li + li{margin-left: 9.5%;}

.pageNav ul li a{
    display:block;
    width:100%;
    height:100%;
    border:#bbbbbb 1px solid;
	border-radius: 21px;
    position:relative;
    line-height:40px;
    font-size:13px;
	font-weight: bold;
    color:#333 !important;
    text-decoration:none !important;
}
.pageNav ul li a:hover{
	background-color:#bbbbbb; 
	color: #fff !important;
}
.pageNav ul li.back a{text-align: center;}
.pageNav ul li.prev a{
    text-align:center;
}
.pageNav ul li.next a{
    text-align:center; 
}
.pageNav ul li.prev a::before,
.pageNav ul li.next a::before{
    display:block;
    width:15px;
    height:8px;
    background-position:0 0;
    background-repeat:no-repeat;
    background-size:contain;
    font-size:12px;
    line-height:1;
    font-family:san-serif;
    margin-top:-0.4em;
    position:absolute;
    top:50%;
}
.pageNav ul li.prev a::before{left:15px; content:"←";}
.pageNav ul li.next a::before{right:15px; content:"→";}