@charset "utf-8";

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

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

	#problem {
		padding: 120px 0;
		background: white;
	}
	body.tablet #problem {
		background-attachment: scroll;
	}
	#problem .inner {
		margin: auto;
		max-width: 1200px;
	}

	#problem h2 {
		font-size: 2.5em;
		text-align: center;
		line-height: 1.65em;
	}
	#problem .copy {
		margin: 30px auto 0;
		max-width: 645px;
	}
	#problem .copy p {
		color: #4d4d4d;
		font-size: 1.25em;
		text-align: center;
		line-height: 1.85em;
	}

	#problem .articles {
		margin: 60px 0 0;
	}
	#problem article {
		float: left;
		position: relative;
		width: 50%;
		text-align: center;
	}
	#problem article:nth-child(1),
	#problem article:nth-child(2) {
		padding: 0 0 50px;
	}
	#problem article:nth-child(3),
	#problem article:nth-child(4) {
		padding: 60px 0 25px;
	}
	#problem article h3 {
		position: relative;
		padding: 130px 0 0;
		color: #78282a;
		font-size: 1.45em;
		font-weight: 500;
		line-height: 1.5em;
	}
	#problem article h3:after {
		display: block;
		content: "";
		position: absolute;
		top: 0;
		left: 50%;
		margin: 0 0 0 -44px;
		width: 88px;
		height: 106px;
		background-repeat: no-repeat;
		-webkit-background-size: 100% auto;
		-moz-background-size: 100% auto;
		-ms-background-size: 100% auto;
		background-size: 100% auto;
	}
	#problem article:nth-child(1) h3:after {
		background-image: url(../images/index/problem_t01.png);
	}
	#problem article:nth-child(2) h3:after {
		background-image: url(../images/index/problem_t02.png);
	}
	#problem article:nth-child(3) h3:after {
		background-image: url(../images/index/problem_t03.png);
	}
	#problem article:nth-child(4) h3:after {
		background-image: url(../images/index/problem_t04.png);
	}
	#problem article .summary {
		margin: 25px auto 0;
		max-width: 465px;
	}
	#problem article .summary p {
		margin: 0 25px;
		height: 8.25em;
		font-size: 1.15em;
		text-align: left;
		line-height: 1.65em;
	}

	#problem article:first-child:before,
	#problem article:first-child:after,
	#problem article:last-child:before,
	#problem article:last-child:after {
		display: block;
		content: "";
		position: absolute;
		background: rgba(128,128,128,0.3);
	}

	#problem article:first-child:before {
		left: 0;
		bottom: 0;
		width: 92%;
		height: 1px;
	}
	#problem article:first-child:after {
		top: 0;
		right: 0;
		width: 1px;
		height: 92%;
	}
	#problem article:last-child:before {
		left: -1px;
		bottom: 0;
		width: 1px;
		height: 92%;
	}
	#problem article:last-child:after {
		top: 0;
		right: 0;
		width: 92%;
		height: 1px;
	}

	/* case */

	#problem .case {
		margin: 65px auto 0;
		max-width: 1250px;
	}
	#problem .case_inner {
		margin: 0 25px;
		padding: 50px 0;
		text-align: center;
		background: #f7f4f0;
		-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
		-ms-border-radius: 6px;
		border-radius: 6px;
	}

	#problem .case h4 {
		display: inline-block;
		position: relative;
		color: #78282a;
		font-size: 1.65em;
		font-weight: 500;
	}
	#problem .case h4:after {
		display: block;
		content: "";
		position: absolute;
		left: 0;
		bottom: -12px;
		width: 100%;
		height: 4px;
		background: #c8b175;
	}

	#problem .case ul {
		margin: 50px 0 0;
	}
	#problem .case li {
		float: left;
		width: 33.33%;
	}
	#problem .case li a {
		display: block;
	}
	#problem .case li:nth-child(2) a {
		border-left: 1px solid #e0e0e0;
		border-right: 1px solid #e0e0e0;
	}
	#problem .case li span {
		display: block;
	}
	#problem .case li .label {
		margin: 25px 15px 0;
		font-size: 1.25em;
		font-weight: 500;
		line-height: 1.75em;
	}
	#problem .case li .label em {
		font-size: 0.8em;
		line-height: 1.5em;
	}
	#problem .case li .link {
		margin: 30px 0 0;
		color: #4970bf;
		font-size: 1.15em;
	}
	#problem .case li a:hover .link {
		text-decoration: underline;
	}
	#problem .case li a figure {
		-webkit-transition: all 0.25s ease-out;
		-moz-transition: all 0.25s ease-out;
		-ms-transition: all 0.25s ease-out;
		transition: all 0.25s ease-out;
	}
	#problem .case li a:hover figure {
		-webkit-transform: translateY(-5px);
		-moz-transform: translateY(-5px);
		-ms-transform: translateY(-5px);
		transform: translateY(-5px);
	}

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

		#feature {
			background: #3c95c1;
		}
		#feature .inner {
			margin: auto;
			padding: 110px 0;
			max-width: 1280px;
			color: #fff;
		}

		#feature h2 {
			font-size: 2.5em;
			text-align: center;
			line-height: 1.65em;
		}
		#feature .copy {
			margin: 30px auto 0;
			max-width: 640px;
		}
		#feature .copy p {
			font-size: 1.25em;
			text-align: center;
			line-height: 1.85em;
		}

		#feature .images {
			position: relative;
			margin: 60px auto 0;
			max-width: 1250px;
			height: 550px;
			overflow: hidden;
		}
		#feature .images li {
			display: none;
			position: absolute;
			left: 50%;
			width: 800px;
			height: 462px;
		}
		#feature .images li.on {
			display: block;
		}
		#feature .images li:first-child {
			top: 0;
			margin: 0 0 0 -625px;
		}
		#feature .images li:last-child {
			bottom: 0;
			margin: 0 0 0 -175px;
		}

		#feature .more {
			margin: 60px 0 0;
			text-align: center;
		}
		#feature .more a {
			display: inline-block;
			width: 240px;
			height: 48px;
			font-size: 1.15em;
			font-weight: 500;
			line-height: 49px;
		}

		#feature .articles {
			margin: 60px 0 0;
			overflow: hidden;
		}
		#feature article {
			float: left;
			position: relative;
			margin: 0 0 -32768px;
			padding: 0 0 32768px;
			width: 25%;
			text-align: center;
		}
		#feature article:after {
			display: block;
			content: "";
			position: absolute;
			top: 0;
			right: 0;
			width: 1px;
			height: 100%;
			background: rgba(255,255,255,0.3);
		}
		#feature article:last-child:after {
			display: none;
		}
		#feature article h3 {
			position: relative;
			margin: 0 40px;
			padding: 140px 0 0;
			font-size: 1.35em;
			font-weight: 500;
			line-height: 1.25em;
		}
		#feature article h3:after {
			display: block;
			content: "";
			position: absolute;
			top: 0;
			left: 50%;
			margin: 0 0 0 -50px;
			width: 100px;
			height: 100px;
			background-repeat: no-repeat;
			-webkit-background-size: 100px;
			-moz-background-size: 100px;
			-ms-background-size: 100px;
			background-size: 100px;
		}
		#feature article:nth-child(1) h3:after {
			background-image: url(../images/index/feature_icon01.png);
		}
		#feature article:nth-child(2) h3:after {
			background-image: url(../images/index/feature_icon02.png);
		}
		#feature article:nth-child(3) h3:after {
			background-image: url(../images/index/feature_icon03.png);
		}
		#feature article:nth-child(4) h3:after {
			background-image: url(../images/index/feature_icon04.png);
		}
		#feature article p {
			margin: 30px 40px 0;
			padding: 0 0 40px;
			font-size: 1.15em;
			text-align: left;
			line-height: 1.65em;
		}

	/* companies
	----------------------------------------------- */

	#companies {
		background: #f2f2f2;
	}
	#companies .inner {
		padding: 72px 0;
		margin: auto;
		max-width: 1120px;
	}
	#companies h2 {
		font-size: 2.5em;
		text-align: center;
		line-height: 1.65em;
	}
	#companies ul {
		padding-top: 3em;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	#companies li {
		padding: 30px;
	}
	#companies li p {
		font-size: 24px;
		font-weight: 500;
		color: #808080;
		margin: 50px;
	}


	/* feature2
	----------------------------------------------- */

	#feature2 {
		background: #fff;
	}
	#feature2 .inner {
		margin: auto;
		padding: 110px 0;
		max-width: 1280px;
		color: #333;
	}

	#feature2 h3 {
		font-size: 2.5em;
		text-align: center;
		line-height: 1.65em;
	}
	#feature2 .copy {
		margin: 30px auto 0;
		max-width: 640px;
	}
	#feature2 .copy p {
		font-size: 1.25em;
		text-align: center;
		line-height: 1.85em;
	}

	#feature2 .articles {
		margin: 60px 0 0;
		overflow: hidden;
	}
	#feature2 article {
		float: left;
		position: relative;
		margin: 0 0 -32768px;
		padding: 0 0 32768px;
		width: 20%;
		text-align: center;
	}
	#feature2 article h3 {
		position: relative;
		margin: 0 30px;
		padding: 160px 0 0;
		font-size: 1.35em;
		font-weight: 500;
		line-height: 1.55em;
		color: #78282a;
		white-space:nowrap;
		height: 40px;
	}
	#feature2 article h3:after {
		display: block;
		content: "";
		position: absolute;
		top: -9px;
    left: 0%;
    margin: 0 0 0 0;
    width: 200px;
    height: 150px;
		background-repeat: no-repeat;
		-webkit-background-size: 200px 150px;
		-moz-background-size: 200px 150px;
		-ms-background-size: 200px 150px;
		background-size: 200px 150px;
	}
	#feature2 article:nth-child(1) h3:after {
		background-image: url(../images/index/feature_contents_1.png?date=20191219);
	}
	#feature2 article:nth-child(2) h3:after {
		background-image: url(../images/index/feature_contents_2.png?date=20191219);
	}
	#feature2 article:nth-child(3) h3:after {
		background-image: url(../images/index/feature_contents_3.png?date=20191219);
	}
	#feature2 article:nth-child(4) h3:after {
		background-image: url(../images/index/feature_contents_6.png?date=20191219);
	}
	#feature2 article:nth-child(5) h3:after {
		background-image: url(../images/index/feature_contents_4.png?date=20191219);
	}
	#feature2 article p {
		margin: 30px 20px 0;
		padding: 0 0 40px;
		font-size: 1.15em;
		text-align: left;
		line-height: 1.65em;
	}

	/* case
	----------------------------------------------- */

	#case {
		background: #f2f2f2;
	}
	#case .inner {
		padding: 110px 0;
	}

	#case h2 {
		font-size: 2.5em;
		text-align: center;
		line-height: 1.65em;
	}
	#case .copy {
		margin: 30px auto 0;
		max-width: 640px;
	}
	#case .copy p {
		color: #4d4d4d;
		font-size: 1.25em;
		text-align: center;
		line-height: 1.85em;
	}

	#case .more {
		margin: 60px 0 0;
		text-align: center;
	}
	#case .more a {
		display: inline-block;
		width: 240px;
		height: 48px;
		font-size: 1.15em;
		font-weight: 500;
		line-height: 49px;
	}

	#case .interview .index {
		position: relative;
		margin: 55px auto 0;
		max-width: 1240px;
		-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;
		user-drag: none;
	}
	#case .interview .articles {
		position: relative;
		margin: 0 60px;
		height: 320px;
		overflow: hidden;
	}
	#case .interview article {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 320px;
		background: white;
		z-index: 1;
	}

	#case .interview article header {
		position: absolute;
		top: 0;
		left: 46.42%;
	}
	#case .interview article h3 {
		margin: 0 25px 0 0;
		padding: 35px 0 0;
		color: #78282a;
		font-size: 1.65em;
		font-weight: 500;
		line-height: 1.5em;
	}
	#case .interview article .client {
		margin: 20px 25px 0 0;
		color: #4d4d4d;
		font-size: 1em;
		line-height: 1.25em;
	}
	#case .interview article .summary {
		margin: 25px 25px 0 0;
	}
	#case .interview article .summary li {
		position: relative;
		padding: 9px 0 9px 74px;
		font-size: 1.15em;
	}
	#case .interview article .summary li span {
		display: inline-block;
		position: absolute;
		top: 50%;
		left: 0;
		margin: -12px 0 0;
		width: 64px;
		height: 24px;
		color: white;
		font-size: 0.8em;
		font-weight: bold;
		text-align: center;
		line-height: 24px;
		background: #a3a3a3;
		-webkit-border-radius: 24px;
		-moz-border-radius: 24px;
		-ms-border-radius: 24px;
		border-radius: 24px;
	}
	#case .interview article .more {
		position: absolute;
		right: 0px;
		bottom: 0px;
		font-size: 1em;
		font-weight: 500;
	}
	#case .interview article figure {
		position: relative;
		width: 42.85%;
		height: 320px;
		overflow: hidden;
	}
	#case .interview article figure img {
		position: absolute;
		top: 0;
		left: 50%;
		width: auto;
		height: 100%;
		-webkit-transform: translateX(-50%);
		-moz-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		transform: translateX(-50%);
	}
	#case .interview article .logo {
		position: absolute;
		top: 8px;
		left: 8px;
		width: 10.71%;
	}
	#case .interview article .logo img {
		width: 100%;
		height: auto;
	}

	#case .interview .control {
		display: none;
	}
	#case .interview .control.on {
		display: block;
	}
	#case .interview .control li {
		position: absolute;
		top: 50%;
		margin: -17px 0 0;
		width: 19px;
		height: 34px;
		cursor: pointer;
		-webkit-transition: all 0.15s ease;
		-moz-transition: all 0.15s ease;
		-ms-transition: all 0.15s ease;
		transition: all 0.15s ease;
	}
	#case .interview .control .prev {
		left: 15px;
	}
	#case .interview .control .next {
		right: 15px;
	}
	#case .interview .control li:after {
		display: block;
		content: "";
		width: 19px;
		height: 34px;
		background: url(/casestudy/images/control.png) no-repeat;
		-webkit-background-size: 38px 68px;
		-moz-background-size: 38px 68px;
		-ms-background-size: 38px 68px;
		background-size: 38px 68px;
	}
	#case .interview .control .prev:after {
		background-position: 0 0;
	}
	#case .interview .control .next:after {
		background-position: -19px 0;
	}
	#case .interview .control .prev:hover:after {
		background-position: 0 -34px;
	}
	#case .interview .control .next:hover:after {
		background-position: -19px -34px;
	}
	#case .interview .control .prev:hover {
		-webkit-transform: translateX(-3px);
		-moz-transform: translateX(-3px);
		-ms-transform: translateX(-3px);
		transform: translateX(-3px);
	}
	#case .interview .control .next:hover {
		-webkit-transform: translateX(3px);
		-moz-transform: translateX(3px);
		-ms-transform: translateX(3px);
		transform: translateX(3px);
	}

	#case .interview a {
		color: #4970bf;
	}
	#case .interview a:hover {
		text-decoration: underline;
	}
	#case .interview a.arrow {
		position: relative;
	}
	#case .interview a.arrow:after {
		display: block;
		content: "";
		position: absolute;
		top: 50%;
	}
	#case .interview a.arrow:before {
		display: none;
	}

	#case .interview a.arrow:after {
		right: 27px;
		margin: -5px 0 0;
		width: 9px;
		height: 15px;
		background: url(../images/common/icon_arrow01.png) no-repeat;
	}

	/* news
	----------------------------------------------- */

	#news .inner {
		margin: auto;
		padding: 75px 0 70px;
		max-width: 1250px;
	}
	#news article {
		float: left;
		position: relative;
		width: 50%;
	}
	#news article:first-child:after {
		display: block;
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		width: 1px;
		height: 100%;
		background: #e6e6e6;
	}

	#news article h3 {
		position: relative;
		font-size: 1.65em;
	}
	#news article:first-child h3 {
		margin: 0 40px 0 25px;
	}
	#news article:last-child h3 {
		margin: 0 25px 0 40px;
	}
	#news article h3 .more {
		position: absolute;
		top: 50%;
		right: 0;
		margin: -0.5em 0 0;
		font-size: 0.65em;
	}
	#news article h3 .more a {
		color: #4970bf;
	}
	#news article h3 .more a:hover {
		color: #2b52a1;
		text-decoration: underline;
	}

	#news article .list {
		padding: 20px 0 0;
	}
	#news article .list tr.new td a:after {
		display: inline-block;
		content: "";
		margin: 0 0 0 10px;
		width: 28px;
		height: 10px;
		background: url(../images/index/icon_new.png) no-repeat;
		-webkit-background-size: 28px 10px;
		-moz-background-size: 28px 10px;
		-ms-background-size: 28px 10px;
		background-size: 28px 10px;
	}

	#news article .list a:hover {
		color: #4970bf;
		text-decoration: underline;
	}

	#news article:first-child .list {
		margin: 0 40px 0 25px;
	}
	#news article:last-child .list {
		margin: 0 25px 0 40px;
	}

	#news article table {
		width: 100%;
	}
	#news article th,
	#news article td {
		padding: 10px 0;
		font-size: 1em;
		vertical-align: top;
		line-height: 1.5em;
	}
	#news article th {
		padding-right: 15px;
		width: 20%;
	}
	#news article td {
		width: 80%;
	}


}

@media screen and (min-width:741px) and (max-width: 1140px) {
	#feature2 article h3:after {
	    display: block;
	    content: "";
	    position: absolute;
	    top: -9px;
	    left: 0%;
	    margin: 0 0 0 0;
	    width: 130px;
	    height: 95px;
	    background-repeat: no-repeat;
	    -webkit-background-size: 130px 95px;
	    -moz-background-size: 130px 95px;
	    -ms-background-size: 130px 95px;
	    background-size: 130px 95px;
	}
#feature2 article h3 {
			white-space: inherit;
	    padding: 110px 0 20px;
	    margin: 0 14px;
		}
}
@media screen and (min-width:741px) and (max-width: 1023px) {

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

	/* case */

	#problem .case li .label {
		font-size: 1em;
		text-align: left;
	}
	#problem .case li .label em {
		display: block;
	}
	#problem .case li .label br {
		display: none;
	}

	/* case
	----------------------------------------------- */

/* interview */

	#case .interview article h3 {
		padding: 20px 0 0;
		font-size: 1.25em;
	}
	#case .interview article .client {
		margin: 15px 25px 0 0;
		font-size: 0.95em;
	}
	#case .interview article .summary {
		margin: 15px 25px 0 0;
	}
	#case .interview article .summary li {
		padding: 9px 0 9px 74px;
		font-size: 1em;
	}


}

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

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

	#problem {
		background: white;
	}
	#problem .inner {
		margin: 0 20px;
		padding: 70px 0;
	}

	#problem h2 {
		margin: 0 20px;
		font-size: 1.4em;
		text-align: center;
		line-height: 1.5em;
	}
	#problem h2 br {
		display: none;
	}
	#problem .copy {
		margin: 30px 18px 0;
	}
	#problem .copy p {
		color: #4d4d4d;
		font-size: 1.1em;
		line-height: 1.6em;
	}

	#problem .articles {
		margin: 60px 0 0;
		border-bottom: 1px solid rgba(128,128,128,0.3);
	}
	#problem article {
		padding: 20px 0;
		border-top: 1px solid rgba(128,128,128,0.3);
	}
	#problem article header {
		position: relative;
		height: 53px;
		cursor: pointer;
	}
	#problem article header:before {
		display: block;
		content: "";
		position: absolute;
		top: 50%;
		right: 15px;
		margin: -5px 0 0;
		width: 19px;
		height: 11px;
		background: url(../images/index/icon_arrow01.png) no-repeat;
		-webkit-background-size: 19px 22px;
		-moz-background-size: 19px 22px;
		-ms-background-size: 19px 22px;
		background-size: 19px 22px;
	}
	#problem article header.on:before {
		background-position: 0 -11px;
	}
	#problem article header:after {
		display: block;
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 44px;
		height: 53px;
		background-repeat: no-repeat;
		-webkit-background-size: 44px 53px;
		-moz-background-size: 44px 53px;
		-ms-background-size: 44px 53px;
		background-size: 44px 53px;
	}
	#problem article:nth-child(1) header:after {
		background-image: url(../images/index/problem_t01.png);
	}
	#problem article:nth-child(2) header:after {
		background-image: url(../images/index/problem_t02.png);
	}
	#problem article:nth-child(3) header:after {
		background-image: url(../images/index/problem_t03.png);
	}
	#problem article:nth-child(4) header:after {
		background-image: url(../images/index/problem_t04.png);
	}

	#problem article h3 {
		position: absolute;
		top: 50%;
		left: 60px;
		margin: 0 55px 0 0;
		color: #78282a;
		font-size: 1.1em;
		font-weight: 500;
		line-height: 1.5em;
		-webkit-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	#problem article h3 br {
		display: none;
	}
	#problem article .summary {
		display: none;
		margin: 20px 20px 0;
	}
	#problem article .summary.on {
		display: block;
	}
	#problem article .summary p {
		font-size: 0.95em;
		line-height: 1.85em;
	}

	/* case */

	#problem .case {
		padding: 30px 0;
		text-align: center;
		background: #f7f4f0;
	}

	#problem .case h4 {
		display: inline-block;
		position: relative;
		color: #78282a;
		font-size: 1.2em;
		font-weight: 500;
	}
	#problem .case h4:after {
		display: block;
		content: "";
		position: absolute;
		left: 0;
		bottom: -6px;
		width: 100%;
		height: 2px;
		background: #c8b175;
	}

	#problem .case ul {
		margin: 35px 20px 0;
	}
	#problem .case li {
		border-top: 1px solid #e0e0e0;
	}
	#problem .case li:last-child {
		border-bottom: 1px solid #e0e0e0;
	}
	#problem .case li a {
		display: block;
		position: relative;
		padding: 20px 0;
		min-height: 40px;
	}
	#problem .case li a:after {
		display: block;
		content: "";
		position: absolute;
		top: 50%;
		right: 15px;
		margin: -6px 0 0;
		width: 8px;
		height: 13px;
		background: url(../images/index/icon_arrow05.png) no-repeat;
		-webkit-background-size: 8px 13px;
		-moz-background-size: 8px 13px;
		-ms-background-size: 8px 13px;
		background-size: 8px 13px;
	}
	#problem .case li span {
		display: block;
	}
	#problem .case li .label {
		margin: 0 40px 0 70px;
		font-size: 1em;
		font-weight: 500px;
		text-align: left;
		line-height: 1.5em;
	}
	#problem .case li .label em {
		display: block;
		font-size: 0.8em;
		line-height: 1.5em;
	}
	#problem .case li .label br {
		display: none;
	}
	#problem .case li .link {
		display: none;
	}

	#problem .case figure {
		position: absolute;
		top: 20px;
		left: 0;
	}
	#problem .case figure img {
		width: auto;
		height: 40px;
	}

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

	#feature {
		background: #3c95c1;
	}
	#feature .inner {
		padding: 70px 0;
		color: #fff;
	}

	#feature h2 {
		margin: 0 40px;
		font-size: 1.4em;
		text-align: center;
		line-height: 1.5em;
	}
	#feature h2 br {
		display: none;
	}
	#feature .copy {
		margin: 30px 40px 0;
	}
	#feature .copy p {
		font-size: 1.1em;
		line-height: 1.6em;
	}

	#feature .images {
		position: relative;
		margin: 60px 0 0;
		height: 274px;
		overflow: hidden;
	}
	#feature .images li {
		position: absolute;
		left: 50%;
	}
	#feature .images li:first-child {
		top: 0;
		margin: 0 0 0 -310px;
	}
	#feature .images li:last-child {
		bottom: 0;
		margin: 0 0 0 -88px;
	}
	#feature .images li img {
		width: auto;
		height: 230px;
	}

	#feature .more {
		margin: 40px 20px 0;
	}
	#feature .more a {
		margin: auto;
		max-width: 335px;
		height: 52px;
		font-size: 1.15em;
		line-height: 53px;
	}

	#feature .articles {
		margin: 55px 20px 0;
		border-bottom: 1px solid rgba(255,255,255,0.3);
	}
	#feature article {
		padding: 20px 0;
		border-top: 1px solid rgba(255,255,255,0.3);
	}

	#feature article header {
		position: relative;
		height: 50px;
		cursor: pointer;
	}
	#feature article header:before {
		display: block;
		content: "";
		position: absolute;
		top: 50%;
		right: 15px;
		margin: -5px 0 0;
		width: 19px;
		height: 11px;
		background: url(../images/index/icon_arrow02.png) no-repeat;
		-webkit-background-size: 19px 22px;
		-moz-background-size: 19px 22px;
		-ms-background-size: 19px 22px;
		background-size: 19px 22px;
	}
	#feature article header.on:before {
		background-position: 0 -11px;
	}
	#feature article header:after {
		display: block;
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 50px;
		height: 50px;
		background-repeat: no-repeat;
		-webkit-background-size: 50px 50px;
		-moz-background-size: 50px 50px;
		-ms-background-size: 50px 50px;
		background-size: 50px 50px;
	}
	#feature article:nth-child(1) header:after {
		background-image: url(../images/index/feature_icon01.png);
	}
	#feature article:nth-child(2) header:after {
		background-image: url(../images/index/feature_icon02.png);
	}
	#feature article:nth-child(3) header:after {
		background-image: url(../images/index/feature_icon03.png);
	}
	#feature article:nth-child(4) header:after {
		background-image: url(../images/index/feature_icon04.png);
	}

	#feature article h3 {
		position: absolute;
		top: 50%;
		left: 60px;
		margin: 0 55px 0 0;
		font-size: 1.1em;
		font-weight: 500;
		line-height: 1.5em;
		-webkit-transform: translateY(-50%);
	}
	#feature article h3 br {
		display: none;
	}

	#feature article .summary {
		display: none;
		margin: 20px 20px 0;
	}
	#feature article .summary.on {
		display: block;
	}
	#feature article .summary p {
		font-size: 0.95em;
		line-height: 1.85em;
	}

	/* companies
	----------------------------------------------- */

	#companies {
		background: #f2f2f2;
	}
	#companies .inner {
		padding: 72px 0;
		margin: auto;
		max-width: 1120px;
	}
	#companies h2 {
		margin: 0 40px;
		font-size: 1.4em;
		text-align: center;
		line-height: 1.5em;
	}
	#companies li {
		float: left;
		padding: 30px;
	}
	#companies ul {
		padding-top: 3em;
	}
	#companies li p {
		font-size: 24px;
		font-weight: 500;
		color: #808080;
		margin: 52px;
	}


	/* feature2
	----------------------------------------------- */

	#feature2 {
		background: #fff;
	}
	#feature2 .inner {
		padding: 70px 0 20px;
		color: #333;
	}

	#feature2 h3 {
		margin: 0 40px;
		font-size: 1.4em;
		text-align: center;
		line-height: 1.5em;
	}
	#feature2 h3 br {
		display: none;
	}
	#feature2 .copy {
		margin: 30px 40px 0;
	}
	#feature2 .copy p {
		font-size: 1.1em;
		line-height: 1.6em;
		text-align: center;
	}

	#feature2 .images {
		position: relative;
		margin: 60px 0 0;
		height: 274px;
		overflow: hidden;
	}
	#feature2 .images li {
		position: absolute;
		left: 50%;
	}
	#feature2 .images li:first-child {
		top: 0;
		margin: 0 0 0 -310px;
	}
	#feature2 .images li:last-child {
		bottom: 0;
		margin: 0 0 0 -88px;
	}
	#feature2 .images li img {
		width: auto;
		height: 230px;
	}

	#feature2 .more {
		margin: 40px 20px 0;
	}
	#feature2 .more a {
		margin: auto;
		max-width: 335px;
		height: 52px;
		font-size: 1.15em;
		line-height: 53px;
	}

	#feature2 .articles {
		margin: 55px 20px 0;
		border-bottom: 1px solid rgba(128,128,128,0.3);
	}
	#feature2 article {
		padding: 20px 0;
    border-top: 1px solid rgba(128,128,128,0.3);
	}

	#feature2 article header {
		position: relative;
		height: 50px;
		cursor: pointer;
	}
	#feature2 article header:before {
		display: block;
    content: "";
    position: absolute;
    top: 50%;
    right: 15px;
    margin: -5px 0 0;
    width: 19px;
    height: 11px;
    background: url(../images/index/icon_arrow01.png) no-repeat;
    -webkit-background-size: 19px 22px;
    -moz-background-size: 19px 22px;
    -ms-background-size: 19px 22px;
    background-size: 19px 22px;
	}
	#feature2 article header.on:before {
		background-position: 0 -11px;
	}
	#feature2 article header:after {
		display: block;
    content: "";
    position: absolute;
    top: 5px;
    left: 0;
    width: 52px;
    height: 39px;
		background-repeat: no-repeat;
		-webkit-background-size: 52px 39px;
		-moz-background-size: 52px 39px;
		-ms-background-size: 52px 39px;
		background-size: 52px 39px;
	}
	#feature2 article:nth-child(1) header:after {
		background-image: url(../images/index/feature_contents_1.png?date=20191219);
	}
	#feature2 article:nth-child(2) header:after {
		background-image: url(../images/index/feature_contents_2.png?date=20191219);
	}
	#feature2 article:nth-child(3) header:after {
		background-image: url(../images/index/feature_contents_3.png?date=20191219);
	}
	#feature2 article:nth-child(4) header:after {
		background-image: url(../images/index/feature_contents_6.png?date=20191219);
	}
	#feature2 article:nth-child(5) header:after {
		background-image: url(../images/index/feature_contents_4.png?date=20191219);
	}


	#feature2 article h3 {
		position: absolute;
		top: 50%;
		left: 66px;
		margin: 0 55px 0 0;
		font-size: 1.1em;
		font-weight: 500;
		line-height: 1.5em;
		color: #78282a;
		-webkit-transform: translateY(-50%);
	}
	#feature2 article h3 br {
		display: none;
	}

	#feature2 article .summary {
		display: none;
		margin: 20px 20px 0;
	}
	#feature2 article .summary.on {
		display: block;
	}
	#feature2 article .summary p {
		font-size: 0.95em;
		line-height: 1.85em;
	}



	/* case
	----------------------------------------------- */

	#case {
		background: #f2f2f2;
	}
	#case .inner {
		padding: 70px 0;
	}

	#case h2 {
		margin: 0 40px;
		font-size: 1.4em;
		text-align: center;
		line-height: 1.5em;
	}
	#case h2 span {
		display: block;
	}
	#case h2 br {
		display: none;
	}
	#case .copy {
		margin: 30px 40px 0;
	}
	#case .copy p {
		color: #4d4d4d;
		font-size: 1.1em;
		line-height: 1.6em;
	}
	#case .copy br {
		display: none;
	}

	#case .more {
		margin: 25px 0 0;
		font-size: 1em;
		text-align: center;
	}
	#case .more a {
		margin: auto;
		max-width: 335px;
		height: 52px;
		font-size: 1em;
		line-height: 53px;
	}

	#case .interview .index {
		position: relative;
		margin: 55px auto 0;
		-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;
		user-drag: none;
	}
	#case .interview .articles {
		position: relative;
		margin: 0 50px;
		height: 335px;
		overflow: hidden;
	}
	#case .interview article {
		position: absolute;
		top: 0;
		left: 0;
		padding: 0 0 30px;
		width: 100%;
		height: 305px;
		background: white;
		z-index: 1;
	}
	#case .interview article h3 {
		margin: 20px 20px 0;
		color: #78282a;
		font-size: 1em;
		font-weight: 500;
		line-height: 1.5em;
	}
	#case .interview article h3 br {
		display: none;
	}
	#case .interview article .client {
		margin: 10px 20px 0;
		color: #4d4d4d;
		font-size: 0.85em;
		line-height: 1.25em;
	}
	#case .interview article .summary {
		margin: 0 20px;
		padding: 10px 0 0;
	}
	#case .interview article .summary li {
		position: relative;
		margin: 6px 0 0;
		font-size: 0.8em;
		line-height: 1.25em;
	}
	#case .interview article .summary li span {
		display: inline-block;
		position: relative;
		padding: 0 18px 0 0;
	}
	#case .interview article .summary li span:after {
		display: block;
		content: "";
		position: absolute;
		top: 50%;
		right: 7px;
		margin: -6px 0 0;
		width: 1px;
		height: 12px;
		background: #595959;
	}
	#case .interview article .more {
		margin: 25px 0 0;
		font-size: 1em;
		text-align: center;
	}
	#case .interview article .more a:after {
		display: none;
	}
	#case .interview article figure img {
		width: 100%;
		height: auto;
	}
	#case .interview article .logo {
		display: none;
	}

	#case .interview .control {
		display: none;
	}
	#case .interview .control.on {
		display: block;
	}
	#case .interview .control li {
		position: absolute;
		top: 50%;
		margin: -50px 0 0;
		width: 50px;
		height: 100px;
		cursor: pointer;
	}
	#case .interview .control .prev {
		left: 0;
	}
	#case .interview .control .next {
		right: 0;
	}
	#case .interview .control li:after {
		display: block;
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -10px 0 0 -5px;
		width: 11px;
		height: 19px;
		background: url(/casestudy/images/control_min.png) no-repeat;
		-webkit-background-size: 22px 19px;
		-moz-background-size: 22px 19px;
		-ms-background-size: 22px 19px;
		background-size: 22px 19px;
	}
	#case .interview .control .prev:after {
		background-position: 0 0;
	}
	#case .interview .control .next:after {
		background-position: -11px 0;
	}
	#case .interview a {
		color: #4970bf;
	}

	/* news
	----------------------------------------------- */

	#news .inner {
		margin: 0 20px;
		padding: 20px 0;
		text-align: left;
	}
	#news article {
		padding: 30px 0;
		border-top: 1px solid #e6e6e6;
	}
	#news article:first-child {
		border: 0;
	}

	#news article h3 {
		position: relative;
		font-size: 1.35em;
	}
	#news article h3 .more {
		position: absolute;
		top: 50%;
		right: 0;
		margin: -0.5em 0 0;
		font-size: 0.8em;
	}
	#news article h3 .more a {
		color: #4970bf;
	}

	#news article .list {
		margin: 25px 0 0;
	}
	#news article .list tr.new th:after {
		display: inline-block;
		content: "";
		margin: 0 0 0 10px;
		width: 22px;
		height: 8px;
		background: url(../images/index/icon_new.png) no-repeat;
		-webkit-background-size: 22px 8px;
		-moz-background-size: 22px 8px;
		-ms-background-size: 22px 8px;
		background-size: 22px 8px;
	}

	#news article table {
		width: 100%;
	}
	#news article tr {
		display: none;
	}
	#news article tr:first-child {
		display: block;
	}
	#news article th,
	#news article td {
		display: block;
		padding: 2px 0 0;
		font-size: 0.95em;
		line-height: 1.5em;
	}
	#news article th {
		font-size: 0.8em;
	}

}

/* h1 change
----------------------------------------------- */
#header #head_img {
	display: block;
}
#intro .copy {
	display: block;
}

@media print, screen and (min-width: 741px){
	#header #head_img {
		margin: 0 24px;
		padding: 36px 0;
	}

	body.fixed #header #head_img a img {
		width: auto;
		height: 36px;
	}

	body.fixed #header #head_img {
		padding: 10px 0;
	}
}
@media screen and (max-width: 1100px) and (min-width: 741px){
	#header #head_img {
		padding: 16px 0;
	}
	#header #head_img a img {
		width: auto;
		height: 40px;
	}
}
@media screen and (max-width: 740px){
	#header #head_img {
		margin: 0 12px;
		padding: 12px 0;
	}
	#header #head_img a img {
		width: auto;
		height: 24px;
	}
}

/* intro
	----------------------------------------------- */
#intro .inner {
	position: relative;
	margin: auto;
	color: #fff;
}

#intro .slick-slide {
	position: relative;
}
#intro button {
	cursor: pointer;
	outline: none;
	appearance: none;
	text-indent: -9999px;
	border: none;
}

#intro button:active,
#intro button:focus {
	outline: none;
	border: none;
}

#intro .slick-arrow {
	position: absolute;
	top: 50%;
	display: block;
	background: url(../images/index/icon_arrow06.png) no-repeat;
	background-size: contain;
}

#intro .slick-prev {
	z-index: 2;
	transform: scale(-1, 1);
}

#intro .slick-dots {
	position: absolute;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
}

#intro .slick-dots li {
	position: relative;
	border-radius: 50%;
}

#intro .slick-dots button {
	position: absolute;
	right: 1px;
	bottom: 1px;
	display: block;
	padding: 0;
	border-radius: 50%;
	background: #aeb1b5;
	border: solid 1px #fff;
}

#intro .slick-dots .slick-active button {
	background: #78282a;
	border: solid 1px transparent;
}

/* intro carousel slide2*/
#intro .cv_box {
	width: 440px;
}
#intro .material a {
	padding-top: 7px;
	height:63px;
	width: 450px;
    line-height: 57px;
	font-size: 1.5em;
    font-weight: 400;
    margin-top: 32px;
}
#intro .logo_change_button {
    max-height: 100px;
	max-width: 450px;
	margin-top: 10px;
    background: #ecf1f6;
	box-shadow: 0px 5px 0px #a1a1a1;
	border-radius: 4px;
}
#intro .logo_change_button img {
    width:auto;
    height:auto;
    max-width:100%;
	max-height:100%;
}
#intro div.sub_entry {
    margin-top: 15px;
    background-color: rgba(255,255,255,0.8);
    text-align: center;
    color: #4970bf;
}
#intro .sub_entry a{
		height: 37px;
		width: 440px;
		line-height: 37px;
		font-size: 1em;
}
#intro .sub_entry .sub_small_buttom {
		margin: 10px 16px;
    color: #4970bf;
}
#intro .slide2 {
		background: url(/assets/images/index/top_1_1.png?date=20191219) right center / cover repeat-x;overflow: hidden;
}

#intro .slide2 .material a {
    margin-top: 28px;
}
#intro .slide2.slide4 .material a {
    margin-top: 25px;
}
#intro .slide5 .material a {
    margin-top: 32px;
}
#intro .it-trend-seal {
		width: 300px;
    float: left;
	padding: 28px 48px;
}
#intro .it-trend-seal li {
    display: inline-block;
}
/* intro carousel slide3-5*/
#intro .slide3 {
		background: url(/assets/images/index/top_2.png?date=20191219) right center / cover repeat-x;overflow: hidden;
}
#intro .slide3 .slide_h1 {
    padding-top: 70px;
}
#intro .slide4 {
		background: url(/assets/images/index/top_3.png?date=20191219) 67% center / cover repeat-x;overflow: hidden;
}
#intro .slide5 {
		background: url(/assets/images/index/top_4.png?date=20191219) 61% center / cover repeat-x;overflow: hidden;
}
#intro .slide5 .slide_h1 {
    padding-top: 36px;
}
#intro .slide5 .copy{
    margin-top: 14px;
    font-size: 16px;
}
#intro .slide5 .cv_box {
    margin-top: -18px;
}
#intro .slide5 .label_seminar{
		border: solid 2px #fff;
		border-radius: 22px;
		padding: 4px 18px;
		font-size: 0.4em;
		line-height: 62px;
}
#intro .slide5 .date,.place{
    font-size: 0.8em;
}
#intro .slide5 .time,.place_sub{
    font-size: 0.6em;
}
#intro .slick-slide {
    height: 497px;
}

/* intro carousel large pc
----------------------------------------------- */
@media print, screen and (min-width: 1280px) {
	#intro {
		background: #8da5b9;
		overflow: hidden;
	}
	body.tablet #intro {
		-webkit-animation-play-state: paused;
		-moz-animation-play-state: paused;
		-ms-animation-play-state: paused;
		animation-play-state: paused;
	}
	#intro .inner {
		height: 460px;
	}

	#intro .slick-slide {
		height: 460px;
		padding-left: 84px;
	}

	#intro .slick-arrow {
		width: 22px;
		height: 40px;
		margin-top: -20px;
	}

	#intro .slick-prev {
		left: 10px;
	}

	#intro .slick-next {
		right: 10px;
	}

	#intro .slick-dots {
		bottom: 15px;
	}

	#intro .slick-dots li {
		width: 16px;
		height: 16px;
		margin: 0 4px;
		border: solid 2px transparent;
	}

	#intro .slick-dots button {
		top: 1px;
		left: 1px;
		width: 14px;
		height: 14px;
	}

	#intro .slick-dots .slick-active {
		border: solid 2px #fff;
	}
}

/* intro carousel tablet landscape
----------------------------------------------- */
@media screen and (max-width: 1279px) and (min-width: 1024px) {
	#intro {
		background: url(/assets/images/index/top_1_1.png?date=20191219) repeat-x 0 0;
		overflow: hidden;
	}
	body.tablet #intro {
		-webkit-animation-play-state: paused;
		-moz-animation-play-state: paused;
		-ms-animation-play-state: paused;
		animation-play-state: paused;
	}
	#intro .inner {
		max-width: 1232px;
		height: 460px;
	}

	#intro .slick-slide {
		height: 460px;
		padding-left: 80px;
		z-index: 0;
	}

	#intro .slick-arrow {
		width: 22px;
		height: 40px;
		margin-top: -20px;
	}

	#intro .slick-prev {
		left: 24px;
	}

	#intro .slick-next {
		right: 24px;
	}

	#intro .slick-dots {
		bottom: 15px;
	}

	#intro .slick-dots li {
		width: 16px;
		height: 16px;
		margin: 0 4px;
		border: solid 2px transparent;
	}

	#intro .slick-dots button {
		top: 1px;
		left: 1px;
		width: 14px;
		height: 14px;
	}

	#intro .slick-dots .slick-active {
		border: solid 2px #fff;
	}
	#intro .slick-slide:before {
		z-index: -1;
		content: "";
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(96,121,144,0.7);
	}
	#intro .slide-inside {
		z-index: 2;
	}
}

/* intro carousel tablet portlait
----------------------------------------------- */
@media screen and (max-width: 1023px) and (min-width: 768px) {
	#intro {
		background: url(/assets/images/index/top_1_1.png?date=20191219) no-repeat center center;
		overflow: hidden;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-ms-background-size: cover;
		background-size: cover;
	}

	#intro .inner {
		height: 460px;
		text-align: center;
	}

	#intro .slick-slide {
		height: 460px;
	}

	#intro .slick-arrow {
		width: 12px;
		height: 20px;
		margin-top: -11px;
	}

	#intro .slick-prev {
		left: 10px;
	}

	#intro .slick-next {
		right: 10px;
	}

	#intro .slick-dots {
		bottom: 9px;
	}

	#intro .slick-dots li {
		width: 8px;
		height: 8px;
		margin: 0 3px;
		border: solid 1px transparent;
	}

	#intro .slick-dots button {
		top: 0px;
		left: 0px;
		width: 8px;
		height: 8px;
	}

	#intro .slick-dots .slick-active {
		border: solid 1px #fff;
	}

	#intro .slick-slide {
		z-index: 0;
	}

	#intro .slick-slide:before {
		z-index: -1;
		content: "";
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(96,121,144,0.7);
	}

	#intro .slide-inside {
		z-index: 2;
	}
}

/* intro carousel smartphone large
----------------------------------------------- */
@media screen and (max-width: 767px) and (min-width: 375px) {
	#intro {
		background: url(/assets/images/index/top_1_1.png?date=20191219) no-repeat center center;
		overflow: hidden;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-ms-background-size: cover;
		background-size: cover;
	}
	#intro .inner {
		text-align: center;
	}

	#intro .slick-arrow {
		width: 12px;
		height: 20px;
		margin-top: -11px;
	}

	#intro .slick-prev {
		left: 10px;
	}

	#intro .slick-next {
		right: 10px;
	}

	#intro .slick-dots {
		bottom: 9px;
	}

	#intro .slick-dots li {
		width: 8px;
		height: 8px;
		margin: 0 3px;
		border: solid 1px transparent;
	}

	#intro .slick-dots button {
		top: 0px;
		left: 0px;
		width: 8px;
		height: 8px;
	}

	#intro .slick-dots .slick-active {
		border: solid 1px #fff;
	}

	/* スライド2枚目 smartphone large
	----------------------------------------------- */
		#intro .slide2 {
			text-align: center;
			padding-bottom: 35px;
		}
		#intro .slide2 .slide_h1 {
			margin-top: 0px;
			padding: 100px 50px 12px;
		}
		#intro .cv_seal_set{
			width: 272px;
	    margin-left: auto;
	    margin-right: auto;
		}
		#intro .cv_box {
			width: 100%;
	    float: none;
	    margin-left: auto;
	    margin-right: auto;
		}
		#intro .material a {
			width: 100%;
			font-size: 14px;
			line-height: 52px;
		}
		#intro .sub_entry a {
	    font-size: 12px;
		}
		#intro .it-trend-seal {
	    float: none;
	    margin-top: 30px;
			width: 100%;
			padding: 0 0 86px 45px;
		}
		#intro .it-trend-seal img {
			width: 70%;
			height: 70%;
		}
		#intro .material a {
	    margin-top: 0px;
		}
		#intro .slide5 .slide_h1 {
		    padding-top: 56px!important;
		}
		#intro .slide4 .slide_h1 {
			padding-top: 170px!important;
		}

		#intro .slick-slide {
			z-index: 0;
		}

		#intro .slick-slide:before {
			z-index: -1;
			content: "";
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(96,121,144,0.7);
		}

		#intro .slide-inside {
			z-index: 2;
		}
}

/* intro carousel smartphone small
----------------------------------------------- */
@media screen and (max-width: 374px) {
	#intro {
		background: url(/assets/images/index/top_1_1.png?date=20191219) no-repeat center center;
		overflow: hidden;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-ms-background-size: cover;
		background-size: cover;
	}

	#intro .inner {
		padding-bottom: 0;
	}

	#intro .slick-arrow {
		width: 12px;
		height: 20px;
		margin-top: -11px;
	}

	#intro .slick-prev {
		left: 10px;
	}

	#intro .slick-next {
		right: 10px;
	}

	#intro .slick-dots {
		bottom: 13px;
	}

	#intro .slick-dots li {
		width: 8px;
		height: 8px;
		margin: 0 3px;
		border: solid 1px transparent;
	}

	#intro .slick-dots button {
		top: 0px;
		left: 0px;
		width: 8px;
		height: 8px;
	}

	#intro .slick-dots .slick-active {
		border: solid 1px #fff;
	}
}

/* スライダー1枚目
----------------------------------------------- */
#intro .images.on {
	display: block;
}

#intro .images li {
	overflow: hidden;
}

#intro .images li img {
	margin-top: -1px;
	margin-bottom: -1px;
}

/* スライダー1枚目  large pc
----------------------------------------------- */
@media print, screen and (min-width: 1280px) {

	#intro h1, #intro .h1_p {
		padding-top: 90px;
		font-size: 46px;
		line-height: calc(56 / 48);
	}
	#intro .slide_h1 {
		padding-top: 90px;
		font-size: 46px;
		line-height: calc(56 / 48);
	}

	#intro .slide4 .slide_h1 {
    	padding-top: 78px;
	}

	#intro .copy {
		margin-top: 18px;
		font-size: 22px;
		line-height: calc(26 / 18);
	}
	#intro .images {
		display: none;
		position: absolute;
		top: 50%;
		right: 177px;
		-webkit-transform: translate(0, -50%);
		-moz-transform: translate(0, -50%);
		-ms-transform: translate(0, -50%);
		transform: translate(0, -50%);
	}
	#intro .images li {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		overflow: hidden;
	}
	#intro .entry {
		display: inline-block;
		margin-top: 49px;
	}
	#intro .entry a {
		width: 256px;
		height: 64px;
		font-size: 1.25em;
		line-height: 64px;
	}

	#intro .globalsign {
		position: absolute;
		left: 177px;
		bottom: 16px;
	}

	#intro .globalsign img {
		width: auto;
		height: 39px;
	}
}

/* スライダー1枚目 tablet landscape
----------------------------------------------- */
@media screen and (max-width: 1279px) and (min-width: 1024px) {
	#intro h1,#intro .h1_p {
		padding-top: 70px;
		font-size: 44px;
		line-height: calc(56 / 44);
	}
	#intro .slide_h1 {
		padding-top: 70px;
		font-size: 44px;
		line-height: calc(56 / 44);
	}
	#intro .copy {
		font-size: 16px;
		line-height: calc(28 / 16);
		margin-top: 25px;
	}

	#intro .entry {
		display: inline-block;
		margin-top: 42px;
	}

	#intro .entry a {
		width: 256px;
		height: 64px;
		font-size: 1.25em;
		line-height: 64px;
	}

	#intro .globalsign {
		position: absolute;
		left: 80px;
		bottom: 16px;
	}

	#intro .globalsign img {
		width: auto;
		height: 39px;
	}

	#intro .images {
		display: none;
		position: absolute;
		top: 50%;
		right: 69px;
		width: calc(454 / 1024 * 100%);
		max-height: 538px;
		-webkit-transform: translate(0, -50%);
		-moz-transform: translate(0, -50%);
		-ms-transform: translate(0, -50%);
		transform: translate(0, -50%);
	}

	#intro .images img {
		width: auto;
		height: auto;
		max-width: 100%;
		max-height: 498px;
	}

	#intro .images li {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}
}

/* スライダー1枚目 tablet portlait
----------------------------------------------- */
@media screen and (max-width: 1023px) and (min-width: 768px) {
	#intro h1, #intro .h1_p {
		margin-top: 393px;
		font-size: 36px;
		line-height: calc(48 / 36);
	}
	#intro .slide_h1 {
		margin-top: 393px;
		font-size: 36px;
		line-height: calc(48 / 36);
	}

	#intro .copy {
		padding: 20px 0 0;
		font-size: 18px;
		font-weight: 500;
		line-height: calc(28 / 16);
	}

	#intro .copy span {
		display: block;
	}

	#intro .copy br {
		display: none;
	}

	#intro .entry {
		position: absolute;
		left: 0;
		bottom: 54px;
		width: 100%;
		text-align: center;
	}

	#intro .entry a {
		margin: auto;
		max-width: 235px;
		height: 52px;
		font-size: 14px;
		line-height: 52px;
	}

	#intro .globalsign {
		position: absolute;
		right: 13px;
		bottom: 8px;
	}

	#intro .globalsign img {
		width: auto;
		height: 20px;
		margin-left: auto;
	}

	#intro .images {
		display: none;
		position: absolute;
		top: 23px;
		left: 50%;
		width: 100%;
		-webkit-transform: translate(-50%, 0);
		-moz-transform: translate(-50%, 0);
		-ms-transform: translate(-50%, 0);
		transform: translate(-50%, 0);
	}

	#intro .images img {
		max-width: 355px;
		width: 100%;
		height: auto;
		margin-left: auto;
		margin-right: auto;
	}

	#intro .images li {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		text-align: center;
		z-index: 1;
	}
	/* スライダー2枚目  tablet portlait
	----------------------------------------------- */
	#intro .slide2 {
		text-align: center;
	}
	#intro .slide2 h1, #intro .slide2 .h1_p {
		margin-top: 0px;
		padding: 4% 131px 28px;
	}
	#intro .slide2 .slde_h1 {
		margin-top: 0px;
		padding: 6% 131px 28px;
	}

	#intro .cv_seal_set{
		width: 380px;
    margin-left: auto;
    margin-right: auto;
	}
	#intro .cv_box {
		width: 380px;

	}
	#intro .material a {
    width: 380px;
	}
	#intro .it-trend-seal {
		width: 334px;
		margin-top: -10px;
	}
	#intro .material a {
    margin-top: 0px;
	}
/* スライダー2枚目  tablet portlait */
	#intro .slide4 .cv_seal_4 {
		width: 380px;
	}
	#intro .slide5 .cv_seal_5 {
    width: 380px;
	}
	#intro .slide5 h1, #intro .slide5 .h1_p {
    padding-top: 2%;
    font-size: 2.2em;
	}
	#intro .slide5 .slide_h1 {
		padding-top: 2%;
		font-size: 2.2em;
	}
}

/* スライダー2-5枚目 smartphone large
----------------------------------------------- */
@media screen and (max-width: 648px) and (min-width: 375px) {
	#intro .slide2 h1, #intro .slide2 .h1_p {
	    margin-top: 0px;
	    padding: 100px 50px 12px;
	    font-size: 22px;
	}
	#intro .slide2 .slide_h1 {
	    margin-top: 0px;
	    padding: 100px 50px 12px;
	    font-size: 22px;
	}
}
/* スライダー1枚目 smartphone large
----------------------------------------------- */
@media screen and (max-width: 767px) and (min-width: 375px) {
	#intro h1, #intro .h1_p {
		margin-top: 157px;
		font-size: 24px;
		line-height: calc(32 / 24);
		text-align: center;
	}
	#intro .slide_h1 {
		margin-top: 290px;
		font-size: 24px;
		line-height: calc(32 / 24);
		text-align: center;
	}

	#intro .copy {
		padding: 9px 0 0;
		font-size: 12px;
		font-weight: 500;
		line-height: calc(20 / 12);
	}
	#intro .slide5 .copy {
	    font-size: 12px;
	}
	#intro .slide4 .copy {
    font-size: 12px;
	}

	#intro .copy span {
		display: block;
	}

	#intro .copy br {
		display: none;
	}

	#intro .images {
		display: none;
		position: absolute;
		top: 17px;
		left: 50%;
		width: 100%;
		-webkit-transform: translate(-50%, 0);
		-moz-transform: translate(-50%, 0);
		-ms-transform: translate(-50%, 0);
		transform: translate(-50%, 0);
	}

	#intro .images img {
		width: 259px;
		height: auto;
		margin-left: auto;
		margin-right: auto;
	}

	#intro .images li {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		text-align: center;
		z-index: 1;
	}

	#intro .entry {
		width: 100%;
		text-align: center;
		margin-top: 16px;
	}
	#intro .entry a {
		margin: auto;
		max-width: 280px;
		height: 52px;
		font-size: 14px;
		line-height: 52px;
	}

	#intro .globalsign {
		margin: 12px 10px 10px 0;
	}

	#intro .globalsign img {
		width: auto;
		height: 20px;
		margin-left: auto;
	}
	/* スライダー2枚目 smartphone large
	----------------------------------------------- */
	#intro .it-trend-seal {
	    position: relative;
	}

	#intro .it-trend-seal li:nth-child(1) {
	    position: absolute;
	    right: -34px;
	}
	#intro .it-trend-seal li:nth-child(2) {
	    position: absolute;
	    right: 44px;
	}
	#intro .slide5 .slide_h1 {
		font-size: 22px;
	}
}

/* スライダー1枚目 smartphone small
----------------------------------------------- */
@media screen and (max-width: 374px) {
	#intro h1, #intro .h1_p {
		margin-top: 205px;
		font-size: 20px;
		line-height: calc(28 / 20);
		text-align: center;
	}
	#intro .slick-slide {
	    height: 400px;
			z-index: 0;
	}
	#intro .slick-slide:before {
    z-index: -1;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(96,121,144,0.7);
	}
	#intro .slide-inside {
	    z-index: 2;
	}

	#intro .copy {
		padding: 9px 0 0;
		font-size: 11px!important;
		font-weight: 500;
		line-height: calc(20 / 12);
	}
	#intro .copy span {
		display: block;
	}
	#intro .copy br {
		display: none;
	}
	#intro .images {
		display: none;
		position: absolute;
		top: 18px;
		left: 50%;
		width: 100%;
		-webkit-transform: translate(-50%, 0);
		-moz-transform: translate(-50%, 0);
		-ms-transform: translate(-50%, 0);
		transform: translate(-50%, 0);
	}
	#intro .images img {
		width: 178px;
		height: auto;
		margin-left: auto;
		margin-right: auto;
	}
	#intro .images li {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		text-align: center;
		z-index: 1;
	}
	#intro .entry {
		width: 100%;
		text-align: center;
		margin-top: 22px;
	}
	#intro .entry a {
		margin: auto;
		max-width: 240px;
		height: 44px;
		font-size: 14px;
		line-height: 44px;
	}
	#intro .globalsign {
		margin: 12px 10px 0 0;
    padding-bottom: 8px;
	}
	#intro .globalsign img {
		width: auto;
		height: 20px;
		margin-left: auto;
	}
	/* スライダー2枚目 small mobile
	----------------------------------------------- */
	#intro .slide2 {
		text-align: center;
		padding-bottom: 35px;
	}
	#intro .slide2 h1, #intro .slide2 .h1_p {
		margin: 40px auto 20px;
    max-width: 240px;
    font-size: 1.3em;
    padding-top: inherit;
	}
	#intro .slide2 .slide_h1 {
		margin: 40px auto 20px;
    max-width: 240px;
    font-size: 1.3em;
    padding-top: inherit;
	}
	#intro .cv_box {
    width: 100%;
	}
	#intro .material a {
		max-width: 240px;
    height: 44px;
    font-size: 14px;
    line-height: 44px;
		margin: 15px auto;
	}
	#intro .cv_seal_set{
		width: 240px;
	margin-left: auto;
	margin-right: auto;
	}
	#intro div.sub_entry {
	    margin: 0 auto;
	    max-width: 240px;
	    height: 34px;
	    font-size: 10px;
	    line-height: 34px;
	}
	#intro .sub_entry .sub_small_buttom {
	    margin: 10px 9px;
		}
	
	#intro .slide4 .slide_h1 {
		padding-top: 46px;
	}
	#intro .slide5 h1, #intro .slide5 .h1_p {
    margin-top: 20px;
	}
  #intro .soc2_seal li {
    width: 40%;
	}
	#intro .slide5 .label_seminar {
    font-size: 0.6em;
}

}

/* スライダー2枚目 large PC
----------------------------------------------- */
@media print, screen and (min-width: 1600px) {
	#intro .images {
		right: 333px;
	}
	#intro .slick-slide {
    padding-left: 157px;
	}
	#intro .globalsign {
    left: 290px;
	}
}

/* スライダー2枚目 SOC2　位置調整
----------------------------------------------- */
.cv_box2, .soc2_seal {
	display: inline-block;
	vertical-align: top;
}
.soc2_seal {
	padding: 20px;
}
#intro .cv_box2 .material a {
	margin-top: 56px;
}
@media screen and (max-width: 1023px) and (min-width: 768px) {
	#intro .cv_box2 .material a {
		margin-top: 34px;
	}
	#intro .cv_seal_set2 {
		width: auto;
	}
	.soc2_seal {
    padding-top: 0px;
	}
	#intro .cv_box1 .material a {
			margin-top: 0px;
	}
	}
	@media screen and (max-width: 767px) and (min-width: 375px) {
		.cv_box2, .soc2_seal {
			display: block;
	}
	#intro .cv_box2 .material a {
			margin-top: 28px;
	}
	#intro .soc2_seal img {
			margin-left: auto;
			margin-right: auto;
	}
}

/* keyframes
----------------------------------------------- */

/* sky */

@-webkit-keyframes sky {
	0% { background-position: 0 0; }
	100% { background-position: -3840px 0; }
}
@-moz-keyframes sky {
	0% { background-position: 0 0; }
	100% { background-position: -3840px 0; }
}
@-ms-keyframes sky {
	0% { background-position: 0 0; }
	100% { background-position: -3840px 0; }
}
@keyframes sky {
	0% { background-position: 0 0; }
	100% { background-position: -3840px 0; }
}

/* cloud */

@-webkit-keyframes cloud {
	0% { -webkit-transform: translateY(0px); }
	40% { -webkit-transform: translateY(-5px); }
	100% { -webkit-transform: translateY(0px); }
}
@-moz-keyframes cloud {
	0% { -moz-transform: translateY(0px); }
	40% { -moz-transform: translateY(-5px); }
	100% { -moz-transform: translateY(0px); }
}
@-ms-keyframes cloud {
	0% { -ms-transform: translateY(0px); }
	40% { -ms-transform: translateY(-5px); }
	100% { -ms-transform: translateY(0px); }
}
@keyframes cloud {
	0% { transform: translateY(0px); }
	40% { transform: translateY(-5px); }
	100% { transform: translateY(0px); }
}







/* #pricearea
----------------------------------------------- */

#tipbox {
	position: absolute;
}
#tipbox .inner {
	position: relative;
	color: white;
	background: #4d4d4d;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-ms-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.2);
	-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.2);
	-ms-box-shadow: 0 1px 4px rgba(0,0,0,0.2);
	box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
#tipbox .inner:after {
	display: block;
	content: "";
	position: absolute;
	right: 7px;
	bottom: -14px;
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-top: 10px solid #4d4d4d;
	z-index: 1;
}

@media print, screen and (min-width: 741px){
	#pricearea{
		max-width: 1250px;
		margin:0 auto;
	}
	#pricearea h2 {
	    font-size: 2.5em;
	    text-align: center;
	    line-height: 1.65em;
	}
	#pricearea .copy {
	    margin: 30px auto 110px;
	}
	#pricearea .copy p {
	    color: #4d4d4d;
	    font-size: 1.25em;
	    text-align: center;
	    line-height: 1.85em;
	}
	#pricearea .price_inner{
		max-width: 1200px;
		 margin:0 25px;
		 padding:110px 0;

	 }
	 #pricearea .price-inner-position{
		width:100%;
		/*height:100%;*/
		position:relative;
	 }
	/* #pricearea .price-inner-position:before{
	 	display:block;
	 	content:'';
	 	padding-top:calc((100% + 172px));
	 	}
	 */
	 .price-area-box .tab-li{
	 	width:30%;
	 	max-width:360px;
	 	height:90px;
	 	text-align:center;
	 	color:#fff;
	 	opacity:0.25;
	 	margin-bottom: 40px;
	 	position:absolute;
	 	font-size:1.28em;
	 	padding-top:20px;
	 }
	 .price-area-box .tab-li:hover{
	 	cursor: pointer;
	 }
	 .price-area-box .tab-li strong{
	 	font-size:1.6em;
	 	display:block;
	 	margin-bottom: 15px;
	 }
	 .price-area-box .tab-li.active{
	 	opacity:1;
	 }
	 .price-area-box .tab-li:after{
	 	display:block;
	 	content:'';
	 	width:0;
	 	height:0;
	 	border-top:11px solid #78282a;
	 	border-right:8px solid transparent;
	 	border-left:8px solid transparent;
	 	border-bottom:11px solid transparent;
	 	position: absolute;
	 	bottom:-50px;
	 	/*left:calc((100%-15px)/2);*/
	 	left:calc(50% - 15px);
	 }
	 .price-area-box.basic-box .tab-li{
	 	background:url(../images/index/logo_basic_skuid.png) no-repeat #c8b170;
	 	top:0;
	 	left:20px;
	 }
	 .price-area-box.basic-box .tab-li:after{
	 	border-top:11px solid #c8b170;
	 }

	 .price-area-box.pro-box .tab-li{
	 	background:url(../images/index/logo_pro_skuid.png) no-repeat #78282a;
	 	top:0;
	 	/*left:calc((100% - 840px)/ 2);*/
	 	left:calc((100% - 30%)/2);
	 }
	 .price-area-box.pro-box .tab-li span{
	 	display: block;
	 	color:#78282a;
	 	width:  150px;
	 	height:45px;
	 	line-height: 45px;
	 	position:absolute;
	 	top:-57px;
	 	/*left:calc((100%-150px)/2);*/
	 	left:50%;
	 	left:calc((100% - 150px)/2);
	 	border:2px solid #78282a;
	 	border-radius:30px;
	 	background:#fff;
	 }
 	 .price-area-box.pro-box .tab-li span:after{
	 	display:block;
	 	text-align: center;
	 	content:'';
	 	width:0;
	 	height:0;
	 	border-top:7px solid #fff;
	 	border-left:7px solid #fff;
	 	border-right:7px solid transparent;
	 	border-bottom:7px solid transparent;
	 	position:absolute;
	 	top:45px;
	 	left:calc(50% + 26px);
	 }
	 .price-area-box.pro-box .tab-li span:before{
	 	display:block;
	 	content:'';
	 	width:0;
	 	height:0;
	 	border-top:9px solid #78282a;
	 	border-left:9px solid #78282a;
	 	border-right:9px solid transparent;
	 	border-bottom:9px solid transparent;
	 	position:absolute;
	 	top:45px;
	 	left:calc(50% + 24px);
	 }
	 .price-area-box.enterprise-box .tab-li{
	 	background:url(../images/index/logo_pro_skuid.png) no-repeat #78282a;
	 	top:0;
	 	right:20px;
	 }
	 @keyframes fade{
			from{
				opacity:0;
			}
			to{
				opacity:1;
			}
	 }
	  .price-area-box > dd{
	  	display:none;
	  	max-width:1200px;
	  	width:100%;
	  	position:absolute;
	  	top:172px;
	  	left:0;
	  	border:1px solid #78282a;
	  	padding:40px;
	  	box-sizing: border-box;
	  	/*min-height: 600px;*/
	  }
	  .price-area-box.basic-box > dd{
	  	border:1px solid #c8b170;
	  }
	  .price-area-box .tab-li.active + dd{
	  	display:grid;
	  	grid-template-rows:1fr  80px;
	  	grid-template-columns: 35% 8% 1fr;
	  	animation: fade 0.8s ease-in;
	  	/*grid-template:
	  	"one gutter two" 1fr
	  	"one gutter two" 2fr
	  	"three"	150px /
	  	33% 8% 1fr;*/
	  }
	  .price-price{
	  	grid-row:1 / 2;
	   	grid-column:1 / 2;
	  }
	  .gutter{
	  	grid-row:1 / 2;
	  	grid-column:2/ 3;
	  }
	  .price-feature{
	  	grid-row:1 / 2;
	  	grid-column:3 / 4;
	  }
	  .btn-cv{
	  	grid-row:2 / 3;
	  	grid-column: 1 /4;
	  }
	  .price-price .price-box{
	  	max-width:400px;
	  	padding:20px 30px;
	  	background:#ebdfde;
	  	margin-bottom: 40px;
	  }
	  .basic-box .price-price .price-box{
	  	background:#f4f1e7;
	  }
	  .price-price .price-box p{
	  	color:#6f2d2d;
	  	text-align: center;
	  	font-size: 1.1em;
	  }
	  .price-price .price-box .price-amount{
	  	margin-bottom:20px;
	  }
	  .price-amount span{
	  	font-size:2.71em;
	  	font-weight:bold;
	  }
	  .price-amount strong{
	  	font-size:5em;
	  	letter-spacing: -0.02em;
	  	font-weight:bold;
	  }
	  .price-amount small{
	  	font-size:1em;
	  }
	  .price-content-ttl{
	  	font-size: 1.63em;
	  	padding-bottom:16px;
	  	border-bottom:#6f2d2d 1px solid;
	  	margin-bottom:30px;
	  }
	  .basic-box .price-content-ttl{
	  	border-bottom:#c4b17d 1px solid;
	  }
	  .plan-des dd{
	  	font-size: 1.28em;
	  	line-height: 1.85em;
	  }
	.price-feat-lists{
		display: grid;
		grid-template-columns:repeat(2,49%);
		grid-template-rows:repeat(6,70px);
		grid-gap:16px;
		margin-bottom: 30px;
	}
	.enterprise-box .price-feat-lists{
		grid-template-rows:repeat(6,70px);
	}
	  .price-feat-li{
	  	border:1px solid #d49799;
	  	padding:10px;
		line-height: 1.5em;
		font-size:1.1em;
	  }
	  .basic-box .price-feat-li{
	  	border:1px solid #c4b17d;
	  }
	  .price-feat-li.line1{
	  	padding-top: 20px;
	  }

	 .price-option-ttl{
	 	font-size:1.43em;
	 	color:#6f2d2d;
	 	margin-bottom: 30px;
	 }
	 .price-option-ttl:before{
	 	display:inline-block;
	 	vertical-align:middle;
	 	content:'';
	 	width:0;
	 	height:0;
	 	border-top:19px solid #6f2d2d;
	 	border-right:11px solid transparent;
	 	border-left:11px solid transparent;
	 	margin-right:0.5rem;
	 }
	 .price-recommmend-lists{
	 	display:grid;
	 	grid-template-columns: repeat(2, 49%);
	 	grid-template-rows:repeat(1,70px);
	 	grid-gap:16px;
	 	margin-bottom: 30px;
	 }
	  .price-recommmend-lists{
	  	margin-bottom: 50px;
	  }
	 .price-rec-li{
	 	display:table;
	 	background:#ebdfde;
	 	font-size:1.14em;
	 	color:#6f2d2d;
		line-height: 1.5em;
		padding:20px 10px;
		width: calc(100% - 16px);
	 }
	 .price-rec-li .price-rec{
	 	display:table-cell;
	 	vertical-align: middle;
	 	width:calc(100% - 24px);
	 }
	 .price-rec-li.line2{
	 	padding:10px;
	 }
	 .price-rec-li .tips{
		display:table-cell;
	 	vertical-align: middle;
	 	width:24px;
	 }
	 .btn-cv.flex{
	 	/*padding-top:30px;*/
	 	display: flex;
	 	justify-content: center;
	 	width: 100%;
	 }
	 .btn-cv .button{
	 	max-width: 240px;
	 	font-size:1.14em;
	 	margin:0 auto;
	 	height:68px;
	 	line-height: 69px;
	 }
	 .btn-cv.flex .button{
	 	width: 20%;
	 	max-width: 240px;
	 	font-size:1.14em;
	 	margin:0 20px 0 0;
	 	height:68px;
	 	line-height: 69px;
	 }
	 /*#pricearea .buttons{
	 	display: flex;
	 	justify-content: center;
	 	width: 100%;
	 	position:absolute;
	 	bottom: 20px;
	 	top:calc(100% - 175px);
	 }
	 #pricearea .buttons li {
	    width: 20%;
	    font-size: 1.05em;
	}
	 #pricearea .buttons li:not(:last-child) {
	 	margin-right:20px;
	 }
	#pricearea .buttons li .button{
		max-width: 240px;
		height:68px;
	 	line-height: 69px;
	}*/
	.price-inner-position .price-comp{
		position:absolute;
		bottom:-40px;
		right:14px;
	}
	.price-inner-position a.arrow {
	    color: #4970bf;
	    position: relative;
	    width: 100%;
	}
	.price-inner-position a.arrow:hover{
		text-decoration: underline;
	}
	.price-inner-position a.arrow:after {
		display: block;
	    content: "";
	    position: absolute;
	    top: 50%;
		right: -14px;
	    margin: -7px 0 0;
	    width: 9px;
	    height: 14px;
	    background: url(../images/common/icon_arrow01.png) no-repeat;
	}

	.tips {
	    display: block;
	    top: 50%;
	    /*margin-top: -21px;*/
	    width: 24px;
	    height: 24px;
	    background: url(/assets/images/price/icon_guide.png) no-repeat;
	    cursor: pointer;
	    -webkit-background-size: 48px 24px;
	    -moz-background-size: 48px 24px;
	    -ms-background-size: 48px 24px;
	    background-size: 48px 24px;
	}
	.tips:hover,
	.tips.on {
		background-position: -24px 0;
	}

	.tipbox {
		margin: -4px 0 0 36px;
		padding: 0 0 30px;
		width: 400px;
	}
	.tipbox .inner {
		padding: 10px 15px;
		width: 370px;
		color: white;
		font-size: 0.9em;
		line-height: 1.5em;
	}
	.tipbox .inner {
	    width: 220px;
	}
	.tipbox {
	    margin: -4px 0 0 178px;
	}


}
/* Tablet
----------------------------------------------- */
@media screen and (min-width:768px) and (max-width:1239px) {
	.tips {
    margin: 10px 0;
	}
	.tipbox {
    margin: -4px 0 0 390px;
	}
	#tipbox .inner:after {
    right: 218px;
	}
	.price-price .price-box {
	    max-width: 400px;
	    padding: 15px 10px;
	    margin-bottom: 40px;
	}
		.price-amount strong {
	    font-size: 3em;
		}
		.price-amount small {
	    font-size: 0.8em;
		}

	.price-feat-lists {
	    grid-template-columns: repeat(2,49%);
	    grid-template-rows: repeat(6,90px);
	}
	.enterprise-box .price-feat-lists {
	    grid-template-rows: repeat(6,90px);
	}
	.price-recommmend-lists {
	    grid-template-columns: repeat(2, 49%);
	    grid-template-rows: repeat(3,90px);
	}
	#pricearea .buttons li {
		width: 40%;
		max-width: 320px;
	}
	#pricearea .buttons li .button{
		max-width: 320px;
		height:64px;
	 	line-height:65px;
	}
	 .btn-cv.flex .button{
	 	width: 32%;
	 	max-width: 240px;
	 	font-size:1.14em;
	 	margin:0 20px 0 0;
	 	height:68px;
	 	line-height: 69px;
	 }
}

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

@media only screen and (max-width:767px) {
	.tips {
	    display: inline-block;
	    vertical-align: middle;
		margin: 5px 0 0 0;
	    width: 24px;
	    height: 24px;
	    background: url(/price/images/icon_guide.png) no-repeat;
	    cursor: pointer;
	    -webkit-background-size: 48px 24px;
	    -moz-background-size: 48px 24px;
	    -ms-background-size: 48px 24px;
	    background-size: 48px 24px;
	}
	.tipbox .inner {
	    width: 194px;
	}
	.tipbox {
	    margin: -4px 0 0 237px;
	}
	#tipbox .inner:after {
		right: 200px;
	}
	.tipbox {
		margin: 100px 0 0 36px;
		padding: 0 0 30px;
		width: 240px;
	}
	.tipbox .inner {
		padding: 10px 15px;
		width: 210px;
		color: white;
		font-size: 0.85em;
		line-height: 1.5em;
	}
	.tipbox .inner:after {
		display: block;
		content: "";
		position: absolute;
		right: 14px;
		bottom: -20px;
		width: 0;
		height: 0;
		border: 14px solid transparent;
		border-top: 14px solid #4d4d4d;
		z-index: 1;
	}

	#pricearea{
		background:#fff;
	}
	#pricearea h2 {
        margin: 0 40px;
	    font-size: 1.4em;
	    text-align: center;
	    line-height: 1.5em;
	}
	#pricearea .copy {
	    margin: 30px 40px 40px;
	}
	#pricearea .copy p {
	    color: #4d4d4d;
	    font-size: 1.1em;
	    line-height: 1.6em;
	}
	#pricearea .price_inner{
		width:94%;
		margin: 0 auto;
	    padding: 70px 0 0;
	 }
	 .price-area-box{
	 	/*width:94%;*/
	 	margin: 0 auto 15px;
	 }
	 .price-area-box.basic-box{
	 	margin-bottom: 30px;
	 }
	 .tab-li{
	 	position:relative;
	 	width: 100%;
	 	height:90px;
	 	text-align:center;
	 	color:#fff;
	 	/*margin-bottom:15px;*/
	 	font-size:1.12em;
	 	padding-top:20px;
	 	box-sizing: border-box;
	 }
	 .tab-li:hover{
	 	cursor: pointer;
	 }
	 .tab-li strong{
	 	font-size:1.6em;
	 	display:block;
	 	margin-bottom: 10px;
	 }
	 .tab-li.active{
	 	opacity:1;
	 }
	 /*.tab-li:after{
	 	display:block;
	 	content:'';
	 	width:10px;
	 	height:10px;
	 	border-right:1px solid #fff;
	 	border-bottom:1px solid #fff;
	 	transform:rotate(45deg);
	 	position: absolute;
	 	top:50%;
	 	right:16px;
	 }*/
	  .tab-li:after{
		 display: block;
	    content: "";
	    position: absolute;
	    top: 50%;
	    right: 15px;
	    margin: -5px 0 0;
	    width: 19px;
	    height: 11px;
	    background: url(../images/index/icon_arrow02.png) no-repeat;
	    -webkit-background-size: 19px 22px;
	    -moz-background-size: 19px 22px;
	    -ms-background-size: 19px 22px;
	    background-size: 19px 22px;
	}
	.tab-li.on:after {
	    background-position: 0 -11px;
	}
	 .price-area-box.basic-box .tab-li{
	 	background:url(../images/index/logo_basic_skuid.png) no-repeat #c8b170;
	 }
	 /*.price-area-box.basic-box .tab-li:after{
	 	border-top:11px solid #c8b170;
	 }	*/

	 .price-area-box.pro-box .tab-li{
	 	padding-top:32px;
	 	background:url(../images/index/logo_pro_skuid.png) no-repeat #78282a;
	 }
	 .price-area-box.pro-box .tab-li span{
	 	display: block;
	 	color:#78282a;
	 	width:  110px;
	 	height:35px;
	 	line-height: 35px;
	 	position:absolute;
	 	top:-20px;
	 	left:calc((100% - 110px)/2);
	 	border:2px solid #78282a;
	 	border-radius:30px;
	 	background:#fff;
	 }
 	 .price-area-box.pro-box .tab-li span:after{
	 	display:block;
	 	text-align: center;
	 	content:'';
	 	width:0;
	 	height:0;
	 	border-top:7px solid #fff;
	 	border-left:7px solid #fff;
	 	border-right:7px solid transparent;
	 	border-bottom:7px solid transparent;
	 	position:absolute;
	 	top:34px;
	 	left:calc(50% + 26px);
	 }
	 .price-area-box.pro-box .tab-li span:before{
	 	display:block;
	 	content:'';
	 	width:0;
	 	height:0;
	 	border-top:9px solid #78282a;
	 	border-left:9px solid #78282a;
	 	border-right:9px solid transparent;
	 	border-bottom:9px solid transparent;
	 	position:absolute;
	 	top:35px;
	 	left:calc(50% + 24px);
	 }
	 .price-area-box.enterprise-box .tab-li{
	 	background:url(../images/index/logo_pro_skuid.png) no-repeat #78282a;
	 }

	 .tab-li + dd{
	    display: none;
	 	padding:20px 18px 10px;
	 	border: 1px solid #6f2d2d;
	 }
	 .tab-li + dd.on{
	 	display: block;
	 }
	 .basic-box .tab-li + dd{
	    border: 1px solid #c8b170;
	 }
	 .price-box{
	 	padding:10px 10px 15px;
	 	background:#ebdfde;
	 	margin: 0 auto 30px;
	 }
	 .basic-box .price-box{
	 	background:#f4f1e7;
	 }
	 .price-box p{
	 	color:#78282a;
	 	text-align: center;
	 }
	 .price-amount{
	 	margin-bottom: 12px;
	 }
	  .price-amount span{
	  	font-size:2.31em;
	  	font-weight:bold;
	  }
	  .price-amount strong{
	  	font-size:4.57em;
	  	letter-spacing: -0.05em;
	  	font-weight:bold;
	  }
	  .price-amount small{
	  	font-size:1em;
	  }
	  .price-content-ttl{
	  	font-size: 1.14em;
	  	padding-bottom:10px;
	  	border-bottom:#6f2d2d 1px solid;
	  	margin-bottom:15px;
	  }
	  .basic-box .price-content-ttl{
	  	border-bottom:#c4b17d 1px solid;
	  }
	  .plan-des{margin-bottom: 30px;}
	  .plan-des dd{
	  	font-size: 1em;
	  	line-height: 1.5em;
	  }
	 .price-feat-li{
	 	padding:20px 10px;
	 	border:1px solid #6f2d2d;
	 	margin-bottom: 20px;
	 	line-height: 1.25em;
	 }
	 .basic-box .price-feat-li{
	 	border:1px solid #c4b17d;
	 }
	 .price-option-ttl{
	 	color:#6f2d2d;
	 	font-size: 1.14em;
	 	margin-bottom:15px;
	 }
	 .price-option-ttl:before{
	 	display:inline-block;
	 	content:'';
	 	width:0;
	 	height: 0;
	 	border-top:10px solid #6f2d2d;
	 	border-left:5px solid transparent;
	 	border-right:5px solid transparent;
	 	vertical-align: middle;
	 	margin-right: 0.5em;
	 }
	 .price-rec-li{
	 	vertical-align: middle;
	 	background:#ebdfde;
	 	font-size:1em;
	 	color:#6f2d2d;
		margin-bottom: 20px;
	 	line-height: 1.25em;
		padding:10px;
		/*position:relative;*/
		width:calc(100% - 20px);
		display: table;
	 }
	 .price-rec-li .price-rec{
	 	display: table-cell;
	 	width: calc(100% - 25px);
	 }
	 .price-rec-li .tips{
	 	display: table-cell;
	 	width: 24px;
	 	vertical-align: middle;
	 	  /*margin-top: 0;
	 	  position:absolute;
	 	  top:calc(50% - 12px);
	 	  right:10px;*/
	 }
	 .btn-cv{padding:10px 0 20px;}
	 .btn-cv .button{
	     margin: auto;
	    max-width: 335px;
	    height: 52px;
	    font-size: 1.15em;
	    line-height: 53px;
	    margin-bottom: 15px;
	 }
	 .price-inner-position .price-comp{
		text-align: right;
	}
	.price-inner-position a.arrow {
	    color: #4970bf;
	}
	.price-inner-position a.arrow:hover{
		text-decoration: underline;
	}
	/*.price-inner-position a.arrow:after {
		display: block;
	    content: "";
	    position: absolute;
	    top: 50%;
		right: -14px;
	    margin: -7px 0 0;
	    width: 9px;
	    height: 14px;
	    background: url(../images/common/icon_arrow01.png) no-repeat;
	}*/
	#pricearea .buttons{
		width: 100%;
		padding:10px 0 0;
	}
	#pricearea .buttons .button{
		margin: auto;
	    max-width: 335px;
	    height: 52px;
	    font-size: 1.15em;
	    line-height: 53px;
	    margin-bottom: 15px;
	 }
}
/* companies width adjustment
----------------------------------------------- */
@media screen and (min-width:850px) and (max-width:1130px) {
	#companies .inner {
		max-width: 834px;
	}
}
@media screen and (min-width:572px) and (max-width:849px) {
	#companies .inner {
		max-width: 556px;
	}
	#companies li p {
		font-size: 22px;
	}
}
@media screen and (min-width:320px) and (max-width:571px) {
	#companies .inner {
		max-width: 320px;
	}
	#companies li {
		padding: 27px;
	}
	#companies li img {
		width: 100px;
		height: auto;
	}
	#companies li p {
		font-size: 18px;
		margin: 20px 4px;
	}
}
/*  Starting Movie Style  */
#problem section {
    margin-top: 30px;
    margin-bottom: 50px;
    text-align: center;
}
@media only screen and (max-width: 740px) and (min-width: 320px) {
	#problem section {
	margin: auto;
	margin-top: 30px;
	margin-bottom: 50px;
	text-align: center;
	max-width: 700px;
	position: relative;
    width: 100%;
    padding-top: 56.25%;
}
#problem section iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
#problem section iframe {
max-width: 100%;
}
#problem section iframe {
height: 100%;
}
}
/*  Starting Campaign Style  */
div.campaign_area {
	background: #f2f2f2;
	padding: 1rem 0;
	margin-bottom: 1rem;
}
.campaign_inner {
	display: block;
	width: max-content;
	margin-left: auto;
	margin-right: auto;
}
div.campaign_area span {
	display: inline-block;
	background: #fff;
	color: #e65649;
	font-size: .8rem;
	padding: .2rem .4rem;
	margin-right: 1rem;
	border: solid 1px #e65649;
	vertical-align: text-bottom;
	border-radius: 2px;
}
div.campaign_area a {
	margin: 30px 0 0;
	color: #4970bf;
	font-size: 1.2em;
	font-weight: 500;
}
@media only screen and (max-width: 425px) and (min-width: 320px) {
	div.campaign_area a {
		font-size: .7em;
	}
	div.campaign_area span{
		font-size: .7em;
	}
}
/*  End of Campaign Style  */
/* ▼パートナー募集バナー▼ */
.campaign_material {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding-top: 40px;
    padding-bottom: 0px;
    width: inherit;
}
@media (min-width:320px) and (max-width:1250px) {
    .campaign_material img {
        width : 100%;
    }
    .campaign_material {
        padding-top: 0px;
        padding-bottom: 0px;
	}
	div.campaign_area {
		margin-bottom: 0rem;
	}
}
/* ▲パートナー募集バナー▲ */
/* ▼カルーセルお問い合わせフォーム▼ */
iframe.top_iframe {
	width: 440px;
    height: 350px;
    padding: 26px 6px;
    float: right;
    top: -194px;
    right: 8%;
    position: relative;
    background-color: #fff;
	color : #4d4d4d;
}
@media only screen and (max-width: 1520px) and (min-width: 320px) {
	iframe.top_iframe {
		display: none;
	}
}
/* ▲カルーセルお問い合わせフォーム▲ */