@charset "utf-8";

/* CSS Document */

h1{
	text-align: center;
	border-bottom: #00bbcc solid 1px;
	padding-bottom: 5px;
}

.d_inline_block{
    display: inline-block;
}
.d_table_cell{
    display: table-cell;
}

.wid880{
	width: 100%;
	max-width: 880px;
	margin-right: auto;
	margin-left: auto;
}

.hbPb45{
    padding-bottom: 45px;
}

.text-center{
    text-align: center;
}

.hbFs_022{
    font-size: 22px;
}
.hbFs_023{
    font-size: 23px;
}
.hbFs_026{
    font-size: 26px;
}
.hbFs_034{
    font-size: 34px;
}
.hbFs_040{
    font-size: 40px;
}
.hbFs_045{
    font-size: 45px;
}

#wrap{

	max-width: 1200px;

	margin: 0 auto;

	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";

}

.contents{
	width: 90%;
	margin: 0 auto;
}

#head{

	position: relative;

	width: 100%;

}

@media screen and (min-width: 800px){
    #head .text {
        width: 100%;
    }
}

#head .text{
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 10px;
    padding-right: 10px;
}
#head .text h1{
    text-align: center;
	border-bottom: 1px solid #00507a;
	margin-bottom: 15px;
}

.trial_box{
    display: flex;

    background-color: #fff;
    max-width: 975px;
    margin-left: auto;
    margin-right: auto;
    border: 6px solid #0179b8;
    border-radius: 15px;
	padding: 10px;
    padding-top: 20px;
    margin-top: 80px;
    margin-bottom: 50px;
    position: relative;
}
.trial_box .balloon{
    position: absolute;
    top: -70px;
    left: -13px;
}
.trial_box .title .img_border{
    border-bottom: #5cb2e0 solid 1px;
    margin-bottom: 15px;
    display: inline-block;
}
.trial_box .trial_box_img_wrap{
    align-self: center;
}

.contentWhite{
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
	background-color: #fff;
	border: #f8b551 solid 2px;
	border-radius: 5px;
    padding: 10px;
    line-height: 1.5;
}
.contentWhite .title{
	text-align: center;
}
.contentWhite .title.d_inline_block .d_table_cell{
    vertical-align: middle;
}
.contentYello{
	background-color: #ffdba5;
	border: 2px solid #f39800;
    border-radius: 5px;
	text-align: center;
    line-height: 1.5;
}
.contentYello .title{
    font-size: 34px;
    padding: 10px;
}
.contentGray{
	background-color: #7e6b5a;
    border-radius: 5px;
    padding-top: 11px;
    padding-bottom: 12px;
	text-align: center;
    color: #fff;
    line-height: 1.5;
}
.contentGray .title{
    font-size: 34px;
}

.bg_blue{
    background-color: #f8b551;
    font-weight: normal;
}
.border_blue{
    border: #f8b551 solid 1px;
    background-color: #fff;
}

#rule {
	width: 100%;
    color: #234255;
    background-color: #fefdf3;
}
#rule h3{
    display: inline-block;
	color: #f4970b;
	text-align: center;
	font-weight: 900;
    border-bottom: 4px solid #f6b37f;

}
#rule h3 .hbFs_023{
    font-weight: normal;
}

.footerBg{
	background-color: #f9fcfd;
}

.footerborder{

	border: solid 1px #e5e5e5;

}
.footerborder p,
.footerborder span{
    color: #565656;
}
.footerborder .hbFs_020{
    position: relative;
    left: -10px;
}


/*レスポンジブ*/

@media screen and (max-width: 800px) {

.hbFs_016{

		font-size: 12px;

	}

.hbFs_018{

		font-size: 14px;

	}

	.hbFs_020{

		font-size: 18px;

	}

	.hbFs_022{
		font-size: 14px;
	}

	.hbFs_023{
		font-size: 20px;
	}

.hbFs_024{

		font-size: 18px;

	}

	.hbFs_026{
		font-size: 18px;
	}

	.hbFs_032{

		font-size: 20px;

	}

	.hbFs_034{
		font-size: 18px;
	}

	.hbFs_040{
		font-size: 18px;
	}

	.hbFs_045{
		font-size: 32px;
	}

	.hbFs_048{

		font-size: 25px;

	}



	.pcbnr{

		display: none;

	}


	#rule h3 span{
		display: block;
	}

	.contentWhite .title .d_table_cell{
		display: block;
		font-size: 18px;
	}
	.contentGray .title{
		font-size: 18px;
	}

}

@media screen and (min-width: 800px) {

.hbFs_016{
		font-size: 16px;
	}

	.hbFs_018{
		font-size: 18px;
	}

	.hbFs_020{
        font-size: 20px;
    }
.hbFs_024{
		font-size: 24px;
	}

	.hbFs_032{

		font-size: 32px;

	}

	.hbFs_048{

		font-size: 48px;

	}

	.hbFs_058{

		font-size: 58px;

	}

	.hbFs_072{

		font-size: 72px;

	}

	.col35{

	width: 35%;

}

.col60{

	width: 60%;

}

		.pcFlex{

    display: flex;

		flex-direction: row;

		justify-content: space-between

  }

	.spbnr{

		display: none;

	}

	#head .text{

		width: 75%;}

	#head .text p{

	padding-left: 20px;

}

}

main img{
	margin-bottom: 15px;
}