/******************************************************/
/* body */
/******************************************************/
body{
	color:#000;/* 文字色 */
	font-size:100%;
	font-family: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",Meiryo,"メイリオ","ＭＳ Ｐゴシック",verdana,arial,"lucida grande",sans-serif;
	line-height:180%!important;
	background:#fff;
	-webkit-text-size-adjust:100%;
}

body a{
	color:#e4007f;/* 文字色 */
	text-decoration:none;
}

body a:hover{
	color:#000;/* 文字色 */
}

@media only screen and (max-width:1024px){
	body{
		color:#000;/* 文字色 */
		font-size:90%;
		font-family: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",Meiryo,"メイリオ","ＭＳ Ｐゴシック",verdana,arial,"lucida grande",sans-serif!important;
		line-height:190%;
		-webkit-text-size-adjust: 100%;
	}
}

.SP{display:none !important;}
@media only screen and (max-width:1024px){
	.PC{display:none !important;}
	.SP{display:block !important;}
}

a img.linkimg{
background:none!important;
}

a:hover img.linkimg{
opacity:0.7;
filter:alpha(opacity=70);
-ms-filter: "alpha( opacity=60 )";
background:none!important;
}

.bg_white{
	background: #fff!important;
}

/******************************************************/
/* wrapper */
/******************************************************/
#wrapper{
	background:url(/tips/hajimete/images/main_bg_03.jpg) no-repeat center top #fff;
	color: #fff;
	width: 100%;
	background-size: 100%;
}
#main{
	width: 100%;
	margin: 0 auto 0 auto;
	box-sizing: border-box!important;
	position: relative;
}
	#main img{
		width: 100%;
	}
.logo{
	position: absolute;
	left:1.5vw;
	top:1.0vw;
}

#content{
	margin: auto;
	padding: 60px 20px 0 20px;
	background: #fff;
	max-width: 1240px;
	box-sizing: border-box;
}
	#content p{
		max-width: 1200px;
		margin: 0 auto 0 auto;
	}
	#content p img{
		width: 100%;
	}


.main_title{
	text-align: center;
	padding-bottom: 80px;
	font-size: 350%;
	font-weight: bold;
}
	.main_title img{
		max-width: 1200px;
		width: 100%;
	}


.read{
	text-align: center;
	padding-bottom: 3.5vw;
}



.navi{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
	.navi p{
		padding-right: 1.5vw;
	}
		.navi p:last-child{
			padding-right: 0;
		}






.gray_box{
	display: flex;
	justify-content: space-between;
	background:#f5f5f5;
	padding: 15px 15px 15px 15px;
	box-sizing: border-box;
	align-items: center;
	margin: 30px 0 50px 0;
}

	.gray_box p{
		width: 120px;
		text-align: center;
	}
		.gray_box p img{
			width: 80px!important;
		}
		.gray_box ul{
			width: 90%;
			padding-right: 20px;
		}
		.gray_box ul li{
			text-indent: -1em;
			margin-left: 1em;
		}
		.gray_box ul li.tt{
			text-indent: 0;
			margin-left: 0;
		}

		.gray_box ul.nd li{
			text-indent: 0!important;
			margin-left: 0!important;
		}

.gray_box.ver2{
	margin: 15px 0 50px 0;
}

	.gray_box.ver2 p{
		width: 450px!important;
		text-align: center;
	}
		.gray_box.ver2 p img{
			width: 450px!important;
		}
		.gray_box.ver2 ul{
			padding-left: 25px;
	}
		.gray_box.ver2 ul li{
			text-indent: -1em;
			margin-left: 1em;
		}


.gray_box.ver2.last{
	margin: 30px 0 0 0;
}



	.arrow{
		text-align: center;
		margin-top: -35px!important;
	}
		.arrow img{
			text-align: center;
			width: auto!important;
		}









/* SP */
@media only screen and (max-width:1024px){

.navi{
	margin-bottom: -15px;
}

	.main_title{
		padding-bottom: 12px;
		font-size: 130%;
	}

	.read{
		font-size: 90%;
		line-height: 170%;
	}



.ac_set{
	display: flex;
	justify-content: space-between;
}

.ac_set .ac_in{
		width: 50%;
		margin-right: 20px;
	}

	.ac_set .ac_in:last-child{
			margin-right: 0;
		}


	.gray_box{
		display: block;
		margin: 20px 0 30px 0;
		font-size: 90%;
		line-height: 170%;
	}

		.gray_box p{
			padding-bottom: 10px;
		}

		.gray_box p img{
			width: 60px!important;
		}

			.gray_box ul{
				width: 100%;
				padding-right: 0!important;
			}


.gray_box.ver2{
	margin: 15px 0 30px 0;
}

	.gray_box.ver2 p{
		width: 100%!important;
	}
		.gray_box.ver2 p img{
			width: 100%!important;
		}
		.gray_box.ver2 ul{
			padding: 0 0 10px 0;
	}


.gray_box.ver2.last{
	margin: 30px 0 0 0;
}

		.arrow{
			margin-top: -12px!important;
		}


}







/******************************************************/
/* title */
/******************************************************/
h1{
	text-align: center;
	padding: 6vw 0 10vw 0!important;
}

h2{
	text-align: center;
	font-size: 250%!important;
	font-weight: bold!important;
	line-height: 100%!important;
	margin-bottom: 50px!important;
	}

	h2 span{
		display: block;
		font-size: 35%;
	}

.tit_f{
	text-align: center;
	margin-bottom: 3vw!important;
}
	.tit_f img{
	max-width: 753px!important;
	}

	.title-border{
		display: flex;
		align-items: center;
		font-size: 150%;
		font-weight: bold;
		margin-bottom: 50px;
	}
		.title-border:before {
			margin-right: 1rem;
		}

		.title-border:after {
			margin-left: 1rem;
		}

		.title-border:before,.title-border:after {
			border-top: 1px dotted #000;
			content: "";
			flex-grow: 1;
		}




.title-border.icon02,.title-border.icon03,.title-border.icon04{
	padding-top: 13px!important;
}

	.title-border.icon01 span{
		background:url(/tips/hajimete/images/icon_be.gif) no-repeat left center!important;
		padding:17px 0 10px 40px;
	}

	.title-border.icon02 span{
		background:url(/tips/hajimete/images/icon_ch.gif) no-repeat left center!important;
		padding:17px 0 10px 45px;
	}

	.title-border.icon03 span{
		background:url(/tips/hajimete/images/icon_cm.gif) no-repeat left center!important;
		padding:17px 0 10px 45px;
	}

	.title-border.icon04 span{
		background:url(/tips/hajimete/images/icon_map.gif) no-repeat left center!important;
		padding:17px 0 10px 50px;
	}



		.ti_box{
			display: flex;
			justify-content: space-between;
			border: 1px solid #c3c3c3;
			box-sizing: border-box;
			font-size: 80%;
			margin-top: 40px;
		}
			.ti_box .ti_in{
				display: flex;
				justify-content: space-between;
				width: 50%;
			}

			.ti_box .ti_in .pp{
				padding: 15px;
				width: 35%;
				box-sizing: border-box;
			}

			.ti_box .ti_in .txt{
				width: 65%;
				padding:10px 10px 0 0;
				box-sizing: border-box;
			}

		.ti_box .ti_in:first-child{
			border-right: 1px solid #c3c3c3;
		}

		.btn_buy{
			text-align: center;
			margin-top: 3vw!important;
		}
			.btn_buy img{
				max-width: 586px;
			}



.de_set{
	display: flex;
	justify-content: space-between;
	border: 1px solid #c3c3c3;
	margin-bottom: 2vw;
}
	.de_set dl{
		padding: 30px;
	}
		.de_set dl dt{
			font-weight: bold;
			font-size: 140%;
			padding-bottom: 10px;
		}

			.de_set p img{
				width: 378px!important;
			}

			.flow img{
				width: 100%;
				height: auto;
			}

			.rady img{
				width: 100%;
				height: auto;
			}


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


	h2{
		text-align: center;
		font-size: 120%!important;
		margin-bottom: 20px!important;
	}
		h2 span{
			font-size: 50%;
		}

	.title-border{
		font-size: 100%;
		margin-bottom: 20px;
	}


	.de_set{
		font-size: 90%;
		line-height: 170%;
		display: block;
		margin-bottom: 20px;
	}
		.de_set dl{
			padding: 15px;
		}
			.de_set dl dt{
				font-weight: bold;
				font-size: 110%;
				padding-bottom: 8px;
			}

				.de_set p img{
					width: 100%!important;
				}

			.title-border.icon02,.title-border.icon03,.title-border.icon04{
				padding-top: 0px!important;
			}

			.title-border.icon01 span,.title-border.icon02 span,.title-border.icon03 span,.title-border.icon04 span{
				background-size: 20%!important;
				padding-left: 35px;
			}


		.ti_box{
			display: block;
			line-height: 170%;
		}
			.ti_box .ti_in{
				display: block;
				width: 100%;
			}

			.ti_box .ti_in .pp{
				padding: 15px 15px 10px 15px;
				width: 100%;
			}

			.ti_box .ti_in .txt{
				width: 100%;
				padding:0 15px 15px 15px;
			}

		.ti_box .ti_in:first-child{
			border-bottom: 1px solid #c3c3c3;
		}




}









	/******************************************************/
	/* モーダル */
	/******************************************************/
		.modal{
			display: none;
			height: 100vh;
			position: fixed;
			top: 0;
			width: 100%;
			z-index: 100!important;
		}
		.modal__bg{
			background: rgba(0,0,0,0.8);
			height: 100vh;
			position: absolute;
			width: 100%;
		}
		.modal__content{
			background: #fff;
			left: 50%;
			position: absolute;
			top: 50%;
			width: 40%;
			transform: translate(-50%,-50%);
		}

		.modal__content img{
			width: 100%;
		}

		.close{
			text-align: center;
			padding: 7px 0 10px 0;
			text-decoration: none!important;
		}
			.close a{
				text-decoration: none!important;
			}


	/******************************************************/
	/* foot */
	/******************************************************/
.foot{
	background:url(/tips/hajimete/images/foot_bg.gif) repeat-x center top;
	text-align: center;
	margin-top: 4vw;
	padding: 150px 0 0 0;
}



.f_menu{
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 80%;
	width: 100%;
}

	.f_menu li{
		border-left: 1px dotted #555;
		line-height: 100%;
		padding:0 20px 0 20px;
	}

	.f_menu li:last-child{
		border-right: 1px dotted #555;
	}

	.f_menu li a{
		text-decoration: none;
		color: #000;
	}

	.f_menu li a:hover{
		color: #e4007f;
	}


.f_logo{
	margin: 3vw 0 3vw 0;
}


.map_link{
	text-align: center;
	padding-top: 15px;
}
	.map_link a{
		text-decoration: none;
	}

/******************************************************/
/* sp */
/******************************************************/
@media only screen and (max-width:1024px){
	#main{
		width: 100%;
		box-sizing: border-box;
	}

	#content{
		padding: 20px 20px 20px 20px;
	}

	.logo{
		left:2vw;
		top:2vw;
	}
		.logo img{
			width:50%!important;
		}

	.foot{
		padding: 45px 0 0 0;
		background-size: contain;
	}
		.foot img{
			width: 30%;
		}

	.f_logo{
		margin: 30px 0 30px 0;
	}


.f_menu{
	margin-top: 30px;
	box-sizing: border-box;
}

	.f_menu li{
		padding:0 10px 0 10px;
	}

	.modal__content{
		width: 80%;
	}


}


/******************************************************/
/* clear */
/******************************************************/
.clear:after{
	display:block;content:"";clear:both;overflow:hidden;
}