@charset "utf-8";

@font-face {
	font-family: 'HuiFontP109';
	src: url('../font/HuiFontP109.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

#beginner_f .main p {
	margin: 0; 
	padding: 0;
}

#beginner_f p.preline {
	white-space: pre-line;
}

#beginner_f .top_img img {
	margin: 60px 0 0;
	max-width: 1100px;
	width: 100%;
}

#beginner_f p.top {
	font-size: min(3.5vw,25px);
}

.hachi {
	background-image: url("../img/beginner_f/hachi.png");
	background-repeat: no-repeat;
	background-size: 25%;;
	margin: -7px auto 20px;
	max-width: 600px;
	padding: 10px 0 0 10px;
	width: 85%;
}

.hachi p.fcp {
	color: pink;
	font-size: min(5.1vw,38px);
	text-align: left;
}


@media screen and (max-width:440px){
	.hachi p.fcp {
	}
}

.hachi p.fcp span {
	color: red;
	font-size: min(6.1vw,45px);
}

#f_main {
}

.f_top {
}

.box26 {
	/* aspect-ratio: 1/1; */
	background: #EDF7FB;
	position: relative;
	margin: 2em 5px;
	padding: 1em;
	border: solid 3px #00AAE8;
	border-radius: 8px;
	text-align: left;
	min-height: 400px;
	max-width: 463px;
	z-index: -1;
}

@media screen and (max-width:450px){
.box26 {
	min-height: 320px;
}
}


.box26 .box-title {
    border-radius: 8px;
    position: absolute;
    display: inline-block;
    top: -23px;
    left: 10px;
    padding: 8px 9px 3px;
    line-height: 1;
	font-size: min(8vw,35px);
    background: #00AAE8;
    color: #FFF;
    font-weight: bold;
}


.box26 p {
	font-size: min(3.2vw,17px);
    line-height: 1.8em;
}

.box26 p.preline {
	font-size: min(3.1vw,15px);
}

.box26 p span.plc {
	font-size: min(3.5vw,20px);
    font-weight: bold;
}

.box26 p.ttl {
	color: #00AAE8;
	font-size: min(3.6vw,22px);
}

.box26 p.sml {
	font-size: min(2.5vw,12px);
}

.box26 p.sml span {
	color: red;
}


.f_flx {
	display: flex;
	justify-content: center;
}

@media screen and (max-width:900px){
.f_flx {
	display: block;
	margin: 0 auto;
	max-width: 600px;
	width: 98%;
}
}

p.fb {
	font-size: min(4vw,23px);
	font-weight: bold;
}

p.fco {
	color: orange;
	font-size: min(4.4vw,38px);
	margin: 20px auto;
}

.qr_flx {
	display: flex;
	justify-content: space-around;
	margin-top: 50px;
	margin-bottom: 0;
	text-align: center;
}

img.qr {
	max-width: 150px;
	width: 100%;
}


.bg_box {
	background-image: url("../img/beginner_f/bg_box_01.jpg");
	background-repeat: no-repeat;
	background-size: 100%;
	font-family:'HuiFontP109', sans-serif;
	min-height: 438px;
	max-width: 503px;
	margin: 0 5px;
	width: 98%;
}

.bg_box p.title {
	font-size: min(4vw,23px);
	text-align:center;
	font-weight:bold;
	color: red;
	margin: 30px auto !important;
	padding-top: 30px !important;
	text-shadow: 
		0 0 0.05em #fff,
		0 0 0.10em #fff,
		0 0 0.15em #fff,
		0 0 0.30em #fff;
	filter: saturate(80%);
}

.bg_box .inner {
	background-color: rgba( 255, 255, 255, 0.70 );
	margin: 10px auto;
	max-width: 80%;
	padding: 10px;
}

.bg_box ul {
	list-style-type: none;
	margin:0;
	padding:0;
}

.bg_box ul li::before{
	content: "◎ ";
	display:inline-block;
	line-height: 1.5em;
	width:1.5em;
	margin-left:-1.5em;
}

.bg_box ul li {
	font-size: min(2.7vw,16px);
	font-weight: bold;
	text-align: left;
	margin-bottom:0.5em;
	padding-left:1.5em;
}