@charset "UTF-8";
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote {margin:0;padding:0;}
h1,h2,h3,h4,h5 {font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}
ul,li {list-style:none;list-style-type:none;}
img{border-style:none;vertical-align:bottom;width:100%;}
a{overflow:hidden;outline:none;}
/* clearfix */
.clearfix:after { content: ""; display: block; height: 0; visibility: hidden; clear: both; }
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
/* box-sizing */
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
/* hide */
.text_hide { text-indent: -9999px; }
.display_none { display: none !important; }
/* link */
a:link { color: inherit; text-decoration: none; }
a:visited { color: inherit; text-decoration: none; }
a:hover { color: inherit; text-decoration: none; opacity: 0.7; }
a:active { color: inherit; text-decoration: none; }
a.text { text-decoration: underline; }
a.text:link { text-decoration: underline; }
a.text:hover { text-decoration: underline; opacity: 0.7; }
a[ href^="tel:" ] { /*color: #464646;*/ text-decoration: none; cursor: default; pointer-events: none; }
@media screen and ( max-width:736px ){ a[ href^="tel:" ] { /*color: blue;*/ text-decoration: underline; cursor: pointer; } }
/* indent */
.txt-ind { margin-left: 1em !important; text-indent: -1.0em !important; }
.noind { margin-left: 0em !important; text-indent: 0em !important; }
/* margin padding */
.mt0 { margin-top: 0px !important; }
.mt10 { margin-top: 10px !important; }
.mt20 { margin-top: 20px !important; }
.mt30 { margin-top: 30px !important; }
.mt40 { margin-top: 40px !important; }
.mt50 { margin-top: 50px !important; }
.mt60 { margin-top: 60px !important; }
.mt1em { margin-top: 1em !important; }
.mt2em { margin-top: 2em !important; }
.mb0 { margin-bottom: 0px !important; }
.mb10 { margin-bottom: 10px !important; }
.mb20 { margin-bottom: 20px !important; }
.mb30 { margin-bottom: 30px !important; }
.mb40 { margin-bottom: 40px !important; }
.mb50 { margin-bottom: 50px !important; }
.mb60 { margin-bottom: 60px !important; }
.mb1em { margin-bottom: 1em !important; }
.mb2em { margin-bottom: 2em !important; }
.mr0 { margin-right: 0px !important; }
.mr10 { margin-right: 10px !important; }
.mr20 { margin-right: 20px !important; }
.mr30 { margin-right: 30px !important; }
.mr40 { margin-right: 40px !important; }
.mr50 { margin-right: 50px !important; }
.mr60 { margin-right: 60px !important; }
.ml0 { margin-left: 0px !important; }
.ml10 { margin-left: 10px !important; }
.ml20 { margin-left: 20px !important; }
.ml30 { margin-left: 30px !important; }
.ml40 { margin-left: 40px !important; }
.ml50 { margin-left: 50px !important; }
.ml60 { margin-left: 60px !important; }
.pt0 { padding-top: 0px !important; }
.pt10 { padding-top: 10px !important; }
.pt20 { padding-top: 20px !important; }
.pt30 { padding-top: 30px !important; }
.pt40 { padding-top: 40px !important; }
.pt50 { padding-top: 50px !important; }
.pt60 { padding-top: 60px !important; }
.pt1em { padding-top: 1em !important; }
.pt2em { padding-top: 2em !important; }
.pb0 { padding-bottom: 0px !important; }
.pb10 { padding-bottom: 10px !important; }
.pb20 { padding-bottom: 20px !important; }
.pb30 { padding-bottom: 30px !important; }
.pb40 { padding-bottom: 40px !important; }
.pb50 { padding-bottom: 50px !important; }
.pb60 { padding-bottom: 60px !important; }
.pb1em { padding-bottom: 1em !important; }
.pb2em { padding-bottom: 2em !important; }
.pr0 { padding-right: 0px !important; }
.pr10 { padding-right: 10px !important; }
.pr20 { padding-right: 20px !important; }
.pr30 { padding-right: 30px !important; }
.pr40 { padding-right: 40px !important; }
.pr50 { padding-right: 50px !important; }
.pr60 { padding-right: 60px !important; }
.pl0 { padding-left: 0px !important; }
.pl10 { padding-left: 10px !important; }
.pl20 { padding-left: 20px !important; }
.pl30 { padding-left: 30px !important; }
.pl40 { padding-left: 40px !important; }
.pl50 { padding-left: 50px !important; }
.pl60 { padding-left: 60px !important; }
.mb60_40 { margin-bottom: 60px !important; }
.mb40_20 { margin-bottom: 40px !important; }
.mb20_10 { margin-bottom: 20px !important; }
@media screen and (max-width:736px){
	.mb60_40 { margin-bottom: 40px !important; }
	.mb40_20 { margin-bottom: 20px !important; }
	.mb20_10 { margin-bottom: 10px !important; }
}
/* align */
.align_l { text-align: left !important; }
.align_r { text-align: right !important; }
.align_c { text-align: center !important; }
.adjust { text-align: justify !important; text-justify: inter-ideograph !important; }
@media screen and (max-width:736px){
	.adjust_sp { text-align: justify !important; text-justify: inter-ideograph !important; }
}
.inline_block, .nobr { display: inline-block; font-weight: inherit; }
.per140 { font-size: 140%; }
.per80 { font-size: 80%; }
.per63 { font-size: 63%; }
sup { position: relative; top: -0.1em; /*font-size: 80%;*/ }
sub { vertical-align: bottom; position: relative; top: 0.4em; font-size: 80%; }
.bold { font-weight: 600 !important; }
/* float */
.cont_left { float: left; }
.cont_right { float: right; }
.clearboth { clear: both !important; }
/* image */
img { max-width: 100%; }
img.border { border: 1px solid #505050; }
.image_left { float: left; margin: 0px 20px 20px 0px; }
.image_right { float: right; margin: 0px 0px 20px 20px; }
*:focus { outline: none; }
/* smart phone */
.onlypc { display: block !important; }
.onlypc_inline { display: inline-block !important; }
.onlysp { display: none !important; }
.onlysp_inline { display: none !important; }
.only5s { display: none !important; }
.only5s_inline { display: none !important; }
@media screen and ( max-width:736px ){
	.onlypc { display: none !important; }
	.onlypc_inline { display: none !important; }
	.onlysp { display: block !important; }
	.onlysp_inline { display: inline-block !important; }
}
@media screen and ( max-width:320px ){
	.only5s { display: block !important; }
	.only5s_inline { display: inline-block !important; }
}
/* yugothic ie */
@media all and (-ms-high-contrast: none) {
	*::-ms-backdrop, .ie { position: relative; top: 0.2em !important; }
}



/* ------------------- base ------------------- */
html, body {
	text-size-adjust: 100%;
	font-size: 10px;
	font-weight: 500;
	height: 100%;
}
body {
	position: relative;
	font-family: "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
	line-height: 1.75em;
	color: #061826;
	width: 100%;
	-webkit-text-size-adjust: 100%; /* ios */
	/*font-feature-settings: "palt";*/
	background-color: #F8F8F2;
}
.yumin {
	font-family: "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}
@media screen and ( max-width:736px ){
	html, body {
		text-size-adjust: 100%;
		font-size: 2.667vw;
		font-weight: 500;
		height: 100%;
	}
}



.cont_outer {
	width: 100%;
	max-width: 1240px;
	margin: auto;
	padding: 150px 20px;
	position: relative;
}
@media screen and ( max-width:736px ){
	.cont_outer {
		padding: 21.333vw 4.8vw;
	}
}

.flex_wrapper {
	display: flex;
	justify-content: space-between;
	align-content: flex-start;
	align-items: stretch;
}
.flex_wrapper.reverse {
	flex-direction: row-reverse;
}
@media screen and ( max-width:736px ){
	.flex_wrapper.block_sp {
		display: block;
	}
}

h2 {
	font-size: 32px;
	font-weight: 400;
	line-height: 1.5em;
	text-align: center;
}
h2 .shoulder {
	font-size: 24px;
}
h3 {
	font-size: 32px;
	font-weight: 400;
	line-height: 1.5em;
	text-align: center;
}
.line {
	background: linear-gradient(transparent 75%, #FFA210 75%);
}
@media screen and ( max-width:736px ){
	h2 {
		font-size: 5.89vw;
		font-weight: 400;
		line-height: 1.5em;
		text-align: center;
	}
	h2 .shoulder {
		font-size: 4.37vw;
	}
	h3 {
		font-size: 6.154vw;
		font-weight: 400;
		line-height: 1.5em;
		text-align: center;
	}
}


/* ------------------- header ------------------- */
header {
	position: relative;
}
header .top_logo,
header .present_sp {
	display: none;
}
header .mov_outer {
	position: relative;
	line-height: 0px;
	max-height: 90vh;
	min-height: 366px;
	overflow: hidden;
}
header .mov_outer video {
	width: 100%;
}


header .nav_outer {
	height: 16vw;
	display: flex;
	justify-content: center;
	align-items: center;
}
header .nav {
	max-width: 826px;
	width: 100%;
	padding: 0px 20px;
	display: flex;
	justify-content: space-between;
	z-index: 10;
}
header .nav li {
	position: relative;
	width: 31.3%;
	height: 84px;
}
header .nav li a {
	width: 100%;
	height: 100%;
	font-size: 18px;
	font-weight: bold;
	line-height: 1em;
	text-align: center;
	color: #1992D4;
	background-color: #F8F8F2;
	border: 4px solid #F8F8F2;
	border-radius: 8px;
	display: flex;
	justify-content: center;
	align-items: center;
}
header .nav li a:hover {
	opacity: 1;
	background-color: white;
	border: 4px solid #1992D4;
}
header .nav li:after {
	content: '';
	display: inline-block;
	width: 12px;
	height: 7.4px;
	background-image: url( "../img/img_button_triangle_blue.svg" );
	background-size: contain;
	vertical-align: middle;
	position: absolute;
	bottom: 12px;
	left: 0px;
	right: 0px;
	margin: auto;
}
header .nav li .shoulder {
	position: absolute;
	top: -20px;
	left: 0px;
	right: 0px;
	margin: auto;
	font-size: 16px;
	color: white;
	width: 138px;
	padding: 5px 6px;
	background-color: #1992D4;
	border-radius: 8px;
}
header .nav li .shoulder span {
	display: inline-block;
	width: 22px;
	height: 22px;
	color: #1992D4;
	padding-top: 3px;
	margin-left: 4px;
	background-color: white;
	border-radius: 11px;
}
@media screen and ( max-width:1300px ){
	header .nav_outer {
		height: 12vw;
	}
	header .nav li {
		height: 6.4vw;
	}
	header .nav li a {
		font-size: 1.369vw;
	}
	header .nav li:after {
		content: '';
		display: inline-block;
		width: 0.913vw;
		height: 0.563vw;
		background-image: url( "../img/img_button_triangle_blue.svg" );
		background-size: contain;
		vertical-align: middle;
		position: absolute;
		bottom: 0.913vw;
		left: 0px;
		right: 0px;
		margin: auto;
	}
	header .nav li .shoulder {
		position: absolute;
		top: -1.521vw;
		left: 0px;
		right: 0px;
		margin: auto;
		font-size: 1.217vw;
		color: white;
		width: 10.494vw;
		padding: 0.38vw 0.456vw;
		background-color: #1992D4;
		border-radius: 0.608vw;
	}
	header .nav li .shoulder span {
		display: inline-block;
		width: 1.673vw;
		height: 1.673vw;
		color: #1992D4;
		padding-top: 0.228vw;
		margin-left: 0.304vw;
		background-color: white;
		border-radius: 0.837vw;
	}
}


header .cont_outer {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	margin: auto;
	height: 100%;
	padding: 21vw 20px 0px;
}
header .cont_outer .logo {
	width: 200px;
	position: absolute;
	top: 36px;
	left: 20px;
}
header .cont_outer .logo:hover {
	opacity: 1;
}
header .cont_outer .text_outer {
	position: relative;
	max-width: 1090px;
	width: 100%;
	margin: auto;
}
header .cont_outer .text_outer .sub_outer {
	display: flex;
	justify-content: center;
	align-items: center;
}
header .cont_outer .text_outer .sub_outer img {
	width: 96px;
}
header .cont_outer .text_outer .sub_outer p {
	font-size: 20px;
	font-weight: 600;
	color: white;
	letter-spacing: 4px;
	text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.5);
}
header .cont_outer .text_outer .tvcm {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background-color: white;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 100px;
	right: 0px;
}
header .cont_outer .text_outer .tvcm span {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.33em;
	color: #FFA210;
}
@media screen and ( max-width:736px ){
	header .top_logo {
		display: block;
		height: 12.821vw;
		background-color: white;
	}
	header .top_logo a {
		display: block;
		padding: 3.846vw 0px 0px 6.154vw;
	}
	header .top_logo a img {
		width: 41.026vw;
	}
	header .mov_outer {
		position: relative;
		line-height: 0px;
		max-height: inherit;
		min-height: inherit;
		height: 67.43vw;
		overflow: hidden;
	}
	header .mov_outer video {
		width: auto;
		height: 100%;
		position: relative;
		left: -18%;
	}
	header .nav {
		display: none;
	}
	header .cont_outer {
		position: absolute;
		top: 0px;
		left: 0px;
		right: 0px;
		margin: auto;
		height: 100%;
		padding: 23vw 4.615vw 0px;
	}
	header .cont_outer .logo {
		display: none;
	}
	header .logo:hover {
		opacity: 1;
	}
	header .cont_outer .text_outer {
		position: relative;
		max-width: 279.487vw;
		width: 100%;
		margin: auto;
	}
	header .cont_outer .text_outer .sub_outer {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		top: -2.821vw;
	}
	header .cont_outer .text_outer .sub_outer img {
		width: 16.923vw;
		position: relative;
		top: -0.513vw;
	}
	header .cont_outer .text_outer .sub_outer p {
		font-size: 3.59vw;
		font-weight: 600;
		color: white;
		letter-spacing: 1.026vw;
		text-shadow: 0px 0px 1.538vw rgba(0, 0, 0, 0.5);
	}
	header .cont_outer .text_outer .tvcm {
		display: none;
	}
	header .present_sp {
		width: 42.564vw;
		height: 15.385vw;
		border-radius: 2.564vw;
		background-color: white;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		bottom: -8.564vw;
		right: 0px;
		left: 0px;
		margin: auto;
		z-index: 1;
		background-image: url( "../img/img_button_triangle_orange.svg" );
		background-size: 6.154vw auto;
		background-repeat: no-repeat;
		background-position: center bottom;
	}
	header .present_sp .present_outer {
		font-size: 4.103vw;
		font-weight: bold;
		line-height: 1.3em;
		color: #FFA210;
	}
	header .present_sp .present_outer span {
		display: block;
		font-size: 3.59vw;
		font-weight: 600;
	}
}



/* ------------------- cont1 ------------------- */
.cont1 {
	background-color: white;
}
.cont1 > .cont_outer {
	padding: 50px 20px 0px;
}
.cont1 .story_nav {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-top: 36px;
}
.cont1 .story_nav li {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.5em;
	text-align: center;
	width: 32%;
	background-color: white;
	padding: 20px 0px 19px;
	border-radius: 16px 16px 0px 0px;
	transition: background-color 0.3s;
	border: 4px solid #1992D4;
	border-bottom: none;
	position: relative;
	bottom: 8px;
}
.cont1 .story_nav li.active {
	font-size: 20px;
	line-height: 1.5em;
	color: #1992D4;;
	background-color: #F8F8F2;
	padding-bottom: 18px;
	bottom: -4px;
}
.cont1 .story_nav li:hover {
	background-color: #F8F8F2;
	color: #1992D4;
	cursor: pointer;
}
.cont1 .story_nav li span br {
	display: none;
}
.cont1 .story_nav li.active span br {
	display: block;
}
@media screen and ( max-width:1056px ){
	.cont1 .story_nav li {
		font-size: 1.68vw;
		line-height: 1.5em;
	}
	.cont1 .story_nav li.active {
		font-size: 1.86vw;
		line-height: 1.5em;
	}
}
@media screen and ( max-width:736px ){
	.cont1 {
		background-color: white;
	}
	.cont1 > .cont_outer {
		padding: 12.692vw 1.538vw 0px;
	}
	.cont1 .story_nav {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		margin-top: 9.231vw;
	}
	.cont1 .story_nav li {
		font-size: 3.59vw;
		font-weight: 600;
		line-height: 1.5em;
		text-align: center;
		width: 32%;
		background-color: white;
		padding: 2.564vw 0px 1.795vw;
		border-radius: 2.564vw 2.564vw 0px 0px;
		transition: background-color 0.3s;
		border: 1.026vw solid #1992D4;
		border-bottom: none;
		position: relative;
		bottom: 1.5vw;
	}
	.cont1 .story_nav li.active {
		font-size: 3.59vw;
		line-height: 1.5em;
		color: #1992D4;
		background-color: #F8F8F2;
		padding: 3.59vw 0px 2.821vw;
		padding-bottom: 4.615vw;
		bottom: -1.026vw;
	}
	.cont1 .story_nav li:hover {
		background-color: #F8F8F2;
		font-size: 3.59vw;
		line-height: 1.5em;
		color: #1992D4;
		cursor: pointer;
	}
	.cont1 .story_nav li span br {
		display: block;
	}
	.cont1 .story_nav li.active span br {
		display: block;
	}
}



/* ------------------- cont1 story ------------------- */
.cont1 .outer {
	border-top: 4px solid #1992D4;
	background-color: #F8F8F2;
}
.cont1 .story_outer > li {
	display: none;
	opacity: 0;
	transition: opacity 0.3s;
}
.cont1 .story_outer > li.active {
	display: block;
	opacity: 1;
}
.cont1 .story_outer .cont_outer {
	padding: 80px 20px 80px;
}
.cont1 .story_outer .detail_outer {
	margin-top: 80px;
	display: flex;
	justify-content: space-between;
}
.cont1 .story_outer .detail_outer .photo_outer {
	width: 30%;
}
.cont1 .story_outer .detail_outer .text_outer {
	width: 66.7%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.cont1 .story_outer .detail_outer .text_outer h5 {
	font-size: 20px;
	font-weight: 400;
	line-height: 1.5em;
	margin-bottom: 18px;
}
.cont1 .story_outer .detail_outer .text_outer p.text {
	font-size: 18px;
	font-weight: 400;
	line-height: 2em;
}
.cont1 .story_outer .detail_outer .text_outer p.company {
	font-size: 14px;
	font-weight: 400;
	line-height: 2em;
}
.cont1 .story_outer .detail_outer .text_outer p.company .name {
	font-size: 20px;
	position: relative;
	top: 3px;
}
.cont1 .story_outer .detail_outer .text_outer p.company .box {
	color: white;
	background-color: #7F888D;
	padding: 3px 8px 2px;
	margin: 0px 6px 0px 12px;
}
@media screen and ( max-width:736px ){
	.cont1 .outer {
		border-top: 1.026vw solid #1992D4;
		background-color: #F8F8F2;
	}
	.cont1 .story_outer .cont_outer {
		padding: 17.949vw 6.41vw 17.949vw;
	}
	.cont1 .story_outer .detail_outer {
		margin-top: 8.718vw;
		display: block;
	}
	.cont1 .story_outer .detail_outer .photo_outer {
		width: 100%;
	}
	.cont1 .story_outer .detail_outer .text_outer {
		width: 100%;
		display: block;
		margin-top: 10.256vw;
	}
	.cont1 .story_outer .detail_outer .text_outer h5 {
		font-size: 5.128vw;
		font-weight: 400;
		line-height: 1.5em;
		margin-bottom: 4.615vw;
	}
	.cont1 .story_outer .detail_outer .text_outer p.text {
		font-size: 4.103vw;
		font-weight: 400;
		line-height: 2em;
	}
	.cont1 .story_outer .detail_outer .text_outer p.company {
		font-size: 3.59vw;
		font-weight: 400;
		line-height: 2.5em;
		margin-top: 5.128vw;
	}
	.cont1 .story_outer .detail_outer .text_outer p.company .name {
		display: inline-block;
		font-size: 3.59vw;
		position: relative;
		top: 0.769vw;
	}
	.cont1 .story_outer .detail_outer .text_outer p.company .box {
		color: white;
		background-color: #7F888D;
		padding: 0.769vw 2.051vw 0.513vw;
		margin: 0px 1.538vw 0px 0px;
	}
}



/* ------------------- cont1 step ------------------- */
.cont1 .story_outer .step_outer {
	margin-top: 80px;
	text-align: center;
}
.cont1 .story_outer .step_outer .more {
	display: none;
}
.cont1 .story_outer .step_outer .header_outer {
	display: flex;
	justify-content: flex-start;
}
.cont1 .story_outer .step_outer .header_outer .step {
	position: relative;
	width: 160px;
	font-size: 24px;
	font-weight: 600;
	line-height: 1em;
	color: white;
	background-color: #1992D4;
	padding: 26px 10px 24px;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}
.cont1 .story_outer .step_outer .header_outer .step:after {
	content: '';
	display: inline-block;
	width: 8px;
	height: 16px;
	background-image: url( "../img/img_triangle_step.svg" );
	background-size: contain;
	background-repeat: no-repeat;
	vertical-align: middle;
	position: absolute;
	left: 100%;
	top: 0px;
	bottom: 0px;
	margin: auto;
}
.cont1 .story_outer .step_outer .header_outer h4 {
	width: calc(100% - 160px);
	font-size: 32px;
	font-weight: 400;
	line-height: 1.5em;
	text-align: left;
	background-color: #E4F4FC;
	padding: 14px 20px 12px 40px;
}
.cont1 .story_outer .step_outer .fig_outer {
	display: flex;
	justify-content: space-between;
	margin-top: 40px;
}
.cont1 .story_outer .step_outer .fig_outer .before {
	width: calc(50% - 30px);
	text-align: center;
	position: relative;
}
.cont1 .story_outer .step_outer .fig_outer .before:after {
	content: '';
	display: inline-block;
	width: 24px;
	height: 80px;
	background-image: url( "../img/img_triangle_gray_right.svg" );
	background-size: contain;
	background-repeat: no-repeat;
	vertical-align: middle;
	position: absolute;
	right: -44px;
	top: 0px;
	bottom: 0px;
	margin: auto;
}
.cont1 .story_outer .step_outer .fig_outer .after {
	width: calc(50% - 30px);
	text-align: center;
}
.cont1 .story_outer .step_outer .fig_outer .before_after {
	display: inline-block;
	width: 122px;
	height: 34px;
	font-size: 18px;
	font-weight: 600;
	text-align: center;
	color: white;
	padding: 9px 10px 0px;
	background-color: #7F888D;
}
.cont1 .story_outer .step_outer .fig_outer .after .before_after {
	background-color: #1992D4;
}
.cont1 .story_outer .step_outer .fig_outer p {
	font-size: 24px;
	line-height: 1.5em;
	margin-top: 10px;
}
.cont1 .story_outer .step_outer .fig_outer img {
	border: 1px solid #8DC8E9;
	margin-top: 16px;
	margin-bottom: 20px;
}
.cont1 .story_outer .step_outer .fig_outer li {
	font-size: 16px;
	line-height: 2em;
	text-indent: -16px;
	margin-left: 16px;
}
.cont1 .story_outer .step_outer .fig_outer li:before {
	content: '';
	display: inline-block;
	width: 8px;
	height: 8px;
	background-color: #1992D4;
	border-radius: 50%;
	position: relative;
	top: -2px;
	margin-right: 8px;
}
.cont1 .story_outer .step_outer .fig_outer .before li:before {
	background-color: #7F888D;
}
@media screen and ( max-width:736px ){
	.cont1 .story_outer .step_outer {
		margin-top: 17.949vw;
		text-align: center;
		max-height: 205.128vw;
		overflow: hidden;
		position: relative;
		transition: max-height 0.3s;
	}
	.cont1 .story_outer .step_outer.open {
		max-height: 512.821vw;
		overflow: visible;
	}
	.cont1 .story_outer .step_outer .more {
		display: block;
		width: 100%;
		height: 30.769vw;
		background: linear-gradient(rgba(255,255,255,0) 0, #F8F8F2 80%);
		position: absolute;
		bottom: 0px;
	}
	.cont1 .story_outer .step_outer .more .button {
		display: inline-block;
		width: 100%;
		max-width: 61.538vw;
		font-size: 4.103vw;
		font-weight: bold;
		line-height: 1em;
		color: white !important;
		text-align: center;
		background-color: black;
		border-radius: 5.897vw;
		position: absolute;
		bottom: 0px;
		right: 0px;
		left: 0px;
		margin: auto;
		padding: 3.846vw 1.538vw 3.333vw;
		transition: all 0.3s;
	}
	.cont1 .story_outer .step_outer .more .button:after {
		content: "";
		display: inline-block;
		width: 3.077vw;
		height: 1.897vw;
		background-image: url( "../img/img_triangle_more.svg" );
		background-size: contain;
		background-repeat: no-repeat;
		vertical-align: middle;
		position: relative;
		top: -0.513vw;
		margin-left: 2.051vw;
	}
	.cont1 .story_outer .step_outer .more .button:hover {
		cursor: pointer;
	}
	.cont1 .story_outer .step_outer.open .more {
		display: none !important;
	}
	.cont1 .story_outer .step_outer .header_outer {
		display: block;
	}
	.cont1 .story_outer .step_outer .header_outer .step {
		position: relative;
		width: 100%;
		font-size: 6.154vw;
		font-weight: 600;
		line-height: 1em;
		color: white;
		background-color: #1992D4;
		padding: 4.615vw 2.564vw 4.103vw;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.cont1 .story_outer .step_outer .header_outer .step:after {
		content: '';
		display: inline-block;
		width: 4.103vw;
		height: 2.051vw;
		background-image: url( "../img/img_triangle_step_sp.svg" );
		background-size: contain;
		background-repeat: no-repeat;
		vertical-align: middle;
		position: absolute;
		left: 0px;
		right: 0px;
		top: inherit;
		bottom: -2.051vw;
		margin: auto;
	}
	.cont1 .story_outer .step_outer .header_outer h4 {
		width: 100%;
		font-size: 6.154vw;
		font-weight: 400;
		line-height: 1.5em;
		text-align: center;
		background-color: #E4F4FC;
		padding: 2.821vw 1.026vw 2.308vw 1.026vw;
	}
	.cont1 .story_outer .step_outer .fig_outer {
		display: block;
		margin-top: 10.256vw;
	}
	.cont1 .story_outer .step_outer .fig_outer .before {
		width: 100%;
		text-align: center;
		position: relative;
		padding-bottom: 12.821vw;
		margin-bottom: 6.41vw;
	}
	.cont1 .story_outer .step_outer .fig_outer .before:after {
		content: '';
		display: inline-block;
		width: 20.513vw;
		height: 6.154vw;
		background-image: url( "../img/img_triangle_gray_down.svg" );
		background-size: contain;
		background-repeat: no-repeat;
		vertical-align: middle;
		position: absolute;
		right: 0px;
		left: 0px;
		top: inherit;
		bottom: 0px;
		margin: auto;
	}
	.cont1 .story_outer .step_outer .fig_outer .after {
		width: 100%;
		text-align: center;
	}
	.cont1 .story_outer .step_outer .fig_outer .before_after {
		display: inline-block;
		width: 31.282vw;
		height: 8.718vw;
		font-size: 4.615vw;
		font-weight: 600;
		text-align: center;
		color: white;
		padding: 2.308vw 2.564vw 0px;
		background-color: #7F888D;
	}
	.cont1 .story_outer .step_outer .fig_outer .after .before_after {
		background-color: #1992D4;
	}
	.cont1 .story_outer .step_outer .fig_outer p {
		font-size: 5.128vw;
		line-height: 1.5em;
		margin-top: 2.564vw;
	}
	.cont1 .story_outer .step_outer .fig_outer img {
		border: 1px solid #8DC8E9;
		margin-top: 4.103vw;
		margin-bottom: 5.128vw;
	}
	.cont1 .story_outer .step_outer .fig_outer li {
		font-size: 4.103vw;
		line-height: 2em;
		text-indent: -4.103vw;
		margin-left: 4.103vw;
	}
	.cont1 .story_outer .step_outer .fig_outer li:before {
		content: '';
		display: inline-block;
		width: 2.051vw;
		height: 2.051vw;
		background-color: #1992D4;
		border-radius: 50%;
		position: relative;
		top: -0.513vw;
		margin-right: 2.051vw;
	}
	.cont1 .story_outer .step_outer .fig_outer .before li:before {
		background-color: #7F888D;
	}
}



/* ------------------- cont1 comment ------------------- */
.cont1 .story_outer .comment_outer {
	margin-top: 40px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.cont1 .story_outer .comment_outer .photo {
	width: 80px;
}
.cont1 .story_outer .comment_outer .comment {
	width: calc(100% - 120px);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.75em;
	padding: 18px 26px 15px;
	background-color: #E4F4FC;
	position: relative;
	min-height: 102px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.cont1 .story_outer .comment_outer .comment:before {
	content: '';
	display: inline-block;
	width: 12px;
	height: 24px;
	background-image: url( "../img/img_triangle_balloon_left.svg" );
	background-size: contain;
	background-repeat: no-repeat;
	vertical-align: middle;
	position: absolute;
	right: 100%;
	top: 0px;
	bottom: 0px;
	margin: auto;
}
@media screen and ( max-width:736px ){
	.cont1 .story_outer .comment_outer {
		margin-top: 10.256vw;
		display: block;
	}
	.cont1 .story_outer .comment_outer .photo {
		width: 20.513vw;
		margin: auto;
	}
	.cont1 .story_outer .comment_outer .comment {
		width: 100%;
		font-size: 4.103vw;
		font-weight: 600;
		line-height: 2em;
		padding: 4.615vw 6.667vw 3.846vw;
		margin-top: 6.667vw;
		background-color: #E4F4FC;
		position: relative;
		min-height: 26.154vw;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.cont1 .story_outer .comment_outer .comment:before {
		content: '';
		display: inline-block;
		width: 6.154vw;
		height: 3.077vw;
		background-image: url( "../img/img_triangle_balloon_up.svg" );
		background-size: contain;
		background-repeat: no-repeat;
		vertical-align: middle;
		position: absolute;
		right: 0px;
		left: 0px;
		top: -3.077vw;
		bottom: inherit;
		margin: auto;
	}
}



/* ------------------- cont1 box ------------------- */
.cont1 .story_outer .box_outer {
	max-width: 760px;
	margin: 40px auto 0px;
	padding: 24px;
	text-align: left;
	background-color: #E3EBF2;
	box-shadow: 2px 2px 0px #7F888D;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.cont1 .story_outer #story2 .box_outer {
	max-width: 790px;
}
.cont1 .story_outer #story3 .box_outer {
	max-width: 806px;
}
.cont1 .story_outer .box_outer.short {
	display: inline-block;
	width: auto;
}
.cont1 .story_outer .box_outer .text {
	width: calc( 100% - 256px);/* 454 */
	padding-left: 80px;
	background-image: url( "../img/img_story1_icon1.png" );
	background-repeat: no-repeat;
	background-size: 64px auto;
}
.cont1 .story_outer .box_outer.short .text {
	width: auto;
}
.cont1 .story_outer #story1 .box_outer.short .text {
	background-image: url( "../img/img_story1_icon2.png" );
}
.cont1 .story_outer #story2 .box_outer .text {
	background-image: url( "../img/img_story2_icon1.png" );
}
.cont1 .story_outer #story2 .box_outer.short .text {
	background-image: url( "../img/img_story2_icon2.png" );
}
.cont1 .story_outer #story3 .box_outer .text {
	background-image: url( "../img/img_story3_icon1.png" );
}
.cont1 .story_outer #story3 .box_outer.short .text {
	background-image: url( "../img/img_story3_icon2.png" );
}
.cont1 .story_outer .box_outer p {
	font-size: 16px;
	font-weight: 400;
	line-height: 2em;
}
.cont1 .story_outer .box_outer .detail {
	display: block;
	font-size: 14px;
	font-weight: 400;
	line-height: 2em;
}
.cont1 .story_outer .box_outer .detail a {
	text-decoration: underline;
}
.cont1 .story_outer .box_outer .modal {
	position: relative;
	width: 240px;
}
.cont1 .story_outer .box_outer .modal a {
	overflow: hidden;
	display: block;
}
.cont1 .story_outer .box_outer .modal a:after {
	content: '';
	display: inline-block;
	width: 56px;
	height: 56px;
	background-image: url( "../img/img_zoom.svg" );
	background-size: 24px auto;
	background-position: center center;
	background-color: #FF7E10;
	background-repeat: no-repeat;
	vertical-align: middle;
	border: 2px solid white;
	position: absolute;
	right: 0px;
	bottom: 0px;
}
.cont1 .story_outer .box_outer .modal a:hover {
	opacity: 1;
}
.cont1 .story_outer .box_outer .modal a img {
	transition: all 0.3s;
}
.cont1 .story_outer .box_outer .modal a:hover img {
	transform: scale(1.1);
}
@media screen and ( max-width:736px ){
	.cont1 .story_outer .box_outer {
		max-width: 194.872vw;
		margin: 10.256vw auto 0px;
		padding: 6.154vw;
		text-align: left;
		background-color: #E3EBF2;
		box-shadow: 0.513vw 0.513vw 0px #7F888D;
		display: block;
	}
	.cont1 .story_outer #story2 .box_outer {
		max-width: 202.564vw;
	}
	.cont1 .story_outer #story3 .box_outer {
		max-width: 206.667vw;
	}
	.cont1 .story_outer .box_outer.short {
		display: inline-block;
		width: auto;
	}
	.cont1 .story_outer .box_outer .text {
		width: 100%;
		padding: 17.949vw 0px 0px 0px;
		margin-bottom: 3.59vw;
		background-image: url( "../img/img_story1_icon1.png" );
		background-repeat: no-repeat;
		background-size: 16.41vw auto;
		background-position: center top;
		text-align: center;
	}
	.cont1 .story_outer .box_outer.short .text {
		width: auto;
		margin-bottom: 0px;
	}
	.cont1 .story_outer #story1 .box_outer.short .text {
		background-image: url( "../img/img_story1_icon2.png" );
	}
	.cont1 .story_outer #story2 .box_outer .text {
		background-image: url( "../img/img_story2_icon1.png" );
	}
	.cont1 .story_outer #story2 .box_outer.short .text {
		background-image: url( "../img/img_story2_icon2.png" );
	}
	.cont1 .story_outer #story3 .box_outer .text {
		background-image: url( "../img/img_story3_icon1.png" );
	}
	.cont1 .story_outer #story3 .box_outer.short .text {
		background-image: url( "../img/img_story3_icon2.png" );
	}
	.cont1 .story_outer .box_outer p {
		font-size: 4.103vw;
		font-weight: 400;
		line-height: 2em;
	}
	.cont1 .story_outer .box_outer .detail {
		display: block;
		font-size: 3.59vw;
		font-weight: 400;
		line-height: 2em;
	}
	.cont1 .story_outer .box_outer .detail a {
		text-decoration: underline;
	}
	.cont1 .story_outer .box_outer .modal {
		position: relative;
		width: 61.538vw;
		margin: auto;
	}
	.cont1 .story_outer .box_outer .modal a {
		overflow: hidden;
		display: block;
	}
	.cont1 .story_outer .box_outer .modal a:after {
		content: '';
		display: inline-block;
		width: 14.359vw;
		height: 14.359vw;
		background-image: url( "../img/img_zoom.svg" );
		background-size: 24px auto;
		background-position: center center;
		background-color: #FF7E10;
		background-repeat: no-repeat;
		vertical-align: middle;
		border: 0.513vw solid white;
		position: absolute;
		right: 0px;
		bottom: 0px;
	}
	.cont1 .story_outer .box_outer .modal a:hover {
		opacity: 1;
	}
	.cont1 .story_outer .box_outer .modal a img {
		transition: all 0.3s;
	}
	.cont1 .story_outer .box_outer .modal a:hover img {
		transform: scale(1.1);
	}
}



/* ------------------- cont1 gallery ------------------- */
.cont1 .story_outer .gallery_outer {
	margin-top: 80px;
}
.cont1 .story_outer .gallery_outer .shoulder {
	font-size: 24px;
	line-height: 1.5em;
	text-align: center;
}
.cont1 .story_outer .gallery_outer .modal_outer {
	width: 100%;
	max-width: 530px;
	margin: 40px auto 20px;
}
.cont1 .story_outer .gallery_outer .modal_outer a {
	display: block;
	position: relative;
}
.cont1 .story_outer .gallery_outer .modal_outer a:before {
	content: "";
	display: inline-block;
	width: 48px;
	height: 48px;
	background-color: #FFA210;
	background-image: url( "../img/img_button_arrow.svg" );
	background-size: 18px 22px;
	background-repeat: no-repeat;
	background-position: center left 17px;
	border-radius: 50%;
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	margin: auto;
	z-index: 1;
}
.cont1 .story_outer .gallery_outer .modal_outer a:hover {
	opacity: 1;
}
.cont1 .story_outer .gallery_outer .modal_outer a img {
	transition: all 0.3s;
}
.cont1 .story_outer .gallery_outer .modal_outer a:hover img {
	transform: scale(1.1);
}
.cont1 .story_outer .gallery_outer .comment2 {
	font-size: 24px;
	line-height: 1.5em;
	text-align: center;
}
@media screen and ( max-width:736px ){
	.cont1 .story_outer .gallery_outer {
		margin-top: 20.513vw;
	}
	.cont1 .story_outer .gallery_outer .shoulder {
		font-size: 5.128vw;
		line-height: 1.5em;
	}
	.cont1 .story_outer .gallery_outer .modal_outer {
		width: 100%;
		max-width: 135.897vw;
		margin: 4.103vw auto 5.128vw;
	}
	.cont1 .story_outer .gallery_outer .modal_outer a {
		display: block;
		position: relative;
	}
	.cont1 .story_outer .gallery_outer .modal_outer a:before {
		content: "";
		display: inline-block;
		width: 12.308vw;
		height: 12.308vw;
		background-color: #FFA210;
		background-image: url( "../img/img_button_arrow.svg" );
		background-size: 4.615vw 5.641vw;
		background-repeat: no-repeat;
		background-position: center left 4.359vw;
		border-radius: 50%;
		position: absolute;
		top: 0px;
		bottom: 0px;
		left: 0px;
		right: 0px;
		margin: auto;
		z-index: 1;
	}
	.cont1 .story_outer .gallery_outer .modal_outer a:hover {
		opacity: 1;
	}
	.cont1 .story_outer .gallery_outer .modal_outer a img {
		transition: all 0.3s;
	}
	.cont1 .story_outer .gallery_outer .modal_outer a:hover img {
		transform: scale(1.1);
	}
	.cont1 .story_outer .gallery_outer .comment2 {
		font-size: 5.128vw;
		line-height: 1.5em;
		text-align: center;
	}
}



/* ------------------- cont1 company ------------------- */
.cont1 .story_outer .company_outer {
	margin-top: 40px;
	border-top: 1px solid #DFE1DD;
	padding: 40px 40px 0px 40px;
	display: flex;
	justify-content: center;
}
.cont1 .story_outer .company_outer .name {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.5em;
	margin-right: 40px;
	width: 122px;
}
.cont1 .story_outer .company_outer .detail {
	font-size: 16px;
	line-height: 2em;
	width: calc(100% - 162px);
}
@media screen and ( max-width:736px ){
	.cont1 .story_outer .company_outer {
		margin-top: 9.231vw;
		border-top: 1px solid #DFE1DD;
		padding: 5.128vw 0px 0px 0px;
		display: block;
	}
	.cont1 .story_outer .company_outer .name {
		font-size: 5.128vw;
		font-weight: 600;
		line-height: 1.5em;
		margin: 0px 0px 3.077vw 0px;
		width: 100%;
		text-align: left;
	}
	.cont1 .story_outer .company_outer .detail {
		font-size: 4.103vw;
		line-height: 2em;
		width: 100%;
	}
}



/* ------------------- cont2 ------------------- */
.cont2 {
	background-color: white;
}
.cont2 .cont_outer {
	padding-top: 160px;
	padding-bottom: 120px;
}
.cont2 .shoulder {
	font-size: 24px;
	font-weight: 600;
	line-height: 1.5em;
	text-align: center;
	margin: 70px 0px 24px;
}
.cont2 .reader {
	font-size: 16px;
	line-height: 2em;
	text-align: center;
}
.cont2 .flex_wrapper {
	display: flex;
	justify-content: space-between;
	align-content: flex-start;
	align-items: stretch;
	margin-top: 40px;
}
.cont2 .flex_wrapper li {
	width: 30%;
	background-color: #F8F8F2;
	padding: 24px 24px 23%;
	position: relative;
}
.cont2 .flex_wrapper li p {
	font-size: 18px;
	font-weight: bold;
	line-height: 2em;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
}
.cont2 .flex_wrapper li img {
	position: absolute;
	bottom: 34px;
	width: calc(100% - 60px);
}
@media screen and ( max-width:736px ){
	.cont2 .cont_outer {
		padding-top: 18.667vw;
		padding-bottom: 20.513vw;
	}
	.cont2 .shoulder {
		font-size: 5.128vw;
		font-weight: 600;
		line-height: 1.5em;
		text-align: center;
		margin: 6.667vw 0px 5.641vw;
	}
	.cont2 .shoulder2 {
		margin-top: 12.821vw;
	}
	.cont2 .reader {
		font-size: 4.103vw;
		line-height: 2em;
		text-align: center;
	}
	.cont2 .flex_wrapper {
		display: block;
		margin-top: 5.128vw;
	}
	.cont2 .flex_wrapper li {
		width: 100%;
		background-color: #F8F8F2;
		padding: 6.4vw 6.4vw 6.4vw;
		position: relative;
	}
	.cont2 .flex_wrapper li:not(:first-child) {
		margin-top: 4.8vw;
	}
	.cont2 .flex_wrapper li p {
		font-size: 4.8vw;
		line-height: 2em;
		text-align: center;
		display: block;
		width: 100%;
		height: auto;
	}
	.cont2 .flex_wrapper li img {
		position: relative;
		bottom: 0px;
		width: 100%;
		margin-top: 2.667vw;
	}
}



/* ------------------- cont3 ------------------- */
.cont3 {
	background-color: #E4F4FC;
}
.cont3 .cont_outer {
	padding-top: 110px;
	padding-bottom: 100px;
}
.cont3 .flex_wrapper {
	max-width: 910px;
	margin: 70px auto 20px;
}
.cont3 .flex_wrapper li {
	text-align: center;
}
.cont3 .flex_wrapper li#more_catalog {
	width: 480px;
}
.cont3 .flex_wrapper li#more_catalog .flex_outer {
	display: flex;
	justify-content: space-between;
}
.cont3 .flex_wrapper li#more_catalog .flex_outer > div {
	width: 46.7%;
}
.cont3 .flex_wrapper li#more_howto {
	width: 323px;
}
.cont3 .flex_wrapper li .balloon,
.cont3 .flex_wrapper li .caption {
	font-size: 23px;
	line-height: 1.5em;
	text-align: center;
}
.cont3 .flex_wrapper li .balloon:before,
.cont3 .flex_wrapper li .balloon:after {
	content: '';
	display: inline-block;
	width: 11px;
	height: 22px;
	background-image: url( "../img/img_textfig_left.svg" );
	background-size: contain;
	background-repeat: no-repeat;
	vertical-align: middle;
	position: relative;
	top: -2px;
}
.cont3 .flex_wrapper li .balloon:after {
	background-image: url( "../img/img_textfig_right.svg" );
}
.cont3 .flex_wrapper li#more_catalog img {
	max-width: 208px;
	margin: 20px auto 20px;
}
.cont3 .flex_wrapper li#more_howto img {
	max-width: 320px;
	margin: 20px auto 20px;
}
.cont3 .flex_wrapper li .caption {
	margin-bottom: 20px;
}
.cont3 .flex_wrapper li .caution {
	display: inline-block;
	font-size: 14px;
	line-height: 1.5em;
	margin-top: 8px;
}
.cont3 .flex_wrapper li#more_howto .button {
	width: 170px;
}
@media screen and ( max-width:880px ){
	.cont3 .flex_wrapper {
		display: block !important;
	}
	.cont3 .flex_wrapper li {
		margin: 0px auto;
	}
	.cont3 .flex_wrapper li#more_howto {
		margin-top: 50px;
	}
	.cont3 .flex_wrapper li#more_howto img {
		margin: 0px auto 0px;
	}
}
@media screen and ( max-width:736px ){
	.cont3 {
		background-color: #E4F4FC;
	}
	.cont3 .cont_outer {
		padding-top: 20.513vw;
		padding-bottom: 15.385vw;
	}
	.cont3 .flex_wrapper {
		max-width: 215.385vw;
		margin: 12.949vw auto 5.128vw;
		display: block;
	}
	.cont3 .flex_wrapper li {
		width: 100% !important;
		padding-top: 5vw;
		text-align: center;
	}
	.cont3 .flex_wrapper li#more_catalog {
		width: 100%;
		padding-top: 0px;
	}
	.cont3 .flex_wrapper li#more_catalog .flex_outer > div {
		width: 48.7%;
	}
	.cont3 .flex_wrapper li:not(:first-child) {
		margin-top: 12.949vw;
	}
	.cont3 .flex_wrapper li .balloon,
	.cont3 .flex_wrapper li .caption {
		font-size: 5.128vw;
		line-height: 1.5em;
		text-align: center;
	}
	.cont3 .flex_wrapper li .balloon:before,
	.cont3 .flex_wrapper li .balloon:after {
		content: '';
		display: inline-block;
		width: 2.821vw;
		height: 5.641vw;
		background-image: url( "../img/img_textfig_left.svg" );
		background-size: contain;
		background-repeat: no-repeat;
		vertical-align: middle;
		position: relative;
		top: -0.513vw;
	}
	.cont3 .flex_wrapper li .balloon:after {
		background-image: url( "../img/img_textfig_right.svg" );
	}
	.cont3 .flex_wrapper li img {
		max-width: 82.051vw !important;
		margin: 4.128vw auto 5.128vw !important;
	}
	.cont3 .flex_wrapper li .caption {
		margin-bottom: 5.128vw;
	}
	.cont3 .flex_wrapper li .caution {
		display: inline-block;
		font-size: 3.59vw;
		line-height: 1.5em;
		margin-top: 2.051vw;
	}
	.cont3 .flex_wrapper .sp_button_outer a,
	.cont3 #more_howto a {
		border-radius: 10.256vw;
		padding: 5.385vw 1.538vw 4.872vw;
	}
	.cont3 .flex_wrapper .sp_button_outer a + a {
		margin-top: 5.128vw;
	}
	.cont3 .flex_wrapper li#more_howto .button {
		width: 100%;
	}

}



/* ------------------- button ------------------- */
.button {
	display: inline-block;
	width: 100%;
	max-width: 360px;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.5em;
	color: white !important;
	text-align: center;
	background-color: #FFA210;
	border-radius: 40px;
	position: relative;
	padding: 28px 6px 25px;
	transition: all 0.3s;
}
.button:after {
	content: "";
	display: inline-block;
	width: 7.4px;
	height: 12px;
	background-image: url( "../img/img_button_triangle.svg" );
	background-size: contain;
	background-repeat: no-repeat;
	vertical-align: middle;
	position: relative;
	top: -1px;
	margin-left: 8px;;
}
.button:hover {
	opacity: 1;
	color: #FFA210 !important;
	background-color: #061826;
}
.button:hover:after {
	background-image: url( "../img/img_button_triangle_on.svg" );
}
@media screen and ( max-width:736px ){
	.button {
		display: inline-block;
		width: 100%;
		max-width: 92.308vw;
		font-size: 4.615vw;
		font-weight: bold;
		line-height: 1.5em;
		color: white !important;
		text-align: center;
		background-color: #FFA210;
		border-radius: 10.256vw;
		position: relative;
		padding: 7.436vw 1.538vw 6.667vw;
		transition: all 0.3s;
	}
	.button:after {
		content: "";
		display: inline-block;
		width: 1.897vw;
		height: 3.077vw;
		background-image: url( "../img/img_button_triangle.svg" );
		background-size: contain;
		background-repeat: no-repeat;
		vertical-align: middle;
		position: relative;
		top: -0.256vw;
		margin-left: 2.051vw;;
	}
	.button:hover {
		opacity: 1;
		color: #FFA210 !important;
		background-color: #061826;
	}
	.button:hover:after {
		background-image: url( "../img/img_button_triangle_on.svg" );
	}
}



/* ------------------- button trial_top ------------------- */
.button.trial_top {
	position: absolute;
	top: 36px;
	right: 20px;
	line-height: 1.2em;
	padding: 12px 36px 10px 30px;
	width: 233px;
	border-radius: 32px;
}
.button.trial_top span.small {
	font-size: 14px;
	display: block;
}
.button.trial_top:after {
	position: absolute;
	top: 0px;
	bottom: 0px;
	right: 24px;
	margin: auto;
}
@media screen and ( max-width:736px ){
}



/* ------------------- button_trial_outer ------------------- */
.button_trial_outer {
	margin-top: 40px;
	text-align: center;
}
.button_trial_outer .button {
	max-width: 398px;
}
@media screen and ( max-width:736px ){
	.button_trial_outer {
		margin-top: 10.256vw;
		text-align: center;
	}
	.button_trial_outer .button {
		font-size: 3.59vw;
		max-width: 82.051vw;
		padding: 6.667vw 1.538vw 5.897vw;
		border-radius: 8.974vw;
	}
}



/* ------------------- footer ------------------- */
footer {
	background-color: white;
	text-align: center;
	font-size: 14px;
	line-height: 2em;
	color: white;
	background-color: #061826;
}
footer .cont_outer {
	padding: 40px 20px 40px;/*140px*/
}
footer .phone {
	font-size: 32px;
	line-height: 1em;
	color: white;
	margin-bottom: 16px;
}
footer .phone .box {
	font-size: 16px;
	line-height: 1em;
	border: 1px solid white;
	padding: 7px;
	margin-right: 8px;
	position: relative;
	top: -7px;
}
footer .flex_wrapper {
	justify-content: center;
	margin: 20px 0px 20px;
}
footer .flex_wrapper li {
	padding: 0px 20px 0px 0px;
}
footer .flex_wrapper li:last-child {
	padding: 0px 0px 0px 20px;
}
footer .flex_wrapper li:not(:first-child) {
	border-left: 1px solid #DFE1DD;
}
footer .flex_wrapper li a {
	font-size: 16px;
	line-height: 1em;
	text-decoration: underline;
}
@media screen and ( max-width:736px ){
	footer {
		background-color: #061826;
		text-align: center;
		font-size: 3.733vw;
		line-height: 2em;
		color: white;
	}
	footer .cont_outer {
		padding: 10.667vw 3.333vw 10.667vw;/*26.667vw*/
	}
	footer .phone {
		font-size: 7vw;
		line-height: 1em;
		color: white;
		margin-bottom: 4.267vw;
	}
	footer .phone .box {
		font-size: 4.267vw;
		line-height: 1em;
		border: 1px solid white;
		padding: 1.867vw;
		margin-right: 2.133vw;
		position: relative;
		top: -1.867vw;
	}
	footer .phone .yumin {
		margin-bottom: 4vw;
		position: relative;
		bottom: 0.769vw;
	}
	footer .flex_wrapper {
		justify-content: center;
		margin: 5.333vw 0px 5.333vw;
	}
	footer .flex_wrapper li {
		padding: 0px 4.333vw 0px 0px;
	}
	footer .flex_wrapper li:last-child {
		padding: 0px 0px 0px 4.333vw;
	}
	footer .flex_wrapper li:not(:first-child) {
		border-left: 1px solid #DFE1DD;
	}
	footer .flex_wrapper li a {
		font-size: 4.267vw;
		line-height: 1em;
		text-decoration: underline;
	}
	footer p.copy {
		font-size: 3.2vw;
		line-height: 2em;
	}
}



/* ------------------- footer_button ------------------- */
.footer_button_wrapper {
	position: fixed;
	bottom: -105px;
	width: 100%;
	transition: bottom 0.5s;
	background-color: white;
	border-top: 1px solid #DFE1DD;
	z-index: 100;
}
.footer_button_wrapper.footer_show {
	bottom: 0px;
}
.footer_button_wrapper .cont_outer {
	padding: 16px 20px 16px;
	max-width: 682px;
}
.footer_button_wrapper .cont_outer .flex_wrapper {
	text-align: center;
}
.footer_button_wrapper .cont_outer .flex_wrapper li {
/*	max-width: 49%;
	width: 330px;*/
}
.footer_button_wrapper .cont_outer .flex_wrapper li span.text {
	display: block;
	font-size: 16px;
	margin-bottom: 6px;
}
.footer_button_wrapper a.button {
	max-width: 100%;
	width: 304px;
	font-size: 14px;
	line-height: 1.5em;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 10px 16px 6px 100px;
	height: 64px;
	text-align: left;
	background-image: url( "../img/img_button_book2.png" );
	background-size: 64px auto;
	background-repeat: no-repeat;
	background-position: 30px 0px;
}
.footer_button_wrapper .box a.button {
	background-image: url( "../img/img_button_box.png" );
}
@media screen and ( max-width:736px ){
	.footer_button_wrapper {
		position: fixed;
		bottom: -26.667vw;
		width: 100%;
		transition: bottom 0.5s;
		background-color: transparent;
		border-top: none;
		z-index: 100;
	}
	.footer_button_wrapper.footer_show {
		bottom: 0px;
	}
	.footer_button_wrapper .cont_outer {
		padding: 0px;
		max-width: 100%;
	}
	.footer_button_wrapper .cont_outer .flex_wrapper {
		text-align: center;
		display: flex;
		justify-content: space-between;
	}
	.footer_button_wrapper .cont_outer .flex_wrapper li {
		width: 49.5%;
	}
	.footer_button_wrapper .cont_outer .flex_wrapper li span.text {
		display: none;
	}
	.footer_button_wrapper .cont_outer .flex_wrapper li a.button {
		border-radius: 0px;
		width: 100%;
		padding: 1.795vw 3.846vw 0.769vw 3.846vw;
		height: 13.846vw;
		text-align: left;
		background-image: none;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.footer_button_wrapper .cont_outer .flex_wrapper li a.button:before {
		width: 1.253vw;
		height: 0.933vw;
	}
	.footer_button_wrapper .cont_outer .flex_wrapper li:last-child {
	}
	.footer_button_wrapper .cont_outer .flex_wrapper li a.button span {
		display: block;
		width: 100%;
		font-size: 3.59vw;
		line-height: 1.5em;
	}
}



/* ------------------- function ------------------- */
#function {
	max-width: 960px;
	margin: 20px auto 0px;
}
@media (min-width: 768px) {
	#function {
		max-width: 960px;
		margin: 20px auto 100px;
	}
}
#function .function-caution {
	font-size: 2.45vw;
	line-height: 1em;
	margin-bottom: 2em;
	text-align: center;
}
.function-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content:flex-start
}

@media (min-width: 768px) {
    .function-list {
        margin:0 -7.5px;
    }
}

@media (min-width: 768px) {
    .function-list li {
        padding:7.5px;
    }

    .function-list li.actived .data {
        background:#fff !important;
		border: 2px solid #0577bd;
    }

    .function-list li.single {
        width:20%;
    }

    .function-list li.double {
        width:40%;
    }

    .function-list li .data {
        cursor: pointer;
        border-radius: 5px;
        padding: 10px;
        background-color: #e4ebf3;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-shadow: 6px 12px 12px rgba(44, 54, 60, .15);
        box-shadow: 6px 12px 12px rgba(44, 54, 60, .15);
        -webkit-transition: background-color .3s ease;
        transition:background-color .3s ease
    }

    body.ua_pc .function-list li .data:hover {
        background-color:#c8d4e1
    }

    .function-list li .data .ico {
        width: 40px;
        height: auto
    }

    .function-list li .data .ico img, .function-list li .data .ico img[src$=".svg"] {
        width: 100%;
        height:auto
    }

    .function-list li .data .name {
        font-size: 1.6rem;
        line-height: 1em;
        padding-left:.75em
    }

    .function-list li .data .premium {
        font-size: 1.4rem;
        line-height: 1em;
        padding: .25em .5em;
        background: #fff;
        color: #0052b0;
        border: 1px solid #0052b0;
        margin-left:1em
    }
}

@media (max-width: 767px) {
    .function-list li:nth-child(-n + 8) {
        width: 25%;
        height: auto;
        margin-bottom:5.3333333333vw;
    }

    .function-list li:nth-child(-n + 8).actived .data .ico {
        background:#fff !important;
		border: 2px solid #0577bd;
    }

    .function-list li:nth-child(-n + 8) .data .ico {
        width: 10.6666666667vw;
        padding: 1.3333333333vw;
        height: auto;
        background-color: #e4ebf3;
        border-radius: 50%;
        margin: 0 auto
    }

    .function-list li:nth-child(-n + 8) .data .ico img, .function-list li:nth-child(-n + 8) .data .ico img[src$=".svg"] {
        width: 100%;
        height:auto;
    }

    .function-list li:nth-child(-n + 8) .data .name {
        font-size: 2.6666666667vw;
        line-height: 1em;
        margin-top: .5em;
        color: #0577bd;
		text-align: center;
    }

    .function-list li:nth-child(-n + 8) .data .premium {
        font-size: 1.4rem;
        line-height: 1em;
        padding: .25em .5em;
        background: #fff;
        color: #0052b0;
        border: 1px solid #0052b0;
        margin-left:1em;
    }

    .function-list li:nth-child(n + 9) {
        width: 33.3333%;
        height: auto;
        margin-bottom:4vw;
    }

    .function-list li:nth-child(n + 9).actived .data .name {
        background:#fff !important;
		border: 2px solid #0577bd;
    }

    .function-list li:nth-child(n + 9) .data {
        text-align: center;
        padding:0 1.3333333333vw
    }

    .function-list li:nth-child(n + 9) .data .ico {
        display:none
    }

    .function-list li:nth-child(n + 9) .data .name {
        background-color: #e4ebf3;
        font-size: 2.6666666667vw;
        padding: .5em 0;
        border-radius: 1em;
        line-height: 1em;
        color:#0577bd
    }

    .function-list li:nth-child(n + 9) .data .premium {
        display:none
    }
}

.function-detail {
    background: #fff;
    margin-top: 7.5px;
    border-radius: 20px;
    padding: 30px;
    -webkit-box-shadow: 8px 16px 16px rgba(44, 54, 60, .15);
    box-shadow:8px 16px 16px rgba(44, 54, 60, .15);
    border: 2px solid #0577bd;
}

@media (max-width: 767px) {
    .function-detail {
        margin-top: 0;
        border-radius: 4.2666666667vw;
        padding: 5.3333333333vw;
        -webkit-box-shadow: 1.6vw 3.2vw 3.2vw rgba(44, 54, 60, .15);
        box-shadow:1.6vw 3.2vw 3.2vw rgba(44, 54, 60, .15)
    }
}

.function-detail .function-item {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    display:none
}

.function-detail .function-item.actived {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-animation: show .3s ease 0s 1 alternate forwards;
    animation:show .3s ease 0s 1 alternate forwards
}

@-webkit-keyframes show {
    0% {
        opacity:0
    }

    to {
        opacity:1
    }
}

@keyframes show {
    0% {
        opacity:0
    }

    to {
        opacity:1
    }
}


.function-detail .function-item .screen {
    width: 435px;
    height: auto
}

.function-detail .function-item .screen img, .function-detail .function-item .screen img[src$=".svg"] {
    width: 100%;
    height:auto
}

@media (max-width: 767px) {
    .function-detail .function-item .screen {
        display:none
    }
}

.function-detail .function-item .data {
    width: 435px;
    height: auto;
    text-align:left
}

@media (max-width: 767px) {
    .function-detail .function-item .data {
        width:100%
    }
}

.function-detail .function-item .data h3 {
	position: relative;
	text-align: center;
    font-size: 2.4rem;
    line-height: 1.25em;
    color: #0577bd;
    padding-bottom: 15px;
}
.function-detail .function-item .data h3:after {
	display: block;
	content: "";
	position: absolute;
	bottom: 0;
	left: calc(50% - 50px);
	height: 4px;
	width: 100px;
	background-color: #FFA210;
}
@media (min-width: 768px) {
    .function-detail .function-item .data h3 {
        margin:.5em 0 .25em
    }

    .function-detail .function-item .data h3 span {
        display:none
    }
}

@media (max-width: 767px) {
    .function-detail .function-item .data h3 {
        position: relative;
        font-size: 4.2666666667vw;
        padding-left: calc(10.66667vw + .5em);
        margin:0 0 .5em
    }

    .function-detail .function-item .data h3 span {
        position: absolute;
        top: 50%;
        left: 0;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        display: block;
        width: 10.6666666667vw;
        height:10.6666666667vw
    }
}

.function-detail .function-item .data .desc {
    font-size: 1.4rem;
    line-height: 1.5em;
    color: #959a9d;
    margin-bottom:1em
}

@media (max-width: 767px) {
    .function-detail .function-item .data .desc {
        font-size: 3.2vw;
        margin-bottom:.5em
    }
}

.function-detail .function-item .data ul li {
    position: relative;
    font-size: 1.2rem;
    line-height: 1.5em;
    padding-left:1.25em
}

@media (max-width: 767px) {
    .function-detail .function-item .data ul li {
        font-size:2.6666666667vw
    }
}

.function-detail .function-item .data ul li:not(:first-of-type) {
    margin-top:.5em
}

.function-detail .function-item .data ul li:before {
    content: "";
    position: absolute;
    top: .25em;
    left: 0;
    width: 1em;
    height: 1em;
    border: 2px solid #1892d4;
    border-radius:50%
}