@charset "utf-8";

/* ----------------------------------------------------------------------------------------------------------
 #trial common
---------------------------------------------------------------------------------------------------------- */

/* smartphone
------------------------------------------------------------*/
#trial {
}
#trial a {
	text-decoration: underline;
}
#trial img {
	width: 100%;
}


/* PC
------------------------------------------------------------*/
@media print, screen and (min-width: 768px) {
#trial {
}
#trial a {
	text-decoration: underline;
}
}/* PC End */



/* ----------------------------------------------------------------------------------------------------------
 #trial #kv
---------------------------------------------------------------------------------------------------------- */

/* smartphone
------------------------------------------------------------*/
#trial #kv {
	padding-bottom: 12vw;
}
#trial #mainArea {
	position: relative;
	width: 100%;
	height: 53.33333vw;
	margin: 0 auto 15.46667vw;
} 
#trial .h2Bg {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 1;
}
#trial h2 {
	position: absolute;
	width: 100%;
	top: 17.63333vw;
	left: 0;
	z-index: 2;
	font-weight: 700;
	font-size: 10.66667vw;
	text-align: center;
	color: #fff;
	line-height: 1.24;
	text-shadow: 0px 0px 3.73333vw rgba(0, 0, 0, 0.95);
}
#trial h2 span {
	display: block;
	font-size: 4vw;
	font-weight: normal;
	letter-spacing: -0.06em;
	text-shadow: 0px 0px 2.13333 rgba(0, 0, 0, 0.95);
}
#trial h3 {
	font-size: 5.33333vw;
	line-height: 1.4;
	font-weight: 700;
	padding-bottom: 4.26667vw;
	text-align: center;
}
#trial h3 span {
	font-size: 8vw;
}
#trial h4 {
  width: 70.66667vw;
  margin: 0 auto;
}


/* PC
------------------------------------------------------------*/
@media print, screen and (min-width: 768px) {
#trial #kv {
	padding-bottom: 80px;
}
#trial #mainArea {
	position: relative;
	width: 1100px;
	height: 500px;
	margin: 0 auto 112px;
} 
#trial .h2Bg {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 1;
}
#trial h2 {
	position: absolute;
	width: 100%;
	top: 182px;
	left: 0;
	z-index: 2;
	font-weight: 700;
	font-size: 80px;
	text-align: center;
	color: #fff;
	letter-spacing: 0.05em;
	line-height: 1.24;
	text-shadow: 0px 0px 28px rgba(0, 0, 0, 0.95);
}
#trial h2 span {
	display: block;
	font-size: 25px;
	font-weight: normal;
	letter-spacing: -0.06em;
	text-shadow: 0px 0px 16px rgba(0, 0, 0, 0.95);
}
#trial h3 {
	font-size: 50px;
	line-height: 1.4;
	font-weight: 700;
	padding-bottom: 32px;
	text-align: center;
}
#trial h3 span {
	font-size: 70px;
}
#trial h4 {
  width: 580px;
  margin: 0 auto;
}
}/* PC End */



/* ----------------------------------------------------------------------------------------------------------
 #trial #howto
---------------------------------------------------------------------------------------------------------- */

/* smartphone
------------------------------------------------------------*/
#trial .titleBar {
	width: 100%;
	font-size: 4vw;
	background: #000;
	padding: 0 1.33333vw;
	line-height: 8vw;
	color: #fff;
	margin-bottom: 6.66667vw;
	box-sizing: border-box;
}
#trial #howto {
	width: 81.33333vw;
	margin: 0 auto;
}
#trial #howto dl {
	padding-bottom: 13.33333vw;
}
#trial #howto dl dd {
	font-size: 5.13333vw;
	padding-bottom: 2vw;
	font-weight: 700;
}
#trial #howto dl dd span {
	display: inline-block;
	border: 1px solid #000;
	font-size: 3.13333vw;
	padding: 0.53333vw 1.33333vw;
	line-height: 1.2;
	margin-right: 0.6em;
}
#trial #howto dl dt {
	font-size: 4vw;
	padding-bottom: 9.6vw;
}
#trial #howto dl dt a.howtoBtn {
	display: block;
	width: 70vw;
	height: 16vw;
	border: 0px solid #000;
	text-align: center;
	line-height: 16vw;
	font-size: 4vw;
	font-weight: 400;
	color: #FFF;
	background: url("../../common/images/arrow_w.svg") 94% center / 1.06667vw 2.66667vw no-repeat;
	background-color: #4285F4;
	margin: 0 auto;
	box-sizing: border-box;
	text-decoration: none;
}
#trial #howto dl dt p {
  padding-bottom: 6.66667vw;
}
#trial #howto dl dt img {
  display: block;
  width: 46.66667vw;
  margin: 0 auto;
}


/* PC
------------------------------------------------------------*/
@media print, screen and (min-width: 768px) {
#trial .titleBar {
	width: 100%;
	height: 50px;
	font-size: 25px;
	background: #000;
	padding: 0 15px;
	line-height: 50px;
	color: #fff;
	margin-bottom: 54px;
	box-sizing: border-box;
}
#trial #howto {
	width: 860px;
	margin: 0 auto;
}
#trial #howto dl {
	padding-bottom: 50px;
}
#trial #howto dl dd {
	font-size: 25px;
	padding-bottom: 20px;
}
#trial #howto dl dd span {
	display: inline-block;
	border: 1px solid #000;
	font-size: 20px;
	padding: 4px 10px;
	line-height: 1.2;
	margin-right: 1em;
}
#trial #howto dl dt {
	font-size: 20px;
	padding-bottom: 54px;
}
#trial #howto dl dt:last-child {
  margin-top: 50px;
}
#trial #howto dl dt a.howtoBtn {
	display: block;
	width: 400px;
	height: 80px;
	border: 0px solid #000;
	text-align: center;
	line-height: 80px;
	font-size: 25px;
	font-weight: 400;
	color: #000;
	background: url("../../common/images/arrow_w.svg") 97% center / 9px 20px no-repeat;
	background-color: #4285F4;
	color: #FFFFFF;
	margin: 0 auto;
	box-sizing: border-box;
	text-decoration: none;
}
#trial #howto dl dt:after {
	content: "";
	display: block;
	clear: both;
}
#trial #howto dl dt p {
  width: 580px;
  float: left;
  padding-bottom: 0;
}
#trial #howto dl dt img {
  width: 230px;
  float: right;
  margin: 10px auto 0;
}
#trial #howto dl dt a:hover {
	opacity: 0.7;
}
}/* PC End */



/* ----------------------------------------------------------------------------------------------------------
 #trial #flow
---------------------------------------------------------------------------------------------------------- */

/* smartphone
------------------------------------------------------------*/
#trial #flow {
	width: 81.33333vw;
	margin: 0 auto;
}
#trial #flow .check {
	padding-bottom: 10.66667vw;
}
#trial #flow .check ul {
	width: 100%;
	padding-bottom: 5.86667vw;
}
#trial #flow .check ul:after {
	content: "";
	display: block;
	clear: both;
}
#trial #flow .check ul li:first-child {
	text-align: left;
	font-size: 4vw;
	border-bottom: 1px solid #000;
	padding-bottom: 1.33333vw;
	margin:0 0 1.33333vw;
	line-height: 1.4;
	padding-left: 0;
	text-indent: inherit;
	float: none;
	width: 100%;
}
#trial #flow .check ul li {
	font-size: 4vw;
	float: left;
	width: 49%;
}
#trial #flow .check ul li.w100 {
	width: 100%;
}
#trial #flow .flowContents {
}
#trial #flow .flowContents dl {
	padding-bottom: 5.86667vw;
}
#trial #flow .flowContents dl.txtC {
}
#trial #flow .flowContents dl dd {
	font-size: 5.33333vw;
	font-weight: 700;
	padding: 4vw 0 5.86667vw;
	text-align: center;
}
#trial #flow .flowContents dl dt {
	font-size: 4vw;
	padding-bottom: 5.33333vw;
}
#trial #flow .flowContents dl dt span {
	display: block;
	font-size: 2.66667vw;
	padding-top: 6.66667vw;
}
#trial #flow .flowContents dl dt ul.checkBox {
	width: 81.33333vw;
	padding: 2.66667vw;
	box-sizing: border-box;
	border: 1px solid #000;
	margin: 0 auto 4.33333vw;
	font-size: 4vw;
}
#trial #flow .flowContents dl dt ul.checkBox:after {
	content: "";
	display: block;
	clear: both;
}
#trial #flow .flowContents dl dt ul.checkBox li:first-child {
	border-bottom: 1px solid #000;
	padding-bottom: 1.33333vw;
	margin-bottom: 1.33333vw;
	line-height: 1.4;
	padding-left: 0;
	text-indent: inherit;
	float: none;
	width: 100%;
	text-align: center;
}
#trial #flow .flowContents dl dt ul.checkBox li {
	float: left;
	width: 50%;
	text-align: left;
}
#trial #flow .flowContents dl dt ul.checkBox li:nth-child(even) {
	padding-left: 4.5%;
}
#trial #flow .flowContents dl dt ul.checkBox li:last-child {
	width: 100%;
}
#trial #flow .flowContents dl dt a {
	display: block;
	width: 70vw;
	height: 16vw;
	border: 0px solid #000;
	text-align: center;
	line-height: 16vw;
	font-size: 4vw;
	font-weight: 400;
	color: #FFF;
	background: url("../../common/images/arrow_w.svg") 94% center / 1.06667vw 2.66667vw no-repeat;
	background-color: #4285F4;
	margin: 0 auto;
	box-sizing: border-box;
	text-decoration: none;
}


/* PC
------------------------------------------------------------*/
@media print, screen and (min-width: 768px) {
#trial #flow {
	width: 860px;
	margin: 0 auto;
}
#trial #flow .check {
	padding-bottom: 80px;
}
#trial #flow .check:after {
	content: "";
	display: block;
	clear: both;
}
#trial #flow .check ul {
	width: 250px;
	float: left;
	margin-right: 55px;
}
#trial #flow .check ul:last-child {
	margin: 0;
}
#trial #flow .check ul li:first-child {
	text-align: center;
	font-size: 25px;
	border-bottom: 1px solid #000;
	padding-bottom: 10px;
	margin-bottom: 10px;
	line-height: 1.4;
	padding-left: 0;
	text-indent: inherit;
}
#trial #flow .check ul li {
	width: 100%;
	font-size: 20px;
	padding-left: 1em;
	text-indent: -1em;
}
#trial #flow .flowContents {
}
#trial #flow .flowContents dl {
	padding-bottom: 30px;
}
#trial #flow .flowContents dl.txtC {
	text-align: center;
}
#trial #flow .flowContents dl dd {
	font-size: 35px;
	font-weight: 700;
	padding: 20px 0 30px;
	text-align: center;
}
#trial #flow .flowContents dl dt {
	font-size: 20px;
	padding-bottom: 25px;
}
#trial #flow .flowContents dl dt span {
	display: block;
	font-size: 15px;
	padding-top: 24px;
}
#trial #flow .flowContents dl dt ul.checkBox {
	width: 550px;
	padding: 25px;
	box-sizing: border-box;
	border: 1px solid #000;
	margin: 0 auto 24px;
	font-size: 20px;
}
#trial #flow .flowContents dl dt ul.checkBox:after {
	content: "";
	display: block;
	clear: both;
}
#trial #flow .flowContents dl dt ul.checkBox li:first-child {
	border-bottom: 1px solid #000;
	padding-bottom: 10px;
	margin-bottom: 10px;
	line-height: 1.4;
	padding-left: 0;
	text-indent: inherit;
	float: none;
	width: 100%;
	text-align: center;
}
#trial #flow .flowContents dl dt ul.checkBox li {
	float: left;
	width: 50%;
	text-align: left;
}
#trial #flow .flowContents dl dt ul.checkBox li:nth-child(even) {
	padding-left: 15%;
}
#trial #flow .flowContents dl dt ul.checkBox li:last-child {
	width: 100%;
}
#trial #flow .flowContents dl dt a {
	display: block;
	width: 400px;
	height: 80px;
	border: 0px solid #000;
	text-align: center;
	line-height: 80px;
	font-size: 25px;
	font-weight: 400;
	color: #000;
	background: url("../../common/images/arrow_w.svg") 97% center / 9px 20px no-repeat;
	background-color: #4285F4;
	color: #FFFFFF;
	margin: 30px auto 60px;
	box-sizing: border-box;
	text-decoration: none;
}
#trial #flow .flowContents dl dt a:hover {
	opacity: 0.7;
}
}/* PC End */



/* ----------------------------------------------------------------------------------------------------------
 #trial #procedure
---------------------------------------------------------------------------------------------------------- */

/* smartphone
------------------------------------------------------------*/
#trial #procedure {
	width: 81.33333vw;
	margin: 0 auto 8.17439vw;
}
#trial #procedure p {
	text-align: left;
	font-size: 4.08719vw;
}


/* PC
------------------------------------------------------------*/
@media print, screen and (min-width: 768px) {
#trial #procedure {
	width: 860px;
	margin: 0 auto 40px;
}
#trial #procedure p {
	text-align: center;
	font-size: 20px;
}
}/* PC End */



/* ----------------------------------------------------------------------------------------------------------
 #trial #procedure
---------------------------------------------------------------------------------------------------------- */

/* smartphone
------------------------------------------------------------*/
#trial #campaign {
}
#trial #campaign .pickup {
	background: #d9d9d9;
	padding: 6.81199vw 0 6.81199vw;
}
#trial #campaign .pickupInr {
	width: 81.33333vw;
	margin: 0 auto;
	text-align: center;
}
#trial #campaign .pickupInr h3 {
	border: 2px solid #e61b64;
	padding: 16px;
	box-sizing: border-box;
	font-size: 5.81199vw;
	font-weight: 700;
	color: #e61b64;
	margin-bottom: 6.81199vw;
}
#trial #campaign .pickupInr h4 {
	width: 61.3079vw;
	height: auto;
	margin: 0 auto 6.81199vw;
}
#trial #campaign #enrollment {
	width: 81.33333vw;
	padding: 15.80381vw 0 6.81199vw;
	margin: 0 auto 6.81199vw;
	text-align: center;
}
#trial #campaign #enrollment .enrollmentTitle {
	position: relative;
	display: inline-block;
	padding: 0 11.44687vw;
	font-size: 5.44959vw;
	margin-bottom: 2.7248vw;
	font-weight: 700;
}
#trial #campaign #enrollment .enrollmentTitle:before,
#trial #campaign #enrollment .enrollmentTitle:after {
content: '';
position: absolute;
top: 50%;
display: inline-block;
width: 6.81199vw;
height: 1px;
background-color: black;
}
#trial #campaign #enrollment .enrollmentTitle:before {left:0;}
#trial #campaign #enrollment .enrollmentTitle:after {right: 0;}
#trial #campaign #enrollment .enrollmentBox {
	width: 81.33333vw;
}
#trial #campaign #enrollment .enrollmentBox dl:nth-child(1) {
}
#trial #campaign #enrollment .enrollmentBox dl:nth-child(2) {
}
#trial #campaign #enrollment .enrollmentBox dl {
	width: 100%;
	padding-bottom: 2.7248vw;
}
#trial #campaign #enrollment .enrollmentBox dl dd {
	font-size: 4.08719vw;
	font-weight: 700;
	line-height: 1.4;
	width: 100%;
	text-align: left;
}
#trial #campaign #enrollment .enrollmentBox dl dd span {
	font-size: 4.08719vw;
	display: inline;
}
#trial #campaign #enrollment .enrollmentBox dl dd span .spOnly {
	display: inline;
}
#trial #campaign #enrollment .enrollmentBox dl dt {
	font-size: 4.08719vw;
	text-align: left;
}
#trial #campaign #enrollment a {
	display: block;
	width: 60vw;
	height: 16vw;
	border: 1px solid #000;
	text-align: center;
	line-height: 16vw;
	font-size: 4vw;
	font-weight: 400;
	color: #000;
	background: url("../../common/images/arrow.svg") 94% center / 1.06667vw 2.66667vw no-repeat;
	margin: 8.17439vw auto 0;
	box-sizing: border-box;
	text-decoration: none;
}

.lf{
	font-size: 4vw;
    margin: -10vw 0 20vw 0;
}


/* PC
------------------------------------------------------------*/
@media print, screen and (min-width: 768px) {
#trial #campaign {
}
#trial #campaign .pickup {
	background: #d9d9d9;
	padding: 60px 0 40px;
}
#trial #campaign .pickupInr {
	width: 860px;
	margin: 0 auto;
	text-align: center;
}
#trial #campaign .pickupInr h3 {
	border: 2px solid #e61b64;
	padding: 16px;
	box-sizing: border-box;
	font-size: 50px;
	font-weight: 700;
	color: #e61b64;
	letter-spacing: 0.14em;
	margin-bottom: 50px;
}
#trial #campaign .pickupInr h4 {
	width: 470px;
	height: 173px;
	margin: 0 auto 40px;
}
#trial #campaign #enrollment {
	width: 860px;
	padding: 100px 0 0;
	margin: 0 auto 100px;
	text-align: center;
}
#trial #campaign #enrollment .enrollmentTitle {
	position: relative;
	display: inline-block;
	padding: 0 250px;
	font-size: 35px;
	margin-bottom: 0;
}
#trial #campaign #enrollment .enrollmentTitle:before,
#trial #campaign #enrollment .enrollmentTitle:after {
content: '';
position: absolute;
top: 50%;
display: inline-block;
width: 230px;
height: 1px;
background-color: black;
}
#trial #campaign #enrollment .enrollmentTitle:before {left:0;}
#trial #campaign #enrollment .enrollmentTitle:after {right: 0;}
#trial #campaign #enrollment .enrollmentBox {
	width: 860px;
	min-height: 260px;
	position: relative;
}
#trial #campaign #enrollment .enrollmentBox dl:nth-child(1) {
	position: absolute;
	top: 30px;
	left: 0;
}
#trial #campaign #enrollment .enrollmentBox dl:nth-child(2) {
	position: absolute;
	top: 30px;
	right: 0;
}
#trial #campaign #enrollment .enrollmentBox dl {
	width: 430px;
}
#trial #campaign #enrollment .enrollmentBox dl dd {
	font-size: 30px;
	font-weight: 700;
	line-height: 1.4;
	width: 430px;
	height: 96px;
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}
#trial #campaign #enrollment .enrollmentBox dl dd span {
	font-size: 20px;
	display: block;
}
#trial #campaign #enrollment .enrollmentBox dl dd span.spOnly {
	display: none !important;
}
#trial #campaign #enrollment .enrollmentBox dl dt {
	font-size: 20px;
	text-align: center;
}
#trial #campaign #enrollment a {
	display: block;
	width: 350px;
	height: 80px;
	border: 1px solid #000;
	text-align: center;
	line-height: 80px;
	font-size: 25px;
	font-weight: 400;
	color: #000;
	background: url("../../common/images/arrow.svg") 97% center / 9px 20px no-repeat;
	margin: 30px auto 60px;
	box-sizing: border-box;
	text-decoration: none;
}
#trial #campaign #enrollment a:hover {
	opacity: 0.7;
}

.lf{
	margin: -75px auto 100px;
	font-size: 20px;
}
	

}/* PC End */