﻿
section {
	margin-top:5em;
}


/* **************************************************

  		　　VOICE

************************************************** */

:root {
    --voice-width:1124;
}

body#voice::before {
	content: "";
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -9999;
	transform:translate3d(0,0,0); //ここを追記
	-webkit-backface-visibility:hidden;
	padding-top:3rem;
}


/* ********* VOICE ******** */
#voice_text1 {
	position:absolute;
	bottom:21vw;
	left: 50%;
	transform: translate(-50%, -0%);
	-webkit-transform: translate(-50%, -0%);
	-ms-transform: translate(-50%, -0%);
	z-index:10;
	width:50.7vw;
	height:auto;
}

/* ********* VOICE 文字設定 ******** */
body#voice h1 {
	display: flex;
	flex-direction: column;
}
#voice_h1-1 {
	width:45.2%;
	margin:5rem auto 0rem;
	display:inline-block;
}
#voice_h1-2 {
	width:27.7%;
	margin:1.5rem auto 3rem;
	display:inline-block;
}

body#voice .cont_inner p  {
	font-size:0.95em;
	margin-bottom:2em;
	color:#333;
}
body#voice .cont_inner img {

}

body#voice .cont_inner p.font_gray {
	color:#808080;
}

/* ********* 見出し ******** */

/* 見出しバーのデザイン調整 */
:root {
	--h2long:3rem;
}
.stretch {
	position:relative;
}
.bar {
	position:absolute;
	top:0%;
	left:0;
	text-align:right;
	visibility: hidden;
}
.bar::before {
	content:'';
	position:absolute;
	left:0;
	top:50%;
	transform: translate(-0%, -50%);
	-webkit-transform: translate(-0%, -50%);
	-ms-transform: translate(-0%, -50%);
	height:0.7em;
	border-left:var(--h2long) solid #666;

}
.stretch h2 {
	text-align:left;
	margin-bottom:2em;
	color:#666;
	font-size:1.1em;
	padding-left:calc(var(--h2long) + 0.7em);
}




/* **************************************************

　　　　　　　　　　CSS振り分け

************************************************** */
@media only screen and (min-width: 640px) {

/* **************************************************

　　　　　　　　　　CSS振り分け

************************************************** */
@media only screen and (min-width: 640px) {

	body#voice::before {
		content: "";
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		-webkit-transform: translate3d(0, 0, -1px);
		transform: translate3d(0, 0, -1px);
		z-index: -9999;
		transform:translate3d(0,0,0); //ここを追記
		-webkit-backface-visibility:hidden;
	}

	/* ********* VOICE ******** */
	#voice_text1 {
		position:absolute;
		left: 50%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		z-index:10;
		width:26.7%;
		height:auto;
		opacity:1;
	}

	/* 見出しバーのデザイン調整 */
	:root {
		--h2long:1rem;
	}
	.bar::before {
		height:1.3em;
		top:90%;
		border-left:calc((100vw - var(--base-width))/2  + var(--h2long)) solid #666;
	}

	.stretch h2 {
		font-size:2em;
		padding-left:calc((100vw - var(--base-width))/2  + var(--h2long) + 1em);
	}

	#voice_h1-1 {
		width:18.9%;
		margin:5rem auto 0rem;
	}
	#voice_h1-2 {
		width:11.5%;
		margin:1.5rem auto 6rem;
	}



}
