@charset "UTF-8";

/* ===================================================================
 02_common.css
 　共通パーツなど
=================================================================== */


/*------------------------------------------------------------
 見出し
------------------------------------------------------------*/

/* h2：ページメインタイトル
----------------------------------------------- */
.main h2{
	margin-bottom:30px;
	font-size:2.6rem;
	text-align:center;
	letter-spacing:0.5rem;
	position:relative;
}


/* h3：吹き出し
----------------------------------------------- */
.textsec h3{
	display:table;
	padding:6px 80px;
	margin:10px auto 30px;
	text-align:center;
	font-size:2.0rem;
	letter-spacing:2px;
	background:#ffffff;
	border-radius:24px;
	position:relative;
}

.textsec h3:after{
	content:"";
	height:0; width:0;
	border:solid transparent;
	border-color:rgba(0,0,0,0);
	border-width:6px;
	border-top-color:#ffffff;
	position: absolute;
	top: 100%; left: 50%;
	margin-left:-6px;
}


/* h3下サブタイトル
----------------------------------------------- */
p.subtitle{
	margin-top:-15px;
	text-align:center;
}



/*------------------------------------------------------------
　テキストセクション
------------------------------------------------------------*/
.main .textsec section{
	margin-bottom:80px;
}

.main .textsec p{
	width:500px;
	margin:0 auto;
	font-size:1.5rem;
	line-height:2em;
}

.main .textsec em{
	color:#c23d0c;
}

.main .textsec img{
	display:block;
	margin:30px auto;
}




/*------------------------------------------------------------
　リンク
------------------------------------------------------------*/

/* 文字リンク
----------------------------------------------- */
a{
	color:#565656;
	text-decoration:none;
	border-bottom: 1px solid #565656;
	-webkit-transition: border-color 0.3s, color 0.3s;
	        transition: border-color 0.3s, color 0.3s;
}

a:hover {
	color:#4198a7;
	border-color:rgba(86,86,86,0);
}


/* 画像リンク
----------------------------------------------- */
a:hover img {
	margin:1px -1px -1px 1px;
}

a.imglink {
	border-bottom:none;
}


/* リンク：矢印付きボタン
----------------------------------------------- */
a.btn{
	display:table;
	padding:8px 25px 8px 40px;
	margin:20px auto;
	font-size:1.8rem;;
	color:#ffffff;
	text-decoration:none;
	border:2px solid #595044;
	background:#595044;
	border-radius:2px;
	box-shadow:0 0 1px 0 rgba(86,79,68,0.3);
	position:relative;
}

a.btn:before{
	content:"";
	width: 5px;
	height: 5px;
	border-top:2px solid #ffffff;
	border-right:2px solid #ffffff;
	-webkit-transform:rotate(45deg);
			transform:rotate(45deg);
	position:absolute;
	top:50%; left:20px;
	margin-top:-2px;
}

a.btn:hover{
	color:#595044;
	background:rgba(255,255,255,0.8);
}

a.btn:hover:before{
	border-top-color:#595044;
	border-right-color:#595044;
}





/*------------------------------------------------------------
　ページャー
------------------------------------------------------------*/
.pager{
	padding:10px;
	text-align:center;
	position:relative;	
}

.pager a,
.pager a:link {
	color: #595044;
	font-size:1.8rem;
	font-weight: normal;
}

.pager span.current,
.pager span.extend,
.pager a,
.pager a:hover {
	display:inline-block;
	width:40px;
	height:40px;
	margin: 5px;
	line-height:36px;
	font-weight:bold;
	color:#595044;
	background:#ffffff;
	border:2px solid #595044;
	border-radius:3px;
	box-shadow:1px 1px 2px 0 rgba(99,51,25,0.2);
}

.pager a:hover {
	font-weight: normal;
	box-shadow:none;
}

/* 現在のページ */
.pager span.current{
	background:#d8d4cb;
	border-color:#d8d4cb;
	font-size:1.8rem;
	box-shadow:none;
}

.pager span.extend{
	color:#f6f2e9 !important;
	cursor:default;
}

.pager a.nextpostslink,
.pager a.previouspostslink{
	background:none;
	border:none;
	box-shadow:none;
}

.pager a.nextpostslink,
.pager a.previouspostslink {
    color: #F6F2E9 !important;
}

.pager a.nextpostslink:hover,
.pager a.previouspostslink:hover {
    background:none !important;
}

.pager a.previouspostslink:before {
    left:18px !important;
}

.pager a.nextpostslink:after {
    left:2px !important;
}

.pager a.previouspostslink:hover:before {
    left:16px !important;
}

.pager a.nextpostslink:hover:after {
    left:4px !important;
}

.pager a.first,
.pager a.last {
    width:50px !important;
}

/* 前へ・次へ */
.pager a[rel^=prev],
.pager a[rel^=next]{
	position:relative;
}

.pager a[rel^=prev]:before,
.pager a[rel^=next]:after{
	content:"";
	width: 6px;
	height: 6px;
	border-top:2px solid #595044;
	border-right:2px solid #595044;
	position:absolute;
	top:50%;
	margin-top:-5px;
}

.pager a[rel^=prev]:before{
	left:-20px;
	-webkit-transform:rotate(225deg);
			transform:rotate(225deg);
}

.pager a[rel^=prev]:hover:before{
	left:-22px;
}

.pager a[rel^=next]:after{
	right:-20px;
	-webkit-transform:rotate(45deg);
			transform:rotate(45deg);
}

.pager a[rel^=next]:hover:after{
	right:-22px;
}






/*------------------------------------------------------------
 フロー図
------------------------------------------------------------*/
ol.flow{
	counter-reset:flow-no;
}


/* 各ブロック
----------------------------------------------- */
ol.flow li{
	display:block;
	width:600px;
	padding:30px;
	margin:30px auto;
	background:#ffffff;
	border:5px solid #efbe5e;
	border-radius:5px;
	position:relative;
	vertical-align:middle;
}

/* 矢印 */
ol.flow li:before,
ol.flow li:after{
	content:"";
	display:block;
	position:absolute;
	bottom:0; left:50%;
}

ol.flow li:before{
	width:50px;
	height:50px;
	background:#efbe5e;
	border-radius:25px;
	margin:0 0 -25px -25px;
}

ol.flow li:after{
	width: 15px;
	height: 15px;
	border-top:4px solid #ffffff;
	border-right:4px solid #ffffff;
	-webkit-transform:rotate(135deg);
			transform:rotate(135deg);
	margin:0 0 -6px -9px;
}

ol.flow li:nth-last-child(1):before,
ol.flow li:nth-last-child(1):after{
	content:none;
}


/* 見出し
----------------------------------------------- */
ol.flow .f-title{
	margin-bottom:10px;
	text-align:center;
}

ol.flow h4{
	display:inline-block;
	padding-left:65px;
	font-size:1.7rem;
	color:#595044;
	text-align:left;
	position:relative;
}

ol.flow h4:before{
	counter-increment:flow-no;
	content: counter(flow-no);
	display:block;
	vertical-align:middle;
	width:50px;
	height:50px;
	margin-right:10px;
	font-size:3.0rem;
	text-align:center;
	line-height:50px;
	background:#efbe5e;
	border-radius:25px;
	position:absolute;
	top:50%; left:0;
	margin-top:-25px;
}


ol.flow h4 em{
	color:#595044 !important;
	font-size:2.8rem;
	line-height:1em;
}


/* 内容
----------------------------------------------- */
.textsec ol.flow li img{
	display:inline-block;
	vertical-align:middle;
	max-width:300px;
	margin:10px 20px;
}

ol.flow li .f-text{
	display:inline-block;
	vertical-align:middle;
	margin-left:10px;
}

ol.flow li .f-text p{
	width:auto;
	margin-bottom:10px;
	line-height:2.2rem;
}


/* 次のステップへ
----------------------------------------------- */
ol.flow .step{
	width:170px;
	height:170px;
	margin:-60px auto 0;
	vertical-align:middle;
	text-align:center;
	background:url(../img/page/fig_circle.png) no-repeat;
	background-size:contain;
	position:relative;
}

ol.flow .step:after{
	content:"";
	display:block;
	width: 15px;
	height: 15px;
	border-top:4px solid #ffffff;
	border-right:4px solid #ffffff;
	-webkit-transform:rotate(135deg);
			transform:rotate(135deg);
	position:absolute;
	bottom:20px; left:50%;
	margin-left:-9px;
}

ol.flow .step p{
	width:auto;
	padding-top:50px;
	line-height:2.2rem;
	font-size:1.6rem;
	font-weight:bold;
}


/* ブロック：青枠
----------------------------------------------- */
ol.flow li.impl{
	border:5px solid #419baa;
}

ol.flow li.impl:before{
	background:#419baa;
}

ol.flow li.impl h4:before{
	color:#ffffff;
	background:#419baa;
}





/*------------------------------------------------------------
 注意
------------------------------------------------------------*/
.note{
	width:600px;
	padding:40px;
	margin:20px auto;
	background:url(../img/common/bg.png) repeat;
	border-radius:5px;
}

.note h4{
	display:table;
	padding:3px 30px;
	margin:-10px auto 10px;
	text-align:center;
	font-size:1.5rem;
	letter-spacing:2px;
	background:#ffffff;
	border-radius:24px;
}

.note li{
	padding-left:1em;
	margin-bottom:0.5em;
	position:relative;
}

.note li:nth-last-child(1){
	margin-bottom:0;
}

.note li:before{
	content:"";
	width:6px;
	height:6px;
	border-radius:3px;
	background-color:#4198a7;
	position:absolute;
	top:9px; left:3px;
}




/*------------------------------------------------------------
 お問い合わせへの誘導
------------------------------------------------------------*/
.cntct-info{
	width:100%;
	padding:30px;
	margin:20px auto;
	text-align:center;
	background:#ffffff;
	border:4px solid #efbe5e;
	border-radius:5px;
	position:relative;
}

.cntct-info:after { 
  content:"";
  display:block;
  width:150px;
  height:115px;
  background:url(../img/page/ill_contact.png) no-repeat; 
  background-size:contain;
  position:absolute;
  bottom:-30px; right:-35px;
}

.cntct-info h5{
	font-size:1.5rem;
}

.cntct-info h5 em{
	color:#e89c18;
}

.cntct-info dl{
	margin:15px auto 30px;
}

.cntct-info dl dt{
	margin:0 auto 15px;
	padding:2px 8px;
	font-size:1.6rem;
	background:#efbe5e;
	border-radius:5px;
}


/* ----- 電話 ----- */
.cntct-info dl.tell dd{
	display:inline-block;
	padding-left:42px;
	color:#595044;
	font-size:3.0rem;
	font-weight:bold;
	position:relative;
}

.cntct-info dl.tell dd:before{
	content:"";
	display:block;
	width:36px; height:36px;
	background:url(../img/page/ico_tell.png) no-repeat; 
	background-size:contain;
	position:absolute;
	top:50%; left:0;
	margin-top:-18px;
}

.cntct-info dl.tell dd.time{ /* 受付時間 */
	display:block;
	padding-left:0;
	font-size:1.5rem;
	font-weight:bold;
}

.cntct-info dl.tell dd.time span{
	margin-right:5px;
	padding:2px 8px;
	font-weight:normal;
	font-size:1.2rem;
	color:#ffffff;
	background:#595044;
	border-radius:10px;
}

.cntct-info dl.tell dd.time:before{
	content:none;
}


/* ----- メール ----- */
.cntct-info dl.mail a.btn{
	padding:10px 20px 10px 50px;
	font-size:1.8rem;
}

.cntct-info dl.mail a.btn:before{
	width:32px; height:32px;
	border:none;
	background:url(../img/page/ico_mail.png) no-repeat; 
	background-size:contain;
	-webkit-transform:rotate(0deg);
			transform:rotate(0deg);
	margin:-13px 0 0 -7px;
}

.cntct-info dl.mail a.btn:hover:before{
	background-image:url(../img/page/ico_mail2.png); 
}


/* ----- 補足 ----- */
.cntct-info .note{
	width:90%;
	padding:20px 30px;
	margin:0 auto;
	text-align:left;
	background:rgba(239,190,94,0.3);
}

.cntct-info .note p{
	width:auto;
}

.cntct-info .note li{
	margin:0 !important;
	font-weight:bold;
	font-size:1.6rem;
}

.cntct-info .note li:before{
	content:none !important;
}











/*------------------------------------------------------------
 XXX
------------------------------------------------------------*/

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