@charset "UTF-8";
/* ====================== */
/*    machigaisagashi     */
/* ====================== */

/* ========TEMPLATE LAYOUT======== */
* {
	margin: 0;
	padding: 0;
    line-height: 0;
}

html {
	text-align: center;
	font-size: 1.5em;
}

body {
	overflow: hidden;
	position: relative;
    height: 100%;

}

main {
    background-color: #fff;
    text-align: -webkit-center;
}

/* ========HEADER/FOOTER======== */

#headerimg {
    margin: 10px
}

#back_home {
    position: absolute;
    top: 40px;
    left: 30px;
    z-index: 80;
}

footer {
	height: 30px;
    clear: both;
}



/* ========CONTENTS======== */
#contents {
	padding: 30px 0;
    max-width: 1300px;
}

#contents > div {
	padding: 10px 0;
}

#main_con {
	position:relative;
	color: rgb(255, 71, 0);
}

#center_con {
	position:relative;
	padding: 150px 18%;
}

#center_con img {
    width: 100%;
}

.balloon {
	display: inline;							/* インライン要素として表示 */
	position: absolute;							/* 親要素を基準 */
	padding: 20px 10px 10px 10px;				/* テキストの前後の余白 */
	background-color: rgba(255, 212, 0, 0.50);	/* 背景色（透明度） */
	line-height: normal;
	border-radius: 10px;
	border: solid;
}
.balloon:after{
	content: ""; 		/* コンテンツの挿入 */
	position: absolute;	/* 親要素を基準 */
}

/* 表示位置 */
.left1 { top: 3%; left: 5%; }				/* 吹き出し位置 */
.left1::after {
	border-top: 10px solid rgb(255, 71, 0);	/* 吹き出し口の高さ・色 */
	border-left: 10px solid transparent;	/* 吹き出し口の幅１／２ */
	border-right: 10px solid transparent;	/* 吹き出し口の幅１／２ */
	top: 100%;								/* 吹き出し口の縦位置 */
	left: 52%;								/* 吹き出し口の横位置 */
}

.left2 { top: 25%; right: 84%; left: 10px; }
.left2::after {
	border-top: 10px solid transparent;
	border-left: 10px solid rgb(255, 71, 0);
	border-bottom: 10px solid transparent;
	bottom: 14px;
	left: 100%;
}

.left3 { top: 48%; right: 84%; left: 10px; }
.left3::after {
	border-top: 10px solid transparent;
	border-left: 10px solid rgb(255, 71, 0);
	border-bottom: 10px solid transparent;
	top: 26px;
	left: 100%;
}

.left4 { bottom: 5%; left: 5%; }
.left4::after {
	border-right: 10px solid transparent;
	border-left: 10px solid transparent;
	border-bottom: 10px solid rgb(255, 71, 0);
	bottom: 100%;
	right: 35px;
}

.right1 { top: 6%; right: 5%; }
.right1::after {
	border-top: 10px solid rgb(255, 71, 0);
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	top: 100%;
	right: 65%;
}

.right2 { top: 24%; right: 10px; left: 84%; }
.right2::after {
	border-top: 10px solid transparent;
	border-right: 10px solid rgb(255, 71, 0);
	border-bottom: 10px solid transparent;
	bottom: 14px;
	right: 100%;
}

.right3 { top: 50%; right: 10px; left: 84%; }
.right3::after {
	border-top: 10px solid transparent;
	border-right: 10px solid rgb(255, 71, 0);
	border-bottom: 10px solid transparent;
	top: 26px;
	right: 100%;
}

.right4 { bottom: 5%; right: 5%; }
.right4::after {
	border-right: 10px solid transparent;
	border-left: 10px solid transparent;
	border-bottom: 10px solid rgb(255, 71, 0);
	bottom: 100%;
	right: 65%;
}


/* ========PRINT======== */

div#print {
    position: relative;
	padding: 20px 0;
    text-align: center;	
}

#print img {
	margin: 10px;
    width: 463px;
}

#btn_print {
    position: absolute;
    display: block;
    bottom: 30px;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

#btn_print div {
    margin-top: 20px;
}

#btn_print img {
    width: 180px;

}