h2.title_top_pic{
	margin: 0;
	padding: 0;
	text-indent:-1500px;
	display: block;
	overflow: hidden;
	height: 0;
	max-width: 100%;
	max-height: 100%;
	background-image: url(./images/vanguide_top.png);
	background-repeat: no-repeat;
	background-size: contain;
	padding-top: 40%; /* 400 ÷ 1000 x 100 = 40 */
	/* Background で WH ％で画像配置する際（正方形の場合 １００%）
	/* 表示画像の高さ ÷ 表示画像の幅 × 100 */
	/* 例:幅800px高さ300pxの画像の場合 */
	/* padding-top: 37.5%; */
}
h2.vanguide_get{
	margin: 0 0 2em 0;
	padding: 0;
	text-indent:-1500px;
	display: block;
	overflow: hidden;
	height: 0;
	max-width: 100%;
	max-height: 100%;
	background-image: url(./images/vanguide_get.png);
	background-repeat: no-repeat;
	background-size: contain;
	padding-top: 26%; /* 480 ÷ 1000 x 100 = 48 */
	/* Background で WH ％で画像配置する際（正方形の場合 １００%）
	/* 表示画像の高さ ÷ 表示画像の幅 × 100 */
	/* 例:幅800px高さ300pxの画像の場合 */
	/* padding-top: 37.5%; */
}


h3.distTitle{
	margin: 1em 0;
	font-weight: bold;
	color: #404040;
	font-size: 140%;
	background-color: #fad00a;
	padding: 0.8em;
	padding-left: 3em;
	position: relative;

	border-top-left-radius: 26px; 
	border-bottom-left-radius: 26px; 
	-webkit-border-top-left-radius: 26px; /* Safari,Google Chrome用 */  
	-webkit-border-bottom-left-radius: 26px; /* Safari,Google Chrome用 */  
	-moz-border-radius-topleft: 26px; /* Firefox用 */  
	-moz-border-radius-bottomleft: 26px; /* Firefox用 */  
}
	h3.distTitle:before{
		content: "";
		height: 2em;
		width: 2em;
		background-repeat: no-repeat;
		background-size: contain;
		vertical-align:middle;
		position: absolute;
		left: 0.6em;
		top: 50%;
		margin-top: -1em;
	}
	h3.distTitle.canada:before{
		background-image: url(./images/flag_canada.svg);
	}
	h3.distTitle.japan:before{
		background-image: url(./images/flag_japan.svg);
	}
	h3.distTitle.world:before{
		background-image: url(./images/flag_world.svg);
	}

div.topTxtBox{
	margin: 1em 0;
	padding-right: 31%;
	box-sizing: border-box;
	position: relative;
}
	div.topTxtBox:after{
		position: absolute;
		right: 0;
		top: 0;
		box-sizing: border-box;
		width: 30%;
		display: block;
		content: "";
		margin: 0;
		padding: 0;
		display: block;
		overflow: hidden;
		height: 0;
		max-width: 100%;
		max-height: 100%;
		padding-top: 83%;
		background-repeat: no-repeat;
		background-size: contain;
		background-image: url(./images/van_illust.png);
	}
	div.topTxtBox h3.topTitle{
		padding: 0 0 15px 0;
		margin: 10px 0px;
		font-size: 16px;
		font-weight: bold;
		color: #00629B;
		line-height: 22px;
		border-bottom: solid 1px #55A2F1;
	}


p.vanguide_process{
	margin: 0 0 2em 0;
	padding: 0;
	text-indent:-1500px;
	display: block;
	overflow: hidden;
	height: 0;
	max-width: 100%;
	max-height: 100%;
	background-repeat: no-repeat;
	background-size: contain;
	padding-top: 40%; /* 480 ÷ 1000 x 100 = 48 */
	/* Background で WH ％で画像配置する際（正方形の場合 １００%）
	/* 表示画像の高さ ÷ 表示画像の幅 × 100 */
	/* 例:幅800px高さ300pxの画像の場合 */
	/* padding-top: 37.5%; */
}
	p.vanguide_process.book{
		background-image: url(./images/vanguide_book_process.png);
	}
	p.vanguide_process.download{
		background-image: url(./images/vanguide_download_process.png);
	}





div.dl_store{
	margin: 2em 0;
}
div.dl_store a{
	text-indent:-1500px;
	display: block;
	overflow: hidden;
	height: 0;
	max-width: 100%;
	max-height: 100%;
	background-image: url(./images/online_download_button.png);
	background-repeat: no-repeat;
	background-size: contain;
	padding-top: 22%; /* 220 ÷ 1000 x 100 = 22 */
	/* Background で WH ％で画像配置する際（正方形の場合 １００%）
	/* 表示画像の高さ ÷ 表示画像の幅 × 100 */
	/* 例:幅800px高さ300pxの画像の場合 */
	/* padding-top: 37.5%; */
}
	div.dl_store a:hover{
		filter: alpha(opacity=75);
		opacity:0.75;
	}


div.pic_bottom{
	margin: 10px auto;
	text-indent:-1500px;
	display: block;
	overflow: hidden;
	width: 490px;
	height: 239px;
	background-image: url(./images/map_bottom.jpg);
	text-indent:-1500px;
}


/************** オーダー 説明 **************/

div.order_desc{
	margin-bottom: 50px;
}
div.order_desc p{
	color: #999999;
	text-align: center;
	margin: 3px;
}

	div.order_desc span.order_sample_button{
		background-color: #dc2000;
		padding: 2px 6px;
		margin-left: 3px;
		margin-right: 3px;
		color: #fff;
		display: inline-block;
		zoom: 1;
		*display: inline;
		border-radius: 3px; 
		-webkit-border-radius: 3px; /* Safari,Google Chrome用 */  
		-moz-border-radius: 3px; /* Firefox用 */  

	}


/************** オーダー ボタン **************/
/* .order_button.book の場合 */
.order_button.book {
	--base-color: #57b1af; /* ベース色 */
	--base-shadow: #4a9e9d; /* シャドウ色 */
	--hover-color: #79c8c6; /* ホバー時の色 */
	--balloon-color: #4a9e9d; /* バルーンのテキスト色 */
	--balloon-border: #57b1af; /* バルーンのボーダー色 */
}

/* .order_button.download の場合 */
.order_button.download {
	--base-color: #d14f42; /* 通常時の色（濃い赤） */
	--base-shadow: #a33d30; /* より濃い赤でシャドウ */
	--hover-color: #e74c3c; /* ホバー時の色（赤に近い色） */
	--balloon-color: #c0392b; /* 深い赤 */
	--balloon-border: #e74c3c; /* 赤に近い色 */
}

.order_button {
	display: block;
	width: 90%;
	height: auto;
	position: relative;
	margin-top: 60px;
	margin-bottom: 10px;
	margin-left: auto;
	margin-right: auto;
}

.order_button .btn_text {
	font-size: 2em;
	letter-spacing: 0.2em;
}
.order_button a.button {
	text-decoration: none;
	color: #fff;
	width: 100%;
	padding: 25px 30px;
	border-radius: 8px;
	font-family: "Noto Sans Japanese";
	font-weight: 500;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	background: var(--base-color, #57b1af); /* 変数のフォールバック */
	-webkit-box-shadow: 0 5px 0 var(--base-shadow, #4a9e9d); /* フォールバック */
	box-shadow: 0 5px 0 var(--base-shadow, #4a9e9d); /* フォールバック */
	color: #fff;
	transition: 0.2s;
}
.order_button a.button:after {
	content: "";
	position: absolute;
	top: 50%;
	bottom: 0;
	right: 2rem;
	font-size: 90%;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: right 0.3s;
	width: 6px;
	height: 6px;
	border-top: solid 2px currentColor;
	border-right: solid 2px currentColor;
	transform: translateY(-50%) rotate(45deg);
}
.order_button a.button:hover {
	background: var(--hover-color, #79c8c6); /* フォールバック */
	color: #FFF;
	-webkit-box-shadow: 0 2px 0 var(--base-shadow, #4a9e9d); /* フォールバック */
	box-shadow: 0 2px 0 var(--base-shadow, #4a9e9d); /* フォールバック */
	transform: translateY(3px);
}

.order_button .btn_balloon {
	font-size: 0.9em;
	width: auto;
	padding: 8px 3em;
	border-radius: 20px;
	border: solid 2px var(--base-color, #57b1af); /* フォールバック */
	background-color: #fff;
	font-family: "Noto Sans Japanese";
	font-weight: 700;
	line-height: 1;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: -20px;
	left: 50%;
	transform: translate(-50%, 0%);
	pointer-events: none;
	transition: 0.2s;
	color: var(--balloon-color, #4a9e9d); /* フォールバック */
	z-index: 2;
}
.order_button .btn_balloon::before,
.btn_balloon::after {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	position: absolute;
	left: 50%;
	transform: translate(-50%, 100%);
}
.order_button .btn_balloon::before {
	bottom: 1px;
	border-width: 8px 5px 0 5px;
	border-color: #fff transparent transparent transparent;
	z-index: 2;
}
.order_button .btn_balloon::after {
	bottom: 0;
	border-width: 11px 8px 0 8px;
	border-color: var(--base-color, #57b1af) transparent transparent transparent; /* フォールバック */
	z-index: 1;
}





div.indexBox {
	width: 100%;
	margin: 30px 0;
	padding: 0;
	overflow: hidden;
	box-sizing: border-box;
}
	div.indexBox ul {
		width: 100%;
		padding: 0;
		margin: 0; 
		text-align: center;
		letter-spacing: -.40em; /* 文字間を詰めて隙間を削除する */
	}
	div.indexBox li {
		letter-spacing: normal; /* 文字間を通常に戻す */
		width: 30%;
		height: auto;
		vertical-align: top;
		background-color: #bfdfff;
		padding: 0;
		list-style-type: none;
		line-height: 18px
		overflow: auto;
		margin: 1%;
		list-style-type: none;
		text-align: left;
		box-sizing: border-box;

		display: inline-block;
		zoom: 1;
		*display: inline;

		background-repeat: no-repeat;
		background-size: contain;
		background-position: center top;
		background-color: #bfdfff;

		border-radius: 3px; 
		-webkit-border-radius: 3px; /* Safari,Google Chrome用 */  
		-moz-border-radius: 3px; /* Firefox用 */  
	}
		div.indexBox ul li:last-child {
		}


		div.indexBox li div.tit{
			color: #ffffff;
			padding: 0.3em 0;
			font-size: 120%;
			text-align: center;
			font-weight: bold;
			display: block;
			box-sizing: border-box;
			filter: alpha(opacity=85);
			opacity:0.85;

			border-top-left-radius: 3px; 
			border-top-right-radius: 3px; 
			-webkit-border-top-left-radius: 3px; /* Safari,Google Chrome用 */  
			-webkit-border-top-right-radius: 3px; /* Safari,Google Chrome用 */  
			-moz-border-radius-topleft: 3px; /* Firefox用 */  
			-moz-border-radius-topright: 3px; /* Firefox用 */  
		}
		div.indexBox li div.cont{
			margin-top: 65%;
			padding: 0.5em 0.3em;
			display: block;
		}
		div.indexBox li.prepare {
			background-image:  url(./images/box_pic_prepare.jpg);
		}
			div.indexBox li.prepare div.tit{
				background-color: #e7141b;
			}
		div.indexBox li.general {
			background-image: url(./images/box_pic_general.jpg);
		}
			div.indexBox li.general div.tit{
				background-color: #1e97af;
			}
		div.indexBox li.live {
			background-image: url(./images/box_pic_live.jpg) ;
		}
			div.indexBox li.live div.tit{
				background-color: #bc698f;
			}
		div.indexBox li.shopping {
			background-image: url(./images/box_pic_shopping.jpg);
		}
			div.indexBox li.shopping div.tit{
				background-color: #e06a62;
			}
		div.indexBox li.school {
			background-image: url(./images/box_pic_school.jpg);
		}
			div.indexBox li.school div.tit{
				background-color: #154a97;
			}
		div.indexBox li.useful {
			background-image: url(./images/box_pic_useful.jpg);
		}
			div.indexBox li.useful div.tit{
				background-color: #e6a726;
			}





/* distri List */
div.distList{
	width: 100%;
	margin: 10px auto;
}
	div.distList h4{
		font-weight: bold;
		margin: 0;
		padding: 2px 0 2px 12px;
		border-left: #fad00a 4px solid;
	}

	div.distList ul{
		display: block;
		overflow: auto;
		padding: 0 0 1em 0;
		margin: 1em 0;
		border-bottom: #fad00a 2px dotted;
	}
	div.distList ul li{
		white-space: nowrap;
		list-style-type: none;
		text-indent: 1em;
		margin: 0 3em 0 0;
		padding: 0;
		float: left;
	}
		div.distList li:before {
			font-family: FontAwesome;
			margin-right: 0.5em;
			font-size: 140%;
		}
		div.distList li.address:before {
			content: "\f041";
			color: #d63d2f;
		}
		div.distList li.map:before {
			content: "\f279";
			color: #4285f4;
		}
		div.distList li.web:before {
			content: "\f0ac";
			color: #1abcf1;
		}

	div.distList ul li a{
		color: #404040;
	}

/* distri List */


/* distri PDF EXP */
div.pdfNoteWrap{
	margin: 10px;
	padding: 10px;
	background-color: #ffffff;
	border: 3px solid #fad00a;
	overflow: auto;
	border-radius: 6px; 
	-webkit-border-radius: 6px; /* Safari,Google Chrome用 */  
	-moz-border-radius: 6px; /* Firefox用 */  
}

div.pdfNote{
/*	background-image: url(./images/icon_pdf.png);
	background-repeat: no-repeat;
	background-position: 10px center;	*/
	margin: 10px;
	padding: 10px;
	background-color: #f8eeeb;
/*	border: 3px solid #ddc6cc;	*/
	overflow: hidden;
	clear: both;
	border-radius: 6px; 
	-webkit-border-radius: 6px; /* Safari,Google Chrome用 */  
	-moz-border-radius: 6px; /* Firefox用 */  
}

/* distri PDF EXP */


div.dl_btn {
	width: 100%;
	margin: 30px 0;
	padding: 0;
	overflow: hidden;
	box-sizing: border-box;
}
	div.dl_btn ul {
		width: 100%;
		padding: 0;
		margin: 0; 
		text-align: center;
	}
		div.dl_btn ul li {
			width: 45%;
			box-sizing: border-box;
			margin: 0;
			margin-right: 1%;
			padding: 0;
			list-style-type: none;
			text-align: left;

			display: inline-block;
			zoom: 1;
			*display: inline;
		}
		div.dl_btn ul li:last-child {
			margin-right: 0;
		}
	div.dl_btn ul li a{
		margin: 0;
		background-color: #ff9900;
		border-left: 10px solid #ff6600;
		border-right: 2px solid #ff6600;
		border-top: 2px solid #ff6600;
		border-bottom: 2px solid #ff6600;
		padding: 6px;
		padding-left: 16px;
		text-decoration: none;
		display: block;

		background-repeat: no-repeat;
		background-size: 30%;
		background-position: right 0.5em center;
	}
	div.dl_btn ul li.btn_dt a{
		background-image: url(./images/btn_bg_dt.png);
	}
	div.dl_btn ul li.btn_van a{
		background-image: url(./images/btn_bg_van.png);
	}

	div.dl_btn ul li a span{
		color: #262626;
		line-height: 110%%;
		display: block;
		font-weight: bold;
		filter: dropshadow(color=#fff,offX= 0,offY=-1) 
			dropshadow(color=#fff,offX= 1,offY= 0) 
			dropshadow(color=#fff,offX= 0,offY= 1) 
			dropshadow(color=#fff,offX=-1,offY= 0); 
		-webkit-text-stroke-color: #fff; 
		-webkit-text-stroke-width: 1px; 
		text-shadow: white 1px 1px 0px, white -1px 1px 0px,
		             white 1px -1px 0px, white -1px -1px 0px;

	}
	div.dl_btn ul li a span.txt1{
		font-size: 140%;
	}

	div.dl_btn ul li a span.txt2{
		color: #46614e;
		font-size: 180%;
	}

	div.dl_btn ul li a span.dlTxt{
		color: #46614e;
		font-weight: bold;
		font-size: 140%;
		text-align: center;
		filter: none;
		text-shadow: none;
	}


	div.dl_btn ul li a:hover{
		filter: alpha(opacity=75);
		opacity:0.75;
	}





div.btn_dl_pdf {
	margin: 0;
	padding: 0;
	float: right;
}
		div.btn_dl_pdf img {
/*			border: 1px solid #ddd;	*/
/*			padding: 3px;	*/
/*			background: #f8f8f8;	*/
			margin: 5px;
			width: 120px;
			height: 40px;
		}

		div.btn_dl_pdf a:hover{
			filter: alpha(opacity=75);
			opacity:0.75;
		}


div.mailNote{
	margin: 1em 0;
	padding: 1em;
	padding-left: 22%;
	box-sizing: border-box;
	background-color: #f8eeeb;
	position: relative;

	border-radius: 6px; 
	-webkit-border-radius: 6px; /* Safari,Google Chrome用 */  
	-moz-border-radius: 6px; /* Firefox用 */  
}
	div.mailNote:before{
		position: absolute;
		left: 1%;
		top: 50%;
		box-sizing: border-box;
		width: 20%;
		display: block;
		content: "";
		margin: 0;
		padding: 0;
		margin-top: -10%;
		display: block;
		overflow: hidden;
		height: 0;
		max-width: 100%;
		max-height: 100%;
		padding-top: 83%;
		background-repeat: no-repeat;
		background-size: contain;
		background-image: url(./images/icon_order.png);

	}