@charset "UTF-8";
/*----------------------------------------------------
	レスポンシブ
----------------------------------------------------*/
.hide {
	display: none;
}

.pc {
	display: inline;
}
.pc.block {
	display: block;
}
.pc.inline-block {
	display: inline-block;
}
.pc_hide {
	display: none;
}
.pc_hide.block {
	display: none;
}
.pc_hide.inline-block {
	display: none;
}

.sp {
	display: none;
}
.sp.block {
	display: none;
}
.sp.inline-block {
	display: none;
}

@media (max-width: 767px) {
	.sp {
		display: inline;
	}
	.sp.block {
		display: block;
	}
	.sp.inline-block {
		display: inline-block;
	}
	.sp_hide {
		display: none;
	}
	.sp_hide.block {
		display: none;
	}
	.sp_hide.inline-block {
		display: none;
	}
	.pc {
		display: none;
	}
	.pc.block {
		display: none;
	}
	.pc.inline-block {
		display: none;
	}
	.pc_hide {
		display: inline;
	}
	.pc_hide.block {
		display: block;
	}
	.pc_hide.inline-block {
		display: inline-block;
	}
}

.container {
	position: relative;
	padding-right: 16px; 
	padding-left: 16px;
	margin: 0 auto;
}
@media (min-width: 768px) {
	.container {
		max-width: 1052px;
	}
}

.container--s {
	max-width: 752px;
}

.container--l {
	max-width: 1312px;
}

@media (max-width: 767px) {
	table.sp-col1 {
		display: block;
	}
	table.sp-col1 tbody {
		display: block;
	}
	table.sp-col1 tr {
		display: block;
	}
	table.sp-col1 th {
		display: block;
	}
	table.sp-col1 td {
		display: block;
	}
}

/*----------------------------------------------------
	フォント等
----------------------------------------------------*/
.serif {
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ 明朝", serif;
}

@media screen and (max-width: 767px), only screen and (max-device-width: 1024px) and (min-device-width: 768px) {
	a,
	button {
		-webkit-tap-highlight-color: rgba(255, 255, 255, 0); 
		-webkit-touch-callout: none;
	}
}

/*----------------------------------------------------
	アニメーション
----------------------------------------------------*/
.anime {
	visibility: hidden;
}

.anime--slide {
	position: relative;
	z-index: 0; 
	display: inline-block;
	overflow: hidden;
}
.anime--slide .txt {
	display: inline-block;
	-webkit-transform: translateX(-100%);
	    -ms-transform: translateX(-100%);
	        transform: translateX(-100%);
	-webkit-transition: all linear 0s;
	        transition: all linear 0s;
	-webkit-transition-delay: .3s;
	        transition-delay: .3s; 

	     -o-transition: all linear 0s;
	     -o-transition-delay: .3s;
}
.anime--slide:before {
	position: absolute;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	content: "";
	background-color: #1d2088; 
	-webkit-transform: translateX(-100%);
	    -ms-transform: translateX(-100%);
	        transform: translateX(-100%);
	-webkit-transition: all linear .6s;
	        transition: all linear .6s;

	     -o-transition: all linear .6s;
}
.anime--slide.animated:before {
	-webkit-transform: translateX(100%);
	    -ms-transform: translateX(100%);
	        transform: translateX(100%);
}
.anime--slide.animated .txt {
	-webkit-transform: translateX(0%);
	    -ms-transform: translateX(0%);
	        transform: translateX(0%);
}

.anime--slide--delay .txt {
	-webkit-transition-delay: .6s;
	        transition-delay: .6s; 

	     -o-transition-delay: .6s;
}

.anime--slide--delay:before {
	-webkit-transition-delay: .3s;
	        transition-delay: .3s; 

	     -o-transition-delay: .3s;
}

.anime--delay05 {
	-webkit-animation-delay: .5s !important;
	        animation-delay: .5s !important; 
	opacity: 0;
}

.anime--delay03 {
	-webkit-animation-delay: .3s !important;
	        animation-delay: .3s !important; 
	opacity: 0;
}

.anime--delay1 {
	-webkit-animation-delay: 1s !important;
	        animation-delay: 1s !important; 
	opacity: 0;
}

.anime--delay15 {
	-webkit-animation-delay: 1.5s !important;
	        animation-delay: 1.5s !important; 
	opacity: 0;
}

.anime--delay2 {
	-webkit-animation-delay: 2s !important;
	        animation-delay: 2s !important; 
	opacity: 0;
}

.anime--delay25 {
	-webkit-animation-delay: 2.5s !important;
	        animation-delay: 2.5s !important; 
	opacity: 0;
}

.anime--delay3 {
	-webkit-animation-delay: 3s !important;
	        animation-delay: 3s !important; 
	opacity: 0;
}

.fadeIn.animated {
	-webkit-animation: fadeIn .5s forwards;
	        animation: fadeIn .5s forwards;
}

.fadeInUp.animated {
	-webkit-animation: fadeInUp .5s forwards;
	        animation: fadeInUp .5s forwards;
}

.fadeInLeft.animated {
	-webkit-animation: fadeInLeft .5s forwards;
	        animation: fadeInLeft .5s forwards;
}

.fadeInRight.animated {
	-webkit-animation: fadeInRight .5s forwards;
	        animation: fadeInRight .5s forwards;
}

.slideRight.animated {
	-webkit-animation: slideRight .3s forwards;
	        animation: slideRight .3s forwards;
}

@-webkit-keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@-webkit-keyframes fadeOut {
	from {
		opacity: 1;
	}
	to {
		display: none; 
		opacity: 0;
	}
}

@keyframes fadeOut {
	from {
		opacity: 1;
	}
	to {
		display: none; 
		opacity: 0;
	}
}

@-webkit-keyframes fadeInUp {
	from {
		-webkit-transform: translate(0px, 20px);
		        transform: translate(0px, 20px); 
		opacity: 0;
	}
	to {
		-webkit-transform: translate(0px, 0px);
		        transform: translate(0px, 0px); 
		opacity: 1;
	}
}

@keyframes fadeInUp {
	from {
		-webkit-transform: translate(0px, 20px);
		        transform: translate(0px, 20px); 
		opacity: 0;
	}
	to {
		-webkit-transform: translate(0px, 0px);
		        transform: translate(0px, 0px); 
		opacity: 1;
	}
}

@-webkit-keyframes fadeInLeft {
	from {
		-webkit-transform: translate(-100%, 0);
		        transform: translate(-100%, 0); 
		opacity: 0;
	}
	to {
		-webkit-transform: translate(0px, 0px);
		        transform: translate(0px, 0px); 
		opacity: 1;
	}
}

@keyframes fadeInLeft {
	from {
		-webkit-transform: translate(-100%, 0);
		        transform: translate(-100%, 0); 
		opacity: 0;
	}
	to {
		-webkit-transform: translate(0px, 0px);
		        transform: translate(0px, 0px); 
		opacity: 1;
	}
}

@-webkit-keyframes fadeInRight {
	from {
		-webkit-transform: translate(20px, 0px);
		        transform: translate(20px, 0px); 
		opacity: 0;
	}
	to {
		-webkit-transform: translate(0px, 0px);
		        transform: translate(0px, 0px); 
		opacity: 1;
	}
}

@keyframes fadeInRight {
	from {
		-webkit-transform: translate(20px, 0px);
		        transform: translate(20px, 0px); 
		opacity: 0;
	}
	to {
		-webkit-transform: translate(0px, 0px);
		        transform: translate(0px, 0px); 
		opacity: 1;
	}
}

@-webkit-keyframes slideRight {
	from {
		-webkit-transform: translate(100%, 0px);
		        transform: translate(100%, 0px);
	}
	to {
		-webkit-transform: translate(0px, 0px);
		        transform: translate(0px, 0px);
	}
}

@keyframes slideRight {
	from {
		-webkit-transform: translate(100%, 0px);
		        transform: translate(100%, 0px);
	}
	to {
		-webkit-transform: translate(0px, 0px);
		        transform: translate(0px, 0px);
	}
}

/*----------------------------------------------------
	画像ホバー
----------------------------------------------------*/
a .item-picture .hover {
	display: none;
}

@media screen and (min-width: 769px), only screen and (min-device-width: 769px) and (max-device-width: 1024px) and (orientation: landscape) {
	a .item-picture {
		position: relative;
	}
	a .item-picture img {
		width: 100%;
	}
	a .item-picture .hover {
		position: absolute;
		top: 0;
		left: 0;
		display: block; 
		width: 100%;
		height: 100%;
		color: #fff;
		background-color: rgba(0, 0, 0, .5);
		-webkit-transition: all .3s;
		        transition: all .3s;
		opacity: 0;

		     -o-transition: all .3s;
	}
	a .item-picture .hover span {
		position: absolute;
		top: 5%;
		left: 5%;
		-webkit-align-items: center;
		        align-items: center;
		-ms-flex-align: center;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		        justify-content: center;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display:         flex;
		width: 90%;
		height: 90%;
		font-family: "Hind", sans-serif;
		border: 1px solid #fff;
		-webkit-transition: all .3s;
		        transition: all .3s; 

		-webkit-box-align: center;
		-webkit-box-pack: center;
		     -o-transition: all .3s;
	}
	a:hover .item-picture .hover {
		opacity: 1;
	}
	a:hover .item-picture .hover span {
		top: 7.5%; 
		left: 7.5%;
		width: 85%;
		height: 85%;
	}
}

/*----------------------------------------------------
	見出し
----------------------------------------------------*/
.ttl01 {
	color: #324873;
	font-size: 1.4rem;
	font-weight: bold; 
	text-align: center;
}
.ttl01 span {
	-webkit-align-items: center;
	        align-items: center; 
	-ms-flex-align: center;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display:         flex;

	-webkit-box-align: center;
}
.ttl01 span:before {
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-right: .25em;
	content: "";
	background: url(../images/ico_logo.svg) center center/contain no-repeat;
}
@media (min-width: 768px) {
	.ttl01 span {
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		        justify-content: center; 

		-webkit-box-pack: center;
	}
}

.ttl01--l {
	font-size: 1.4rem;
}
.ttl01--l span:before {
	width: 28px;
	height: 28px;
}

.ttl01--sky {
	color: #e4e4e4;
}
.ttl01--sky span:before {
	background-image: url(../images/ico_logo_sky.svg);
}

.ttl01--w {
	color: white;
}
.ttl01--w span:before {
	background-image: url(../images/ico_logo_w.svg);
}

/*----------------------------------------------------
	ボタン
----------------------------------------------------*/
.btn {
	position: relative;
	-webkit-align-items: center;
	        align-items: center;
	-ms-flex-align: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	        justify-content: center;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display:         flex;
	min-width: 200px;
	padding: .8rem 40px;
	margin-right: auto;
	margin-left: auto;
	color: #1d2088;
	font-size: 1.6rem;
	background-color: #fff;
	border-radius: 10px 10px 10px 10px;

	-webkit-box-align: center;
	-webkit-box-pack: center;
}
.btn:after {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	display: block;
	width: 100%;
	height: 100%;
	content: "";
	background-color: #c2ccda;
	border-radius: 10px 10px 10px 10px;
	-webkit-transform: translate(4px, 4px);
	    -ms-transform: translate(4px, 4px);
	        transform: translate(4px, 4px);
	-webkit-transition: all .3s;
	        transition: all .3s; 

	     -o-transition: all .3s;
}
.btn i {
	font-size: 2.4rem;
}

.btn--wh {
	color: #fff;
	border-radius: 10px 10px 10px 10px;
}
.btn--wh:after {
	background-color: #c2ccda;
	border-radius: 10px 10px 10px 10px;
}

.btn--bl {
	color: #fff;
	background-color: #324873d4;
	border-radius: 10px 10px 10px 10px;
}
.btn--bl:after {
	background-color: #c2ccda;
	border-radius: 10px 10px 10px 10px;
}

.btn--menu:before {
	position: absolute;
	top: 50%;
	right: 0;
	display: inline-block;
	width: 24px;
	height: 24px;
	content: "";
	background: url(../images/ico_menusvg) center center/contain;
	-webkit-transform: translate(-10px, -50%);
	    -ms-transform: translate(-10px, -50%);
	        transform: translate(-10px, -50%);
}

.btn--wh.btn--menu:before {
	background-image: url(../images/ico_me--nu_wh.svg);
}

@media screen and (min-width: 769px), only screen and (min-device-width: 769px) and (max-device-width: 1024px) and (orientation: landscape) {
	.btn:hover:after {
		-webkit-transform: translate(0, 0);
		    -ms-transform: translate(0, 0);
		        transform: translate(0, 0);
	}
}

/*----------------------------------------------------
	トップページ　ヘッダー
----------------------------------------------------*/
.mainHeader__top {
	position: relative;
	z-index: 0;
}
.mainHeader__top .wrap {
	position: relative;
	z-index: 10;
}
.mainHeader__top p {
	color: #fff;
	font-weight: bold;
	line-height: 1.25;
}
.mainHeader__top p span {
	display: inline-block;
}
.mainHeader__top .cm {
	margin-top: 20px;
}
.mainHeader__top .cm a {
	display: inline-block;
	padding: .25em .5em;
	color: #fff;
	font-weight: bold;
	line-height: 1;
	background-color: #000;
}
.mainHeader__top .cm i {
	position: relative;
	display: inline-block;
	text-align: center;
	border: 1px solid #fff;
}
.mainHeader__top .cm i:before {
	position: relative;
	top: 2px;
	left: 2px;
}
@media (min-width: 768px) {
	.mainHeader__top {
		height: 790px;
		background: url(../images/mv.jpg) center 0/cover no-repeat;
	}
	.mainHeader__top .wrap {
		padding-top: 80px;
	}
	.mainHeader__top p {
		font-size: 88px;
	}
	.mainHeader__top .cm a {
		font-size: 42px;
	}
	.mainHeader__top .cm i {
		width: 50px;
		height: 50px;
		border-radius: 25px;
	}
}
@media (max-width: 767px) {
	.mainHeader__top {
		height: 670px;
		background: url(../images/top.jpg) center 0/cover no-repeat;
	}
	.mainHeader__top .wrap {
		padding-top: 80px;
	}
	.mainHeader__top p {
		font-size: 32px;
	}
	.mainHeader__top .cm a {
		font-size: 24px;
	}
	.mainHeader__top .cm i {
		width: 28px;
		height: 28px;
		border-radius: 14px;
	}
}

.youtube-wrap {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	pointer-events: none;
}
@media (min-width: 768px) {
	.youtube-wrap {
		height: 790px;
	}
}
@media (max-width: 767px) {
	.youtube-wrap {
		height: 620px;
	}
}

#youtube {
	position: absolute;
	top: 0;
	left: 50%;
	width: calc(100% * 3.2);
	height: 100%;
	-webkit-transform: translateX(-50%);
	    -ms-transform: translateX(-50%);
	        transform: translateX(-50%);
}

/*----------------------------------------------------
	トップページ　ミッション
----------------------------------------------------*/
.topMission {
	padding: 20px 0 32px;
}
.topMission .item-body {
	margin-bottom: 24px;
}
.topMission .item-picture {
	margin-bottom: 24px;
}
.topMission .subtitle {
	font-weight: bold;
}
.topMission .more a {
	width: 232px;
}
@media (min-width: 768px) {
	.topMission .wrap {
		-webkit-align-items: center;
		        align-items: center;
		-ms-flex-align: center;
		-ms-flex-pack: justify;
		-webkit-justify-content: space-between;
		        justify-content: space-between;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display:         flex;
		padding: 40px 0 24px; 

		-webkit-box-align: center;
		-webkit-box-pack: justify;
	}
	.topMission .item-picture {
		width: 48.5%;
	}
	.topMission .item-body {
		width: 48.5%;
	}
	.topMission .subtitle {
		font-size: 21px;
		margin-bottom: 20px;
	}
	.topMission .item-desc {
		font-size: 15px;
		line-height: 2;
	}
}
@media (max-width: 767px) {
	.topMission .subtitle {
		margin: 12px 0 16px;
		font-size: 20px;
	}
}

/*----------------------------------------------------
	トップページ　制作事例
----------------------------------------------------*/
.topWork {
	position: relative;
	z-index: 0; 
	padding: 32px 0 32px;
	color: #fff;
	background-color: #ececec;
}
.topWork .item {
	padding: 16px 0 24px;
}
.topWork .item a {
	display: block;
	color: #fff;
}
.topWork .item-title {
	font-size: 15px;
	font-weight: bold;
	color: black;
	
}
.topWork .company {
	display: block;
	font-size: 10px;
	color: black;
}
.topWork .cateogory {
	display: block;
	margin-bottom: 12px;
	color: #888; 
	font-size: 10px;
}
.topWork .item-picture {
	margin-bottom: 12px;
}
.topWork .item-desc {
	font-size: 11px;
}
.topWork .more a {
	width: 232px;
	background-color: #324873d4;
	
		
}
@media (min-width: 768px) {
	.topWork .items {
		-ms-flex-pack: justify;
		-webkit-justify-content: space-between;
		        justify-content: space-between;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display:         flex;
		padding: 20px 0; 

		-webkit-box-pack: justify;
	}
	.topWork .item {
		width: 23%;
	}
}
@media (max-width: 767px) {
	.topWork .item-picture {
		padding: 0 28px;
		text-align: center;
	}
	.topWork .slick-arrow {
		display: block !important;
	}
	.topWork .slick-prev {
		left: 0;
	}
	.topWork .slick-next {
		right: 0;
	}
}

/*----------------------------------------------------
	トップページ　コンテンツ
----------------------------------------------------*/
.topContent {
	position: relative;
	z-index: 0;
}
.topContent .service {
	background: url(../images/giphy.gif) right bottom/cover no-repeat;
}

.topContent .service .subtitle {
	margin-bottom: .75em;
	font-weight: bold;
}
.topContent .service .item-header {
	position: relative;
	padding: 8px 12px;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	background-color: #000; 
	border-radius: 4px;
	cursor: pointer;
}
.topContent .service .item-header:after {
	position: absolute;
	top: 50%;
	right: 0;
	content: "\f13a";
	font-family: "Font Awesome 5 Free";
	font-weight: bold;
	-webkit-transform: translate(-12px, -50%);
	    -ms-transform: translate(-12px, -50%);
	        transform: translate(-12px, -50%); 
	-webkit-transition: all .3s;
	        transition: all .3s;

	     -o-transition: all .3s;
}
.topContent .service .item-header.close:after {
	-webkit-transform: translate(-12px, -50%) rotate(180deg);
	    -ms-transform: translate(-12px, -50%) rotate(180deg);
	        transform: translate(-12px, -50%) rotate(180deg);
}
.topContent .service .service-item:not(:last-child) {
	margin-bottom: 1em;
}
.topContent .service .service-item p {
	padding: 1em 0 1em;
}
@media (min-width: 768px) {
	.topContent {
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		        justify-content: center;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display:         flex;
		background: -webkit-gradient(linear, left top, right top, from(#fff), color-stop(50%, #fff), color-stop(50%, #0044a2), to(#0044a2));
		background: -o-linear-gradient(left, #fff 0%, #fff 50%, #fff 50%, #fff 100%);
		background:    linear-gradient(to right, #fff 0%, #fff 50%, #fff 50%, #fff 100%); 

		-webkit-box-pack: center;
	}
	.topContent .service {
		width: 50%;
		max-width: 640px;
		padding: 24px 40px 40px;
	}
	.topContent .service .ttl01 {
		margin-bottom: 16px;
	}
	.topContent .service .subtitle {
		font-size: 34px;
	}
	.topContent .service .lead {
		margin-bottom: 2.5em;
	}
	.topContent .service .service-item {
		max-width: 340px;
		margin: 0 auto;
	}
}
@media (max-width: 767px) {
	.topContent .service {
		padding: 24px 16px;
	}
	.topContent .service .ttl01 {
		margin-bottom: 8px;
	}
	.topContent .service .subtitle {
		font-size: 20px;
	}
	.topContent .service .lead {
		margin-bottom: 1.5em;
	}
}
.topContent .contents li {
	border-bottom: 5px solid #fff;
}
.topContent .contents li a {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display:         flex;
	padding: 12px 0;
	color: #000;
}
.topContent .contents .item-body {
	-webkit-flex: 1;
	    -ms-flex: 1;
	        flex: 1; 

	-webkit-box-flex: 1;
}
.topContent .contents .category {
	display: block;
	color: #9b9b9b;
	font-size: 10px;
}
.topContent .contents .date {
	display: block;
	font-size: 14px;
}
.topContent .contents .subject {
	display: block;
	font-size: 18px;
}
.topContent .contents .more a {
	width: 232px;
	color: white;
	background: #324873d4
}
@media (min-width: 768px) {
	.topContent .contents {
		width: 50%;
		max-width: 640px;
		padding: 24px 40px 40px;
	}
	.topContent .contents .ttl01 {
		margin-bottom: 16px;
	}
	.topContent .contents ul {
		padding: 32px 0 24px;
	}
	.topContent .contents .item-picture {
		width: 80px;
		margin-right: 16px;
	}
}
@media (max-width: 767px) {
	.topContent .contents {
		padding: 24px 16px;
		background-color: #ffffff;
	}
	.topContent .contents ul {
		padding: 16px 0;
	}
	.topContent .contents .item-picture {
		width: 84px;
		margin-right: 12px;
	}
	.topContent .contents .date {
		font-size: 10px;
		color: black;
		
	}
	.topContent .contents .subject {
		font-size: 15px;
		color: black;
		
	}
}

/*----------------------------------------------------
	Cynosについて
----------------------------------------------------*/
.mainHeader__about {
	padding-bottom: 32px;
	margin-bottom: 24px; 
	color: #fff;
	background-color: #000;
	background: url(../images/about.gif) right bottom/cover no-repeat;
}
.mainHeader__about .wrap {
	padding: 24px 0;
}
@media (min-width: 768px) {
	.mainHeader__about .wrap {
		-webkit-align-items: center;
		        align-items: center; 
		-ms-flex-align: center;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display:         flex;

		-webkit-box-align: center;
	}
	.mainHeader__about .title {
		width: 48%;
		font-size: 4.3rem;
	}
	.mainHeader__about .lead {
		width: 48%;
		font-size: 1.5rem;
	}
}
@media (max-width: 767px) {
	.mainHeader__about .title {
		margin-bottom: 12px;
		font-size: 2.8rem;
	}
}

.aboutContent .items {
	margin-bottom: 32px;
}
.aboutContent .items .ttl01 span {
	-ms-flex-pack: start;
	-webkit-justify-content: flex-start;
	        justify-content: flex-start; 

	-webkit-box-pack: start;
}
.aboutContent .items .item-title {
	padding: 10px 0 8px;
	font-size: 2.2rem;
	font-weight: bold;
}
.aboutContent .items .item-desc {
	margin-bottom: 10px;
}

.aboutContent .members .item {
	z-index: 0; 
	padding: 20px 16px;
	color: #fff;
	background-color: #0044a2;
}

.aboutContent .members .ttl01 span {
	-ms-flex-pack: start;
	-webkit-justify-content: flex-start;
	        justify-content: flex-start; 

	-webkit-box-pack: start;
}

.aboutContent .members .item-job {
	display: block;
	margin-bottom: 2px;
	margin-top: 8px;
}

.aboutContent .members .item-name {
	display: block;
	margin-bottom: 1px;
	font-size: 1.9rem;
}

.aboutContent .members .item-category {
	display: block;
	margin-bottom: 10px;
	color: #95c1ff;
}

.aboutContent .members .item-sns {
	-webkit-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	        flex-wrap: wrap; 
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display:         flex;
}

.aboutContent .members li {
	-webkit-align-items: center;
	        align-items: center;
	-ms-flex-align: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	        justify-content: center;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display:         flex;
	height: 32px;
	min-width: 91px;
	margin: 0 7px 8px 0;
	color: #1d2088;
	font-weight: bold;
	text-align: center;
	background-color: #fff;
	border-radius: 6px; 

	-webkit-box-align: center;
	-webkit-box-pack: center;
}

.aboutContent .members .picture {
	margin: 0 -16px;
}

.aboutContent .members .item-message {
	padding: 12px 0;
}

.aboutContent .members .item-more {
	max-width: 200px;
	margin: 0 auto; 
	text-align: center;
}

@media (min-width: 768px) {
	.aboutContent .items {
		-ms-flex-pack: justify;
		-webkit-justify-content: space-between;
		        justify-content: space-between; 
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display:         flex;

		-webkit-box-pack: justify;
	}
	.aboutContent .items .item {
		width: 32%;
	}
	.aboutContent .members {
		-ms-flex-pack: justify;
		-webkit-justify-content: space-between;
		        justify-content: space-between; 
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display:         flex;

		-webkit-box-pack: justify;
	}
	.aboutContent .members .item {
		width: 32%;
	}
}

@media (max-width: 767px) {
	.aboutContent .items .item {
		margin-bottom: 24px;
	}
	.aboutContent .members {
		margin: 0 -16px;
	}
	.aboutContent .members .item {
		margin-bottom: 24px;
	}
}

/*----------------------------------------------------
	ABOUT プロフィール追加
----------------------------------------------------*/
.about-members {
	-ms-flex-pack: justify;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display:         flex;

	-webkit-box-pack: justify;
	padding-top: 20px;
}
.about-members .item-body {
	margin-top: -1.5em;
}
.about-members .item-job {
	margin-bottom: 4px;
}
.about-members .item-job .en {
	display: -webkit-inline-box;
	display: -webkit-inline-flex;
	display: -ms-inline-flexbox;
	display:         inline-flex;
	padding: .5em .5em;
	margin-bottom: 8px;
	color: #fff;
	font-size: 1.1em;
	background-color: #0b3970;
}
.about-members .item-job .ja {
	display: block;
	font-size: 1.1em;
}
.about-members .item-name {
	margin-bottom: 8px;
}
.about-members .item-name .ja {
	display: block;
	font-size: 1.6em;
	font-weight: bold;
}
.about-members .item-name .en {
	display: block;
	color: #0b3970;
	font-size: 1.1em;
}
.about-members .item-category {
	margin-bottom: 8px;
	color: #727272;
	font-size: 1.1em;
}
.about-members .item-more a {
	display: block;
	padding: .25em 0;
	color: #0b3970;
	font-size: 1em;
	text-align: center;
	background-color: #fff;
	border: 1px solid #0b3970;
}
.about-members .item-more a:hover {
	color: #fff;
	background-color: #0b3970;
}
@media (min-width: 768px) {
	.about-members:after {
		display: block;
		width: 23%;
		content: "";
	}
	.about-members:before {
		-ms-flex-order: 1;
		-webkit-order: 1;
		order: 1;
		display: block;
		width: 23%;
		content: "";

		-webkit-box-ordinal-group: 2;
	}
	.about-members .item {
		width: 23%;
		margin-bottom: 40px;
	}
	.about-members .item-body {
		padding: 0 10px;
	}
}
@media (max-width: 767px) {
	.about-members {
		font-size: 75%;
		padding-top: 20px;
	}
	.about-members:after {
		display: block;
		width: 48%;
		content: "";
	}
	.about-members:before {
		-ms-flex-order: 1;
		-webkit-order: 1;
		order: 1;
		display: block;
		width: 48%;
		content: "";

		-webkit-box-ordinal-group: 2;
	}
	.about-members .item {
		width: 48%;
		margin-bottom: 30px;
	}
	.about-members .item-body {
		padding: 0 6px;
	}
}

/*----------------------------------------------------
	コンテンツ
----------------------------------------------------*/
.mainHeader__content {
	padding-bottom: 32px;
	margin-bottom: 24px; 
	color: #fff;
	text-align: center;
	background-color: #000;
}
.mainHeader__content .title {
	font-size: 2.3rem; 
	font-weight: bold;
}

.contentList .content {
	margin-bottom: 32px;
}
.contentList .content li {
	border-bottom: 1px solid #ddd;
}
.contentList .content li a {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display:         flex;
	padding: 12px 0;
}
.contentList .content .item-body {
	-webkit-flex: 1;
	    -ms-flex: 1;
	        flex: 1; 

	-webkit-box-flex: 1;
}
.contentList .content .category {
	display: block;
	color: #9b9b9b;
	font-size: 13px;
}
.contentList .content .date {
	display: block;
	font-size: 14px;
}
.contentList .content .subject {
	display: block;
	font-size: 21px;
}

@media (min-width: 768px) {
	.contentList .content .ttl01 {
		margin-bottom: 16px;
	}
	.contentList .content ul {
		padding: 32px 0 24px;
	}
	.contentList .content .item-picture {
		width: 160px;
		margin-right: 16px;
	}
}

@media (max-width: 767px) {
	.contentList .content ul {
		padding: 16px 0;
	}
	.contentList .content .item-picture {
		width: 60px;
		margin-right: 12px;
	}
	.contentList .content .date {
		font-size: 12px;
	}
	.contentList .content .subject {
		font-size: 16px;
	}
}

/*----------------------------------------------------
	制作事例
----------------------------------------------------*/
.mainHeader__work {
	padding-bottom: 32px;
	color: #fff;
	text-align: center;
	background-color: #000;
}
.mainHeader__work .wrap {
	margin: 12px 0 32px;
}
.mainHeader__work a {
	-webkit-align-items: center;
	        align-items: center;
	-ms-flex-align: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	        justify-content: center;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display:         flex;
	padding: .25em 1em;
	color: #fff;
	border: 1px solid #0062ff; 

	-webkit-box-align: center;
	-webkit-box-pack: center;
}
.mainHeader__work a:hover,
.mainHeader__work a.current {
	background-color: #0062ff;
}
.mainHeader__work .title {
	margin-bottom: 32px;
	text-align: center;
}
.mainHeader__work .title span {
	display: inline-block;
	padding: 8px 1em;
	color: #fff;
	background-color: #0062ff;
	border: 1px solid #0062ff;
	border-radius: 20px;
}
.mainHeader__work .category {
	-ms-flex-pack: justify;
	-webkit-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	        flex-wrap: wrap; 
	-webkit-justify-content: space-between;
	        justify-content: space-between;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display:         flex;

	-webkit-box-pack: justify;
}
.mainHeader__work .category a {
	width: 49%;
}
.mainHeader__work .desc {
	text-align: left;
}
@media (min-width: 768px) {
	.mainHeader__work .wrap {
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		        justify-content: center; 
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display:         flex;

		-webkit-box-pack: center;
	}
	.mainHeader__work .all {
		width: 49%;
		margin-right: 2%;
	}
	.mainHeader__work .all a {
		width: 100%;
		height: 100%;
		font-size: 26px; 
		border-radius: 54px;
	}
	.mainHeader__work .category {
		width: 49%;
		margin-bottom: -12px;
	}
	.mainHeader__work .category a {
		margin-bottom: 12px;
		font-size: 20px; 
		border-radius: 22px;
	}
}
@media (max-width: 767px) {
	.mainHeader__work a {
		margin-bottom: 12px;
		border-radius: 1em;
	}
	.mainHeader__work .work_info {
		-webkit-align-items: center;
		        align-items: center; 
		-ms-flex-align: center;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display:         flex;

		-webkit-box-align: center;
	}
	.mainHeader__work .work_info .title {
		margin-right: 1em;
	}
	.mainHeader__work .work_info .desc {
		-webkit-flex: 1;
		    -ms-flex: 1;
		        flex: 1;
		font-size: 1.4rem; 

		-webkit-box-flex: 1;
	}
	.mainHeader__work .category {
		margin-bottom: -12px;
	}
}

.workContent {
	padding-bottom: 40px; 
	color: #fff;
	background-color: #000;
}
.workContent .items {
	-ms-flex-pack: justify;
	-webkit-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	        flex-wrap: wrap;
	-webkit-justify-content: space-between;
	        justify-content: space-between; 
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display:         flex;

	-webkit-box-pack: justify;
}
.workContent .item {
	margin-bottom: 24px;
}
.workContent a {
	display: block;
	color: #fff;
}
.workContent .item-picture {
	margin-bottom: 8px;
}
.workContent .item-title {
	margin-bottom: 8px;
	color: #008aff;
	font-size: 1.3rem; 
	font-weight: bold;
}
.workContent .item-lead {
	margin-bottom: 8px;
	font-size: 1.3rem;
}
.workContent .item-user {
	margin-bottom: 8px;
	font-size: 1.2rem;
}
@media (min-width: 768px) {
	.workContent .items {
		padding: 32px 0;
	}
	.workContent .items:after {
		display: block;
		width: 18%; 
		content: "";
	}
	.workContent .items:before {
		-ms-flex-order: 1;
		-webkit-order: 1;
		        order: 1; 
		display: block;
		width: 18%;
		content: "";

		-webkit-box-ordinal-group: 2;
	}
	.workContent .item {
		width: 18%;
	}
}
@media (max-width: 767px) {
	.workContent .item {
		width: 48%;
	}
}

/*----------------------------------------------------
	ページネーション
----------------------------------------------------*/
.paginate ul {
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	        justify-content: center; 
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display:         flex;

	-webkit-box-pack: center;
}

.paginate li {
	margin: 0 12px;
}

.paginate a {
	-webkit-align-items: center;
	        align-items: center;
	-ms-flex-align: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	        justify-content: center;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display:         flex;
	width: 46px;
	height: 46px;
	color: #fff;
	background-color: #008aff;
	border: 1px solid #008aff;
	border-radius: 24px; 

	-webkit-box-align: center;
	-webkit-box-pack: center;
}

.paginate li.current a,
.paginate a:hover {
	color: #008aff;
	background-color: #fff;
}

@media (max-width: 767px) {
	.paginate li {
		margin: 0 4px;
	}
}

/*----------------------------------------------------
	作品の完成までの流れ
----------------------------------------------------*/
.mainHeader__flow {
	margin-bottom: 24px; 
	color: #fff;
	text-align: center;
	background-color: #1d2088;
}
.mainHeader__flow .title {
	margin-bottom: 24px;
	font-size: 2.3rem; 
	font-weight: bold;
}
.mainHeader__flow .lead {
	margin-bottom: 32px;
}
.mainHeader__flow .nav {
	padding-bottom: 28px;
}
.mainHeader__flow .nav a {
	-webkit-align-items: center;
	        align-items: center;
	-ms-flex-align: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	        justify-content: center;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display:         flex;
	height: 48px;
	color: #fff;
	font-size: 1.6rem;
	text-align: center;
	border: 2px solid #fff; 
	border-radius: 24px;

	-webkit-box-align: center;
	-webkit-box-pack: center;
}
.mainHeader__flow .nav a:hover,
.mainHeader__flow .nav a.current {
	color: #1d2088;
	background-color: #fff;
}
@media (min-width: 768px) {
	.mainHeader__flow .nav {
		-ms-flex-pack: justify;
		-webkit-justify-content: space-between;
		        justify-content: space-between; 
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display:         flex;
		max-width: 720px;

		-webkit-box-pack: justify;
	}
	.mainHeader__flow .nav a {
		width: 48%;
	}
}
@media (max-width: 767px) {
	.mainHeader__flow .nav a:not(:last-child) {
		margin-bottom: 12px;
	}
}

.flowContent .item {
	margin-bottom: 2.4rem;
}

.flowContent .item-title {
	-webkit-align-items: center;
	        align-items: center;
	-ms-flex-align: center;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display:         flex;
	padding: 0 0 .375em;
	margin-bottom: .375em;
	color: #1d2088;
	font-size: 2rem;
	font-weight: bold;
	border-bottom: 1px solid #1d2088; 

	-webkit-box-align: center;
}
.flowContent .item-title .no {
	position: relative;
	display: inline-block;
	min-width: 30px;
	padding: .2rem 0;
	margin-right: .6em;
	color: #fff;
	text-align: center;
	background-color: #1d2088;
	border-radius: 6px;
}
.flowContent .item-title .no:after {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	display: block;
	width: 100%;
	height: 100%;
	content: "";
	border: 1px solid #1d2088;
	border-radius: 6px;
	-webkit-transform: translate(2px, 2px);
	    -ms-transform: translate(2px, 2px);
	        transform: translate(2px, 2px);
}

.flowContent .item-body {
	padding: .5em .5em;
}

@media (min-width: 768px) {
	.flowContent .items {
		-ms-flex-pack: justify;
		-webkit-flex-wrap: wrap;
		    -ms-flex-wrap: wrap;
		        flex-wrap: wrap; 
		-webkit-justify-content: space-between;
		        justify-content: space-between;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display:         flex;

		-webkit-box-pack: justify;
	}
	.flowContent .item {
		width: 32%;
	}
}

/*----------------------------------------------------
	価格
----------------------------------------------------*/
.mainHeader__price {
	padding-bottom: 32px; 
	color: #fff;
	background-image:url(../images/price_bg.jpg);
	background-size:cover
}
@media (min-width: 768px) {
	.mainHeader__price .wrap {
		-webkit-align-items: center;
		        align-items: center;
		-ms-flex-align: center;
		-ms-flex-pack: justify;
		-webkit-justify-content: space-between;
		        justify-content: space-between; 
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display:         flex;

		-webkit-box-align: center;
		-webkit-box-pack: justify;
	}
	.mainHeader__price .item-body {
		width: 48%;
	}
	.mainHeader__price .item-picture {
		width: 48%;
	}
	.mainHeader__price .title {
		margin-bottom: 12px;
		font-size: 3rem;
		font-weight: bold;
		line-height: 1.25;
	}
}
@media (max-width: 767px) {
	.mainHeader__price .title {
		margin-bottom: 12px;
		margin-top:30px;
		font-size: 2.8rem;
	}
	.mainHeader__price .lead {
		margin-bottom: 24px;
	}
}

.priceContent {
	color: #fff;
	background-color: #fff;
}
.priceContent .ttl01 {
	padding: 24px 0 12px;
}
.priceContent .items {
	padding: 16px 0;
}
.priceContent .item {
	margin-bottom: 24px;
	background-color: #fff; 
	border-radius: 10px;
}
.priceContent .item-header {
	position: relative;
	padding: 8px 12px;
	background-color: #1e3561;
	border-radius: 0px;
	cursor: pointer;
	border-left:10px solid #989898;
}
.priceContent .item-header:after {
	position: absolute;
	top: 50%;
	right: 0;
	content: "\f13a";
	font-family: "Font Awesome 5 Free";
	font-weight: bold;
	-webkit-transform: translate(-12px, -50%);
	    -ms-transform: translate(-12px, -50%);
	        transform: translate(-12px, -50%); 
	-webkit-transition: all .3s;
	        transition: all .3s;

	     -o-transition: all .3s;
}
.priceContent .item-header.close:after {
	-webkit-transform: translate(-12px, -50%) rotate(180deg);
	    -ms-transform: translate(-12px, -50%) rotate(180deg);
	        transform: translate(-12px, -50%) rotate(180deg);
}
.priceContent .item-title span {
	position: relative;
	margin-right: .4em; 
	font-size: 1.4rem;
}
.priceContent .item-price {
	display: block;
	padding-left: 1.7rem;
}
.priceContent .item-body {
	padding: 12px 16px;
	color: #000;
}
.priceContent .ex {
	padding: 16px 0;
	text-align: center;
}
@media (min-width: 768px) {
	.priceContent .items {
		-webkit-align-items: start;
		        align-items: start; 
		-ms-flex-align: start;
		-ms-flex-pack: justify;
		-webkit-flex-wrap: wrap;
		    -ms-flex-wrap: wrap;
		        flex-wrap: wrap;
		-webkit-justify-content: space-between;
		        justify-content: space-between;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display:         flex;

		-webkit-box-align: start;
		-webkit-box-pack: justify;
	}
	.priceContent .items:after {
		display: block;
		width: 31%; 
		content: "";
	}
	.priceContent .item {
		width: 31%;
	}
}

.priceMessage {
	padding: 24px 0;
	color: #fff;
	background-color: #000;
}
.priceMessage .title {
	margin-bottom: .25em;
	font-size: 3rem;
	font-weight: bold; 
	text-align: center;
}
.priceMessage p {
	text-align: center;
}
@media (max-width: 767px) {
	.priceMessage .title {
		margin-bottom: .25em;
		font-size: 2.4rem;
	}
}

/*----------------------------------------------------
	xxx
----------------------------------------------------*/
/*----------------------------------------------------
	問い合わせ
----------------------------------------------------*/
.main_contacts a {
	position: relative; 
	-webkit-align-items: center;
	        align-items: center;
	-ms-flex-align: center;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display:         flex;
	padding: .4rem 3.2rem;
	margin-top: 1.6rem;
	color: #fff;

	-webkit-box-align: center;
}
.main_contacts a:after {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	display: block;
	width: 100%;
	height: 100%;
	content: "";
	border: 1px solid #1d2088;
	-webkit-transform: translate(2px, 2px);
	    -ms-transform: translate(2px, 2px);
	        transform: translate(2px, 2px);
}
.main_contacts a i {
	font-size: 2.4rem;
}

.main_contacts a:nth-child(1) {
	background-color: #0d4782;
}
.main_contacts a:nth-child(1):after {
	border: 1px solid #0d4782;
}

.main_contacts a:nth-child(2) {
	background-color: #04203c;
}

.main_contacts a:nth-child(3) {
	background-color: #0d4782;
}
.main_contacts a:nth-child(3):after {
	border: 1px solid #0d4782;
}

.main_contacts i {
	margin-right: .8rem;
}

/*----------------------------------------------------
	汎用クラス
----------------------------------------------------*/
.fadeIn {
	display: none;
}
.fadeIn.show {
	-webkit-animation: fadeIn .6s linear;
	        animation: fadeIn .6s linear;
}

.crop {
	position: relative;
	display: block;
	padding: 100% 0 0;
	overflow: hidden;
}
.crop img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	-webkit-transform: translate(-50%, -50%);
	    -ms-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
}

.flex {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display:         flex;
}

.flex--justify {
	-ms-flex-pack: justify;
	-webkit-justify-content: space-between;
	        justify-content: space-between; 

	-webkit-box-pack: justify;
}

.flex--wrap {
	-webkit-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	        flex-wrap: wrap;
}

.flex--center {
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	        justify-content: center; 

	-webkit-box-pack: center;
}

.flex--middle {
	-webkit-align-items: center;
	        align-items: center; 
	-ms-flex-align: center;

	-webkit-box-align: center;
}

.row-middle {
	-webkit-align-items: center;
	        align-items: center; 
	-ms-flex-align: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	        justify-content: center;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display:         flex;

	-webkit-box-align: center;
	-webkit-box-pack: center;
}

.bold,
.strong {
	font-weight: bold;
}

.center {
	text-align: center;
}

.mt-1 {
	margin-top: 1rem;
}

.mt-2 {
	margin-top: 2rem;
}

.mb-1 {
	margin-bottom: 1rem;
}

.mb-2 {
	margin-bottom: 2rem;
}

.ml-1 {
	margin-left: 1rem;
}

.ml-2 {
	margin-left: 2rem;
}

.mr-1 {
	margin-right: 1rem;
}

.mr-2 {
	margin-right: 2rem;
}

.mx-1 {
	margin-right: 1rem; 
	margin-left: 1rem;
}

.mx-2 {
	margin-right: 2rem; 
	margin-left: 2rem;
}

.my-1 {
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.my-2 {
	margin-top: 2rem;
	margin-bottom: 2rem;
}

.pt-1 {
	padding-top: 1rem;
}

.pt-2 {
	padding-top: 2rem;
}

.pb-1 {
	padding-bottom: 1rem;
}

.pb-2 {
	padding-bottom: 2rem;
}

.pl-1 {
	padding-left: 1rem;
}

.pl-2 {
	padding-left: 2rem;
}

.pr-1 {
	padding-right: 1rem;
}

.pr-2 {
	padding-right: 2rem;
}

.px-1 {
	padding-right: 1rem; 
	padding-left: 1rem;
}

.px-2 {
	padding-right: 2rem; 
	padding-left: 2rem;
}

.py-1 {
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.py-2 {
	padding-top: 2rem;
	padding-bottom: 2rem;
}

.fz-12 {
	font-size: .75em;
}

.fz-14 {
	font-size: .875em;
}

.fz-16 {
	font-size: 1em;
}

.fz-18 {
	font-size: 1.125em;
}

.fz-20 {
	font-size: 1.25em;
}

.fz-22 {
	font-size: 1.375em;
}

.fz-24 {
	font-size: 1.1em;
}

i.fas,
i.fab {
	line-height: inherit;
}

.youtube_wrap {
	max-width: 700px;
	margin: 0 auto;
}
.youtube_wrap .inner {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;
}
.youtube_wrap .inner iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

@media screen and (max-width: 640px){
.none {display:none}
}

.square_btn{
    display: inline-block;
    position: relative;
    padding: 0.35em 1em;
    background: #668ad8;/*ボタン色*/
    color: #FFF;
    text-decoration: none;
}

.square_btn:before{
    content: "";
    position: absolute;
    top: -16px;
    left: 0;
    width: -webkit-calc(100% - 16px);
    width: calc(100% - 16px);
    height: 0;
    border: solid 8px transparent;
    border-bottom-color: #8eacec;/*ボタン色より明るめの色に*/
}

.square_btn:active{/*押したとき*/
    padding: 0.32em 0.9em;
    -ms-transform: translateY(-2px);
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
}

.square_btn:active:before{ 
    width: -webkit-calc(100% - 12px);
    width: calc(100% - 12px);
}

.square_btn:active:before{
   top:-12px;
   border-width: 6px;
}


.video{
  position:relative;
  width:100%;
  padding-top:56.25%;
}
.video iframe{
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
}