/* Enter Your Custom CSS Here */

/*茶インデックス実績本文*/
/*コンタクトフォーム*/
#kojin{
    margin: 20px 0px 10px 0px;
    padding: 0.8em;
    font-size: 1.143em;
    font-weight: bold;
    border-top: 1px dashed #aaa;
    border-bottom: 1px dashed #aaa;
    background: #eee;
    text-shadow: 1px 1px 0 rgba(255,255,255,1);
    box-shadow: 0 5px 4px -4px rgba(0,0,0,0.3) inset;
    -moz-box-shadow: 0 5px 4px -4px rgba(0,0,0,0.3) inset;
    -webkit-box-shadow: 0 5px 4px -4px rgba(0,0,0,0.3) inset;
    -o-box-shadow: 0 5px 4px -4px rgba(0,0,0,0.3) inset;
    -ms-box-shadow: 0 5px 4px -4px rgba(0,0,0,0.3) inset;
}

@media screen and (min-width: 600px){
    #actingreen{
        display: none;
    }
    #actinred{
        display: none;
    }
    #actinyellow{
        display: none;
    }
    #actinblue{
        display: none;
    }
#cf1{
padding-left:30%;
padding-right:30%;
text-align: center;
}
    #jigyouph{
        width:40%;
        float:right;
        display: block;
    }
    #jigyouword{
        display:block;
        width:58%;
        float:left;
    }
    #jigyouwaku{
    display:table;
	width:100%;
	margin-bottom:20px;
    background-color:#F0F0F0;
    border-style:solid;
    border-radius: 5px;
    border-width:1px;
    border-color:#CBCBCB;
        padding:1%;
	}
  #heading11a{
     position: relative;
  color: #111;
  background: #ccc;
  background-image: -webkit-linear-gradient(#ddd, #aaa);
  background-image: -moz-linear-gradient(#ddd, #bbb);
  background-image: -o-linear-gradient(#ddd, #bbb);
  background-image: -ms-linear-gradient(#ddd, #bbb);
  background-image: linear-gradient(#ddd, #bbb);
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  padding: 15px 5px 10px 20px;
  margin-top:-25px;
    border-radius: 3px;
    background-color: #CECECE;
	border-left: 6px solid #ffcc1f;
}
}

@media screen and (max-width: 599px){
  /* 11.黄インデックス型の見出し */
#heading11a{
     position: relative;
  color: #111;
  background: #ccc;
  background-image: -webkit-linear-gradient(#ddd, #aaa);
  background-image: -moz-linear-gradient(#ddd, #bbb);
  background-image: -o-linear-gradient(#ddd, #bbb);
  background-image: -ms-linear-gradient(#ddd, #bbb);
  background-image: linear-gradient(#ddd, #bbb);
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  padding: 15px 5px 10px 20px;
    margin-top:5px;
    border-radius: 3px;
    background-color: #CECECE;
	border-left: 6px solid #ffcc1f;
}
    #jigyouph{
        
    }
    #jigyouword{
        
    }
#cf1{
text-align: center;
}
    #kotop{
    display:none;
}

#actingreen{
    text-align: center;
    font-size: 30px;
    padding: 5px 0px 5px 0px;
    color: #fff;
    margin-bottom: 0px;
    width:100%;
  background-color: #00dc9f;
}
#actinblue{
    text-align: center;
    font-size: 30px;
    padding: 5px 0px 5px 0px;
    color: #fff;
    margin-bottom: 0px;
    width:100%;
  background-color: #5283ff;
}
#actinred{
    text-align: center;
    font-size: 30px;
    padding: 5px 0px 5px 0px;
    color: #fff;
    margin-bottom: 0px;
    width:100%;
  background-color: #e73962;
}
#actinyellow{
    text-align: center;
    font-size: 30px;
    padding: 5px 0px 5px 0px;
    color: #fff;
    margin-top:-31px;
    margin-bottom: 0px;
    width:100%;
  background-color: #ffcc1f;
}
}

  
#hinmoku{
  font-size: 1.5em;
  background-color: rgba( 255, 255, 255, 0.85 );
}



/*インデックス*/

/* 08.赤インデックス型の見出し */
#heading08{
     position: relative;
  color: #111;
  background: #ccc;
  background-image: -webkit-linear-gradient(#ddd, #aaa);
  background-image: -moz-linear-gradient(#ddd, #bbb);
  background-image: -o-linear-gradient(#ddd, #bbb);
  background-image: -ms-linear-gradient(#ddd, #bbb);
  background-image: linear-gradient(#ddd, #bbb);
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  padding: 15px 5px 10px 20px;
    border-radius: 3px;
    background-color: #CECECE;
	border-left: 6px solid #e73962;
}


/* 09.青インデックス型の見出し */
#heading09{
     position: relative;
  color: #111;
  background: #ccc;
  background-image: -webkit-linear-gradient(#ddd, #aaa);
  background-image: -moz-linear-gradient(#ddd, #bbb);
  background-image: -o-linear-gradient(#ddd, #bbb);
  background-image: -ms-linear-gradient(#ddd, #bbb);
  background-image: linear-gradient(#ddd, #bbb);
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  padding: 15px 5px 10px 20px;
    border-radius: 3px;
    background-color: #CECECE;
	border-left: 6px solid #5282ff;
}

/* 10.緑インデックス型の見出し */
#heading10{
     position: relative;
  color: #111;
  background: #ccc;
  background-image: -webkit-linear-gradient(#ddd, #aaa);
  background-image: -moz-linear-gradient(#ddd, #bbb);
  background-image: -o-linear-gradient(#ddd, #bbb);
  background-image: -ms-linear-gradient(#ddd, #bbb);
  background-image: linear-gradient(#ddd, #bbb);
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  padding: 15px 5px 10px 20px;
    border-radius: 3px;
    background-color: #CECECE;
	border-left: 6px solid #00dc9f;
}
#heading15:before{
    content: "";
    position: absolute;
    background: #ffcc1f;
    left: 5px;
    margin-top :-15px;
    height: 100%;
    width: 7px;
    border-radius: 1px;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
}

/* 10-1.緑インデックス型の見出し */
#heading20{
     position: relative;
  color: #111;
  background: #ccc;
  background-image: -webkit-linear-gradient(#ddd, #aaa);
  background-image: -moz-linear-gradient(#ddd, #bbb);
  background-image: -o-linear-gradient(#ddd, #bbb);
  background-image: -ms-linear-gradient(#ddd, #bbb);
  background-image: linear-gradient(#ddd, #bbb);
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  padding: 15px 5px 10px 20px;
    border-radius: 0px 5px 5px 0px;
    background-color: #CECECE;
	border-left: 6px solid #00dc9f;
}

/* 11.黄インデックス型の見出し */
#heading11{
     position: relative;
  color: #111;
  background: #ccc;
  background-image: -webkit-linear-gradient(#ddd, #aaa);
  background-image: -moz-linear-gradient(#ddd, #bbb);
  background-image: -o-linear-gradient(#ddd, #bbb);
  background-image: -ms-linear-gradient(#ddd, #bbb);
  background-image: linear-gradient(#ddd, #bbb);
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  padding: 15px 5px 10px 20px;
    border-radius: 3px;
    background-color: #CECECE;
	border-left: 6px solid #ffcc1f;
}



#heading16:before{
    content: "";
    position: absolute;
    background: #ffcc1f;
    top: 50%;
    left: 5px;
    margin-top :-15px;
    height: 32px;
    width: 7px;
    border-radius: 1px;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
}




/*topの4つのボタン*/

@media screen and (min-width: 500px){
    #top0pc{}
    #top0sm{display:none}
#topu1{
    display:table-cell;
	width:24% !important;
	margin-bottom:0px;
    margin-top:30px;
    margin-left:1%;
    margin-right:1%;
    padding:10px 10px 2px 10px;
    background-color:#F0F0F0;
    border-style:solid;
    border-radius: 5px;
    border-width:1px;
    border-color:#CBCBCB;
	}
    #smtopu1{
        display:none;
    }
    #topu10{
    width:1%!important;
    display:table-cell;
    }
    #topu0{
        display:table;
        margin-top:40px;
        width:100%;
    }
    /* メインコンテンツ
---------------------------*/
  #main1{
	width:100%;
	margin-bottom:10px;
    padding:15px
	}
   #photo0{
    width:30%;
	margin-bottom:20px;
    padding-right:30px;
	float:left;
  	}
  
  #photo1{
    width:45%;
	margin-bottom:0px;
    padding-bottom:0px;
    padding-right:5%;
	float:left;
  	}
  
  #doc1{
    padding-left:30px;
    font-size:16px;
	}
  
  #boxC { clear:left; }  

  #main2{
    display:table-cell;
	width:49%!important;
    position: relative;
	margin-bottom:10px;
    padding:15px;
    background-color:#F0F0F0;
    border-style:solid;
    border-radius: 5px;
    border-width:1px;
    border-color:#CBCBCB;
	}

/* サイドバー
---------------------------*/
#side1{
	width:33%;
	margin-bottom:40px;
	float:right;
	}
}



@media screen and (max-width: 499px){
    #top0pc{display:none}
    #top0sm{}
  #topu1{
    text-align:center;
	width:100%;
	margin-bottom:20px;
	float:none;
    padding:10px;
	}
    #pctopu1{
        display:none;
    }
    /* メインコンテンツ
---------------------------*/
  #main1{
	width:100%;
	margin-bottom:40px;
	float:none;
	}

/* サイドバー
---------------------------*/
#side1{
	width:100%;
	margin-bottom:40px;
	float:none;
	}

}


/* タイムライン
---------------------------*/

.timeline {
  list-style: none;
}
.timeline > li {
  margin-bottom: 60px;
}

@media ( min-width : 640px ) {
 .timeline > li {
  overflow: hidden;
  margin: 0;
  position: relative;
}
 
.timeline-hako{
 margin-top:3px;
    margin-bottom: 3px;
}
    
.timeline-date {
  width: 110px;
  float: left;
  margin-top: 6px;
  font-size: 18px;
}
    
.timeline-content {
  width: 75%;
  float: left;
  border-left: 3px #5ca9ff solid;
  padding-left: 30px;
  font-size: 16px;
  margin-top:-3px;
}
    
.timeline-content:before {
  content: '';
  width: 12px;
  height: 12px;
  background: #3861ad;
  position: absolute;
  left: 106px;
  top: 18px;
  border-radius: 100%;
}
 
}

@media screen and (min-width: 500px){
/* button2 */
#button2{
  margin-top: 10px;
  background:orange;
  color:#fff;
  border:none;
  position:relative;
  font-size:1.2em;
  padding:0.3em 1em;
  cursor:pointer;
  transition:800ms ease all;
  outline:none;
}
#button2:hover{
  background:#fff;
  color:orange;
}
#button2:before,#button2:after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  height:2px;
  width:0;
  background: orange;
  transition:400ms ease all;
}
#button2:after{
  right:inherit;
  top:inherit;
  left:0;
  bottom:0;
}
#button2:hover:before,#button2:hover:after{
  width:100%;
  transition:800ms ease all;
}

/* button2 */
#button3{
  margin-top: 10px;
  background:#ffcc1f;
  color:#fff;
  border:none;
  position:relative;
  font-size:0.9em;
  font-weight: bold;
  padding:0.3em 1em;
  cursor:pointer;
  transition:800ms ease all;
  outline:none;
  border-radius: 3px;
}
#button3:hover{
  background:#fff;
  color:#ffcc1f;
}
#button3:before,#button3:after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  height:2px;
  width:0;
  background: #ffcc1f;
  transition:400ms ease all;
}
#button3:after{
  right:inherit;
  top:inherit;
  left:0;
  bottom:0;
}
#button3:hover:before,#button3:hover:after{
  width:100%;
  transition:800ms ease all;
}

/* button4 */
#button4{
  margin-top: 10px;
  background:#e73962;
  color:#fff;
  border:none;
  position:relative;
  font-size:0.9em;
  font-weight: bold;
  padding:0.3em 1em;
  cursor:pointer;
  transition:800ms ease all;
  outline:none;
  border-radius: 3px;
}
#button4:hover{
  background:#fff;
  color:#e73962;
}
#button4:before,#button4:after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  height:2px;
  width:0;
  background: #e73962;
  transition:400ms ease all;
}
#button4:after{
  right:inherit;
  top:inherit;
  left:0;
  bottom:0;
}
#button4:hover:before,#button4:hover:after{
  width:100%;
  transition:800ms ease all;
}

/* button5 */
#button5{
  margin-top: 10px;
  background:#5282ff;
  color:#fff;
  border:none;
  position:relative;
  font-size:0.9em;
  font-weight: bold;
  padding:0.3em 1em;
  cursor:pointer;
  transition:800ms ease all;
  outline:none;
  border-radius: 3px;
}
#button5:hover{
  background:#fff;
  color:#5282ff;
}
#button5:before,#button5:after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  height:2px;
  width:0;
  background: #5282ff;
  transition:400ms ease all;
}
#button5:after{
  right:inherit;
  top:inherit;
  left:0;
  bottom:0;
}
#button5:hover:before,#button5:hover:after{
  width:100%;
  transition:800ms ease all;
}

/* button6 */
#button6{
  margin-top: 10px;
  background:#00dc9f;
  color:#fff;
  border:none;
  position:relative;
  font-size:0.9em;
  font-weight: bold;
  padding:0.3em 1em;
  cursor:pointer;
  transition:800ms ease all;
  outline:none;
  border-radius: 3px;
}
#button6:hover{
  background:#fff;
  color:#00dc9f;
}
#button6:before,#button6:after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  height:2px;
  width:0;
  background: #00dc9f;
  transition:400ms ease all;
}
#button6:after{
  right:inherit;
  top:inherit;
  left:0;
  bottom:0;
}
#button6:hover:before,#button6:hover:after{
  width:100%;
  transition:800ms ease all;
}
}
    
/*  ===========================================================   */

@media screen and (max-width: 499px){
/* button2 */
#button3{
  margin: 10px 70px 0px 70px;
  background:#ffcc1f;
  color:#fff;
  border:none;
  position:relative;
  font-size:0.9em;
  font-weight: bold;
  padding:0.3em 1em;
  cursor:pointer;
  transition:800ms ease all;
  outline:none;
  border-radius: 3px;
}
#button3:hover{
  background:#fff;
  color:#ffcc1f;
}
#button3:before,#button3:after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  height:2px;
  width:0;
  background: #ffcc1f;
  transition:400ms ease all;
}
#button3:after{
  right:inherit;
  top:inherit;
  left:0;
  bottom:0;
}
#button3:hover:before,#button3:hover:after{
  width:100%;
  transition:800ms ease all;
}

/* button4 */

#button4{
  margin: 10px 70px 0px 70px;
  background:#e73962;
  color:#fff;
  border:none;
  position:relative;
  font-size:0.9em;
  font-weight: bold;
  padding:0.3em 1em;
  cursor:pointer;
  transition:800ms ease all;
  outline:none;
  border-radius: 3px;
}
#button4:hover{
  background:#fff;
  color:#e73962;
}
#button4:before,#button4:after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  height:2px;
  width:0;
  background: #e73962;
  transition:400ms ease all;
}
#button4:after{
  right:inherit;
  top:inherit;
  left:0;
  bottom:0;
}
#button4:hover:before,#button4:hover:after{
  width:100%;
  transition:800ms ease all;
}

/* button5 */
#button5{
  margin: 10px 70px 0px 70px;
  background:#5282ff;
  color:#fff;
  border:none;
  position:relative;
  font-size:0.9em;
  font-weight: bold;
  padding:0.3em 1em;
  cursor:pointer;
  transition:800ms ease all;
  outline:none;
  border-radius: 3px;
}
#button5:hover{
  background:#fff;
  color:#5282ff;
}
#button5:before,#button5:after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  height:2px;
  width:0;
  background: #5282ff;
  transition:400ms ease all;
}
#button5:after{
  right:inherit;
  top:inherit;
  left:0;
  bottom:0;
}
#button5:hover:before,#button5:hover:after{
  width:100%;
  transition:800ms ease all;
}

/* button6 */
#button6{
  margin: 10px 70px 0px 70px;
  background:#00dc9f;
  color:#fff;
  border:none;
  position:relative;
  font-size:0.9em;
  font-weight: bold;
  padding:0.3em 1em;
  cursor:pointer;
  transition:800ms ease all;
  outline:none;
  border-radius: 3px;
}
#button6:hover{
  background:#fff;
  color:#00dc9f;
}
#button6:before,#button6:after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  height:2px;
  width:0;
  background: #00dc9f;
  transition:400ms ease all;
}
#button6:after{
  right:inherit;
  top:inherit;
  left:0;
  bottom:0;
}
#button6:hover:before,#button6:hover:after{
  width:100%;
  transition:800ms ease all;
}
}