@charset "UTF-8";
/* 
KiTAiCHI lab.com Stylesheet
v1.0
Last Updated: 2019-03-13
https://www.kitaichilab.com/
*/
/*base---------------------------------------------------------------*/

html{
	overflow             : auto;
}
body{
	overflow-x           : hidden;
	position             : relative;
	font-family          : "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size            : 100%;
	color                : #333333;
	line-height          : 1.8;
	display: flex;
    flex-flow: column;
    min-height: 100vh;
}

main{
	flex: 1;
	max-width            : 960px;
	margin               : auto;
	width                : 100%;
	clear                : both;
}

main a {
	position             : relative;
	display              : inline-block;
	transition           : .3s;
	color                : #99cc00;
}


main a:link{
	color                : #99cc00;
	text-decoration      : underline;
}
main a:hover{
	color                : #99cc00;
}

#wrapper{
	width                : 100%;
	margin               : auto;
	margin-bottom        : 50px;
}

/*header---------------------------------------------------------------*/

header{
	margin               : auto;
	top:80px;
	position             : relative;
	z-index:9999;
}
@media screen and (min-width:769px) {
header{
	text-shadow:
  0px 0px 1px #666,
  0px 0px 5px #666,
  0px 0px 6px #666;
  	font-weight          : bold;

}
}
/*h-------------------------------------------------------------------*/
h1{
	font-weight          : bold;
	font-size            : 1.8rem;
}
h1 span {
	margin-left          : 20px;
	font-size            : 0.8rem;
	color                : #ccc;
	position             : relative;
	top                  : -3px;
    font-weight          : normal;
}
h2 {
	font-size            : 1.2rem;
    border-bottom        : 5px #99cc00 solid;
    padding-bottom       : 5px;
}
h2 span {
	margin-left          : 20px;
	font-size            : 0.8rem;
	color                : #ccc;
	position             : relative;
	top                  : -3px;
    font-weight          : normal;
}

/*article-------------------------------------------------------------*/

article{
	margin               : 20px 0 5px 0;
	clear                : both;
}

article p{
	margin               : 10px 10px 0 10px;
}

/*logo---------------------------------------------------------------*/

.logo{
	float                : left;
	margin-top           : -40px;
	margin-left          : 40px;
} 

@media screen and (max-width:768px) {
.position_Box {
	position             : relative;
	width                : 100%;
	height               : 100px;
	margin               : 0 auto;
}

.position_Box .logo {
	position             : absolute;
	top                  : 0;
	left                 : 0;
	right                : 0;
	bottom               : 190px;
	margin               : auto;
	width                : 300px;
	height               : 100%;
}
}

/*img------------------------------------------------------------*/
img {
	max-width            : 100%;
	height               : auto;
}

/*position-----------------------------------------------------------*/

.relative {
    position: relative;
}
.absolute {
    position: absolute;
	bottom: 80px;
}

/*textarea-----------------------------------------------------------*/

.textarea{
	margin               : 0 10px 0 20px;
}

/*footer-------------------------------------------------------------*/
footer{
	clear                : both;
	width                : 100%;
	color                : #ffffff;
	background           : #99cc00;
	line-height          : 130%;
	padding              : 20px 0 20px 0;
	min-height           : 300px;
}
footer a{
	text-decoration      : none;
	color                : #ffffff;

}
small{
	font-size            : 0.75em;
	text-align           : center;
	display              : block;
	clear                : both;
}

/*background---------------------------------------------------------*/

.bg_gray{
	background-color     : #f6f6f6;
}

.background{
	width                : 100vw;
	background           : url(../img/background/49466569.jpg) 0 0 no-repeat;
	background-size      : cover;
	width                : 100%;
	height               : 0;
	padding-top          : calc( 400/1000*100% ); /* 画像の高さ÷画像の横幅×100% */
	position             :relative;
}
.background2{
	width                : 100vw;
	background           : url(../img/background/53646328.jpg) 0 0 no-repeat;
	background-size      : cover;
	width                : 100%;
	height               : 0;
	padding-top          : calc( 400/1000*100% ); /* 画像の高さ÷画像の横幅×100% */
	position             :relative;
}
.background_tea{
	width                : 100vw;
	background           : url(../img/background/31324913.jpg) 0 0 no-repeat;
	background-size      : cover;
	width                : 100%;
	height               : 0;
	padding-top          : calc( 400/1000*100% ); /* 画像の高さ÷画像の横幅×100% */
	position             :relative;
}

.background_pen{
	width                : 100vw;
	background           : url(../img/background/54398217.jpg) 0 0 no-repeat;
	background-size      : cover;
	width                : 100%;
	height               : 0;
	padding-top          : calc( 400/1000*100% ); /* 画像の高さ÷画像の横幅×100% */
	position             :relative;
}

.background_clock{
	width                : 100vw;
	background           : url(../img/background/25917265.jpg) 0 0 no-repeat;
	background-size      : cover;
	width                : 100%;
	height               : 0;
	padding-top          : calc( 400/1000*100% ); /* 画像の高さ÷画像の横幅×100% */
	position             :relative;
}

/*box----------------------------------------------------------------*/

.box{
	width                : 33%;
	text-align           : center;
}
.box_30{
	width                : 30%;
	float                : left;
	text-align           : center;
}
.box_65{
	width                : 65%;
	float                : left;
	margin               : 0 0 0 30px;
}
.box_f{
	width                : 60%;
	margin-left          : auto;
	margin-right         : auto;
}
.box_merit{
	width                : 30%;
	float                : left;
	min-height           : 230px;
	min-height           : 250px;
}

@media screen and (max-width:768px) {
.box{
	width                : 100%;
}
.box p{
	clear                : both;
}
.box_30{
	width                : 100%;
	margin               : 0;
}
.box_65{
	width                : 100%;
	margin               : 0;
}
.box_f{
	width                : 100%;
}
.box_merit{
	width                : 100%;
}
}

/*btn----------------------------------------------------------------*/

.btn{
    position             : relative;
    display              : inline-block;
    padding              : 0.15em 0.5em;
    background           : #59cedd;/*背景色*/
    border-radius        : 12px;/*角の丸み*/
	font-size            : 0.8rem;
	float                : right;
}
.btn a{
	text-decoration      : none !important;
	color                : #ffffff !important;
}
.btn:active{
    border-bottom        : solid 2px #cccccc;
    box-shadow           : 0 0 2px rgba(0, 0, 0, 0.30);
}

/*border_radius------------------------------------------------------*/

.border_radius {
    border-radius        : 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius   : 5px;
}

/*list---------------------------------------------------------------*/

.faq_q_kimidori{
	background           : url(../img/faq/faq_q_kimidori.gif) 0px 3px no-repeat;
}
.faq_q_yamabuki{
	background           : url(../img/faq/faq_q_yamabuki.gif) 0px 3px no-repeat;
}
.faq_q_momo{
	background           : url(../img/faq/faq_q_momo.gif) 0px 3px no-repeat;
}
.faq_a{
	background           : url(../img/faq/faq_a.gif) 0px 3px no-repeat;
}
.list_decimal{
	list-style           : decimal;
	padding-left         : 3.0rem;
}


/*shadow-------------------------------------------------------------*/

.shadow {
  padding                : .5rem .5rem;
  box-shadow             : 0 2px 6px rgba(0, 0, 0, .15);
}

/*marker-------------------------------------------------------------*/

.marker_momo{
  background             : linear-gradient(transparent 65%, #f596aa 3%);
}
.marker_kimidori{
  background             : linear-gradient(transparent 65%, #b8d200 3%);
}
.marker_yamabuki{
  background             : linear-gradient(transparent 65%, #f8b500 3%);
}
.marker_blue{
  background             : linear-gradient(transparent 65%, #08abeb 3%);
}
.marker_purple{
  background             : linear-gradient(transparent 65%, #bf86ff 3%);
}

/*border-------------------------------------------------------------*/

.border{
	border               : solid 1px #cccccc;
	padding              : 2px 5px;
}
.border_b{
	border-bottom        : solid 3px #cccccc;
	margin-bottom        : 5px;
}
.border_b2{
	border-bottom	     : solid 2px #cccccc;
}
.border_b3{
	border-bottom	     : solid 2px #08abeb;
}
.border_b_kimidori{
	border-bottom        : #b8d200 solid 4px;
}
.border_b_yamabuki{
	border-bottom        : #f8b500 solid 4px;
}
.border_b_momo{
	border-bottom        : #f596aa solid 4px;
}
.border_b_dot{
	border-bottom        : dotted 1px #cccccc;
}
.border_b_dashed{
	border-bottom        : dashed 1px #cccccc;
	margin               : 15px 0 15px 0;
}
.border_t_dot{
	border-top           : dotted 1px #ccc;
}
.border-left-kimidori{
	position             : relative;
	padding-left         : 1em;
	border-left          : 4px solid #ccc;
}
.border-left-kimidori p{
	margin-left          : 2em;
}
.border-left-kimidori:before {
	position             : absolute;
	left                 : -4px;
	z-index              : 2;
	content              : '';
	width                : 4px;
	height               : 30%;
	background-color     : #b8d200;
}
.border-left-yamabuki{
	position             : relative;
	padding-left         : 1em;
	border-left          : 4px solid #ccc;
}
.border-left-yamabuki p{
	margin-left          : 2em;
}
.border-left-yamabuki:before {
	position             : absolute;
	left                 : -4px;
	z-index              : 2;
	content              : '';
	width                : 4px;
	height               : 30%;
	background-color     : #f8b500;
}
.border-left-momo{
	position             : relative;
	padding-left         : 1em;
	border-left          : 4px solid #ccc;
}
.border-left-momo p{
	margin-left          : 2em;
}
.border-left-momo:before {
	position             : absolute;
	left                 : -4px;
	z-index              : 2;
	content              : '';
	width                : 4px;
	height               : 30%;
	background-color     : #f596aa;
}
/*font---------------------------------------------------------------*/

.bold{
	font-weight          : bold;
}
.fc_white{
	color                : #ffffff;
}
.fc_momo{
	color                : #f596aa;
}
.fc_green{
	color                : #a3d417;
}
.fc_blue{
	color                : #08abeb;
}
.fc_kimidori{
	color                : #b8d200;
}
.fc_yamabuki{
	color                : #f8b500;
}
.fc_kokihi{
	color                : #c9171e;
}
.fontsize_s{
	font-size            : 0.8rem;
}
.fontsize_l{
	font-size            : 1.5rem;
}
@media screen and (min-width:769px) {
.copy{
	font-size            : 3.0rem;
}
}
@media screen and (max-width:768px){
.copy{
	font-size            : 1.5rem;
}
}
.fontshadow{
	color: #fff;
text-shadow:
  0px 0px 1px #666,
  0px 0px 5px #666,
  0px 0px 6px #666;
}
.font{
font-family: 'M PLUS 1p', sans-serif;
}

.line-through{
	text-decoration      : line-through;
}
/*command------------------------------------------------------------*/

.center{
	text-align           : center;
}
.left{
	text-align           : left;
}
.right{
	text-align           : right;
}
.clear{ 
	clear                : both;
}
.f_left{
	float                : left;
}
.f_right{
	float                : right;
}
.va_middle{
	vertical-align       : middle;
}
/*lineheight----------------------------------------------------------*/

.lineheight100{
	line-height      : 100%;
}
.lineheight200{
	line-height      : 200%;
}
.lineheight300{
	line-height      : 300%;
}
/*width--------------------------------------------------------------*/

.w_10{
	width                : 10%;
}
.w_20{
	width                : 20%;
}
.w_30{
	width                : 30%;
}
.w_40{
	width                : 40%;
}
.w_50{
	width                : 50%;
}
.w_70{
	width                : 70%;
}
.w_80{
	width                : 80%;
}
.w_90{
	width                : 90%;
}
.w_100{
	width                : 100%;
}

/*margin-------------------------------------------------------------*/

.m_r5{
	margin-right         : 5px;
}
.m_r10{
	margin-right         : 10px;
}
.m_r20{
	margin-right         : 20px;
}
.m_r50{
	margin-right         : 50px;
}
.m_t5{
	margin-top           : 5px;
}
.m_t10{
	margin-top           : 10px;
}
.m_t15{
	margin-top           : 15px;
}
.m_t20{
	margin-top           : 20px;
}
.m_t50{
	margin-top           : 50px;
}
.m_la{
	margin-left          : auto;
}
.m_l10{
	margin-left          : 10px;
}
.m_l20{
	margin-left          : 20px;
}
.m_b10{
	margin-bottom        : 10px;
}
.m_b20{
	margin-bottom        : 20px;
}
.m_auto{
	margin:auto;
}

/*padding------------------------------------------------------------*/

.p_l10{
	padding-left         : 10px;
}
.p_l20{
	padding-left         : 20px;
}
.p_l30{
	padding-left         : 30px;
}
.p_l40{
	padding-left         : 40px;
}
.p_r10{
	padding-right        : 10px;
}
.p_t4{
	padding-top          : 4px;
}



















/*ボックス全体*/
.accbox {
    margin: 2em 0;
    padding: 0;
    width: 100%;
}

/*ラベル*/
.accbox label {
    display: block;
    margin: 1.5px 0;
    padding : 11px 12px;
    border-bottom        : 5px #99cc00 solid;
    cursor :pointer;
    transition: all 0.5s;
}

/*ラベルホバー時*/
.accbox label:hover {
	color                : #99cc00;
}

/*チェックは隠す*/
.accbox input {
    display: none;
}

/*中身を非表示にしておく*/
.accbox .accshow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.cssacc:checked + .accshow {
    height: auto;
    padding: 5px;
    background: #ffffff;
    opacity: 1;
}