@charset "UTF-8";
/* CSS Document */
/* font-family: "ヒラギノ角ゴ W3 JIS2004"; font-family: "ヒラギノ角ゴ W6 JIS2004"; font-family: "A1ゴシック B";*/

@media (min-width:769px) {
	.stylefreeToushitsuWrap .pc { display: block;}
	.stylefreeToushitsuWrap .sp { display: none;}
}
@media (max-width:768px) {
	.stylefreeToushitsuWrap .pc { display: none;}
	.stylefreeToushitsuWrap .sp { display: block;}
}

/* 画面外にいる状態 */
.stylefreeToushitsuWrap .fadein { opacity : 0; transform : translate(0, 50px); transition : all 1000ms;}

/* 画面内に入った状態 */
.stylefreeToushitsuWrap .fadein.scrollin { opacity : 1; transform : translate(0, 0);}

.stylefreeToushitsuWrap { width: 100%; max-width: 1100px; margin: 0 auto; background-color: #FFF; font-family: "ヒラギノ角ゴ W3 JIS2004";}
.stylefreeToushitsuWrap img { vertical-align: bottom; width: 100%; max-width: 100%; padding: 0; margin: 0;}
.stylefreeToushitsuWrap a img:hover { opacity: 0.7;}

.stylefreeToushitsuWrap h1 { width: 100%;}
.stylefreeToushitsuWrap .h2Box { width: 100%; height: 170px; display: flex; align-items: center; flex-wrap:wrap; padding: 0 50px; background-color: #009933; box-sizing: border-box;}
.stylefreeToushitsuWrap .h2Box img { flex: 120px 0 0; padding-right: 10px;}
.stylefreeToushitsuWrap .h2Box h2 { flex: auto 0 0; padding: 0; color: #FFF; font-size: 2.5rem;/*40px*/ line-height: 130%; font-family: "ヒラギノ角ゴ W6 JIS2004";}

.stylefreeToushitsuWrap .qBox { width: 90%; display: flex; align-items: center; flex-wrap:wrap; justify-content: space-between; margin: 50px auto;}
.stylefreeToushitsuWrap .qBox dl { flex: 62% 0 0;}
.stylefreeToushitsuWrap .qBox dl dt { padding-bottom: 0.5em; font-size: 1.6rem;/*26px*/ color: #197332; font-family: "ヒラギノ角ゴ W6 JIS2004"; text-align: justify;}
.stylefreeToushitsuWrap .qBox dl dd { margin-left: 0; font-size: 1rem;/*16px*/ color: #000; line-height: 180%; text-align: justify;}
.stylefreeToushitsuWrap .qBox div { flex: 35% 0 0;}
.stylefreeToushitsuWrap .qBox .kome { font-size: 70%;}
.stylefreeToushitsuWrap .qBox .asahibeeImg { margin-top: -42%;}
.stylefreeToushitsuWrap .qBoxR { flex-flow: row-reverse wrap;}

.stylefreeToushitsuWrap .pointBox { width: 90%; display: flex; align-items: center; flex-wrap:wrap; justify-content: space-between; margin: 50px auto;}
.stylefreeToushitsuWrap .pointBox .pointIcon { flex: 20% 0 0;}
.stylefreeToushitsuWrap .pointBox .arrow_box {
    position:relative;
    width: 75%;
    background:#FFCC33;
    padding: 20px 50px;
    color:#000;
    font-size: 20px;
    font-weight:bold;
    border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
	box-sizing:border-box;
}
@media (min-width:769px) {
.stylefreeToushitsuWrap .pointBox .arrow_box:after{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    border-color: rgba(255, 204, 51, 0);
    border-top-width:10px;
    border-bottom-width:10px;
    border-left-width:26px;
    border-right-width:26px;
    margin-top: -10px;
    border-right-color:#FFCC33;
    right:100%;
    top:50%;
}
}
.stylefreeToushitsuWrap .pointBox .arrow_box dl dt { padding-bottom: 0.2em; font-size: 1.6rem;/*26px*/ color: #197332; font-family: "A1ゴシック B"; text-align: justify;}
.stylefreeToushitsuWrap .pointBox .arrow_box dl dd { margin-left: 0; font-size: 1rem;/*16px*/ color: #000; line-height: 150%; font-family: "ヒラギノ角ゴ W6 JIS2004"; text-align: justify;}

.stylefreeToushitsuWrap .dot { width: 100%; height: 4px; background: url("/stylefree/toushitsu_point/images/img_dot.gif") repeat-x center center;}

.stylefreeToushitsuWrap .akitsuBox { width: 90%; display: flex; flex-wrap:wrap; justify-content: space-between; margin: 50px auto;}
.stylefreeToushitsuWrap .akitsuBox .akitsuPlo { flex: 50% 0 0;}
.stylefreeToushitsuWrap .akitsuBox .akitsuImg { flex: 47% 0 0;}
.stylefreeToushitsuWrap .akitsuBox .akitsuPlo dl dt { padding-bottom: 0.5em; font-size: 1.6rem;/*26px*/ color: #000; font-family: "ヒラギノ角ゴ W6 JIS2004"; text-align: justify;}
.stylefreeToushitsuWrap .akitsuBox .akitsuPlo dl dd { margin-left: 0; font-size: 1rem;/*16px*/ color: #000; line-height: 180%; text-align: justify;}
.stylefreeToushitsuWrap .akitsuBox .akitsuPlo p {  font-size: 0.9rem;/*14px*/ color: #000; text-align: justify;}


@media (max-width:768px) {
	.stylefreeToushitsuWrap .h2Box { height: auto; padding: 0 20px; flex-wrap:nowrap;}
	.stylefreeToushitsuWrap .h2Box img { flex: 15% 0 0; width: 60px; padding-right: 10px;}
	.stylefreeToushitsuWrap .h2Box h2 { flex: 85% 0 0; font-size: 1.4rem;}
	
	.stylefreeToushitsuWrap .qBox { width: 95%; display: block; margin: 50px auto; text-align: justify;}
	.stylefreeToushitsuWrap .qBox dl { flex: none; width: 95%; margin: 10px auto;}
	.stylefreeToushitsuWrap .qBox dl dt { font-size: 1.4rem;}
	.stylefreeToushitsuWrap .qBox dl dd { font-size: 0.9rem;}
	.stylefreeToushitsuWrap .qBox div { flex: none; width: 95%; margin: 10px auto;}
	.stylefreeToushitsuWrap .qBox .asahibeeImg { margin-top: 0%;}
	
	.stylefreeToushitsuWrap .pointBox { width: 95%; display: block;}
	.stylefreeToushitsuWrap .pointBox .pointIcon { flex: none; width: 200px; margin: 50px auto;}
	.stylefreeToushitsuWrap .pointBox .arrow_box { width: 95%; margin: 0 auto; box-sizing: border-box; padding: 3% 8%;}
	.stylefreeToushitsuWrap .pointBox .arrow_box:after {
		border: solid transparent;
		content:'';
		height:0;
		width:0;
		pointer-events:none;
		position:absolute;
		border-color: rgba(255, 204, 51, 0);
		border-top-width:26px;
		border-bottom-width:26px;
		border-left-width:10px;
		border-right-width:10px;
		margin-left: -10px;
		border-bottom-color:#FFCC33;
		bottom:100%;
		left:50%;
	}
	.stylefreeToushitsuWrap .pointBox .arrow_box dl dt { font-size: 1.4rem;}
	.stylefreeToushitsuWrap .pointBox .arrow_box dl dd { font-size: 0.9rem;}
	
	.stylefreeToushitsuWrap .akitsuBox { width: 95%; display: block;}
	.stylefreeToushitsuWrap .akitsuBox .akitsuPlo { flex: none; width: 95%; margin: 0 auto; text-align: justify;}
	.stylefreeToushitsuWrap .akitsuBox .akitsuImg { flex: none; width: 95%; margin: 0 auto;}
	.stylefreeToushitsuWrap .akitsuBox .akitsuPlo dl dt { font-size: 1.4rem;}
	.stylefreeToushitsuWrap .akitsuBox .akitsuPlo dl dd { font-size: 0.9rem;}
	.stylefreeToushitsuWrap .akitsuBox .akitsuPlo p {  font-size: 0.8rem;}
}