@charset "UTF-8";
 /*---------------------------------
 date 20181212
 cospa's stylesheet
 ------------------------------------*/

 html {
 	font-family: sans-serif;
 }
 body {
 	background-color: #F8F8F8;
 	margin: 0;
  /*  フォントの種類  */
  font-family: -apple-system, BlinkMacSystemFont,
               "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

  /*  フォントのサイズ  */
  font-size: 16px;

  /*  フォントの色  */
  color: #333;

  /* 文字間隔の調整の設定 */
  letter-spacing: 1.5px;

  /* 行間の設定 */
  line-height: 1.75;
 }
 #wrapper {
 	margin: 0 auto;
  }
 h1 {
     position: relative;
     padding-bottom: 0.3em;
     font-size:1.5em;

}
h1::after {
     position: absolute;
     content: '';
     left: 0;
     bottom: 0;
     width: 100%;
     height: 7px;
     box-sizing: border-box;
     border-top: 3px solid #ccc;
     border-bottom: 1px solid #ccc;
}
 p {
 	line-height:1.6; /*単位をつけずに指定*/
 }
 h2 {
     position: relative;
     padding-bottom: 0.2em;
     border-bottom: 3px solid #ccc;
     font-size:1.3em;
}

h2::after {
     position: absolute;
     content: " ";
     border-bottom: solid 3px #F09AB7;
     bottom: -3px;
     width:30%;
     display: block;
}
h3 {
  position: relative;
  padding: 0.6em;
  background: #e0edff;
}

h3:after {
position: absolute;
content: '';
top: 100%;
left: 30px;
border: 15px solid transparent;
border-top: 15px solid #e0edff;
width: 0;
height: 0;
}
input[type="button"] {
  padding: 5px 10px;
  font-size: 1.1em;
  margin: 10px;
}
input[type="submit"] {
  padding: 5px 10px;
  font-size: 1.1em;
  margin: 10px;
}

/*ヘッダーの設定*/
#header{
	margin:0 0 10px 0;

}
 /*ロゴの設定*/
 .logo {
 	margin: 0 auto;
 	line-height: 0;
 	text-align: center;
 }

/*ナビゲーションはじまり*/
.nav-wrap {
	position: relative;
}
.scroll-nav {
	width: 100%;
	background: #1b2538; /* メニューの背景色 */
	overflow-x: auto;
	-webkit-overflow-scrolling: touch; /* 慣性スクロール */
}
.scroll-nav ul {
	max-width: 1024px; /* メニューの最大幅 */
	min-width: 770px; /* メニューの最小幅 */
	height: 40px;
	line-height: 40px;
	margin: 0 auto;
	list-style: none;
	padding-right: 25px; /* 右側の固定分余白を空ける */
}
.scroll-nav ul li {
	float: left;
	width: 110px; /* メニューの個別の幅 */
	text-align: center;
}
.scroll-nav ul li:hover {
	background: #222; /* マウスホバー時の背景色 */
}
.scroll-nav ul li a {
	display: inline-block;
	color: #fff; /* メニューの文字色 */
	text-decoration: none;
	width:100%;
}

.scroll-nav ul li a:hover:not(.active) {
	background-color: #a9bce2;
	width:100%;
}
.scroll-nav ul li a.active {
	background-color: #F09AB7;
}

.next-btn { /* 右側に固定する部分 */
	position: absolute;
	top: 0;
	right: 0;
	width: 25px; /* 固定部分の幅 */
	height: 40px; /* メニューの高さに合わせる */
	line-height: 40px;
	background: #1b2538;
	color: #FFF;
}
/*ナビゲーションおわり*/
/*メイン設定*/
#main {
    background-color: #fff;
	max-width:1024px;
	margin:0 auto;
	display:flex;
  padding: 0 10px 0 10px;
}
/*メイン設定おわり*/
/*左カラムの設定*/
#left_column{
	max-width: 300px;/*300以上にさせないぞ*/
	margin:15px 0 10px 0;
	padding:10px;
	order:1;
}
/*左カラムの設定おわり*/
/*左メニューの設定はじまり*/
ul.leftnav {
	width:300px;
	overflow: hidden;
	margin: 0 auto;
	padding: 0;
	list-style-type: none;

}
ul.leftnav li {
	width:100%;
	border-bottom:1px solid #eee;
	box-sizing: border-box;
	color:#1b2538;

}
ul.leftnav li a {
	display: block;
	padding: 3px 0;
	text-align:center;
	text-decoration: none;
	color: #1b2538;
}
ul.leftnav li a:hover:not(.active) {
	background-color: #F7C6D7;
}

div.aboutme{
  border: 1px solid black;
  margin: 5px;

}
.aboutme img {
  box-shadow: 1px 1px 1px 1px #bbb;   /* 影指定 */
  width: 180px;
  height: 90px;
  object-fit: cover;
  float: left;
  margin: 20px 10px 10px 10px;

}

.aboutme p {
	text-align:left;
  display:inline-block;
 	vertical-align: top; /*縦方向の揃え位置を指定*/
  width: 90%;
  font-size:0.8em;
  margin: 0px 5% 10px 5%;
}
.aboutme h3{
  border-bottom: 1px dotted #ccc;
  display:inline-block;
  vertical-align: top; /*縦方向の揃え位置を指定*/
  width: 80%;
  font-weight:normal;
  text-align: left;
  font-size:1em;
  padding-top: 10px;
  margin: 0px 5% 5px 5%;
  background: #FFF;
  }
  .aboutme h3::after{
  border-bottom:none;
  border: none;
  border-top: none;
  }

/*左メニューおわり*/

/*コンテンツエリア設定*/
#main_content{
	max-width:100%;
	margin:5px 10px 20px 10px;

	order:2;
}
/* テーブル注釈*/
.pan{
 font-size: 0.8em;
 color: #BBB;
}
.pan a:link {
  color: #BBB;
  text-decoration: none;
}
.pan a:active {
  color: #BBB;
  text-decoration: none;
}
.pan a:visited {
  color: #BBB;
  text-decoration: none;
}

/*コンテンツエリア設定おわり*/

/*フッターの設定*/
.footer {
	margin-top: 10px;

	font-size: 12px;
	color: #333;
  text-align: center;
}
 /*レスポンシブデザイン */
img {
	max-width:100%;
	height:auto;
}
 /*バナー設定 */
div .banner {
	display:flex;
	flex-wrap:wrap;
	justify-content:space-around;
	margin:10px 5px 10px 5px;
}
.banner img {
  border:1px solid #1b2538;
}

 /*リコマンド設定 */
div .recomends{
		display:flex;
		flex-wrap:wrap;
		justify-content:space-around;
}
div .recomend {
 	width: 29%;
 	text-align:center;
 }
h2.reco_title {
  text-align: left;
  padding-bottom: 0.2em;
  border-bottom: 1px dotted #ccc;
  font-size:1em;
  margin-top: 0;
}
h2.reco_title a{
  text-decoration: none;
  color: #333;
}
h2.reco_title::after {
     content: " ";
     border-bottom: none;
     display: block;
}

.recomend img {
	margin:0 auto;
	height:auto;
  box-shadow: 1px 1px 1px 1px #bbb;   /* 影指定 */
}
.recomend p {
	text-align:left;
}
.recomend p a{
  text-decoration: none;
  color: #333;
}

/*記事の一覧のcss */
div .article {
	margin: 5px;
  border-bottom: 1px dotted #ccc;

}
.article img{
	width:100px;
  height: 100px;
  object-fit: cover;
  margin-right: 15px;
  margin-left: 15px;
}
.article h2{
	display:inline-block;
 	vertical-align: top; /*縦方向の揃え位置を指定*/
  max-width: 65%;
 	font-weight:normal;
  text-align: left;
  border-bottom:none;
  font-size:1em;
  padding-top: 10px;
}
.article h2::after{
  border-bottom:none;
}
.article h2 a{
  text-decoration: none;
  color: #333;
}
/*記事の紹介のcss */
div .intro {
  width: 100%;
	margin: 0 0 20px 0;
}
.intro p{
  width: 45%;
  display: inline-block;

  padding-top: 10px;
  font-size: 1.2em;
}
.intro a {
  color:#333;
  text-decoration: none;
  }

  a.intro_btn {
    display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
    background: #3B91DE;/*ボタン色*/
    color: #FFF;
    box-shadow: 1px 1px 1px 1px #bbb;   /* 影指定 */
    border-radius: 3px;
    margin-bottom: 10px;
    margin-right: 5px;
    font-weight: normal;
  }

.intro img{
  width: 340px;
  height: 180px;
  object-fit: cover;
  float: left;
  padding-right: 15px;
}
/*本の紹介のcss */
div .books {
  width: 100%;
	margin: 0 0 20px 0;
}
.books p{
  width:65%;
  display: inline-block;

  padding-top: 10px;
}

  a.books_btn1 {
    display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
    background: #ff9900;/*ボタン色*/
    color: #FFF;
    box-shadow: 1px 1px 1px 1px #bbb;   /* 影指定 */
    border-radius: 3px;
    margin-bottom: 10px;
    margin-right: 5px;
    font-weight: normal;
  }
  a.books_btn2 {
    display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
    background: #bf0000;/*ボタン色*/
    color: #FFF;
    box-shadow: 1px 1px 1px 1px #bbb;   /* 影指定 */
    border-radius: 3px;
    margin-bottom: 10px;
    margin-right: 5px;
    font-weight: normal;
  }

.books img {
  width: 200px;
  height: 100%;
  object-fit: cover;
  float: left;
  padding-right: 15px;

}
/*floatをクリアするcss */
.clear-element {
  clear: both;
}
/*目次のcss */
.mokuji {
  background: #EEE;
  border: solid 1px #CCC;
  padding: 0.5em;
}

.mokuji ol li {
  line-height: 0.8;
  padding: 0.3em 0;
}
.mokuji li a {
  text-decoration:none;
  color:#4682b4;
}

/*ボタンのcss */
.square_btn{
    display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
    background: #1b2538;/*ボタン色*/
    color: #FFF;
    box-shadow: 1px 1px 1px 1px #bbb;   /* 影指定 */
    border-radius: 3px;
    margin-bottom: 10px;
    margin-right: 5px;
}
.square_btn:active {/*ボタンを押したとき*/
    -ms-transform: translateY(4px);
    -webkit-transform: translateY(4px);
    transform: translateY(4px);/*下に動く*/
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);/*影を小さく*/
    border-bottom: none;
}

/*keisanページのラジオボタンcss */
.radio-inline__input {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
}

.radio-inline__label {
    display: inline-block;
    padding: 0.5rem 1rem;
    margin-right: 18px;
    border-radius: 3px;
    transition: all .2s;
}

.radio-inline__input:checked + .radio-inline__label {
    background: #3B91DE;
    color: #fff;
    text-shadow: 0 0 1px rgba(0,0,0,.7);
}
/*keisanページのテーブルcss */
table .tbl-r05 {
    border-collapse: separate;  /* 表の線と線の間を空ける */
    border-spacing:  5px;       /* 表の線と線の間の幅 */
}
.tbl-r05 td {
    padding: 5px 10px;          /* 余白指定 */
    background: #F0F8FF;
    text-align: right;
}
td.text {
  text-align: left;
}

.tbl-r05 th {
    padding: 5px 10px;
    background-color:  #D7EEFF; /* 背景色指定 */
    color:  black;               /* 文字色指定 */
    font-weight:  normal;       /* 文字の太さ指定 */
    font-weight: bold;
}

.tbl-r05 td:first-child {
    padding: 5px 20px;
  background: #3B91DE;
  color: #fff;
  text-align: center;
}
.tbl-r05 td:first-child a{
  text-decoration: none;
  color: #fff;
}
td.tbl-r04 {
    padding: 5px 20px;
  background: #3B91DE;
  color: #fff;
  text-align: center;
}
/* テーブル注釈*/
.note_table{
 font-size: 0.8em;
 color: #BBB;
}
/*keisanページの総合計css */
p.goukei {
  display: block;
  background-color: #1b2538;
  color: #fff;
  padding: 10px;
  font-size: 1.2em;
}

/*diagnosis結果ページのフォーム背景css */
div.diagnosis {
  text-align: center;
}
.diagnosis img {
  max-width: 50%;
}
.diagnosis p {
  font-size: 1.2em;
  margin: 0;
}
p.proportion {
  font-weight: bold;
  font-size: 4em;
  margin: 0;
}
.diagnosis table {
  margin: 0 auto;
  padding-bottom: 40px;
}

#blog_txt img {
  display: block;
  margin: 0 auto;
  padding-bottom: 20px;
  padding-top: 20px;
}
/* マーカー線・赤*/
.marker1{
 background:linear-gradient(transparent 75%, #F09AB7 75%);
font-weight:bold;
}
/* マーカー線・青 */
.marker2 {
 background: linear-gradient(transparent 75%, #7fbfff 75%);
font-weight: bold;
}
.marker {
 background: linear-gradient(transparent 0%, #c1e0ff 0%);
font-weight: bold;
}
/* ボックス　付箋*/
.box1 {
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #232323;
    background: #FFFFE0;
    border-left: solid 10px #ffc06e;
}
.box1 p {
    margin: 0;
    padding: 0;
}
/* ボックス　二重線*/
.box2 {
    padding: 0.5em 1em;
    margin: 2em 0;
    background: #FDEEF3;
    border: double 5px #F7C6D7;
}
.box2 p {
    margin: 0;
    padding: 0;
}
/* ボックス　ポイント*/
.box3 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #62c1ce;
}
.box3 .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    vertical-align: middle;
    font-size: 17px;
    background: #62c1ce;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.box3 p {
    margin: 0;
    padding: 0;
}
/* ボックス4　参照データ*/
.box4 {
  padding: 0.5em 1em;
  margin: 2em 0;
  background: #EEE;
}
.box4 a:link{
  color: #333;
  text-decoration: none;
}
.box4 a:visited{
  color: #333;
  text-decoration: none;
}
/*yesno診断css */
.yesno {
        display: inline-block;
        width: 97%;
        height: auto;
        background-color: #FDEEF3;
        padding: 20px 10px 20px 10px;
        box-shadow: 1px 1px 1px 1px #bbb;   /* 影指定 */
}
.yesno img{
  max-width: 30%;
  display: block;
  margin: 0 auto;
}
.yesno h2 {
    text-align: center;
  font-size: 1.5em;
  margin: 0 auto;
  padding: 0.25em 1em;
  background-color: white;
  border-bottom: 3px solid #ccc;
  width:90%;
}
.yesno h2::after {
     position: absolute;
     content: "";
     border-bottom: solid 3px #F09AB7;
     bottom: -3px;
     left: 0px;

     display: block;
}

.yesno p {
  width: 90%;
  margin: 10px 5% 10px 5%;
}

.yesno ul li {
    list-style:none;
    float: left;
    text-align: center;
    display: block;
    color: #FFF;
    background-color: #1b2538;
    margin: 20px 3% 0 0;
    line-height: 100px;
    font-size: 1.2em;
    width: 44%;
    box-shadow: 1px 1px 1px 1px #bbb;   /* 影指定 */
}
.yesno li a {
  color: #FFF;
  text-decoration: none;
  font-size: 1.2em;
  font-weight: bold;

}
.positionFit {
    left: 0px;
    top: 20px;
}
/*メールフォームcss */
#formWrap {
	width:600px;
	margin:0 auto;
	color:#555;
	line-height:120%;
	font-size:90%;
}
table.formTable{
	width:100%;
	margin:0 auto;
	border-collapse:collapse;
}
table.formTable td,table.formTable th{
	border:1px solid #ccc;
	padding:10px;
}
table.formTable th{
	width:30%;
	font-weight:normal;
	background:#efefef;
	text-align:left;
}

/*アドセンス記事下レスポンシブcss */
.kiziad {
	padding:0px !important;
}

.adleft {float:left; width:336px;}
.adright {float:right; width:336px;}
.hrclear {clear:both;}
hr.hrclear {display:none;}
/*アドセンスh2上css */
div.adh2 {
  width: 680px;
}


/*スマホ向けのcss */
@media (max-width:767px){
	html * {
		box-sizing:border-box;
	}
	.wrapper {
	margin:0 8px;
	}

	.logo img {
		width:400px;
	}

	#main{
		display:block;
    max-width:98%;
    margin-top: -5px;
	}
  #main_content{
  	margin-top: 0px;
    padding-top: 5px;
  }
	#left_column{
		max-width: 100%;
		padding:5px;
	}
  div.serch{
    margin-top: 20px;
  }
	ul.leftnav {
		width:100%;
	}
	.scroll-nav ul {
	padding: 0;
}
.scroll-nav ul li {
	width: 14.2%; /* メニューの個別の幅 */
}
.next-btn {
	display: none; /* 右側の固定部分を非表示 */
}
div .recomend {
 	width: 45%;
}

/*keisanページのテーブルcss */
.tbl-r05 {
  width: 100%;
}
.tbl-r05 .thead {
  display: none;
}
.tbl-r05 tr {
  width: 100%;
}
.tbl-r05 td {
  display: block;
  text-align: right;
  width: 100%;
}
.tbl-r05 td:first-child {
  background: #3B91DE;
  color: #fff;
  font-weight: bold;
  text-align: center;
}
.tbl-r05 td:before {
  content: attr(data-label);
  float: left;
  font-weight: bold;
  margin-right: 10px;
}
td.tbl-r04 {
  background: #3B91DE;
  color: #fff;
  font-weight: bold;
  text-align: center;
}
/*記事の紹介のcss */
.intro p{
  width: 100%;
  margin: 0 10px 0 10px;
}

.intro img{
  width: 100%;
  height: 180px;
  object-fit: cover;
  float: center;
  padding-right: 0;
}
/*本の紹介のcss */
.books p{
  width: 100%;
  margin: 0 10px 0 10px;
}

.books img{
  padding-right: 0;
}
/*yesno診断cssのcss */
.yesno {
        width: 100%;
}
.yesno h2 {
  font-size: 1.1em;
}
.article h2{
  max-width: 55%;
  display:inline-block;
 	vertical-align: top; /*縦方向の揃え位置を指定*/
  padding-top: 0;
}
/*メールフォーム*/
#formWrap {
	width:95%;
	margin:0 auto;
}
table.formTable th, table.formTable td {
	width:auto;
	display:block;
}
table.formTable th {
	margin-top:5px;
	border-bottom:0;
}
input[type="text"], textarea {
	width:80%;
	padding:5px;
	font-size:110%;
	display:block;
}
input[type="submit"], input[type="reset"], input[type="button"] {
	display:block;
	width:100%;
	height:40px;
}

.kiziad {padding:0 !important; width:300px; margin:0 auto;}
	.adright {display:none;}
	.adleft {width:300px;}

  div.adh2 {
    width: 300px;
  }

}