/*
Theme Name: habakiri-child
Theme URI: http://2inc.org
Description: Habakiri の子テーマです
Author: Takashi Kitajima
Author URI: http://2inc.org
Version: 1.0.0
License: GNU General Public License
License URI: license.txt
Template: habakiri
*/

body {
	font-size: 13px;
    /* ゴシック体の場合 */
    font-family: "Roboto", "Droid Sans", "游ゴシック", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
    /* 明朝体の場合 */
    font-family: "Roboto", "Droid Sans", "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    line-height: 1.8;
    font-weight: 500;
	letter-spacing: .1em;
}

ul, ol, dl, table {
    margin-bottom: 20px;
	font-family: -apple-system;
}
ul {
    list-style-type:none;
    margin-block-start: 0em;
    margin-block-end: 0em;
    padding-inline-start: 0px;
}
li.list-group-item {
	padding: 9px 15px!important;
	border-bottom: 2px dashed #ddd!important;
}
p{
	margin-bottom: 10px;
	font-family: -apple-system;
	line-height: 1.7em;
}

h2, .h2 {
    font-size: 26px;
    margin: 40px 0 20px;
	letter-spacing: .1em
}

h3, h3 {
    font-size: 22px;
	letter-spacing: .1em
}
h4, h4 {
	font-weight: normal;
	font-family: -apple-system;
	line-height: 1.5em;
	letter-spacing: .25em
}
.ssmall{
  font-size:10px;
  transform: scale(0.8) translate(-10%);
  width: 130%;
  height:100%;
}
.narrow {
    font-size:10px;
    transform: scale(1, 1) translate(-5%);
	overflow:visible;
    white-space: nowrap;
	margin-right:-20px;
	padding-right:0px;
}
.bg-purple{
	background-color:#AB47BC!important;
	color:#e0e0e0!important;
}
.bg-purple-subtle{
	background-color:#E1BEE7!important;
}
.text-purple{
	color:#9C27B0!important;
}
.border-purple{
	border-color:#9C27B0!important;
}
.border-purple-opacity{
	border-color:#9C27B0!important;
	opacity: 0.7;
}
.header {
    z-index: 1111;
}
.hori_text{
    display: flex;
    align-items: center;
    text-align: center;
  }
  .hori_text::before,
  .hori_text::after{
    content:"";
    flex-grow: 1;  /* 線の伸び率 */
    border-bottom: 1px solid #333;
  }
  /* 左側の線 */
  .hori_text::before{
    margin-right: 10px;  /* 線と文字の間のスペース */
    padding-left: 15px;  /* 線の長さが、最低でも15px以上になるように余白をとる */
  }
  /* 右側の線 */
  .hori_text::after{
    margin-left: 10px;  /* 線と文字の間のスペース */
    padding-right: 15px;  /* 線の長さが、最低でも15px以上になるように余白をとる */
  }

/* グラフグラデーション */
canvas#group_analysis_m1 {
	width:300px; height:350px;
}
div#wrap_m1, div#wrap_f1 {display:block;
    background-image: linear-gradient(145deg, transparent 70%, #FF8C00 90%, #FF4500 100%);
	width:80%; height:80%;
	position: absolute;
	bottom:-19.5%;
  right: -36.5%;
  transform: translate(-50%,-50%);
}
div#wrap_m2, div#wrap_f2 {display:block;
    background-image: linear-gradient(220deg, transparent 70%, #FF8C00 90.1%, #FF4500 100%);
	width:80%; height:80%;
	position: absolute;
	bottom:-19.5%;
  right: -35.5%;
  transform: translate(-50%,-50%);
}
div#wrap57_m1, div#wrap57_f1 {display:block;
    background-image: linear-gradient(145deg, transparent 70%, #FF8C00 90%, #FF4500 100%);
	width:80%; height:80%;
	position: absolute;
	bottom:-24.5%;
  right: -33%;
  transform: translate(-50%,-50%);
}
div#wrap57_m2, div#wrap57_f2 {display:block;
    background-image: linear-gradient(220deg, transparent 70%, #FF8C00 90.1%, #FF4500 100%);
	width:80%; height:80%;
	position: absolute;
	bottom:-25.0%;
  right: -36.5%;
  transform: translate(-50%,-50%);
}
div#canvas{
	position: relative;
	width:400px; height:450px;
}
/**
 * 個人判定ページ
 *
 */
 span#atend {
	 display:block;
	 border: 1px solid #ead1dc ;
	 background-color: #f6ecf1;
	 border-radius: 10px 10px 10px 10px;
	 padding: 4px 3px:
 }
 #mess_bass {
	 background-color: #97a6af ;
	 padding: 2px 2px;
	 border-radius: 10px 10px 10px 10px;
    height: 100%;
}
 #care_bass {
	 background-color: #a5d732 ;
	 padding: 2px 2px;
	 border-radius: 10px 10px 10px 10px;
    height: 100%;
}
 #intv_bass {
	 background-color: #db4c4c ;
	 padding: 2px 2px;
	 border-radius: 10px 10px 10px 10px;
    height: 100%;
 }
 #mess_box {
	 background-color: #fff;
 }
/* 集団解析テーブル */
table.analyze_result {
	border:1px solid #999;
	max-width: 100%;
}
.analyze_result thead {
	z-index:1!important;
}
.analyze_result td {
	border:1px solid #999;
	letter-spacing: 0.08em;
}
.analyze_result td >p {
	letter-spacing: 0.08em;
}
.analyze_result th {
	border:1px solid #999;
	letter-spacing: 0.08em;
    vertical-align: middle;
	text-align: center;
	background-color:#eee;
}
.table_wrap {
  overflow: scroll;
  height: 95vh;
}
/* 集団解析説明 */
#group_analysis_exp1{
	 display:block;
	 border: 1px solid #54940a ;
	 background-color: #fff;
	 border-radius: 10px 10px 10px 10px;
	 padding: 4px 3px:
}
#group_analysis_exp1 h4{
	border-bottom: 1px solid #54940a ;
	margin-left:10px;
	padding: 0px 0px 12px 12px;
}

#group_analysis_exp2{
	 display:block;
	 border: 1px solid #4b38c2 ;
	 background-color: #fff;
	 border-radius: 10px 10px 10px 10px;
	 padding: 4px 3px:
}
#group_analysis_exp2 h4{
	border-bottom: 1px solid #4b38c2 ;
	margin-left:10px;
	padding: 0px 0px 12px 12px;
}
/* フッタ */
.footer-widget-area {
	padding: 10px 0 10px;
}
.triangle{
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 15px solid #e0e0e0;
  margin-left:40%;
}
.triangle-l {
  width: 0;
  height: 0;
  border-right: 15px solid rgba(225,71,64,0.9);
  border-top: 15px solid transparent;
  border-left: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

.triangle-r {
  width: 0;
  height: 0;
  border-left: 15px solid rgba(53, 179, 56, 0.9);
  border-top: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 15px solid transparent;
}
.gradient {
  background-image: linear-gradient(90deg, rgba(255, 97, 97, 0.9) 0%,
    rgba(197, 199, 71, 0.9) 50%,
	rgba(53, 179, 56, 0.9) 100%);
}