/* カスタム CSS をここに入力してください */

/* アンダーライン　*/
.under11 {
  max-width: 650px;
  border-bottom: solid 2px #000;
  }






/*--------------------
 吹き出しを作る
--------------------*/
.balloon {
 margin: 40px 0;
 padding : 0 40px;
 position: relative;
}
.balloon:after,.balloon:before {
 clear: both;
 content: "";
 display: block;
}
.balloon-image-left {
 position: absolute;
 left: 0;
 margin: 0;
 width: 60px;
 height: 60px;
}
.balloon-image-right {
 position: absolute;
 right: 0;
 margin: 0;
 width: 60px;
 height: 60px;
}
.balloon figure img {
 width: 100%;
 height: 100%;
 border: 1px solid #aaa;
 border-radius: 50%;
 margin: 0;
}
.balloon-image-description {
 padding: 5px 0 0;
 font-size: 10px;
 text-align: center;
}
.balloon-text-right {
 position: relative;
 margin-left: 40px;
 padding: 10px;
 border: 1px solid #aaa;
 border-radius: 10px;
 float: left;
 max-width: 100%;
}
.balloon-text-left {
 position: relative;
 margin-right: 40px;
 padding: 10px;
 border: 1px solid #aaa;
 border-radius: 10px;
 float: right;
 max-width: 100%;
}
.balloon p {
 margin: 0 0 20px;
}
.balloon p:last-child {
 margin-bottom: 0;
}
/* 会話 */
.balloon-text-right:before {
 position: absolute;
 content: '';
 border: 10px solid transparent;
 border-right: 10px solid #aaa;
 top: 15px;
 left: -20px;
}
.balloon-text-right:after {
 position: absolute;
 content: '';
 border: 10px solid transparent;
 border-right: 10px solid #fff;
 top: 15px;
 left: -19px;
}
.balloon-text-left:before {
 position: absolute;
 content: '';
 border: 10px solid transparent;
 border-left: 10px solid #aaa;
 top: 15px;
 right: -20px;
}
.balloon-text-left:after {
 position: absolute;
 content: '';
 border: 10px solid transparent;
 border-left: 10px solid #fff;
 top: 15px;
 right: -19px;
}
/* 考え毎 */
.think .balloon-text-right,.think .balloon-text-left {
 border-radius: 30px;
}
.think .balloon-text-right:before {
 border: 1px solid #aaa;
 border-radius: 50%;
 width: 8px;
 height: 8px;
 top: 15px;
 left: -12px;
}
.think .balloon-text-right:after {
 border: 1px solid #aaa;
 border-radius: 50%;
 width: 4px;
 height: 4px;
 top: 20px;
 left: -19px;
}
.think .balloon-text-left:before {
 border: 1px solid #aaa;
 border-radius: 50%;
 width: 8px;
 height: 8px;
 top: 15px;
 right: -12px;
}
.think .balloon-text-left:after {
 border: 1px solid #aaa;
 border-radius: 50%;
 width: 4px;
 height: 4px;
 top: 20px;
 right: -19px;
}

/*YouTubeレスポンシブサイズ*/
.youtube {
    position: relative;
    max-width: 100%;
    padding-top: 56.25%;
}
.youtube iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
/*タグ*/
.sticky-tag {
color:white;
background-color:black;
}

/* アコーディオン */
.ac-container{
    width: auto;
    margin: 30px auto;
}
.ac-container label{
    width: 300px;
    text-align: center;
    vertical-align: middle;
    background: #008080;
    margin: auto;
    padding: 10px 5px;
    position: relative;
    display: block;
    height: 40px;
    cursor: pointer;
    color: #fff;
}
.ac-container label:hover{
    background: rgba( 0,153,255,0.6 );
    -webkit-transition: all .3s;
    transition: all .3s;
}
.ac-container label:after{
 color: #fff;
    font-family:"FontAwesome";
    content:"\f067";
}
.ac-container input:checked ~ label::after {
 color: #fff;
   font-family:"FontAwesome";
   content:"\f068";
}
.ac-container input{
   display: none;
}
.ac-container div{
   background: rgba(255, 255, 255, 0.5);
   margin-top: -1px;
   overflow: hidden;
   height: 0px;
   position: relative;
   z-index: 10;
   transition: 
   height 0.3s ease-in-out, 
   box-shadow 0.6s linear;
}
.ac-container input:checked ~ div{
   transition: 
   height 0.5s ease-in-out, 
   box-shadow 0.1s linear;
   box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
}
.ac-container div p{
   color: #777;
   line-height: 23px;
   font-size: 14px;
   padding: 20px;
}
/* 高さの定義 */
.ac-container input:checked ~ div.ac-small{
   height: 150px;
}
.ac-container input:checked ~ div.ac-medium{
   height: 200px;
}
.ac-container input:checked ~ div.ac-large{
   height: 300px;
}

/* rectangle */
/* ダブルレクタングル
----------------------------------------------------*/
.kiziad {
	padding:0px !important;
}
 
.adleft {float:left; width:336px;}
.adright {float:right; width:336px;}
 
/* clear */
.clear {clear:both;}
.clear hr {display:none;}
 
/* 大画面用の設定 */
@media screen and (min-width: 1081px) {
	.kiziad {width:720px;}
}

/* ------------------------------------------------------------
診断ジェネレーター作成プラグイン用style
------------------------------------------------------------*/
.diagnosis-wrap .question{
	margin-bottom:1.5em;
}
.diagnosis-wrap .question .qcontents{
	margin-bottom:.5em;
	font-weight:bold;
}
.diagnosis-wrap .question .qselect span{
	display:block;
}
.diagnosis-wrap .question .qselect span input{
	margin:0 5px;
}
.diagnosis-wrap .submit input{
	padding:1em;
	width:300px;
	max-width:80%;
	margin-bottom:1em;
}