@charset "UTF-8";

body {
  color: #333;
  padding-top: 70px;
}

h1,h2,h3,h4,h5 {
  /* font-family: "UD Shin Go Regular" ,sans-serif; */
  font-family: sans-serif;
  font-weight: normal !important;
}

p {
  /* font-family: "UD Shin Go Regular" ,sans-serif; */
  font-family: sans-serif;
  font-size: 14px;
}

/*
   sakura web font setting
   → CDN webfont disabled
   → Use system sans-serif only (normal weight)
*/


/* ====================================================== */

.navbar {
  background: #fff;
}

.navbar a.navbar-brand {
  font-size: 25px;
}

nav .breadcrumb {
  border-radius: 0px;
}

nav .breadcrumb a{
  color : #999;
}

/* ====================================================== */

.header-bar {
  /* background: linear-gradient(-135deg, #259285, #20a4c7); */
  background: linear-gradient(-135deg, #dfd960, #20a4c7);
  margin-top: 10px;
  margin-bottom: 20px;
  padding: 30px;
}

.header-bar h1.header-bar-headding{
  font-size: 25px;
  color: #fff;
  margin: 0;
}

/* ====================================================== */

#top .main {
  padding: 0 0 50px 0;
  background: #e9f4f3;
  /* background: linear-gradient(-135deg, #259285, #20a4c7); */
}

#top .main .logo {
  padding-top: 20px;
  padding-bottom: 30px;
}

#top .main h1 {
    font-size: 32px;
    line-height:1.7em;
    /* color: #1B92A9; */
    padding:10px 0px;
}

#top .main p {
    font-size: 15px;
    line-height: 2.2em;
}

#top .main .btn {
    font-size: 25px;
    margin-top: 50px;
    margin-bottom: 70px;
    padding: 20px 0;
    border-radius: 40px;
}

#top .btn-info{
    background: #48A17A;
    /* background: linear-gradient(-135deg, #259285, #20a4c7); */
    border: none;
}

#top .btn-info:hover{
    background: #64BE94;
}

#top span.vol {
  font-size: 12px;
}

#top .about {
  padding: 20px 0px;
  margin: 20px;
}

#top .about .row {
border: solid 20px #f5f5f5;
border-radius: 10px;
padding: 10px 0px;
background: #eee;
}

#top .about h3 {
font-size: 30px;
font-weight: bold;
padding: 20px;
}

#top .concept {
padding: 40px 0px;
/* background: #D3EADF; */
background: linear-gradient(-135deg, #dfd960, #20a4c7);
margin-bottom: 30px;
}

#top .concept .detail {
padding: 30px 0px;
}

#top .concept  h3 {
/* color: #48A17A; */
color: white;
font-size: 30px;
font-weight: bold;
padding: 20px;
}

#top .concept  h4 {
font-size: 22px;
padding: 10px;
font-weight: bold;
}

#top .concept  i {
/* color: #48A17A; */
color:white;
font-size: 30px;
margin-bottom: 20px;
}

/* ====================================================== */

#book .book-info {
  /* background: linear-gradient(-135deg, #eee, #ddd); */
  background: #fff;
  margin-top: 10px 0 30px 0;
}

#book .book-info h1{
  font-size: 40px;
  color: #333;
}

#book .book-info .author a{
  color: black;
}

#book .book-info .book-image{
  margin : 30px;
  color : gray;
}

#book .book-info .wisewords{
  padding: 50px 30px 80px 30px;
  font-family: serif;
  font-size: 22px;
  color: #555;
  line-height: 2em;
}

#book .book-info .wisewords i{
  font-size: 40px;
  color: #aaa;
}

#book .book-detail {
  background: #fff;
  padding: 10px;
  border:solid 5px #eee;
  border-radius: 10px;
}

#book h2 {
  font-size: 15px;
  color:#333;
  margin-top: 10px 0 20px 0;
}

#book h3 {
  font-size: 14px;
  color : #333;
  padding-bottom: 5px;
}

#book h3 i {
  color : #999;
}

#book .cp {
  font-size: 25px;
  color: #48A17A;
  margin-bottom: 10px;
}

#book .detail-border {
  border: solid 1px #ddd;
  border-radius: 15px;
  margin-bottom: 20px;
  padding:10px;
}

#book .detail-border .btn {
  font-size: 15px;
  border-radius: 20px;
  margin: 10px 3px;
  padding : 2px 8px;
}

#book p.habit{
  font-size: 15px;
  color: #333;
  line-height: 1.8em;
}

#book .habit i{
  color : #999;
}

#book .components {
  padding-bottom:20px;
}

#book .amazon {
  color: #555;
  margin-top: 20px;
  padding: 20px 0;
}

#book .amazon a {
  padding: 15px;
}

#book .amazon .btn-info{
  background: #48A17A;
  border: none;
  border-radius: 30px;
}

#book .amazon .btn-info:hover{
  background: #64BE94;
}

#book .bookbg {
	position: absolute;
	top: 200px;
	height: 200px;
	width: 100%;
	opacity: 0.7;
	filter: blur(40px);
	-webkit-filter: blur(40px);
}

/* ====================================================== */

#area-select {
  padding: 30px 0px;
}

#area-select h3 {
  font-size: 30px;
  font-weight: bold;
  padding-bottom: 10px;
}
#area-select a {
  color: #2898B3;
}
/* ====================================================== */

#area-pickup {
  padding: 30px 0px;
}

#area-pickup .area-book {
  border : solid 1px #ddd;
  border-radius: 10px;
  margin-bottom: 10px;
  padding-top:10px;
}

#area-pickup h3 {
  font-size: 30px;
  font-weight: bold;
  padding-bottom: 10px;
}

#area-pickup .title a{
  font-size: 20px;
  color: #48A17A;
  padding-left: 10px;
}

#area-pickup .author{
  padding-left: 10px;
}

#area-pickup .author a{
  font-size: 15px;
  color: black;
}

#area-pickup canvas {
  margin-bottom: 30px;
}

#area-pickup img.img_book {
  margin: 30px;
}

/* ====================================================== */

.header-bar p{
  padding-top:10px;
  margin-bottom: 0px;
  color:#333;
}

#area-select {
  padding: 30px 0px;
}

#area-select .area-thema {
  border : solid 1px #ddd;
  border-radius: 10px;
  margin-bottom: 30px;
  padding:40px 10px 10px 10px;
  min-height: 230px;
}

#area-select .area-thema .title a {
  font-size: 20px;
  color: #2898B3;
}

#area-select .area-thema p {
  color: #999;
}

#area-select .area-thema .fas {
    font-size: 50px;
    color: #2898B3;
}

#select .select-list-book {
  border-radius: 10px;
  border: solid #ddd 1px;
  padding: 20px 20px;
  margin-bottom: 25px;
  height: auto;
}

/* ====================================================== */

#area-select-3images {
  padding: 30px 0px;
}

#area-select-3images h3{
  font-size: 30px;
  font-weight: bold;
  padding-bottom: 10px;
}

#area-select-3images a{
  color: #555;
}

#area-select-3images .area-thema {
  border : solid 1px #ddd;
  border-radius: 10px;
  margin-bottom: 10px;
  padding:10px 10px 10px 10px;
  min-height: 230px;
}

#area-select-3images .area-thema .title a {
  font-size: 20px;
  color: #555;
}

#area-select-3images .area-thema p {
  color: #999;
}

.area-select-3images img{
  margin: 10px;
}

/* ====================================================== */

#component .component-list {

}

#component .component-list .author {
  padding-bottom: 10px;
}
#component .component-list .author a {
  color: black;
}

#component .component-list-book {
  border-radius: 10px;
  border: solid #ddd 1px;
  padding: 20px 20px;
  margin: 10px 0px 15px 0px;
  height: auto;
}

#component .component-list-book .badge{
  font-size: 20px;
  margin-bottom: 10px;
}

#component .badge-info {

}

#component .wiseword {
  margin-top:10px;
  margin-bottom: 20px;
  padding: 15px;
  background: #f7f7f7;
  border-radius: 10px;
}

#component .wiseword .fas  {
  color: gray;
}

#component p {
  margin: 0;
}

/* ====================================================== */

#area-components {
  padding: 30px 0px 30px 0px;
  background: #fff;
}

#area-components h3{
  padding: 30px 0px;
  font-size: 30px;
}

#area-components .btn{
  border-radius: 20px;
  margin: 15px 5px;
  font-size: 22px;
  padding : 3px 15px;
}

/* ====================================================== */

#dia .area-progress {
  padding: 50px 0px;
}

#dia .btn {
  margin :50px 0;
  padding: 10px;
  border-radius: 30px;
}

/* ラジオボタンは非表示にする */
#dia input[type=radio] {
  display: none ;
}
/* チェックされた時のスタイル */
#dia input[type="radio"]:checked + label {
  background: #17a2b8;
  color: #FFF;
}

/* マウスオーバーしたときのスタイル */
#dia .label:hover {
  background-color: #eee;
}

/* lableのスタイル */
#dia .label {
  color: #000;
  border: #ddd solid 2px;
  display: block;
  cursor: pointer;
  height: 45px;
  width: 45px;
  line-height: 45px;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 50%;
}

#dia .label-l {
  color: #000;
  border: #ddd solid 2px;
  display: block;
  cursor: pointer;
  height: 45px;
  width: 45px;
  border-radius: 50%;
}

#dia .label-m {
  color: #000;
  border: #ddd solid 2px;
  display: block;
  cursor: pointer;
  height: 35px;
  width: 35px;
  border-radius: 50%;
}

#dia .label-s {
  color: #000;
  border: #ddd solid 2px;
  height: 25px;
  width: 25px;
  border-radius: 50%;
}

#dia div.radiodes{
  display: inline-block;
  vertical-align: middle;
  margin-left: 2%;
  margin-right: 2%;
}

#dia .question {
  padding: 60px 0px 20px 0;
}

/* ====================================================== */

#output h3 {
  padding-top: 30px;
  padding-bottom: 5px;
}

#output .output-area {
  margin: 0 0 10px 0;
 }

#output .output-area img {
  margin: 20px;
 }

#output p {
  font-size: 15px;
  color: #777;
}

#output p a {
  font-size: 15px;
  color: #999;
}

#output .area-book {
  border : solid 1px #ddd;
  border-radius: 10px;
  margin: 20px 0px;
  padding-top:10px;
}

#output .title a {
  color: #48A17A;
}

#output .area-ptype {
  border : solid 1px #ddd;
  border-radius: 10px;
  margin-bottom: 10px;
  padding:30px 0 20px 0;
}

#output .area-ptype p {
  font-size: 20px;
}

/* ====================================================== */

#labo {
  margin-bottom: 50px;
}

#labo h1 {
  font-size: 28px;
  margin: 30px 0 40px 0;
}

#labo h2 {
  font-size: 18px;
  background: #f1f1f1;
  margin: 30px 0 10px 0;
  padding: 15px 30px;
  border-radius: 30px;
}

#labo h3 {
  font-size: 15px;
  font-weight: bolder;
  margin: 30px 0 10px 0;
  padding: 5px 10px;
  border-left: solid 10px #ccc;
}

#labo h4 {
  font-size: 15px;
}


#labo p {
  font-size: 15px;
  padding: 5px;
  text-indent: 1em;
  line-height: 2em;
  margin-bottom: 0;
}

#labo .author-info p{
  font-size: 13px;
  padding: 2px;
  margin: 2px;
  text-indent: 0em;
  line-height: 1.5em;
}

/* ====================================================== */

#about {
  margin-bottom: 50px;
}

#about h2 {
  font-size: 20px;
  color: #333;
  /* border-left: solid gray 10px; */
  margin: 20px 0;
  padding: 0 10px;
}

#about h3 {
  font-size: 15px;
  color: #777;
}

#about p {
  font-size: 16px;
  color: #555;
  line-height: 2.5em;
  text-indent: 1em;
  margin: 0;
}

#about .fas {
  margin: 30px;
}

#about .ex {
  color:gray;
  background: #eee;
  margin-top: 20px;
  padding: 20px;
  border-radius: 8px;
}

/* ====================================================== */

#feedback p{
  font-size: 15px;
}

#feedback button {
  margin: 20px 0;
}

#feedback .small {
  color:grey;
}

/* ====================================================== */

#privacy {
  margin: 50px 0;
}

#privacy h2{
  font-size: 15px;
}

#privacy p{
  font-size: 12px;
  color: gray;
}

#privacy li{
  font-size: 12px;
  color: gray;
}

/* ====================================================== */

#sns {
  background: #f9f9f9;
  margin-top: 40px;
  padding: 10px;
}

#sns .col-6 {
  padding: 20px;
}

/* ====================================================== */

#footer {
  font-size: 13px;
  background: #e9ecef;
  padding: 50px;
}

#footer p {
  font-size: 11px;
  color :#999;
}

#footer .copyright {
  font-size: 18px;
  color: #999;
}

#footer-link {
  padding: 50px;
}

#footer-link h5{
  padding-bottom: 10px;
}

/* ====================================================== */

#footer-card {
  /* padding: 10px; */
  /* border: solid 1px #ddd; */
  border-radius: 10px;
}

#footer-card img{
  border-radius: 10px;
  margin-bottom: 10px;
}

#footer-card p{
  font-size: 12px;
}

#footer-card a{
  color: #333;
}

/* ====================================================== */

.googlead {
  margin: 50px 0px;
}

/* ====================================================== */

/* ====================================================== */

.kids {
  padding: 40px 0px;
  background-color: #e9f4f3;
  background-image: repeating-linear-gradient(-45deg,#fff, #fff 30px,transparent 0, transparent 60px);
}
.kids p{
  font-size: 0.9em;
  line-height: 1.8em;
}

.kids a{
  color: #555;
}