@charset "utf-8";






/* ====================================================================
    スマホ用
=====================================================================*/

	.img-pc{ /* スマホ用画像を表示のためPC用画像を非表示　1 */
		display: none;
	}

	body { /* スマホ用基本設定 */
		width: 100vw;
		color:#333;
		margin:0;
		padding:0;
		font-size:15px;
		font-family: -apple-system, BlinkMacSystemFont , '游ゴシック体' , 'Yu Gothic', YuGothic , 'ヒラギノ角ゴ Pro' , 'Hiragino Kaku Gothic Pro' , 'メイリオ', 'Meiryo', Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
		/* font-family:'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif; */
		line-height:160%;
		background-color:#fff;
		text-align:center;
		overflow-x: hidden;
	}


	
	@media (max-width: 640px) { 
	.pagetop {
		position: fixed;
		bottom: 15px !important;
		right: 4%;
		display: none;
		z-index: 1000;
		width: auto;
	}

	.pagetop a {
		display: block;
		text-indent: -9999px;
		margin: 0 auto;
		width: 40px;
		height: 40px;
		background: url(../img/btn_pagetop.png) center center no-repeat;
		background-size: cover;
	}
	
	}

	.top img{ /* TOP画像の幅　*/
		width: 100%;
		margin-bottom: 10px;
	}

	.container{ /* 全体の画面幅を画面幅の90％に指定　*/
		width: 90vw;
		margin: 0 auto;
	}

	.container h1 img{ /* TOPのKDDI Location Analyzerのロゴ*/
		width: 80vw;
		margin-top: 10px;
	}

	h2{ /* 赤枠白抜き部分の指定 */
		display: block;
		background-color: #E60012;
		color: #fff;
		height: 42px;
		padding-top: 9px;
		margin: 1em 0;
		font-size: 17px;
		font-weight: bold;
		margin-right: calc(50% - 50vw);
		margin-left: calc(50% - 50vw);
	}

	h3{ /* 赤字見出しの指定 */
		color:  #E60012;
		font-size: 17px;
		margin-left: 40px;
		font-weight: 600;
	}

	h4{
		font-weight: bold;
	}

	.p_left, .are-area p{
		text-align: left;
		width: 95%;
		margin: 0 auto;
	}
	.p_small{
		font-size: 12px;
	}

	.tytle-1{ /* 見出し（グレー）*/
		font-size: 18px;
		font-weight:bold;
		margin-bottom: 20px;	
	}

	.tytle-2{ /* 見出し（赤） */
		color:  #E60012;
		font-size: 17px;
		font-weight: 600;
		margin-bottom: 30px;
	}

	.mg60{ /* お問い合わせの上下マージン設定 */
		margin: 60px 0 10px 0;
	}

	.icon-point { /* 赤丸POINTの装飾 */
		width: 60px;
		height: 60px;
		padding-top: 14px;
		border-radius: 40px;
		color: #fff;
		font-size: 15px;
		line-height: 120%;
		text-align: center;
		background-color: #e60012;
		flex-shrink: 0; /* 追加 */
	}

	.icon-point p{ /* POINTの文字 */
		font-size: 14px;
	}

	.icon-point span{ /* POINTの番号 */
		font-size: 20px;
		font-weight: bold;

	}
	.point{ /* POINTの赤丸 */
		display: flex;
		text-align: left;
		border-top: solid #e60012 3px;
		border-bottom: solid #e60012 3px;
		padding: 20px 0;
		align-items: center;
		margin: 25px 0;
	}

/* 取得できるデータ ----------------------------------------------------*/

	.acq-1 p, .acq-2 p{ /* 水色の角丸 */
		display: block; 
		height: 32px;
		border-radius: 16px;
		margin:0 auto 10px;
		padding-top: 4px;
		background-color: #64A5FF;
		color: #fff;
		font-weight: bold;
		width: 90%;	
	}

	.acq-area{ /* グレーの背景 */
		background-color: #EAEAEA;
		margin-top: 40px;
		margin-bottom: 40px;
		margin-right: calc(50% - 50vw);
		margin-left: calc(50% - 50vw);
		padding: 30px 0;
	}

	.acq-1 div, .acq-2 div{ /* グラフ */
		margin: 20px auto;
	}

	.acq-area .tytle1{ /* 文字 */
		padding-top: 20px;
	}

	.acq-1 img, .acq-2 img{ /* グラフ */
		width: 90%;
		margin: 0 auto;
	}

/* グラフ--------------------------------------------------------------*/

	.graph{ /* グレー背景 */
		background-color: #EAEAEA;
		margin-right: calc(50% - 50vw);
		margin-left: calc(50% - 50vw);
		padding: 30px 0 20px 0;
		margin-bottom: 30px;
	}

	.graph img{ /* グラフ写真*/
		width: 90%;
		padding-bottom: 20px;
		margin: 5px 0;
	}

/* エリア分析 ---------------------------------------------------------*/

	.are-area h4{ /* 水色の背景 */
		background-color: #64A5FF;
		height: 60px;
		color: #fff;
		padding-top: 20px;
		font-size: 17px;
	    margin-top: 15px;
		margin-bottom: 5px;
	}

	.are-area{ /* エリア分析 */
		margin-bottom: 40px;
	}

	.tytle_2{ /* 見出し（赤）にマージン設定 */
		margin-top: 30px;
	}
	.lp-wrapp address{
		/* display: block; */
		width: 50%;
		font-size: 20px;
		font-weight: bold;
		background-color: #64A5FF;
		padding: 10px 10px;
		color: rgb(255, 255, 255);
		justify-content: center;
		margin: 0 auto ;
		border-radius: 1vw;
	}

	/* クレジット -----------------------------------------------------*/

	.cre{ /* クレジット */
		font-size: 12px;
		line-height: 1.4em;
		margin: 50px 0 30px;
	}

/* ====================================================================
    pc用 画面幅391px以上
=====================================================================*/

@media screen and (min-width: 391px){

	.point h3 br{ /* 改行キャンセル */
		display: none;
	}
}
	
/* ====================================================================
    pc用 画面幅641px以上
=====================================================================*/

@media screen and (min-width: 641px){


#header-inner h1{
	width: 12%;
}

/*
	.pagetop {
		position: fixed;
		bottom: 75px;
		right: 3%;
		display: none;
		z-index: 1000;
	}

	.pagetop a {
		display: block;
		text-indent: -9999px;
		width: 50px;
		height: 50px;
		background: url(../img/btn_pagetop.png) center center no-repeat;
		background-size: cover;
	}
	*/

	a:hover {
		opacity: 0.6;
		filter: alpha(opacity=60);
	}

	.img-sp, .top-copy{ /* PC用画像差し替えのため非表示 */
		display: none;
	}

	.point h3 br, .img-pc{ /* 改行ON */
		display: block;
	}

	body{ /* 画面幅調整*/
		min-width:1250px;
	}

	.container{ /* 全体の画面幅を画面幅の90％に指定　*/
		width: 90%;
		margin: 0 auto;
	}
	
	h2, .acq-area{ /* 断ち切り解除　*/
		margin-right: 0;
		margin-left: 0;
	}
	
	.vis-rapper, .peo-area1, .peo-area2, .are-rapper, .ana-area{ /* 横並び指定　*/
		display: flex;
		justify-content: space-between;
	}

	.point-1{ /* 横並びの準備 */
		width: 30%;
	}

	.acq-1, .acq-2{ /* 横並び */
		width: 100%;
		height: auto;
		display: flex;
		justify-content:space-around;
	}
	
	.acq-1 img, .acq-2 img{
		width: 325px;
		display: block;

	}
	.acq-1 p, .acq-2 p{ /* ピンクの角丸 */
		width: 100%;
	}

	.point2-1, .point2-2, .point2-3, .point2-4, .point2-5, .point2-6, 
	.are-1, .are-2, .are-3, .point3-1, .point3-2, .point3-3	{ /* 横並びの準備 */
		width: 30%;
	}

	.graph img{ /* グラフの写真調整 */	
		width: 45%;
		margin-bottom: 30px;
	}

	.graph{ /* グラフ背景の断ち切り解除とフレックス */	
		display: flex;
		justify-content: space-around;
		margin-right: 0;
		margin-left: 0;
	}

	h2{ /* 赤枠白抜き部分の指定 */
		height: 42px;
		padding-top: 9px;
		margin: 1em 0;
	}


	.tytle-2{ /* 見出し（赤） */
		margin: 60px 0 35px 0;
	}

	.graph{ /* 断ち切り解除 */	
		padding: 0;
		margin-bottom: 0px;
	}

	.graph img{ /* グラフ画像の幅設定 */	
		width: 100%;
		padding-bottom: 0px;
		margin-bottom: 30px;
		width: 532px;
	}

	.graph p{ /* グラフキャプションのマージン調整　*/
		margin-top: 30px;
	}

	.tytle-1{ /* 見出し文字のマージン調整　*/
		margin: 20px 0;
	}

	.tytle-1, .tytle-2{  /* 見出し文字の拡大　*/
		font-size: 25px;
	}

	h2{ /* 赤枠白抜き部分の指定 */	
		height: 60px;
		padding-top: 18px;
		font-size: 23px;
	}

	.mg60{ /* お問い合わせのマージン調整 */	
		margin: 100px 0 30px;
	}

	.tytle-2 br{ /* 改行キャンセル */
		display: none;
	}
	.lp-wrapp address{
		/* display: block; */
		width: 30%;
		font-size: 25px;
		padding: 15px 15px;
		color: rgb(255, 255, 255);
		margin: 0 auto;
	}
}

/* ====================================================================
    pc用 画面幅1251px以上
=====================================================================*/

@media screen and (min-width: 1251px){

	.acq-1 img, .acq-2 img{ /* グラフ拡大 */	
		width: 27vw;
	}

	.graph img{ /* グラフ拡大 */	
		width: 43vw;
	}

	.point h3 br{ /* 改行キャンセル */	
		display: none;
	}
}