@charset "utf-8";


/* loading
----------------------------------------------- */

#loading {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	z-index: 5;
}
#loading .bar {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -30px 0 0 -140px;
	width: 280px;
	height: 160px;
	background: #fff;
	overflow: hidden;
	z-index: 1;
}
#loading .progress {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	transform: translate3d(0,100%,0);
	z-index: 1;
}
#loading .mask {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -56px 0 0 -168px;
	width: 336px;
	height: 213px;
	background-image: url(../img/loading_logo.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 336px auto;
	z-index: 2;
}

#loading.ready .bar {
	background: #d3d3d3;
	transition: background 0.85s;
}
#loading.ready .progress {
	background: #ff3891;
	transition: background 0.85s;
}
#loading.complete .bar {
	opacity: 0;
	transition-property: opacity;
	transition-duration: 1s;
	transition-delay: 0.25s;
	transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
}


/* main
----------------------------------------------- */

#main {
	color: #363755;
	font-family: "Noto Sans Japanese";
	font-weight: 400;
	-webkit-print-color-adjust: exact;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
#main a {
	color: #363755;
	text-decoration: none;
}
#main h1,
#main h2,
#main h3,
#main h4 {
	font-weight: 400;
}
#main img {
	vertical-align: top;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
	-moz-user-drag: none;
	-ms-user-drag: none;
}
#main figure {
	margin: 0;
	padding: 0;
}


/* pc
----------------------------------------------- */

@media print, screen and (min-width:741px) {


	/* header
	----------------------------------------------- */
	#wrap > header {
		z-index: 6;
	}

	/* footer
	----------------------------------------------- */

	#wrap footer {
		overflow: hidden;
	}
	#wrap #magFooter #magFooterTitle {
		max-width: 1030px;
		width: 100%;
	}
	#wrap #magFooter #magFooterTitle #titleLogo {
		margin-left: 30px;
	}
	#wrap #magFooter #magFooterTitle #titleTxt {
		padding: 0 30px;
	}
	#wrap #magFooter #magFooterNav {
		display: flex;
		max-width: 1030px;
		width: 100%;
		background: no-repeat;
	}
	#wrap #magFooter #magFooterNav ul.magFNList {
		display: inline-block;
		float: none;
		vertical-align: top;
		border-left: 1px solid #d9d9d9;
	}
	#wrap #magFooter #magFooterNav ul.magFNList:first-child {
		margin: 0 0 0 30px;
		border-left: 0;
	}
	#wrap #magSPArea p {
		max-width: 1030px;
		padding-left: 30px;
		padding-right: 30px;
		width: auto;
	}
	#wrap .copyright.lower {
		min-width: 0;
	}	
	#wrap .copyrightIn {
		max-width: 1030px;
		width: auto;
	}
	#wrap .copyright .copyrightIn p {
		left: 30px;
	}
	#wrap .copyright strong {
		right: 30px;
	}

	#mynaviFooter {
		padding: 30px 0 0;
	}
	#GlobalFooter {
		padding: 0 30px;
		max-width: 970px;
		width: auto;
	}
	#FooterService {
		max-width: 860px;
		width: calc(100% - 100px);
	}

	/* button
	----------------------------------------------- */

	#main .button {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0;
		padding: 0;
		width: 100%;
		height: 80px;
		color: #fff;
		font-size: 22px;
		font-weight: 500;
		text-align: center;
		text-decoration: none;
		vertical-align: middle;
		line-height: 1;
		border-radius: 3px;
		background: #ff5151;
		transition: background 0.25s;
	}
	#main .button:hover {
		background: #e13333;
	}
	#main .button img.arrow {
		margin: 3px 0 0 13px;
		transition: transform 0.25s;
	}
	#main .button:hover img.arrow {
		transform: translateX(5px);
	}
	#main .button span {
		display: inline-block;
		position: relative;
		margin: 0 15px 0 0;
		width: 51px;
		height: 26px;
		font-size: 15px;
		text-indent: 3px;
		letter-spacing: 3px;
		line-height: 25px;
	}
	#main .button span:after {
		display: block;
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		border: 2px solid #fff;
		border-radius: 4px;
	}

	#main .button.small {
		height: 64px;
		font-size: 18px;
	}

	#main .button.white {
		color: #363755;
		background: #fff;
	}
	#main .button.white:hover {
		background: #f5f5f5;
	}
	
	#main .button.gray {
		color: #363755;
		background: #e8e8e8;
	}
	#main .button.gray:hover {
		background: #cacaca;
	}


	/* conversion
	----------------------------------------------- */

	#conversion {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 72px;
		font-family: "Noto Sans Japanese";
		font-weight: 400;
		background: #fff;
		z-index: 10;
		transform: translate3d(0,-100%,0);
	}
	#conversion.ready {
		transition-property: transform;
		transition-duration: 0.5s;
		transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
	}
	#conversion.on {
		transform: translate3d(0,0,0);
		transition-duration: 0.85s;
	}
	#conversion .inner {
		position: relative;
		margin: auto;
		padding: 0 30px;
		max-width: 970px;
	}
	#conversion .title {
		padding: 19px 0 0;
		font-size: 0;
		line-height: 1;
		white-space: nowrap;
	}
	#conversion .title span {
		display: inline-block;
		height: 32px;
		vertical-align: middle;
	}
	#conversion .title .logo {
		position: relative;
		margin: 0 20px 0 0;
		padding: 0 20px 0 0;
	}
	#conversion .title .logo:after {
		display: block;
		content: "";
		position: absolute;
		top: 50%;
		right: 0;
		margin: -10px 0 0;
		width: 1px;
		height: 20px;
		background: #ece7e1;
	}
	#conversion .title .logo img {
		width: auto;
		height: 32px;
	}
	#conversion .title .copy {
		color: #ff3891;
		font-size: 15px;
		font-weight: 500;
		line-height: 36px;
	}
	#conversion .entry {
		position: absolute;
		top: 8px;
		right: 30px;
	}
	#conversion .entry a {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 320px;
		height: 56px;
		color: #ff5151;
		font-size: 15px;
		font-weight: 500;
		text-align: center;
		text-decoration: none;
		box-sizing: border-box;
		border: 2px solid #ff5151;
		border-radius: 4px;
		transition-property: color, background-color;
		transition-duration: 0.25s;
	}
	#conversion .entry a:hover {
		color: #fff;
		background-color: #ff5151;
	}
	#conversion .entry a img {
		margin: 0 0 0 7px;
	}
	#conversion .entry a img:last-child {
		display: none;
	}
	#conversion .entry a:hover img:first-child {
		display: none;
	}
	#conversion .entry a:hover img:last-child {
		display: block;
	}


	/* section title
	----------------------------------------------- */
	
	section .title {
		display: inline-block;
		position: relative;
		font-size: 28px;
		font-weight: 500 !important;
		line-height: 48px;
	}
	section .title:before,
	section .title:after {
		display: block;
		content: "";
		position: absolute;
		top: 0;
		width: 2px;
		height: 100%;
		background: #363755;
	}
	section .title:before {
		left: 0;
	}
	section .title:after {
		right: 0;
	}
	section .title span {
		display: inline-block;
		position: relative;
		padding: 25px 80px 24px;
	}
	section .title.short span {
		padding: 0 80px 5px;
	}
	section .title span:before,
	section .title span:after {
		display: block;
		content: "";
		position: absolute;
		width: 58px;
		height: 2px;
		background: #363755;
	}
	section .title span:before {
		top: 0;
		left: 0;
	}
	section .title span:after {
		right: 0;
		bottom: 0;
	}
	section .title .spbr {
		display: none;
	}
	
	/* white */
	
	section .title.white {
		color: #fff;
	}
	section .title.white:before,
	section .title.white:after,
	section .title.white span:before,
	section .title.white span:after {
		background: #fff;
	}
	

	/* intro
	----------------------------------------------- */
	
	#intro {
		position: relative;
		overflow: hidden;
	}
	#intro figure {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}
	#intro figure img {
		position: absolute;
		top: 0;
		left: 50%;
		min-width: 1280px;
		width: 100%;
		height: auto;
		transform: translateX(-50%);
	}
	#intro .inner {
		position: relative;
		padding: 110px 0 80px;
		padding: 480px 0 80px;
		text-align: center;
		background: url(../img/intro_mask.png) repeat-x center 580px;
		z-index: 1;
	}
	
	#intro .mark {
		position: absolute;
		top: 175px;
		left: 52.5%;
		margin: 0 0 0 -185px;
		width: 270px;
		height: 270px;
	}
	#intro .mark h1 {
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -185px 0 0 -185px;
		width: 370px;
		height: 370px;
		border-radius: 370px;
		background: #fff;
		z-index: 1;
	}
	#intro .mark span {
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
	}
	#intro .mark .agent {
		margin: -130px 0 0 80px;
	}
	#intro .mark .agent img {
		width: 120px;
	}
	#intro .mark .no1 {
		margin: 100px 0 0 41px;
	}
	#intro .mark .copy1 {
		margin: -164px 0 0 -135px;
		width: 270px;
		font-size: 28px;
		font-weight: 500;
		font-feature-settings: "palt";
		text-align: center;
		line-height: 40px;
	}
	#intro .mark .copy1 img {
		width: 226px;
	}
	#intro .mark .new_areaImg {
		margin: -96px 0 0 -77px;
	}
	#intro .mark .new_areaImg img {
		width: 160px;
	}
	#intro .mark .copy2 {
		margin: 102px 0 0 -120px;
		color: #ff72a4;
		font-size: 15px;
		font-weight: 500;
		line-height: 20px;
		text-align: right;
	}
	
	#intro .buttons {
		display: flex;
		flex-wrap: wrap;
		margin: auto;
		padding: 85px 0 0;
		max-width: 606px;
	}
	#intro .buttons li {
		margin: 20px 3px 0;
		width: calc(50% - 6px);
	}
	#intro .buttons li:first-child {
		width: calc(100% - 6px);
	}
	#intro .buttons li:nth-child(n+2) .button {
		font-size: 18px;
		background: #363755;
	}
	#intro .buttons li:nth-child(n+2) .button:hover {
		background: #181937;
	}
	#intro .buttons li:nth-child(n+2) .button img.icon {
		margin: 0 13px 0 0;
	}
	#intro .buttons li:nth-child(n+2) .button img.arrow {
		display: none;
	}
	#intro h3 {
		margin: 80px 0 0;
	}
	#intro .summary {
		margin: 0 30px;
		padding: 12px 0 0;
	}
	#intro .summary p {
		padding: 36px 0 0;
		font-size: 18px;
		line-height: 36px;
	}
	#intro h4 {
		margin: 66px 0 0;
		font-size: 15px;
		font-weight: 400;
	}

	#intro .company {
		margin: auto;
		padding: 31px 0 0;
		max-width: 970px;
		min-height: 250px;
		font-size: 0;
		text-align: center;
		line-height: 1;
	}
	#intro .company li {
		display: inline-block;
		margin: 0 2px;
		width: calc(100% / 5 - 4px);
	}

	#intro .company li img {
		max-width: 100%;
		width: 100%;
		height: auto;
	}

	#intro .company__btn {
		border: 1px solid #363755;
		border-radius: 3px;
		font-size: 15px;
		margin: 35px auto 80px;
		height: 36px;
		line-height: 36px;
		width: 250px;
	}

	#intro .company__btn:hover {
		background: #f5f5f5;
	}

	#intro .company__btnLink {
		color: #363755;
		display: block;
	}

	#intro .company__btnTxtBox {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	#intro .arrow--company {
		margin: 1px 0 0 6px;
		transition: transform 0.25s;
	}

	#intro .company__btn:hover .arrow--company {
		transform: translateX(5px);
	}

	#intro .more {
		margin: 55px auto 0;
		max-width: 600px;
	}
	#intro .mintitle {
		display: none;
	}

	/* ready */

	#intro.ready .mark {
		opacity: 0;
		transform: scale3d(0.8,0.8,0.8);
	}
	#intro.ready .mark h1 {
		margin: 0;
		width: 0;
		height: 0;
	}
	#intro.ready figure {
		transform: scale3d(1.1,1.1,1.1);
	}
	
	/* start */

	#intro.start .mark {
		opacity: 1;
		transform: scale3d(1,1,1);
		transition-property: opacity, transform;
		transition-duration: 1s;
		transition-delay: 1s;
		transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
	}
	#intro.start .mark h1 {
		margin: -135px 0 0 -135px;
		width: 270px;
		height: 270px;
		transition-property: margin, width, height;
		transition-duration: 0.85s;
		transition-delay: 0;
		transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
	}
	#intro.start figure {
		transform: scale3d(1,1,1);
		transition-property: transform;
		transition-duration: 2s;
		transition-delay: 0.25s;
		transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
	}


	/* service
	----------------------------------------------- */

	#service {
		padding: 100px 0 80px;
		text-align: center;
		background: url(../img/service_bg_pc.jpg) no-repeat center top;
		background-size: cover;
	}
	
	#service .articles {
		display: flex;
		margin: auto;
		padding: 60px 20px 0;
		max-width: 990px;
		font-size: 0;
		line-height: 1;
	}
	#service article {
		margin: 0 10px;
		padding: 40px 0 32px;
		width: calc(100% / 3 - 20px);
		background: #fff;
	}
	#service article figure {
		margin: 0 35px;
		text-align: center;
	}
	#service article figure img {
		max-width: 120px;
		width: 100%;
		height: auto;
	}
	#service article h3 {
		margin: 0 35px;
		padding: 20px 0 0;
		font-size: 18px;
		font-weight: 500;
		text-align: center;
		line-height: 30px;
	}
	#service article p {
		margin: 0 35px;
		padding: 20px 0 0;
		font-size: 15px;
		text-align: justify;
		line-height: 32px;
	}
	#service article p em {
		font-style: normal;
		border-bottom: 1px solid #ff3891;
	}


	/* problem
	----------------------------------------------- */

	#problem {
		padding: 80px 0;
		text-align: center;
	}

	#problem .check {
		padding: 30px 0 0;
		text-align: center;
	}
	#problem .check ul {
		display: inline-block;
		text-align: left;
	}
	#problem .check li {
		margin: 26px 0 0;
		padding: 0;
		height: 28px;
		font-size: 18px;
		line-height: 25px;
	}
	#problem .check li img {
		margin: 0 17px 0 0;
	}

	#problem .more {
		margin: 65px auto 0;
		max-width: 600px;
	}
	#problem .more .button br {
		display: none;
	}


	/* feature
	----------------------------------------------- */

	#feature {
		padding: 80px 0;
		text-align: center;
		background: #e8e8e8;
	}

	#feature .articles {
		display: flex;
		flex-wrap: wrap;
		margin: auto;
		padding: 0 10px;
		max-width: 1010px;
		text-align: left;
	}
	#feature article {
		position: relative;
		margin: 60px 20px 0;
		width: calc(100% / 2 - 40px);
	}
	#feature article a {
		color: #363755;
		text-decoration: none;
	}

	#feature article figure {
		position: absolute;
		top: 0;
		left: 0;
		width: 64.51%;
	}
	#feature article:nth-child(n+3) figure {
		left: auto;
		right: 0;
	}
	#feature article figure img {
		max-width: 100%;
		height: auto;
	}

	#feature article h3 {
		position: relative;
		margin: 0 0 0 39.78%;
		height: 102px;
		text-align: right;
		z-index: 2;
	}
	#feature article:nth-child(n+3) h3 {
		margin: 0 39.78% 0 0;
		text-align: left;
	}
	#feature article h3 img {
		position: absolute;
		bottom: 0;
		max-width: 100%;
		height: auto;
	}
	#feature article:nth-child(1) h3 img {
		right: -4%;
	}
	#feature article:nth-child(2) h3 img {
		right: 4%;
	}
	#feature article:nth-child(3) h3 img {
		left: 2.8%;
		bottom: -5%;
	}
	#feature article:nth-child(4) h3 img {
		left: 5.5%;
		bottom: -17%;
	}
	
	#feature article .message {
		position: relative;
		margin: 9px 0 0 39.78%;
		z-index: 1;
	}
	#feature article:nth-child(n+3) .message {
		margin: 9px 39.78% 0 0;
	}
	#feature article .message:before,
	#feature article .message:after {
		display: block;
		content: "";
		position: absolute;
		left: 5px;
		width: calc(100% - 10px);
		height: 15px;
		background: #363755;
	}
	#feature article .message:before {
		top: 0;
		transform: rotate(-5deg);
	}
	#feature article .message:after {
		bottom: 0;
		transform: rotate(-5deg);
	}	
	#feature article .message p {
		position: relative;
		min-height: 154px;
		background: #fff;
		z-index: 1;
	}
	#feature article .message p span {
		display: block;
	}
	#feature article .message p .text {
		margin: 0 30px;
		padding: 23px 0 35px;
		font-size: 18px;
		line-height: 30px;
	}
	#feature article .message p .tag {
		position: absolute;
		right: 16px;
		bottom: 6px;
		color: #ff3891;
		font-size: 15px;
	}
	#feature article .message p .tag img {
		margin: -5px 0 0 5px;
		transition: transform 0.25s;
	}

	#feature article .message p .text,
	#feature article .message p .tag {
		transition: opacity 0.2s;
	}
	#feature article a:hover .message p .text,
	#feature article a:hover .message p .tag {
		opacity: 0.7;
	}
	#feature article a:hover .message p .tag img {
		transform: translate3d(10%,0,0);
	}

	#feature .search__topTitle {
		font-size: 26px;
		margin: 72px auto 0;
		position: relative;
		max-width: 970px;
	}

	#feature .search__topTitle:before,
	#feature .search__topTitle:after {
		content: "";
		background: #363755;
		display: block;
		height: 2px;
		position: absolute;
		bottom: 0;
		top: 0;
		margin: auto;
		width: 42%;
	}

	#feature .search__topTitle:before {
		left: 0;
	}

	#feature .search__topTitle:after {
		right: 0;
	}

	#feature .search__title {
		margin: 46px 0 0;
		font-size: 20px;
		font-weight: 400;
		text-align: center;
	}

	#feature .search__title--pop {
		margin: 54px 0 0;
	}

	#feature .search {
		display: flex;
		flex-wrap: wrap;
		margin: 23px auto 0;
		max-width: 970px;
		text-align: left;
		border-top: 2px solid #d3d3d3;
		border-bottom: 2px solid #d3d3d3;
	}
	#feature .search li {
		display: flex;
		align-items: center;
		width: calc(100% / 2 - 2px);
		border-bottom: 2px solid #d3d3d3;
		border-right: 2px solid #d3d3d3;
	}
	#feature .search li:nth-child(even) {
		width: calc(100% / 2);
		border-right: 0;
	}
	#feature .search li:last-child {
		border-bottom: 0;
	}
	#feature .search--pop li:nth-child(9),
	#feature .search--pop li:last-child {
		border-bottom: 0;
	}
	#feature .search li a {
		display: block;
		position: relative;
		padding: 25px 60px 25px 40px;
		width: 100%;
		color: #363755;
		font-size: 18px;
		text-decoration: none;
		line-height: 31px;
		transition: opacity 0.25s;
	}
	#feature .search li a:hover {
		opacity: 0.7;
	}
	#feature .search li a img {
		position: absolute;
		top: 50%;
		right: 35px;
		margin: -9px 0 0;
		transition: transform 0.25s;
	}
	#feature .search li a:hover img {
		transform: translateX(5px);
	}

	#feature .more {
		margin: 78px auto 0;
		max-width: 600px;
	}
	#feature .more .button br {
		display: none;
	}


	/* voice
	----------------------------------------------- */

	#voice {
		padding: 100px 0 80px;
		text-align: center;
		background: url(../img/voice_bg_pc.jpg) no-repeat center top;
		background-size: cover;
	}
	
	#voice .slide {
		position: relative;
		margin: 64px 0 0;
		text-align: left;
		overflow: hidden;
	}
	#voice .slide .control li {
		position: absolute;
		top: 266px;
		left: 50%;
		cursor: pointer;
		z-index: 1;
	}
	#voice .slide .control .prev {
		margin: 0 0 0 -352px;
		transform: scaleX(-1);
	}
	#voice .slide .control .next {
		margin: 0 0 0 300px;
	}
	#voice .slide .control li img {
		transition-property: transform;
		transition-duration: 0.25s;
	}
	#voice .slide .control li:hover img {
		opacity: 0.7;
		transform: translateX(3px);
	}
	
	#voice .slide .slick-dots {
		margin: 40px 0 0;
		font-size: 0;
		text-align: center;
		line-height: 1;
	}
	#voice .slide .slick-dots li {
		display: inline-block;
		margin: 0 10px;
	}
	#voice .slide .slick-dots li button {
		margin: 0;
		padding: 0;
		width: 8px;
		height: 8px;
		outline: none;
		border: 0;
		border-radius: 8px;
		background: #fff;
		cursor: pointer;
		-webkit-appearance: none;
	}
	#voice .slide .slick-dots li.slick-active button {
		background: #363755;
	}

	#voice .items {
	}
	#voice .item {
		margin: 0 83px;
		width: 520px;
		background: #fff;
	}
	#voice .item a {
		display: block;
		padding: 35px 0 40px;
		outline: none;
		transition: opacity 0.25s;
	}
	#voice .item a:hover {
		opacity: 0.7;
	}
	#voice .item figure {
		margin: 0 90px;
	}
	#voice .item figure img {
		width: 100%;
		height: auto;
	}
	#voice .item .summary {
		margin: 0 60px;
		padding: 0 0 11px;
	}
	#voice .item .summary p {
		margin: 24px 0 0;
		font-size: 15px;
		text-align: justify;
		letter-spacing: -0.5px;
		line-height: 30px;
	}

	#voice .item dl {
		display: table;
		margin: 11px 60px 0;
		width: calc(100% - 120px);
		font-size: 13px;
		line-height: 1;
	}
	#voice .item dt,
	#voice .item dd {
		display: table-cell;
		vertical-align: top;
	}
	#voice .item dt {
		width: 50px;
	}
	#voice .item dt span {
		display: block;
		width: 40px;
		height: 40px;
		text-align: center;
		line-height: 38px;
		border-radius: 40px;
		border: 1px solid #363755;
		box-sizing: border-box;
	}
	#voice .item dd {
		width: calc(100% - 50px);
	}
	#voice .item dd span {
		display: block;
		padding: 0 0 0 39px;
		text-indent: -39px;
		line-height: 20px;
	}
	
	#voice .item dl:last-child dt,
	#voice .item dl:last-child dt span,
	#voice .item dl:last-child dd {
		color: #ff3891;
		border-color: #ff3891;
	}

	#voice .more {
		margin: 53px auto 0;
		max-width: 520px;
	}


	/* point
	----------------------------------------------- */

	#point {
		padding: 100px 0 80px;
		text-align: center;
		background: #e8e8e8;
	}

	#point .articles {
		display: flex;
		flex-wrap: wrap;
		margin: auto;
		padding: 40px 20px 0;
		max-width: 990px;
		text-align: left;
	}
	#point article {
		margin: 20px 10px 0;
		padding: 20px 0 0;
		width: calc(100% / 2 - 20px);
		background: #fff;
	}

	#point article header {
		display: flex;
		align-items: center;
		margin: 0 20px;
	}
	#point article figure {		
		width: 28.8%;
	}
	#point article figure img {
		width: 100%;
		height: auto;
	}
	#point article h3 {
		padding: 3px 0 0 20px;
		width: 71.2%;
		font-size: 18px;
		font-weight: 500;
		line-height: 30px;
	}
	
	#point article .job {
		margin: 20px 0 0;
		padding: 15px 0 30px;
		border-top: 1px solid #e8e8e8;
		border-bottom: 1px solid #e8e8e8;
	}
	#point article .job dl {
		display: table;
		margin: 17px 40px 0;
		width: calc(100% - 80px);
		font-size: 13px;
		line-height: 1;
	}
	#point article .job dt,
	#point article .job dd {
		display: table-cell;
		vertical-align: top;
	}
	#point article .job dt {
		width: 50px;
	}
	#point article .job dt span {
		display: block;
		width: 40px;
		height: 40px;
		text-align: center;
		line-height: 38px;
		border-radius: 40px;
		border: 1px solid #363755;
		box-sizing: border-box;
	}
	#point article .job dd {
		width: calc(100% - 50px);
	}
	#point article .job dd span {
		display: block;
		padding: 0 0 0 39px;
		text-indent: -39px;
		line-height: 20px;
	}
	#point article .job dl:last-child dt,
	#point article .job dl:last-child dt span,
	#point article .job dl:last-child dd {
		color: #ff3891;
		border-color: #ff3891;
	}
	
	#point article .link a {
		display: block;
		height: 64px;
		color: #363755;
		font-size: 15px;
		font-weight: 500;
		text-align: center;
		text-decoration: none;
		line-height: 63px;
	}
	#point article .link a:hover {
		opacity: 0.7;
		transition: opacity 0.2s;
	}
	#point article .link a img {
		margin: -2px 0 0 2px;
		width: 12px;
		height: 12px;
		vertical-align: middle;
		transition: transform 0.2s;
	}
	#point article .link a:hover img {
		transform: translateX(4px);
	}
	
	#point .more {
		margin: 40px auto 0;
		max-width: 600px;
		text-align: center;
	}
	#point .more .button:first-child {
		margin: auto;
		max-width: 520px;
	}
	#point .more .button:last-child {
		margin: 80px 0 0;
	}


	/* flow
	----------------------------------------------- */

	#flow {
		padding: 80px 0 80px;
		text-align: center;
	}

	#flow .summary {
		margin: 0 30px;
		padding: 5px 0 0;
		text-align: center;
	}
	#flow .summary p {
		padding: 40px 0 0;
		font-size: 18px;
		line-height: 40px;
	}
	
	#flow .step {
		margin: 54px auto 0;
		padding: 92px 0 0;
		max-width: 950px;
		text-align: left;
	}
	#flow .step ul {
		margin: 0 30px;
	}
	#flow .step li {
		position: relative;
		margin: -90px 0 0;
	}
	#flow .step li:nth-child(even) figure {
		text-align: right;
	}
	#flow .step li figure img {
		width: 300px;
		height: 300px;
	}
	
	#flow .step li .label {
		display: flex;
		align-items: flex-end;
		position: absolute;
		top: 50%;
		left: 256px;
		margin: -45px 0 0;
		padding: 3px 0 15px;
		width: 300px;
		border-bottom: 2px solid #363755;
	}
	#flow .step li:nth-child(even) .label {
		left: auto;
		right: 256px;
	}
	#flow .step li span {
		display: block;
	}
	#flow .step li .no {
		margin: 0 10px 0 0;
		padding: 0 0 0 85px;
		text-align: center;
	}
	#flow .step li:nth-child(even) .no {
		padding: 0 0 0 7px;
	}
	#flow .step li .text {
		font-size: 22px;
		font-weight: 500;
		line-height: 33px;
	}
	#flow .step li .text .spbr {
		display: none;
	}

	
	/* discussion
	----------------------------------------------- */
	
	#discussion {
		padding: 100px 0;
		text-align: center;
		background: url(../img/discussion_bg_pc.jpg) no-repeat center top;
		background-size: cover;
	}

	#discussion .summary {
		margin: 0 30px;
		padding: 13px 0 0;
		text-align: center;
	}
	#discussion .summary p {
		padding: 36px 0 0;
		font-size: 18px;
		line-height: 36px;
	}

	#discussion .more {
		margin: 72px auto 0;
		max-width: 600px;
	}
	#discussion .more .button br {
		display: none;
	}


	/* location
	----------------------------------------------- */

	#location {
		background: #fff;
	}
	#location p {
		margin: auto;
		padding: 20px 30px;
		max-width: 970px;
		font-size: 15px;
	}
	#location p a {
		color: #363755;
		text-decoration: none;
	}
	#location p a:hover {
		text-decoration: underline;
	}


}


/* tablet
----------------------------------------------- */

@media screen and (min-width:741px) and (max-width:1000px) {


	/* header
	----------------------------------------------- */

	#wrap #globalNav #globalNavSet ul#gNav > li ul li a, #wrap.magTop #globalNav #globalNavSet ul#gNav > li.bgImg ul li a {
		font-size: 0.9em;
	}


	/* footer
	----------------------------------------------- */

	#FooterCorpInfo {
		margin: 50px 0 0;
		max-width: 970px;
		width: 100%;
	}
	#privacy {
		margin: -120px 0 10px 0;
	}
	#yuryoshokai {
		margin: -120px 75px 10px 0;
	}


	/* conversion
	----------------------------------------------- */

	#conversion .title .copy {
		font-size: 11px;
	}
	#conversion .entry a {
		padding: 0 10px;
		width: auto;
		font-size: 12px;
	}


	/* intro
	----------------------------------------------- */

	#intro .summary p {
		font-size: 16px;
		line-height: 34px;
	}


	/* flow
	----------------------------------------------- */

	#flow .summary p {
		font-size: 16px;
		line-height: 38px;
	}


	/* discussion
	----------------------------------------------- */

	#discussion .summary p {
		font-size: 16px;
		line-height: 34px;
	}


}


/* mobile
----------------------------------------------- */

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


	/* loading
	----------------------------------------------- */

	#loading .bar {
		margin: -50px 0 0 -85px;
		width: 170px;
		height: 100px;
	}
	#loading .mask {
		margin: -68px 0 0 -108px;
		width: 216px;
		height: 137px;	
		background-size: 216px auto;
	}


	/* header
	----------------------------------------------- */

	#wrap > header {
		position: relative;
		z-index: 6;
	}


	/* footer
	----------------------------------------------- */

/*
	#wrap footer {
		margin: 0 0 89px;
	}
*/


	/* button
	----------------------------------------------- */

	#main .button {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0;
		padding: 0;
		width: 100%;
		height: 60px;
		color: #fff;
		font-size: 16px;
		font-weight: 500;
		text-align: center;
		text-decoration: none;
		vertical-align: middle;
		line-height: 1;
		border-radius: 2px;
		background: #ff5151;
		transition: background 0.25s;
	}
	#main .button img.arrow {
		display: inline-block;
		margin: 1px 0 0 5px;
		width: 12px;
		height: 12px;
	}
	#main .button span {
		display: inline-block;
		position: relative;
		margin: 0 10px 0 0;
		width: 38px;
		height: 20px;
		font-size: 12px;
		text-indent: 3px;
		letter-spacing: 3px;
		line-height: 20px;
	}
	#main .button span:after {
		display: block;
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		border: 1px solid #fff;
		border-radius: 2px;
	}

	#main .button.small {
		height: 48px;
		font-size: 13px;
	}

	#main .button.white {
		color: #363755;
		background: #fff;
	}

	#main .button.gray {
		color: #363755;
		background: #e8e8e8;
	}


	/* conversion
	----------------------------------------------- */

	#conversion {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		font-family: "Noto Sans Japanese";
		font-weight: 400;
		z-index: 2;
		transform: translate3d(0,100%,0);
	}
	#conversion.ready {
		transition-property: transform;
		transition-duration: 0.5s;
		transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
	}
	#conversion.on {
		transform: translate3d(0,0,0);
		transition-duration: 0.85s;
	}
	#conversion .title {
		display: none;
	}
	#conversion .entry {
		margin: 0 12px;
		padding: 0 0 12px;
	}
	#conversion .entry a {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 65px;
		color: #ff5151;
		font-size: 17px;
		font-weight: 500;
		text-align: center;
		text-decoration: none;
		box-sizing: border-box;
		border: 2px solid #ff5151;
		border-radius: 2px;
		background: #fff;
	}
	#conversion .entry a img {
		margin: -1px 0 0 8px;
		width: 12px;
		height: 12px;
	}
	#conversion .entry a img:last-child {
		display: none;
	}


	/* section title
	----------------------------------------------- */
	
	section .title {
		display: inline-block;
		position: relative;
		font-size: 20px;
		font-weight: 500 !important;
		line-height: 30px;
	}
	section .title:before,
	section .title:after {
		display: block;
		content: "";
		position: absolute;
		top: 0;
		width: 2px;
		height: 100%;
		background: #363755;
	}
	section .title:before {
		left: 0;
	}
	section .title:after {
		right: 0;
	}
	section .title span {
		display: inline-block;
		position: relative;
		padding: 5px 30px;
	}
	section .title.short span {
		padding: 3px 25px;
	}
	section .title span:before,
	section .title span:after {
		display: block;
		content: "";
		position: absolute;
		width: 29px;
		height: 2px;
		background: #363755;
	}
	section .title span:before {
		top: 0;
		left: 0;
	}
	section .title span:after {
		right: 0;
		bottom: 0;
	}
	section .title br {
		display: none;
	}
	section .title .spbr {
		display: block;
	}

	/* white */

	section .title.white {
		color: #fff;
	}
	section .title.white:before,
	section .title.white:after,
	section .title.white span:before,
	section .title.white span:after {
		background: #fff;
	}


	/* intro
	----------------------------------------------- */

	#intro {
		position: relative;
		overflow: hidden;
	}
	#intro figure {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}
	#intro figure img {
		position: absolute;
		top: 0;
		left: 50%;
		min-width: 375px;
		width: 100%;
		height: auto;
		transform: translateX(-50%);
	}
	#intro .inner {
		position: relative;
		padding: 112px 0 40px;
		padding: 360px 0 40px;
		text-align: center;
		background: url(../img/intro_mask.png) repeat-x center 470px;
		background-size: 5px 1000px;
		z-index: 1;
	}

	#intro .mark {
		position: absolute;
		top: 243px;
		left: 56%;
		margin: 0 0 0 -125px;
		width: 200px;
		height: 200px;
	}
	#intro .mark h1 {
		display: block;
		position: absolute;
		top: 50%;
		left: 51%;
		margin: -125px 0 0 -125px;
		width: 250px;
		height: 250px;
		border-radius: 250px;
		background: #fff;
		z-index: 1;
	}
	#intro .mark span {
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
	}
	#intro .mark .agent {
		margin: -98px 0 0 61px;
	}
	#intro .mark .agent img {
		width: 100px;
		height: auto;
	}
	#intro .mark .no1 {
		margin: 93px 0 0 -18px;
	}
	#intro .mark .no1 img {
		width: 36px;
		height: auto;
	}
	#intro .mark .copy1 {
		margin: -123px 0 0 -125px;
		width: 250px;
		font-size: 18px;
		font-weight: 500;
		font-feature-settings: "palt";
		text-align: center;
		line-height: 25px;
	}
	#intro .mark .copy1 img {
		width: 170px;
	}
	#intro .mark .new_areaImg {
		margin: -73px 0 0 -61px;
	}
	#intro .mark .new_areaImg img {
		width: 124px;
	}
	#intro .mark .copy2 {
		margin: 60px 0 0 -125px;
		width: 250px;
		color: #ff72a4;
		font-size: 12px;
		font-weight: 500;
		line-height: 15px;
	}

	#intro .buttons {
		margin: 0 auto;
		padding: 100px 0 0;
		max-width: 375px;
	}
	#intro .buttons li {
		margin: 10px 26px 0;
	}
	#intro .buttons li:first-child {
		padding: 0 0 6px;
	}
	#intro .buttons li:nth-child(n+2) .button {
		height: 50px;
		font-size: 15px;
		background: #363755;
	}
	#intro .buttons li:nth-child(n+2) .button img.icon {
		margin: 0 8px 0 0;
		width: 20px;
		height: 20px;
	}

	#intro h3 {
		margin: 40px 0 0;
	}
	#intro h3 img {
		max-width: 375px;
		width: 100%;
		height: auto;
	}

	#intro .summary {
		margin: 0 auto;
		padding: 1px 26px 0;
		max-width: 375px;
	}
	#intro .summary p {
		padding: 22px 0 0;
		font-size: 13px;
		text-align: justify;
		line-height: 22px;
		letter-spacing: -0.2px;
	}
	#intro .summary p br {
		display: none;
	}
	#intro h4 {
		margin: 33px 0 0;
		font-size: 13px;
		font-weight: 400;
	}

	#intro .company {
		margin: auto;
		padding: 10px 26px 0;
		max-width: 375px;
		min-height: 152px;
		font-size: 0;
		text-align: center;
		line-height: 1;
	}
	#intro .company li {
		display: inline-block;
		width: calc(100% / 3);
	}
	#intro .company li img {
		max-width: 100%;
		height: auto;
	}

	#intro .company__btn {
		border: 1px solid #363755;
		border-radius: 3px;
		font-size: 15px;
		margin: 10px auto 40px;
		height: 40px;
		line-height: 40px;
		width: 175px;
	}

	#intro .company__btn:hover {
		background: #f5f5f5;
	}

	#intro .company__btnLink {
		color: #363755;
		display: block;
	}

	#intro .company__btnTxtBox {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	#intro .arrow--company {
		margin: 0 0 0 6px;
		transition: transform 0.25s;
	}

	#intro .more {
		margin: 16px auto 0;
		padding: 0 26px;
		max-width: 375px;
	}

	/* ready */

	#intro.ready .mark {
		opacity: 0;
		transform: scale3d(0.8,0.8,0.8);
	}
	#intro.ready .mark h1 {
		margin: 0;
		width: 0;
		height: 0;
	}
	#intro.ready figure {
		transform: scale3d(1.1,1.1,1.1);
	}
	
	/* start */

	#intro.start .mark {
		opacity: 1;
		transform: scale3d(1,1,1);
		transition-property: opacity, transform;
		transition-duration: 1s;
		transition-delay: 1s;
		transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
	}
	#intro.start .mark h1 {
		margin: -100px 0 0 -100px;
		width: 200px;
		height: 200px;
		transition-property: margin, width, height;
		transition-duration: 0.85s;
		transition-delay: 0;
		transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
	}
	#intro.start figure {
		transform: scale3d(1,1,1);
		transition-property: transform;
		transition-duration: 2s;
		transition-delay: 0.25s;
		transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
	}


	/* service
	----------------------------------------------- */

	#service {
		padding: 40px 0;
		text-align: center;
		background-image: url(../img/service_bg_sp_bottom.jpg), url(../img/service_bg_sp_top.jpg);
		background-color: #ff87b2;
		background-position: center bottom, center top;
		background-repeat: no-repeat;
		background-size: 100% auto;
	}

	#service .articles {
		margin: auto;
		max-width: 375px;
		padding: 20px 0 0;
	}
	#service article {
		margin: 10px 26px 0;
		padding: 30px 0;
		background: #fff;
	}
	#service article figure {
		margin: 0 25px;
		text-align: center;
	}
	#service article figure img {
		max-width: 140px;
		width: 100%;
		height: auto;
	}
	#service article h3 {
		margin: 0 25px;
		padding: 18px 0 0;
		font-size: 16px;
		font-weight: 500;
		text-align: center;
		line-height: 24px;
	}
	#service article h3 br {
		display: none;
	}
	#service article h3 .spbr {
		display: block;
	}
	#service article p {
		margin: 0 25px;
		padding: 6px 0 0;
		font-size: 13px;
		text-align: justify;
		line-height: 22px;
	}
	#service article p em {
		font-style: normal;
		border-bottom: 1px solid #ff3891;
	}


	/* problem
	----------------------------------------------- */

	#problem {
		padding: 40px 0;
		text-align: center;
	}

	#problem .check {
		padding: 15px 0 0;
		text-align: center;
	}
	#problem .check ul {
		display: inline-block;
		text-align: left;
	}
	#problem .check li {
		margin: 12px 0 0;
		padding: 0 18px 0 0;
		height: 20px;
		font-size: 13px;
		letter-spacing: -0.5px;
		line-height: 18px;
	}
	#problem .check li img {
		margin: 0 10px 0 0;
		width: 20px;
		height: 20px;
	}
	
	#problem .more {
		margin: 27px auto 0;
		padding: 0 26px;
		max-width: 375px;
	}
	#problem .more .button {
		display: inline-block;
		padding: 10px 0;
		height: auto;
		line-height: 24px;
	}
	#problem .more .button img {
		margin: -3px 0 0 4px;
		vertical-align: middle;
	}


	/* feature
	----------------------------------------------- */

	#feature {
		padding: 40px 0;
		text-align: center;
		background: #e8e8e8;
	}

	#feature .articles {
		margin: auto;
		padding: 0 26px;
		max-width: 375px;
		text-align: left;
	}
	#feature article {
		position: relative;
		margin: 30px 0 0;
	}
	#feature article:nth-child(even) {
		margin: 38px 0 0;
	}	
	#feature article a {
		color: #363755;
		text-decoration: none;
	}

	#feature article figure {
		position: absolute;
		top: 0;
		right: 0;
		width: 68.11%;
	}
	#feature article:nth-child(even) figure {
		left: 0;
		right: auto;
	}
	#feature article figure img {
		max-width: 100%;
		height: auto;
	}

	#feature article h3 {
		position: relative;
		margin: 0 41.33% 0 0;
		height: 61px;
		z-index: 2;
	}
	#feature article:nth-child(even) h3 {
		margin: 0 0 0 41.33%;
		height: 87px;
	}
	#feature article h3 img {
		position: absolute;
		bottom: 0;
		width: 70%;
		height: auto;
	}
	#feature article:nth-child(1) h3 img {
		left: -7%;
		bottom: -24%;
	}
	#feature article:nth-child(2) h3 img {
		right: 4%;
		bottom: 13%;
	}
	#feature article:nth-child(3) h3 img {
		left: -8%;
		bottom: -13%;
	}
	#feature article:nth-child(4) h3 img {
		right: 2.5%;
		bottom: 22%;
	}

	#feature article .message {
		position: relative;
		margin: 0 41.33% 0 0;
		z-index: 1;
	}
	#feature article:nth-child(even) .message {
		margin: 0 0 0 41.33%;
	}
	#feature article .message:before,
	#feature article .message:after {
		display: block;
		content: "";
		position: absolute;
		left: 0;
		width: calc(100% - 10px);
		height: 15px;
		background: #363755;
	}
	#feature article .message:before {
		top: 0;
		left: 5px;
		transform: rotate(-5deg);
	}
	#feature article .message:after {
		left: 5px;
		bottom: 0;
		transform: rotate(-5deg);
	}

	#feature article .message p {
		position: relative;
		min-height: 105px;
		background: #fff;
		z-index: 1;
	}
	#feature article .message p span {
		display: block;
	}
	#feature article .message p .text {
		margin: 0 20px;
		padding: 17px 0 28px;
		font-size: 13px;
		line-height: 20px;
	}
	#feature article .message p .text br {
		display: none;
	}
	#feature article .message p .tag {
		position: absolute;
		right: 12px;
		bottom: 5px;
		color: #ff3891;
		font-size: 13px;
	}
	#feature article .message p .tag img {
		margin: -5px 0 0 2px;
		width: 26px;
		height: 26px;
	}

	#feature .search__topTitle {
		font-size: 18px;
		margin: 58px auto 0;
		position: relative;
		max-width: 970px;
	}

	#feature .search__topTitle:before,
	#feature .search__topTitle:after {
		content: "";
		background: #363755;
		display: block;
		height: 2px;
		position: absolute;
		bottom: 0;
		top: 0;
		margin: auto;
		width: 37%;
	}

	#feature .search__topTitle:before {
		left: 0;
	}

	#feature .search__topTitle:after {
		right: 0;
	}

	#feature .search__title {
		margin: 30px 0 0;
		font-size: 16px;
		font-weight: 400;
		text-align: center;
	}

	#feature .search {
		margin: 13px 0 0;
		text-align: left;
		border-bottom: 2px solid #d3d3d3;
	}
	#feature .search li {
		border-top: 2px solid #d3d3d3;
	}
	#feature .search li a {
		display: block;
		position: relative;
		padding: 14px 60px 14px 40px;
		color: #363755;
		font-size: 13px;
		text-decoration: none;
		line-height: 21px;
	}
	#feature .search li a br {
		display: none;
	}
	#feature .search li a img {
		position: absolute;
		top: 50%;
		right: 35px;
		margin: -6px 0 0;
		width: 12px;
		height: 12px;
	}

	#feature .more {
		margin: 35px auto 0;
		padding: 0 26px;
		max-width: 375px;
	}
	#feature .more .button {
		display: inline-block;
		padding: 10px 0;
		height: auto;
		line-height: 24px;
	}
	#feature .more .button img {
		margin: -3px 0 0 4px;
		vertical-align: middle;
	}


	/* voice
	----------------------------------------------- */

	#voice {
		padding: 40px 0;
		text-align: center;
		background: url(../img/voice_bg_sp.jpg) no-repeat center top;
		background-size: cover;
	}	

	#voice .slide {
		position: relative;
		margin: 30px 0 0;
		text-align: left;
		overflow: hidden;
	}
	
	#voice .slide .control {
		position: absolute;
		top: 196px;
		left: 50%;
		max-width: 375px;
		width: 100%;
		transform: translateX(-50%);
	}
	#voice .slide .control li {
		position: absolute;
		top: 0;
		cursor: pointer;
		z-index: 1;
	}
	#voice .slide .control .prev {
		left: 12px;
		transform: scaleX(-1);
	}
	#voice .slide .control .next {
		right: 12px;
	}
	#voice .slide .control li img {
		width: 27px;
		height: 27px;
	}
	
	#voice .slide .slick-dots {
		margin: 16px 0 0;
		font-size: 0;
		text-align: center;
		line-height: 1;
	}
	#voice .slide .slick-dots li {
		display: inline-block;
		margin: 0 5px;
	}
	#voice .slide .slick-dots li button {
		margin: 0;
		padding: 0;
		width: 6px;
		height: 6px;
		outline: none;
		border: 0;
		border-radius: 6px;
		background: #fff;
		cursor: pointer;
		-webkit-appearance: none;
	}
	#voice .slide .slick-dots li.slick-active button {
		background: #363755;
	}

	#voice .item {
		margin: 0 35px;
		max-width: 302px;
		width: calc(100vw - 54px);
		background: #fff;
	}
	#voice .item a {
		display: block;
		padding: 30px 0 25px;
		outline: none;
	}
	
	#voice .item figure {
		margin: 0 48px;
	}
	#voice .item figure img {
		width: 100%;
		height: auto;
	}
	#voice .item .summary {
		margin: 0 34px;
		padding: 0 0 5px;
	}
	#voice .item .summary p {
		margin: 15px 0 0;
		font-size: 13px;
		text-align: justify;
		line-height: 22px;
	}

	#voice .item dl {
		display: table;
		margin: 4px 34px 0;
		width: calc(100% - 68px);
		font-size: 11px;
		line-height: 1;
	}
	#voice .item dt,
	#voice .item dd {
		display: table-cell;
		vertical-align: top;
	}
	#voice .item dt {
		padding-top: 3px;
		width: 37px;
	}
	#voice .item dt span {
		display: block;
		width: 32px;
		height: 32px;
		text-align: center;
		line-height: 30px;
		border-radius: 32px;
		border: 1px solid #363755;
		box-sizing: border-box;
	}
	#voice .item dd {
		width: calc(100% - 34px);
	}
	#voice .item dd span {
		display: block;
		padding: 0 0 0 33px;
		text-indent: -33px;
		line-height: 20px;
	}

	#voice .item dl:last-child dt,
	#voice .item dl:last-child dt span,
	#voice .item dl:last-child dd {
		color: #ff3891;
		border-color: #ff3891;
	}

	#voice .more {
		margin: 20px auto 0;
		padding: 0 26px;
		max-width: 355px;
	}


	/* point
	----------------------------------------------- */

	#point {
		padding: 40px 0;
		text-align: center;
		background: #e8e8e8;
	}	

	#point .articles {
		margin: auto;
		padding: 20px 26px 0;
		max-width: 375px;
		text-align: left;
	}
	#point article {
		margin: 10px 0 0;
		padding: 10px 0 0;
		background: #fff;
	}

	#point article header {
		display: flex;
		align-items: center;
		margin: 0 10px;
	}
	#point article figure {		
		width: 30%;
	}
	#point article figure img {
		width: 100%;
		height: auto;
	}
	#point article h3 {
		padding: 0 0 0 15px;
		width: 70%;
		font-size: 16px;
		font-weight: 500;
		line-height: 24px;
	}

	#point article .job {
		margin: 10px 0 0;
		padding: 5px 0 11px;
		border-top: 1px solid #e8e8e8;
		border-bottom: 1px solid #e8e8e8;
	}
	#point article .job dl {
		display: table;
		margin: 10px 26px 0;
		width: calc(100% - 68px);
		font-size: 11px;
		line-height: 1;
	}
	#point article .job dt,
	#point article .job dd {
		display: table-cell;
		vertical-align: top;
	}
	#point article .job dt {
		width: 40px;
	}
	#point article .job dt span {
		display: block;
		width: 32px;
		height: 32px;
		text-align: center;
		line-height: 30px;
		border-radius: 32px;
		border: 1px solid #363755;
		box-sizing: border-box;
	}
	#point article .job dd {
		width: calc(100% - 40px);
	}
	#point article .job dd span {
		display: block;
		padding: 0 0 0 33px;
		text-indent: -33px;
		line-height: 17px;
	}
	#point article .job dl:last-child dt,
	#point article .job dl:last-child dt span,
	#point article .job dl:last-child dd {
		color: #ff3891;
		border-color: #ff3891;
	}

	#point article .link a {
		display: block;
		height: 47px;
		color: #363755;
		font-size: 13px;
		font-weight: 500;
		text-align: center;
		text-decoration: none;
		line-height: 47px;
	}
	#point article .link a img {
		margin: -2px 0 0 2px;
		width: 12px;
		height: 12px;
		vertical-align: middle;
	}

	#point .more {
		margin: 18px auto 0;
		padding: 0 26px;
		max-width: 375px;
		text-align: center;
	}
	#point .more .button:first-child {
		margin: auto;
		max-width: 303px;
	}
	#point .more .button:last-child {
		margin: 23px 0 0;
	}
	#point .more .button img {
		margin: -3px 0 0 4px;
		vertical-align: middle;
	}


	/* flow
	----------------------------------------------- */

	#flow {
		padding: 40px 0;
		text-align: center;
	}	

	#flow .summary {
		margin: 0 auto;
		padding: 12px 0 0;
		max-width: 375px;
		text-align: left;
	}
	#flow .summary p {
		margin: 0 25px;
		padding: 22px 0 0;
		font-size: 13px;
		line-height: 22px;
	}
	#flow .summary p br {
		display: none;
	}

	#flow .step {
		margin: auto;
		padding: 40px 0 0;
		max-width: 375px;
		text-align: left;
	}
	#flow .step ul {
		margin: 0 20px;
	}
	#flow .step li {
		position: relative;
		margin: -18px 0 0;
	}
	#flow .step li figure {
		margin: 0 48.5% 0 0;
	}
	#flow .step li:nth-child(even) figure {
		margin: 0 0 0 48.5%;
	}
	#flow .step li figure img {
		width: 100%;
		height: auto;
	}

	#flow .step li .label {
		display: inline-block;
		position: absolute;
		padding: 0 10px 8px;
		top: 50%;
		left: 45.5%;
		font-size: 0;
		text-align: right;
		white-space: nowrap;
		line-height: 1;
		border-bottom: 2px solid #363755;
		transform: translate3d(0,-60%,0);
	}
	#flow .step li:nth-child(even) .label {
		left: auto;
		right: 45.5%;
		text-align: left;
	}
	#flow .step li:nth-child(1) .label {
		width: 44%;
	}
	#flow .step li:nth-child(2) .label {
		width: 51%;
	}
	#flow .step li:nth-child(3) .label {
		width: 53%;
	}
	#flow .step li:nth-child(4) .label {
		width: 54.5%;
	}
	#flow .step li:nth-child(5) .label {
		width: 46%;
	}
	#flow .step li:nth-child(6) .label {
		width: 54.5%;
	}

	#flow .step li .label span {
		display: inline-block;
		text-align: left;
		vertical-align: bottom;
	}
	#flow .step li .no {
		margin: 0 5px 0 0;
	}
	#flow .step li .no img {
		width: auto;
		height: 35px;
	}
	#flow .step li .text {
		font-size: 16px;
		font-weight: 500;
		line-height: 22px;
	}


	/* discussion
	----------------------------------------------- */

	#discussion {
		padding: 45px 0;
		text-align: center;
		background: url(../img/discussion_bg_sp.jpg) no-repeat center top;
		background-size: cover;
	}	

	#discussion .summary {
		margin: 0 auto;
		padding: 2px 0 0;
		max-width: 375px;
	}
	#discussion .summary p {
		margin: 0 25px;
		padding: 22px 0 0;
		font-size: 13px;
		text-align: left;
		letter-spacing: -0.2px;
		line-height: 22px;
	}
	#discussion .summary p br {
		display: none;
	}

	#discussion .more {
		margin: 29px auto 0;
		padding: 0 26px;
		max-width: 375px;
	}
	#discussion .more .button {
		display: inline-block;
		padding: 10px 0;
		height: auto;
		line-height: 24px;
	}
	#discussion .more .button img {
		margin: -3px 0 0 4px;
		vertical-align: middle;
	}


	/* location
	----------------------------------------------- */

	#location {
		background: #fff;
	}
	#location p {
		margin: auto;
		padding: 20px 12px;
		font-size: 13px;
		line-height: 18px;
	}
	#location p a {
		color: #363755;
		text-decoration: none;
	}


}


/* problem
----------------------------------------------- */

#problem .check li img {
	transition-property: opacity, transform;
	transition-duration: 0.5s;
	transition-delay: 0s;
	transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ready */

#problem .check li.ready img {
	opacity: 0;
	transform: translate3d(0,-5px,0);
	transition-duration: 0.5s;
	transition-delay: 0s;
}


/* feature
----------------------------------------------- */

#feature article h3 {
	transition-property: opacity, transform;
	transition-duration: 0.85s;
	transition-delay: 0.5s;
	transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
#feature article .message {
	transition-property: opacity, transform;
	transition-duration: 1s;
	transition-delay: 0s;
	transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
#feature article .message:before,
#feature article .message:after {
	transition-property: transform;
	transition-duration: 0.5s;
	transition-delay: 0.5s;
	transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
}	

/* ready */

#feature article.ready h3 {
	opacity: 0;
	transform: translate3d(-5%,0,0);
	transition-duration: 0.5s;
	transition-delay: 0s;
}
#feature article.ready .message {
	opacity: 0;
	transform: translate3d(0,20%,0);
	transition-duration: 0.5s;
	transition-delay: 0s;
}
#feature article.ready .message:before {
	transform: rotate(0deg);
	transition-duration: 0.5s;
	transition-delay: 0s;
}
#feature article.ready .message:after {
	transform: rotate(0deg);
	transition-duration: 0.5s;
	transition-delay: 0s;
}	


/* flow
----------------------------------------------- */

#flow .step li figure img {
	transition-property: opacity, transform;
	transition-duration: 1s;
	transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* ready */

#flow .step li.ready figure img {
	opacity: 0;
	transform: scale3d(0.95,0.95,0.95);
	transition-duration: 0.5s;
	transition-delay: 0s;
}


/* 転職お役立ちノウハウ
----------------------------------------------- */
.ctSection.is-knowhow {
  padding: 70px 0;
  border-bottom: #eee 1px solid;
  background: #f8f8f8;
}
.ctSection.is-knowhow .ctSectionInner {
  max-width: 1010px;
  margin-right: auto;
  margin-left: auto;
}
.ctSection.is-knowhow .ctSectionTit {
  margin-bottom: 26px;
  text-align: center;
  font-size: 30px;
  line-height: 1.2;
  font-weight: bold!important;
}
.ctSection.is-knowhow .ctSectionTit > span {
  display: inline-block;
  border-bottom: #000 3px solid;
}
.ctSection.is-knowhow .ctKnowhow .ctKnowhowList {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.ctSection.is-knowhow .ctKnowhow .ctKnowhowList li {
  width: 296px;
  margin-right: 20px;
  margin-left: 20px;
  margin-bottom: 35px;
}
.ctSection.is-knowhow .ctKnowhow .ctKnowhowList a {
  display: block;
  vertical-align: baseline;
  margin: 0;
  padding: 0;
  background: transparent;
  font-size: 14px;
  color: #0066af!important;
  text-decoration: none;
  transition: .4s ease-out;
}
.ctSection.is-knowhow .ctKnowhow .ctKnowhowImg {
  overflow: hidden;
  margin-bottom: 5px;
  transition: .4s ease-out;
}
.ctSection.is-knowhow .ctKnowhow .ctKnowhowImg img {
  width: 296px;
  vertical-align: bottom;
  transition: .4s ease-out;
  -ms-interpolation-mode: bicubic;
}
.ctSection.is-knowhow .ctSectionBt2 {
  text-align: center;
}
.ctSection.is-knowhow .ctSectionBt2 a {
  width: 400px;
}
.ctSection.is-knowhow .ctKnowhow .ctKnowhowList a:hover .ctKnowhowImg img {
  -webkit-transform: scale(1.1,1.1);
  -ms-transform: scale(1.1,1.1);
  -o-transform: scale(1.1,1.1);
  transform: scale(1.1,1.1);
  opacity: 0.6;
}
.ctSection.is-knowhow .ct-bt-green01 {
  display: inline-block;
  padding: 14px 0;
  border: #01846e 1px solid;
  border-radius: 8px;
  background: #01846e;
  box-shadow: 0 3px 10px rgba(0,0,0,0.3);
  text-align: center;
  font-size: 14px;
  color: #fff!important;
  text-decoration: none;
  transition: .4s ease-out;
}
.ctSection.is-knowhow .ct-bt-green01:before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 10px;
  margin-right: 5px;
  background: url(/resource/common/img/top-style/icon_arrow_white_right.svg) 0 center no-repeat;
  background-size: 6px;
}
.ctSection.is-knowhow .ct-bt-green01:hover {
  box-shadow: 3px 6px 10px rgba(0,0,0,0.3);
  opacity: .6;
}

@media only screen and (max-width:740px) {
  .ctSection.is-knowhow {
    padding: 35px 0;
  }
  .ctSection.is-knowhow .ctSectionInner {
    margin-right: 15px;
    margin-left: 15px;
  }
  .ctSection.is-knowhow .ctSectionTit {
    margin-bottom: 20px;
    font-size: 20px;
  }
  .ctSection.is-knowhow .ctSectionTit > span {
    padding-bottom: 3px;
  }
  .ctSection.is-knowhow .ctKnowhow .ctKnowhowList {
    margin-bottom: 20px;
  }
  .ctSection.is-knowhow .ctKnowhow .ctKnowhowList li:first-child {
    border-top: #ddd 1px solid;
  }
  .ctSection.is-knowhow .ctKnowhow .ctKnowhowList li {
    width: 100%;
    margin: 0;
    border-bottom: #ddd 1px solid;
  }
  .ctSection.is-knowhow .ctKnowhow .ctKnowhowList a {
    display: flex;
    align-items: center;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .ctSection.is-knowhow .ctKnowhow .ctKnowhowImg {
    width: 100px;
    margin-bottom: 0;
  }
  .ctSection.is-knowhow .ctKnowhow .ctKnowhowImg img {
    width: 100%;
  }
  .ctSection.is-knowhow .ctKnowhow .ctKnowhowTxt {
    flex: 1;
    padding-left: 10px;
  }
  .ctSection.is-knowhow .ctSectionBt2 a {
    width: 300px;
  }
}