/**********************************/
/*　　サブページのタイトル部分　　　 */
/**********************************/

.q-title-box{
	margin-left: auto;
	margin-right: auto;
	border-collapse:collapse;
	border-spacing: 0;
	border-left: 15px solid #738780 ;	/* 	/枠線 */
	background: #9BCCCE ;				/* 背景色 */
	max-width: 1000px;
}

table.q-title-box td{
	display:table-cell;
}

@media (max-width:400px){
	.q-title-box{
		width: 100%;
	}
	table.q-title-box td{
		display:block;
	}
}


/* 中の文字1 */
.q-title-box h1 {
	color: #3B7E7F;
    font-size: 30px;
    font-weight: 600;
    line-height: 2.0em;
    text-align: left;
	padding:0 0 0 20px;
}

@media screen and (max-width: 500px) {
	.q-title-box h1 {
    	font-size: 24px;
	}
}

/* 女の子の画像エリア */
.q-title-box-char-img{
	width: 200px;
	text-align: left;
	height: 120px;
	margin:0 0 0 0;
	padding:0 0 0 0;
}


/**********************************/
/*　　ポップりんととはのタイトル　 */
/**********************************/

.top-message{
	margin: 10px 10px 10px 10px;
	color: #000000;
	font-size: 28px;
	line-height: 1.5em;
}

.top-message span{
	color: #3B7E7F;
	font-size: 32px;
	font-weight: 600;
}

@media screen and (max-width: 500px) {
	.top-message{
		font-size: 22px;
	}

	.top-message span{
		font-size: 24px;
	}
}

/**********************************/
/*　　　　メモ風エリア　　　　 */
/**********************************/
.sub-title-memo{
	/*角丸*/
	border-radius: 20px; /* CSS3 */
	-webkit-border-radius: 20px; /* Safari,Google Chrome用 */
	-moz-border-radius: 20px; /* Firefox用 */
	behavior: url(../js/PIE.htc); /* IE用 */
	/*レイアウト*/
	text-align: left;
	margin: 10px 2%;
	padding: 10px;
	background-color: #ffffff;
	border: medium dotted #738B80;
}

.note{
    position: relative;
    background-color: #ffffff; 
    background-image: 
    linear-gradient(rgba(241,207,164,0.5) .1em, transparent .1em);
	margin: 10px 10px;
	padding: 5px 5px 0 5px;
    background-size: auto 1.6em;
    font-size: 1.2em;
    line-height:1.6em;
}

.note ul{
	list-style-type: square;
	list-style-position: outside;
	margin: 0px 0px 0px 30px;

}

.note img{
    vertical-align:bottom;
}

.image-base{
	vertical-align: middle;
	margin: 0;
	padding: 0;
}

/********************************************/
/*　チェックボックスが書かれたエリア　　　 */
/********************************************/
.check-area{
	/*角丸*/
	border-radius: 20px; /* CSS3 */
	-webkit-border-radius: 20px; /* Safari,Google Chrome用 */
	-moz-border-radius: 20px; /* Firefox用 */
	behavior: url(../js/PIE.htc); /* IE用 */
	/*レイアウト*/
	text-align: left;
	margin: 10px 2%;
	padding: 20px 10px 0 10px;
	background-color: #ffffff;
	border: 6px solid #D84763;
}

.check-area-title{
	color: #3B7E7F;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.0em;
    text-align: left;
	margin: 0 0 0 0;
}

.check-area-title img{
	vertical-align: bottom;
    padding: 0 0 0 10px;
}

.check-area-text{
	color: #000000;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3em;
	margin: 0;
    padding: 10px 0 30px 50px;
}

@media (max-width:800px){
	.check-area-title{
	    font-size: 22px;
		line-height: 1.0em;
    	text-align: left;
		padding-left:2.3em;
		text-indent: -2.3em;
	}

	.check-area-text{
		color: #000000;
	    font-size: 16px;
		font-weight: 500;
		line-height: 1.3em;
		padding: 0 0 0 5%;
	}

}






.kodawari-title{
	margin: 50px 2% 0 2%;
	padding: 10px;
	background-color: #D1B088;
	color: #ffffff;
    font-size: 1.8em;
}

.kodawari-area{
	margin: 0 2% 10px 2%;
	padding: 10px 20px 10px 20px;
	background-color: #F9F3F2;
}

.kodawari-text{
	color: #000000;
    font-size: 1.2em;
	padding: 20px 30px 20px 50px;
}

hr.style1{
	border-top: 3px dotted #D1B088;
	margin:10px 20px;
}

.kodawari-notice{
	color: #000000;
    font-size: 1.0em;
	text-align: right;
}


/**********************************/
/*     3段が1段になるテーブル     */
/**********************************/

.three-box{
	margin-left: auto;
	margin-right: auto;
	padding: 0 0;					/* 上下の余白 */
	margin-bottom: 0em ;				/* 他のブロックとのスペース */
	max-width:800px;
}

@media (max-width:960px){
	.three-box2{
		margin-left: auto;
		margin-right: auto;
		//margin:30px;
		min-width:250px;
	}
}

table.three-box td,table.three-box td{
	display:table-cell;
	vertical-align: top;
}

@media (max-width:960px){
	table.three-box td,table.three-box td{
		display: block;
	}
}

.inner-table{
		margin-left: auto;
		margin-right: auto;
	width: 250px;
	border: 3px #D84763 solid;
}

.inner-title{
	width:100%;
	height:70px;
	background: #D84763;
	color: #ffffff;
    font-size: 1.2em;
    font-weight: 500;
    line-height: 1.2em;
    text-align: left;
	vertical-align: middle;
	padding-left: 1.5em;
	padding-top:5px;
	padding-bottom:5px;
	text-indent: -1.2em;
}

.inner-text{
	width:100%;
	height:210px;
	background: #ffffff;
	color: #000000;
    font-size: 1.1em;
    font-weight: 500;
    line-height: 1.1em;
    text-align: left;
	vertical-align: top;
	padding:10px;
	position: relative;

}

.inner-text img { 
    position: absolute; 
    right: 0; 
    bottom: 0; 
} 


.image-right-under{
	position: absolute;
	bottom: 0;
	right: 10px;
}


/**********************************/
/*     使用料のテーブル   s-fee.html  */
/**********************************/

.table-fee{
	margin-left: auto;
	margin-right: auto;
	text-align: center ;
	padding: 0 0;					/* 上下の余白 */
	margin-top:20px;
	margin-bottom: 0em ;				/* 他のブロックとのスペース */
	max-width:800px;
	font-size: 1.2em;
}

.table-fee th{
	background-color: #3B7E7F;
	border: 3px solid #ffffff;
	color: #ffffff;
	text-align: center;
}

.table-fee td.title-row{
	background-color: #3B7E7F;
	border: 3px solid #ffffff;
	color: #ffffff;
	text-align: center;
}

.table-fee td.text-row{
	background-color: #A2C1C6;
	border: 3px solid #ffffff;
	color: #000000;
	text-align: center;
}

.font-red{
	color: #ff0000;
}


/**********************************/
/*     使い方のテーブル   s-howtouse.html  */
/**********************************/


.table-howtouse{
	margin-left: auto;
	margin-right: auto;
	text-align: center ;
	padding: 0 0;					/* 上下の余白 */
	margin-top:20px;
	margin-bottom: 0em ;				/* 他のブロックとのスペース */
	max-width:960px;
	font-size: 1.2em;
}

.table-howtouse td.numbering-p{
	height: 50px;
	width:100px;
	background-color: #ffffff;
	color: #ffffff;
	background-image: url("../images/s-howtouse/number-back_p.gif");
	background-repeat: no-repeat;
	background-position: 15px bottom;
	padding: 30px 0 0 32px;
	font-size: 42px;
	text-align: left;
}

.table-howtouse td.numbering-w{
	width:880px;
	background-color: #ffffff;
}

.table-howtouse td.title-text-p{
	background-color: #D77799;
	background-image: url("../images/s-howtouse/number-under_p.gif");
	background-repeat: no-repeat;
	background-position: 22px top;
	height: 40px;

}


.table-howtouse td.title-text-pp{
	background-color: #D77799;
	color: #ffffff;
	font-size: 24px;
	text-align: left;
	vertical-align: middle;
}



.table-howtouse td.exp-text{
	background-color: #ffffff;
	padding: 10px 10px 10px 0;
	color: #000000;
	font-size: 16px;
	text-align: left;
	vertical-align: top;
}


@media (max-width:640px){
	.table-howtouse td.title-text-pp{
		font-size: 16px;
	}
	.table-howtouse td.exp-text{
		font-size: 14px;
	}
}

.table-howtouse td.exp-zu{
	width: 45%;
	background-color: #ffffff;
	padding: 10px 0 10px 0;
	vertical-align: top;
	color: #666666;
	font-size: 14px;
	text-align: left;
}





/**********************************/
/*   ご利用までの流れのテーブル   s-flow.html  */
/**********************************/


.table-flow{
	margin-left: auto;
	margin-right: auto;
	text-align: center ;
	padding: 0 0;					/* 上下の余白 */
	margin-top:20px;
	margin-bottom: 0em ;				/* 他のブロックとのスペース */
	max-width:960px;
	font-size: 1.2em;
}

.table-flow td.numbering-w{
	width:880px;
	background-color: #ffffff;
}


.table-flow td.exp-text{
	background-color: #ffffff;
	padding: 10px 10px 10px 0;
	color: #000000;
	font-size: 16px;
	text-align: left;
}


@media (max-width:640px){
	.table-flow td.exp-text{
		font-size: 14px;
	}
}




.table-flow td.numbering-g{
	height: 50px;
	width:110px;
	background-color: #ffffff;
	color: #ffffff;
	background-image: url("../images/s-flow/number-back_dg.gif");
	background-repeat: no-repeat;
	background-position: 15px bottom;
	padding: 0 0 0 35px;
	font-size: 42px;
	text-align: left;
	vertical-align: bottom;
}


.table-flow td.title-text-g{
	background-color: #95C149;
	background-image: url("../images/s-flow/number-under_dg.gif");
	background-repeat: no-repeat;
	background-position: 15px top;
}


.table-flow td.title-text-gg{
	background-color: #95C149;
	color: #ffffff;
	font-size: 24px;
	text-align: left;
	vertical-align: middle;
}

@media (max-width:640px){
	.table-flow-gg td.title-text{
		font-size: 20px;
	}
}



.table-flow td.numbering-b{
	height: 50px;
	width:110px;
	background-color: #ffffff;
	color: #ffffff;
	background-image: url("../images/s-flow/number-back_b.gif");
	background-repeat: no-repeat;
	background-position: 15px bottom;
	padding: 0 0 0 35px;
	font-size: 42px;
	text-align: left;
}


.table-flow td.title-text-b{
	background-color: #4397D9;
	background-image: url("../images/s-flow/number-under_b.gif");
	background-repeat: no-repeat;
	background-position: 15px top;
	height: 40px;
}


.table-flow td.title-text-bb{
	background-color: #4397D9;
	color: #ffffff;
	font-size: 24px;
	text-align: left;
	vertical-align: middle;
}

@media (max-width:640px){
	.table-flow-bb td.title-text{
		font-size: 20px;
	}
}

.table-flow td.numbering-wb{
	height: 50px;
	width:110px;
	background-color: #ffffff;
	color: #ffffff;
	background-image: url("../images/s-flow/number-back_wb.gif");
	background-repeat: no-repeat;
	background-position: 15px bottom;
	padding: 0 0 0 35px;
	font-size: 42px;
	text-align: left;
}


.table-flow td.title-text-wb{
	background-color: #95CEF4;
	background-image: url("../images/s-flow/number-under_wb.gif");
	background-repeat: no-repeat;
	background-position: 15px top;
	height: 40px;
}


.table-flow td.title-text-wbb{
	background-color: #95CEF4;
	color: #ffffff;
	font-size: 24px;
	text-align: left;
	vertical-align: middle;
}


/**********************************/
/*　　各悩みページ　　　 */
/**********************************/


.paper {
	width:630px;
	min-height:400px;
	margin:20px auto;
}

.back1 {
	background-image: url(../images/trouble/Q_1-header.png);
	background-repeat: no-repeat;
	background-position: center top;
    background-size: contain;
}

.back2 {
	background-image: url(../images/trouble/Q_2-header.png);
	background-repeat: no-repeat;
	background-position: center top;
    background-size: contain;
}

.back3 {
	background-image: url(../images/trouble/Q_3-header.png);
	background-repeat: no-repeat;
	background-position: center top;
    background-size: contain;
}

.back4 {
	background-image: url(../images/trouble/Q_4-header.png);
	background-repeat: no-repeat;
	background-position: center top;
    background-size: contain;
}

.back5 {
	background-image: url(../images/trouble/Q_5-header.png);
	background-repeat: no-repeat;
	background-position: center top;
    background-size: contain;
}

.back6 {
	background-image: url(../images/trouble/Q_6-header.png);
	background-repeat: no-repeat;
	background-position: center top;
    background-size: contain;
}
.paper h2{
    //text-align:center;
    position:relative;
	margin:60px 10px 0 25%;
	color: #3B7E7F;
	font-size:26px;
	font-weight: 600;
	line-height: 1.0em;
}

.paper h3{
	margin:5px 10px 25px 25%;
	color: #3B7E7F;
	font-size:21px;
	font-weight: 600;
	border-bottom: 3pt solid #3B7E7F;
	padding-bottom: 4px;
}

@media (max-width:640px){
	.paper h2{
		font-size:22px;
	font-weight: 600;
	}
	.paper h3{
		font-size:14px;
	}
}

.paper p{
	margin:5px 3% 20px 5%;
	color: #000000;
	font-size:14px;
	font-weight: 500;
}

.paper p span{
	color: #CA4763;
	font-size:14px;
	font-weight: 600;
}

.css-box-shadow {
	width:90%;
	position: relative;
	-webkit-box-shadow: 1px 10px 10px rgba(0,0,0,.3);
	-moz-box-shadow: 1px 10px 10px rgba(0,0,0,.3);
	box-shadow: 1px 10px 10px rgba(0,0,0,.3);
	padding: 2px;
	background-color: white;
}

.css-box-shadow:after
{
	z-index: -1;
	position: absolute;
	content: "";
	bottom: 15px;
	right: 10px;
	left: auto;
	width: 50%;
	top: 80%;
	max-width:300px;
	background: #777;
	-webkit-box-shadow: 0 15px 10px #777;
	-moz-box-shadow: 0 15px 10px #777;
	box-shadow: 0 15px 10px #777;
	-webkit-transform: rotate(3deg);
	-moz-transform: rotate(3deg);
	-o-transform: rotate(3deg);
	-ms-transform: rotate(3deg);
	transform: rotate(3deg);
}


/**********************************************/
/*　紙と鉛筆の理由の タイトル（角が丸い四角） */
/**********************************************/
.kodawari-colmun{
	/*角丸*/
	border-radius: 10px 10px 0 0; /* CSS3 */
	-webkit-border-radius: 10px 10px 0 0; /* Safari,Google Chrome用 */
	-moz-border-radius: 10px 10px 0 0; /* Firefox用 */
	behavior: url(../js/PIE.htc); /* IE用 */
	/*レイアウト*/
	margin: 30px 2% 0 2%;
	padding: 10px 10px 10px 20px;
	max-width: 100px;
	background-color: #D84763;
	color: #ffffff;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.0em;
    text-align: left;
}

hr{
    border:none;
    //border-top:dashed 2px #D84763;
	border-top:solid 3px #D84763;
    height:2px;
    color:#FFFFFF;
    margin: 0px 2% 0 2%;
}




@media screen and (max-width: 400px) {
    .kodawari-colmun {
 	   font-size: 18px;
    }
}


/**********************************************/
/*　green塗りつぶしテキスト枠（角が丸い四角） */
/**********************************************/
.text-green{
	/*角丸*/
	border-radius: 20px; /* CSS3 */
	-webkit-border-radius: 20px; /* Safari,Google Chrome用 */
	-moz-border-radius: 20px; /* Firefox用 */
	behavior: url(../js/PIE.htc); /* IE用 */
	/*レイアウト*/
	margin: 0px 2% 20px 2%;
	padding: 20px 20px 20px 20px;
	background-color: #95C149;
	//border: 3px solid #D84763;
	text-align: center;
	color:#ffffff;
	font-size:24px;
	line-height: 1.4em;
}

@media (max-width:800px){
	.text-green{
		font-size:20px;
	}
}


/**********************************************/
/*　green中白テキスト枠（角が丸い四角） */
/**********************************************/
.text-green-waku{
	/*角丸*/
	border-radius: 20px; /* CSS3 */
	-webkit-border-radius: 20px; /* Safari,Google Chrome用 */
	-moz-border-radius: 20px; /* Firefox用 */
	behavior: url(../js/PIE.htc); /* IE用 */
	/*レイアウト*/
	margin: 30px 2% 30px 2%;
	padding: 20px 20px 20px 20px;
	background-color: #ffffff;
	border: 3px solid #95C149;
	text-align: left;
	color:#000000;
	font-size:20px;
	line-height: 1.4em;
}


@media (max-width:800px){
	.text-green-waku{
		font-size:18px;
	}

	.text-green-waku tr td{
		display: block;
	}
}

/**********************************************/
/*　　　　　　　マンガの タイトル　　　　　　 */
/**********************************************/
.manga_title{
	font-size: 26px;
	font-weight: 600;
	text-align: left;
	padding: 50px 0px 5px 2%;
	color:#B09A57;
}

@media screen and (max-width: 600px) {
    .manga_title{
    	font-size: 20px;
		padding: 30px 0px 5px 5px;
    }
}



/**********************************************/
/*　　　　　　　問い合わせフォーム　　　　　　 */
/**********************************************/
.contactform{
	text-align: left;
	margin: 0px 0px 0px 10%;
}

.left100{
	padding: 0 0 0 35%;
}

@media screen and (max-width: 400px) {
    .contactform{
		margin: 0px 0px 0px 10px;
    }
}


.wpcf7 input[type="text"]
{
    width: 40%;
}

.wpcf7 input[type="email"]
{
    width: 70%;
}

.wpcf7 textarea
{
    width: 80%;
}


/****************************************

          関連記事（Relation）

*****************************************/
#related-entries {
	margin: 20px 0 50px 0;
	padding: 10px 10px 10px 10px;
	background: #DFEDED;
}

#related-entries h3{
	margin: 0 0 0 0;
	color: #3B7E7F;
	font-size:22px;
}

#related-entries .related-entry{
	line-height:150%;
	/*margin-bottom:20px;*/
	clear: both;
}

#related-entries .related-entry-thumb {
	float: left;
	margin-bottom: 5px;
	padding-bottom: 5px;
}

#related-entries .related-entry-content {
	margin-left: 120px;
}

.related-entry-title{
		margin-bottom:5px;
}

.related-entry-snippet{
	margin:0 0 5px 0;
}

.related-entry-read{
	margin:0;
	font-size:12px;
}


/**********************************/
/*　　　　　宣伝エリア　　　　　 */
/**********************************/

.blog-border {
	margin: 20px 0 20px 0;
	border-width: 3px 0px 0px 0px; /* 太さ */
	border-style: solid; /* 線種 */
	border-color: #9BCCCE;   /* 線色 */
	height: 3px;         /* 高さ(※古いIE用) */
	//border: 0;
    //box-shadow: inset 0 20px 10px -10px rgba(155,204,206,0.5);

}


/***** 52.1 メインビジュアル文字 *****/

.title-black {
	color: #3B7E7F;
    font-size: 2.3em;
    font-weight: 500;
    line-height: 1.0em;
    text-align: center;

}

.three-boxes {
    overflow: hidden;
    text-align: center;
    margin-top: 1em;
    margin-bottom: 1em;
}

.three-boxes li {
	display: inline-block;
    margin-right: 0;
	margin-bottom: 5px;
}

.four-boxes {
    overflow: hidden;
    text-align: center;
    margin-top: 0;
    margin-bottom: 0;
}

.four-boxes li {
	display: inline-block;
    margin-right: 0;
	margin-bottom: 5px;
}

/****   カラーボックス  *****/


.home-subtitle-box
{
	text-align: center ;				/* テキスト、画像の真ん中寄せ *
	padding: 0 0 ;					/* 上下の余白 */
	margin-bottom: 2em ;				/* 他のブロックとのスペース */
	background: #9BCCCE ;				/* 背景色 */
	padding: 10px 0 10px 0;
	margin: 40px 0 20px 0;
}


/* 中の文字1 */
.home-subtitle-box-char {
	color: #3B7E7F;
    font-size: 2.0em;
    font-weight: 600;
    line-height: 1.4em;
    text-align: center;
	padding: 10px 0 10px 0;
}

@media screen and (max-width: 880px) {
    .home-subtitle-box-char {
    font-size: 1.5em;
    }
}

/* 中の文字2 */

.home-subtitle-box-char-mini {
	color: #3B7E7F;
    font-size: 1.4em;
    font-weight: 600;
    line-height: 1.2em;
    text-align: center;
	padding: 10px 0px 10px 0;

}

.home-subtitle-box-char-mini-w {
	color: #ffffff;
    font-size: 1.4em;
    font-weight: 600;
}

img.bottun_s{
	margin: 5px 0px 0px 0px;
	vertical-align: bottom;

}