@charset "utf-8";

/* 全体の幅 */
#wrap{
	max-width: auto;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 102px;
	padding:0 0.1em;
	background-color: #fffeff;
	box-sizing: border-box;
}
@media(min-width: 769px){
	#wrap{
		max-width: 1024px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 122px;
		padding:0 10px;
		background-color: #fffeff;
		box-sizing: border-box;
	}
}
/* 見出し */
/* h1はロゴ・説明文枠に配置 */
h2{
	margin: 0.25em;
	font-size: 1.5em;
	font-weight: bold;
	text-align: center;
	color: #ff7ac1;
}
@media(min-width:769px){
	h2{
		margin: 0.25em;
		font-size: 2em;
		font-weight: bold;
		text-align: center;
		color: #ff7ac1;
	}
}

#ryoukin h2{
	margin: 0.25em;
	font-size: 1.5em;
	font-weight: bold;
	text-align: center;
	color: #7e7;
}
@media(min-width:769px){
#ryoukin h2{
		margin: 0.25em;
		font-size: 2em;
		font-weight: bold;
		text-align: center;
		color: #7e7;
	}
	
}

h3{
	font-size: 1.25em;
	font-weight: bold;
	text-align: center;
	color: #0cf;
}
@media(min-width: 769px){
	h3{
		font-size: 1.5em;
		font-weight: bold;
		text-align: center;
		color: #0cf;
	}
}

p{
	font-size: 1em;
	line-height: 2em;
	margin-bottom: 0.875em;
}

.index-link{
	display: block;
	width: 250px;
	height: 30px;
	line-height: 30px;
	margin: 0.25em auto;
	padding: 0.5em 0;
	font-weight: bold;
	color: #eee;
	border-bottom: solid 5px #ee46a0;
	border-right: solid 5px #ee46a0;
	background: #ff57b0;
	border-radius: 5px;
	text-align: center;
	font-size: 0.875em;
}
.index-link:after{
	content: " >>";
}

.index-link:active{
	width: 255px;
	height: 35px;
	border: none;
	background:#ff7abf;
}
@media(min-width: 769px){
	.index-link{
		display: block;
		width: 300px;
		height: 30px;
		line-height: 30px;
		margin: 0.25em auto;
		padding: 0.5em 0;
		font-weight: bold;
		color: #eee;
		border-bottom: solid 5px #ee46a0;
		border-right: solid 5px #ee46a0;
		background: #ff57b0;
		border-radius: 5px;
		text-align: center;
		font-size: 1em;
	}
	.index-link:active{
		width: 305px;
		height: 35px;
		border: none;
		background:#ff7abf;
	}
}
.index-link:hover{
	opacity:0.8;
}
.text-link{
	color: #03f;
	font-weight: bold;
}
.text-link:hover{
	color: #25f;
	text-decoration: underline;
}

.index-link2{
	display: block;
	width: 160px;
	height: 30px;
	line-height: 30px;
	margin: 0.25em auto;
	padding: 0.5em 0;
	font-weight: bold;
	color: #eee;
	border-bottom: solid 5px #ee46a0;
	border-right: solid 5px #ee46a0;
	background: #ff57b0;
	border-radius: 5px;
	text-align: center;
	font-size: 0.875em;
}

.index-link2:after{
	content: " >>";
}

.index-link2:active{
	width: 160px;
	height: 35px;
	border: none;
	background:#ff7abf;
}
	
/* 全画像の調整 */
.default_img{
	width: 100%;
	height: auto;
}

/*----- ヘッダー ----------------------*/
/* 電話相談専用ページ表示 */
header .senyo_p{
	font-size: 1em;
	text-align: center;
	margin-bottom: 0;
}

/* ロゴと連絡先を横並び スマホ */
/* ヘッダー外枠 */
	.header_upper{
		overflow: hidden;
		display: inline-flex;
		width: 100%;
		height: auto;
		margin: 0 auto;
		padding: 0 1.25em 0;
		box-sizing: border-box;
	}
/* ヘッダーロゴ枠 */
	.header_upper .logo_left{
		display: inline-block;
	}
/* ロゴ */
	.header_upper .logo_left img{
		width: 70%;
		margin: 1.5em auto 0;
		margin-left: 0;
		padding-top: 0;
		box-sizing: border-box;
	}
	h1{
	margin: auto;
	padding: 0.5em 0.5em 0.5em 0.25em;
	font-size: 1.25em;
	font-weight: bold;
	text-align: left;
	line-height: 1.75em;
	color: #222;
}

/* ヘッダー大見出し枠 */
	.header_upper .logo_right{
		float: right;
		margin-left: 0;
		font-size: 0.875em;
		line-height: 1.75em;
		margin-bottom: 0.5em;
	}
	
/* ヘッダー下部説明文 */
.header_under p{
	font-size: 1em;
	margin-bottom: 0.5em;
	line-height: 1.75em;
}

/*----- ヘッダー上部　ロゴと連絡先を横並び パソコン ----------*/
@media(min-width: 769px){
	/* 電話相談専用ページ表示 */
	header .senyo_p{
		font-size: 1.5em;
		text-align: center;
		margin-bottom: 0;
	}
/* ヘッダー外枠 */
	.header_upper{
		overflow: hidden;
		display: inline-flex;
		width: 100%;
		height: auto;
		margin: 0 auto;
		padding: 0 1.25em 0;
		box-sizing: border-box;
	}
/* ヘッダーロゴ枠 */
	.header_upper .logo_left{
		display: inline-block;
	}
/* ロゴ */
	.header_upper .logo_left img{
		width: 100%;
		margin: 0 auto;
		padding-top: 1em;
		box-sizing: border-box;
	}
	
	h1{
		margin: auto;
		padding: 0.5em 0.5em 0.5em 3em;
		font-size: 1.5em;
		font-weight: bold;
		line-height: 2em;
		text-align: left;
		color: #222;
	}

/* ヘッダー画像横大見出し枠 */
	.header_upper .logo_right{
		float: right;
		font-size: 1em;
		line-height: 1.5em;
		margin-bottom: 0.5em;
	}
/* ヘッダー下部説明文 */
	.header_under p{
		font-size: 1em;
		line-height: 1.5em;
	}
}

/*----- グローバルナビゲーション --------------------*/
nav ul{
	display: flex;
}
nav li{
	display: block;
	flex: 1;
	margin: 1px;
}
nav a{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	line-height: 1.5em;
	padding: 3px 0.1px;
	font-size: 0.65em;
	vertical-align: middle;
	text-align: center;
	color: #fff;
	background-color: #9bf;
}
@media(min-width: 769px){
	nav a{
		display: flex;
		align-items: center;
		justify-content: center;
		height: 40px;
		line-height: 1.5em;
		padding: 3px 0.5px;
		font-size: 1em;
		vertical-align: middle;
		text-align: center;
		color: #fff;
		background-color: #9bf;
	}
}

a.tel:hover{opacity:0.8;}
nav a:hover{background-color: #bdf;}
@media(min-width: 769px){
	nav ul{
		display: flex;
	}
	nav li{
		display: block;
		flex: 1;
		margin: 1px;
	}
	nav a{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 60px;
	font-size: 1.25em;
	background-color: #9bf;
	}
	
	a.tel:hover{
		opacity:0.8;
	}
	nav a:hover{
		color:#fff;
		background-color: #bdf;
	}
}

/* ナビゲーション下部画像 - 三つの安心の画像 */
.ansin{
	margin-bottom: 1em;
}
.ansin img{
	width: 100%;
	height: auto;
}

/* 相談時間帯テーブル */
.jikan{
	width: 100%;
	margin: 0.75em auto;
	box-sizing: border-box;
}
.jikan caption{
	font-size: 1em;
	font-weight: bold;
}
.jikan th,.jikan td{
	border: solid 1px #000000;
	text-align: center;
}
.jikan th{
	width: 20%;
	font-size: 16px;
}
.jikan td{
	width: 40%;
	font-size: 16px;
}
@media(min-width: 769px){
	.jikan{
		width: auto;
		height: auto;
		margin: auto;
	}
	.jikan caption{
		font-size: 24px;
		font-weight: bold;
	}
	.jikan th,.jikan td{
		border: solid 1px #000000;
		text-align: center;
	}
	.jikan th{
		width: 5em;
		font-size: 1em;
	}
	.jikan td{
		width: 17.75em;
		font-size: 1em;
	}
}

.link-list{
	display: flex;
	justify-content: center;
}

.link-list li{
	margin: 0 0.25em
}

@media(min-width: 769px){
	.link-list li{
		margin: 0 0.25em
	}
	.index-link{
		display: block;
		width: 300px;
		height: 30px;
		line-height: 30px;
		margin: 0.25em auto;
		padding: 0.5em 0;
		font-weight: bold;
		color: #eee;
		border-bottom: solid 5px #ee46a0;
		border-right: solid 5px #ee46a0;
		background: #ff57b0;
		border-radius: 5px;
		text-align: center;
		font-size: 1em;
	}
	.index-link:active{
		width: 305px;
		height: 35px;
		border: none;
		background:#ff7abf;
	}
}



/*----- main --------------------*/
#aboutlove h2,#aboutlove h3{text-align:center;}

/* telconsul */
#telconsul ul{
	padding: 10px 20px;
	margin: 5px;
	border-radius: 10px;
	background-color: #bbffff;
}

/* aside */
aside{
	margin-bottom: 10px;
}
#sankou,#aside02,#aside03{
	border:dotted 1px #000;
	text-align:center;
	padding-top:20px;
	padding:0 10px;
}

/*----- 事務所概要 -----*/
#jimusho_table{
	width:100%;
	margin: auto;
	border-top: dotted 1px #000000;
	box-sizing: border-box;
}
#jimusho_table th, #jimusho_table td{
	padding: 0.5em 0;
	border-bottom: dotted 1px #000;
	box-sizing: border-box;
}
#jimusho_table th{
	width: 25%;
	font-weight: bold;
	border-right: dotted 1px #000;
	text-align: center;
}
#jimusho_table td{
	width: 75%;
	text-align: left;
	padding-left: 2px;
}
#jimusho_table a{
	font-size: 0.8em;
	color: #ff33ff;
	font-weight: bold;
}

#jimusho_table a:hover{
	color: #ff55ff;
	text-decoration: underline;
}

/*----- 事務所概要　pc ---------------------------------------------------------*/
@media(min-width: 769px){
	#jimusho_table{
		width: 700px;
		margin: auto;
		border-top: dotted 1px #000000;
		box-sizing: border-box;
	}
	#jimusho_table th, #jimusho_table td{
		padding: 0.5em 0;
		border-bottom: dotted 1px #000;
		box-sizing: border-box;
	}
	#jimusho_table th{
		width: 250px;
		font-weight: bold;
		border-right: dotted 1px #000;
		text-align: center;
	}
	#jimusho_table td{
		width: 450px;
		text-align: left;
		padding-left: 1em;
	}
	#jimusho_table a{
		font-size: 1em;
		color: #ff33ff;
		font-weight: bold;
	}

	#jimusho_table a:hover{
		color: #ff55ff;
		text-decoration: underline;
	}
}

/* 相談時間帯テーブル スマホ */
#jimusho_jikan{
	width: 100%;
	margin: 20px auto;
	box-sizing: border-box;
}
#jimusho_jikan th,#jimusho_jikan td{
	border: solid 1px #000000;
	text-align: center;
}
#jimusho_jikan th{
	width: 20%;
	font-size: 14px;
}
#jimusho_jikan td{
	width: 40%;
	font-size: 14px;
}
/* 相談時間目安 pc */
@media(min-width: 769px){
	#jimusho_jikan{
		width: 700px;
		margin: 20px auto;
		box-sizing: border-box;
	}
	#jimusho_jikan th,#jimusho_jikan td{
		border: solid 1px #000000;
		margin: auto;
		margin-bottom: 20px;
		text-align: center;
	}
	#jimusho_jikan th{
		width: 20%;
		font-size: 18px;
	}
	#jimusho_jikan td{
		width: 40%;
		font-size: 18px;
	}
}

/* footer */
footer{
	border: double 2px #000;
}

#footer_nav a span{
	display: block;
	text-align: center;
	font-size: 0.8em;
	}
#footer_nav a:hover{
	color: #fff;
	background-color: #00cfb0
	}

footer p{
	text-align: center;
	line-height: none;
	}
#footer_under{
	width: 100%;
	font-size: 16px;
}

footer th,footer td{
	display: block;
	width: 100%;
	font-size: 16px;
	text-align: left;
	}

.addr{
	margin-bottom: 0;
	padding: 2px;
	text-align: center;
	font-size: 12px;
	letter-spacing: 2px;
	background-color: #7d7d7d;
	color: #fff;
}
.addr a{
	color: #24e;
	font-weight: bold;
	text-decoration: underline;
}

@media(min-width:769px){
#footer_under{
	width:100%;
	border: double 2px #000;
	font-size:16px;
}

footer th,footer td{display:table-cell;font-size:20px;}
#footer_under th{width:35%;text-align:right;padding-left:8em;}
#footer_under td{width:65%;text-align:left;text-indent:5em;}

}

/* ------ 恋愛相談Q&Aページ ----- */
#love_qa .question:before{
	margin-right: 0.5em;
	padding: 0.5em;
	content: "Q";
	color: #fff;
	background-color: #00c6d4;
	display: inline-block;
	width: 1em;
	line-height: 1em;
	text-align: center;
	text-indent: 0;
	border-radius:100%;
}
#love_qa .answer:before{
	content:"A";
	color:#fff;
	background-color:#fa75b1;
	display:inline-block;
	width:1em;
	text-align:center;
	text-indent:0;
	line-height:1em;
	margin-right: 0.75em;
	padding:0.5em;
border-radius:100%;
}

details{
	margin-bottom: 0.875em;
}
summary{
	margin-bottom: 0.5em;
}

#trouble p,#trouble p{
	line-height:2em;
	padding-left:2em;
	text-indent:-2em;
}
#trouble .bold{border-top:dotted 1px #000000;}
#trouble p{margin-bottom:10px;}
#trouble p{margin-bottom:20px;}
#trouble .question:before{
	content:"Q";
	color:#fff;
	background-color:#00c6d4;
	display:inline-block;
	width:1em;
	line-height:1em;
	text-align:center;
	text-indent:0;
	padding:0.5em;
	border-radius:100%;
}
#trouble .answer:before{
	content:"A";
	color:#fff;
	background-color:#fa75b1;
	display:inline-block;
	width:1em;
	text-align:center;
	text-indent:0;
	line-height:1em;
	padding:0.5em;
	border-radius:100%;
}

/* 「telはコチラ」フェードで追従するcss */
#page-tel{
	position: fixed;/*　ウィンドウの端から計算して固定表示 */
	bottom: 50px;
	right: 0;
	box-sizing: border-box;
	width: 100%;
	margin-bottom: 0;
	
}
#page-tel a{
	background-color: #ff66ff;
	color: #fff;
	padding: 10px 50px;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	display: block;
	opacity: 0.8;
}
#page-tel a:hover{
	background: #ff44ff;
}
@media(min-width: 768px){
	#page-tel{
	position: fixed;/*　ウィンドウの端から計算して固定表示 */
	bottom: 70px;
	right: 0;
	box-sizing: border-box;
}
}

/* ナビゲーションの追従 */
.fixed{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	opacity: 0.9;
}

/* フェードで追従するtopへ戻る、ナビゲーション案内 */
#page-top{
	position: fixed; /*　ウィンドウの端から計算して固定表示 */
	bottom: 100px;
	right: 10px;
	z-index: 300;
}
#page-top a{
	display: block;
	background-color: #fff;
	text-decoration: none;
	width: 50px;
	height: 50px;
	line-height: 70px;
	text-align: center;
	border: solid 3px #999;
	border-radius: 50px;
}
@media(min-width: 768px){
	#page-top{
		position: fixed; /*　ウィンドウの端から計算して固定表示 */
		bottom: 120px;
		right: 10px;
		z-index: 300;
	}
}

/* トップページに戻るボタンを設置する */
#toppage-return{
	position: fixed; /*　ウィンドウの端から計算して固定表示 */
	background-color: #96f;
	top: 10px;
	left: 50%;
	transform: translate(-50%,0);
	padding: 0.5em;
	border-radius: 2em;
	color: #eee;
	opacity: 0.8;
	z-index: 300;
}
#toppage-return a{
	display: block;
	background-color: #fff;
	text-decoration: none;
	width: 50px;
	height: 50px;
	line-height: 70px;
	text-align: center;
	border-radius: 50px;
}
@media(min-width: 768px){
	#toppage-return{
		position: fixed; /*　ウィンドウの端から計算して固定表示 */
		background-color: #96f;
		top: 10px;
		left: 50%;
		padding: 0.5em;
		border-radius: 2em;
		color: #eee;
		opacity: 0.8;
		z-index: 300;
	}
}

/* 基本フォント装飾 */
/* フォントの基本装飾 */
.bold-20{
	font-size:16px;
	font-weight: bold;
	}
.bold-24{
	font-size:18px;
	font-weight: bold;
	}
.bold-28{
	font-size:20px;
	font-weight: bold;
	}
.red-20{
	font-size: 16px;
	font-weight: bold;
	color: #ff0000;
}
.red-24{
	font-size: 18px;
	font-weight: bold;
	color: #ff0000;
}
.red-28{
	font-size: 20px;
	font-weight: bold;
	color: #ff0000;
}
.pink-20{
	font-size: 18px;
	font-weight: bold;
	color: #ff9999;
}
.pink-24{
	font-size: 20px;
	font-weight: bold;
	color: #ff9999;
}
.pink-28{
	font-size: 22px;
	font-weight: bold;
	color: #ff9999;
}
.ora-20{
	font-size: 18px;
	font-weight: bold;
	color: orange;
}
.ora-24{
	font-size: 20px;
	font-weight: bold;
	color: orange;
}
.ora-28{
	font-size: 22px;
	font-weight: bold;
	color: orange;
}
.note{
	font-size: 12px;
	line-height: 0;
}
.under-lb20{
	font-size: 18px;
	font-weight: bold;
	background: linear-gradient(transparent 80%,#00ffff 80%);
}
.under-lb24{
	font-size: 20px;
	font-weight: bold;
	background: linear-gradient(transparent 80%,#00ffff 80%);
}
.under-ora20{
	font-size: 18px;
	font-weight: bold;
	background: linear-gradient(transparent 80%,#ff6600 80%);
}
.under-ora24{
	font-size: 20px;
	font-weight: bold;
	background: linear-gradient(transparent 80%,#ff6600 80%);
}
.under-pink20{
	font-size: 18px;
	font-weight: bold;
	background: linear-gradient(transparent 80%,#ff9999 80%);
}
.under-pink24{
	font-size: 20px;
	font-weight: bold;
	background: linear-gradient(transparent 80%,#ff9999 80%);
}
.under{
	text-decoration:underline;
	font-size: 18px;
}
.ul{
	font-size:16px;
	margin:20px 10px;
	padding: 10px 30px;
	list-style-type: disc;
	border-radius: 10px;
	background-color: #c6ffa3;
}
.ol{
	font-size: 1em;
	margin:0.25em 0.15em;
	padding: 0.25em 0.15em;
	list-style-type:　decimal;
	border-radius: 10px;
	background-color: #a3ffe3;
}
.disc li{
	padding-left: 5px;
	margin-left: 1em;
	line-height: 2em;
	list-style-type: disc;
}
.decimal li{
	padding-left: 5px;
	margin-left: 1em;
	line-height: 2em;
	list-style-type: decimal;
}
.back{
	background: #dddddd;
	padding: 10px;
	margin: 5px;
	border-radius: 5px;
}
.mokuji{
	font-size: 16px;
	margin: 30px 0;
	padding: 10px 10px;
	border-radius: 10px;
	background-color: #eeeeee;
}

.mokuji li{
	list-style-type: disc;
	list-style-type: decimal;
}
.mokuji a{
	font-size: 14px;
	color: #0000ff;
	text-decoration: underline;
}
.mokuji a:hover{
	color: #0066ff;
	text-decoration: underline;
}
.mokuji:before{
	content: "--- 目次 ---";
}
.ol li,.ul li,.mokuji li,.back li{
	margin-left: 30px;
	font-size: 16px;
	line-height: 2em;
}

@media(min-width: 769px){
	.bold-20{
		font-size:20px;
		font-weight: bold;
		}
	.bold-24{
		font-size:24px;
		font-weight: bold;
		}
	.bold-28{
		font-size:28px;
		font-weight: bold;
		}
	.red-20{
		font-size: 20px;
		font-weight: bold;
		color: #ff0000;
	}
	.red-24{
		font-size: 24px;
		font-weight: bold;
		color: #ff0000;
	}
	.red-28{
		font-size: 28px;
		font-weight: bold;
		color: #ff0000;
	}
	.pink-20{
		font-size: 20px;
		font-weight: bold;
		color: #ff9999;
	}
	.pink-24{
		font-size: 24px;
		font-weight: bold;
		color: #ff9999;
	}
	.pink-28{
		font-size: 28px;
		font-weight: bold;
		color: #ff9999;
	}
	.ora-20{
		font-size: 20px;
		font-weight: bold;
		color: orange;
	}
	.ora-24{
		font-size: 24px;
		font-weight: bold;
		color: orange;
	}
	.ora-28{
		font-size: 28px;
		font-weight: bold;
		color: orange;
	}
	.note{
		font-size: 12px;
		line-height: 0;
	}
	.under-lb20{
		font-size: 20px;
		font-weight: bold;
		background: linear-gradient(transparent 80%,#00ffff 80%);
	}
	.under-lb24{
		font-size: 24px;
		font-weight: bold;
		background: linear-gradient(transparent 80%,#00ffff 80%);
	}
	.under-ora20{
		font-size: 20px;
		font-weight: bold;
		background: linear-gradient(transparent 80%,#ff6600 80%);
	}
	.under-ora24{
		font-size: 24px;
		font-weight: bold;
		background: linear-gradient(transparent 80%,#ff6600 80%);
	}
	.under-pink20{
		font-size: 20px;
		font-weight: bold;
		background: linear-gradient(transparent 80%,#ff9999 80%);
	}
	.under-pink24{
		font-size: 24px;
		font-weight: bold;
		background: linear-gradient(transparent 80%,#ff9999 80%);
	}
	.under{
		text-decoration:underline;
		font-size: 20px;
	}
	.disc li{
		padding-left: 5px;
		margin-left: 1em;
		margin-bottom: 10px;
		line-height: 2em;
		list-style-type: disc;
	}
	.decimal li{
		padding-left: 5px;
		margin-left: 1em;
		margin-bottom: 10px;
		line-height: 2em;
		list-style-type: decimal;
	}
	.ul{
		font-size:16px;
		margin:20px 10px;
		padding: 10px 30px;
		list-style-type: disc;
		border-radius: 10px;
		background-color: #c6ffa3;
	}
	.ol{
		font-size: 16px;
		margin:20px 10px;
		padding: 10px 30px;
		list-style-type:decimal;
		border-radius: 10px;
		background-color: #a3ffe3;
	}
	.back{
		background: #dddddd;
		padding: 10px;
		margin: 5px;
		border-radius: 5px;
	}
	.mokuji{
		font-size: 16px;
		margin: 20px 0;
		padding: 10px 10px;
		border-radius: 10px;
		background-color: #eeeeee;
	}
	
	.mokuji li{
		list-style-type: disc;
		list-style-type: decimal;
	}
	.mokuji a{
		font-size: 16px;
		color: #0000ff;
		text-decoration: underline;
	}
	.mokuji a:hover{
		color: #0066ff;
		text-decoration: underline;
	}
	.ol li,.ul li,.mokuji li,.back li{
		margin-left: 30px;
		font-size: 16px;
		line-height: 2em;
	}
}