@charset "utf-8";
/* CSS Document */

.body.marketing {
	min-width: 1220px;
}

.content {
	background: #fff;
}

.content h2 {
	margin-top: 0px;
    padding-top: 80px;
}

.content h3 {
    background: transparent;
    font-style: normal;
    text-align: center;
	margin: 20px 0 0;
    line-height: 1.8em;
	font-weight: bold;
	font-size: 28px;
}

/* --- service icon ----------------------------*/
.service-area-other .list a,
.service-area-other .list a:link,
.service-area-other .list a:hover,
.service-area-other .list a:visited,
.service-area-other .list a:active {
	margin: 0;
	width: 100%;
	text-decoration: none;
	color: #333;
}
.service-area-other .list {
    font-size: 81.3%;
    text-align: center;
}

.service-area-other .list ul {
    display: inline-block;
}

.service-area-other .list li {
    float: left;
    line-height: 1.85;
    width: 170px;
    margin: 0;
    padding: 0;
}

.service-area-other .list li::before {
	content: none;
}

.service-area-other .list li img {
    background: #0ba2c7;
    border-radius: 60px;
    display: block;
    position: relative;
    margin: 0 auto 10px;
}

.service-area-other .list li h3 {
	font-size: 13px;
	font-weight: normal;
}

.service-area-other .list .stay a img,
.service-area-other .list a:hover img {
	transition: .2s;
    background: #eee;
	
}

.service-area-other .list a:hover img {
	opacity: 0.7;
}

.narrow .service-area-other h2{
    display: none;
}

section.narrow {
	width: 100%;
	background: #fafafa;
	padding-bottom: 100px;
}


/* --- local navi ------------------------------*/

.service-navigation {
	margin-top: 0;
	width: 100%;
}

.service-navigation .list {
	display: -ms-flexbox; /* IE10 */
	display: -webkit-box; /* Android4.3以下、Safari3.1〜6.0 */
	display: -webkit-flex; /* Safari6.1以降 */
	display: flex;
	-webkit-justify-content: center;  /* Safari etc. */
	-ms-justify-content: center;  /* IE10        */
	justify-content: center;
	-webkit-flex-wrap: wrap;  /* Safari etc. */
	-ms-flex-wrap: wrap;  /* IE          */
	flex-wrap: wrap;  /* = flex-direction:row;flex-wrap:wrap; */
	margin: 0;
}

.service-navigation .list li {
	width: 14.284%;
	display:table;
	list-style: none;
	margin: 0;
    border-right: 1px solid #fff;
	background: #eeeeee;
	box-sizing: border-box;
}

.service-navigation .list li:last-child {
	border: none;
}

.service-navigation .list li::before{
  display:none;
}

.service-navigation .list li a {
	color: #999999;
	font-size: 14px;
	height: 60px;
	width: 100%;
	margin-bottom: 0;
  	display:table-cell;
  	vertical-align:middle;
	text-align: center;
}

.service-navigation .list a {
	color: #999999;
	line-height: 1.4em;
}

.service-navigation .list li a::after {
	content: none;
	line-height: 1.4em;
}

.service-navigation .list a,
.service-navigation .list a:link,
.service-navigation .list a:hover,
.service-navigation .list a:visited,
.service-navigation .list a:active {
  text-decoration:none;
	line-height: 1.4em;
}

.service-navigation .list li.stay,
.service-navigation .list li:hover {
	background: #0ba2c7;
	line-height: 1.4em;
	transition: .2s;
}

.service-navigation .list li.stay a,
.service-navigation .list li:hover a {
	color: #fff;
	line-height: 1.4em;
}

.service-area-other.top {
	margin-bottom: 50px;
}

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

.content .inner {
	width: 1000px;
	padding-top: 95px;
}


.content .copy{
    font-size: 41px;
    text-align: center;
	line-height: 1.3em;
	margin-top: 30px;
    padding: 0 0 10px;
	font-weight: bold;
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
}

.point_01 {
	margin-top: 235px;
}

.point_01,
.point_02,
.point_03 {
	position: relative;
}

.point_01,
.point_02 {
    padding-bottom: 250px;
}

.point_03 {
	padding-bottom: 160px;
}

.point_01,
.point_03 {
	background: #eff9f9;
}

.point_01 .copy,
.point_02 .copy,
.point_03 .copy {
    padding-top: 165px;
    position: absolute;
    right: 0;
    left: 0;
    margin: auto;
    top: -140px;
    padding-bottom: 10px;
}

.point_01 .copy {
    background: url(../images/bg_service_point01.png) no-repeat 46% 0;
}

.point_02 .copy {
    background: url(../images/bg_service_point02.png) no-repeat 46% 0;
}

.point_03 .copy {
    background: url(../images/bg_service_point03.png) no-repeat 46% 0;
}

.point_01 .sub,
.point_02 .sub,
.point_03 .sub {
	text-align: center;
}

.point_01 .sub,
.point_03 .sub {
	color: #0ba2c7;
}

.point_02 {
	background: #f5fbfa;
}

.point_02 .sub {
	color: #66c3ae;
}

.flex-box {
	display: -ms-flexbox; /* IE10 */
	display: -webkit-box; /* Android4.3以下、Safari3.1〜6.0 */
	display: -webkit-flex; /* Safari6.1以降 */
	display: flex;
	-webkit-justify-content: space-between;  /* Safari etc. */
	-ms-justify-content: space-between;  /* IE10        */
	justify-content: space-between;
	-webkit-flex-wrap: wrap;  /* Safari etc. */
	-ms-flex-wrap: wrap;  /* IE          */
	flex-wrap: wrap;  /* = flex-direction:row;flex-wrap:wrap; */
    margin-top: 10px;
}

.flex-box img {
    margin-top: 30px;
}

.flex-box .img {
	text-align: center;
}

.flex-box .txt,
.flex-box .img {
	width: 48%;
}

.flex-box .txt p {
	line-height: 2em;
}

.flex-box .txt .sub {
	text-align: left;
}

/* --- renewal ----------------------------*/

.renewal {
	padding: 100px 0;
}

.renewal .inner {
	width: 1200px;
	height: 500px;
	margin: auto;
	position: relative;
	padding-top: 0;
}

.renewal h2 {
	padding-top: 30px;
	font-size: 1.8em;
}

.renewal .menubox {
	position: absolute;
}

.renewal .menubox .content {
	position: relative;
}

.renewal .menubox ul {
	margin-left: 190px;
	margin-top: 0;
	position: relative;
	z-index: 2;
}

.renewal .menubox ul li {
	border-radius: 30px;
	padding: 12px 0;
	width: 203px;
	text-align: center;
	margin-bottom: 10px;
    box-sizing: border-box;
}

.renewal .menubox ul li h4 {
	font-size: 14px;
	margin: 0;
	padding: 0;
	font-weight: normal;
}

.renewal .menubox ul li .small {
	font-size: 11px;
}

.renewal .menubox h3 {
	font-size: 30px;
	position: absolute;
	z-index: 1;
    box-sizing: border-box;
	margin: 0;
	line-height: 1;
}

.renewal .menubox h3 span {
    font-size: 14px;
    display: block;
    margin-top: 10px;
	font-family: 'Barlow', sans-serif;
	font-weight: 500;
}

.renewal .item01 {
    top: 60px;
    left: 0px;
	z-index: 6;
}

.renewal .item01 h3 {
	color: #0ba2c7;
    background: url(../website/images/bg_website_item01.png) no-repeat;
	width: 327px;
	height: 268px;
    top: -90px;
    padding-top: 90px;
    padding-right: 40px;
}

.renewal .item01 ul li{
	background: #c2e7f1;
}

.renewal .item02 {
	top: 245px;
	left: 145px;
	z-index: 5;
}

.renewal .item02 h3 {
	font-size: 30px;
	color: #66c3ae;
    background: url(../website/images/bg_website_item02.png) no-repeat;
	width: 358px;
	height: 219px;
    left: -8px;
	top: 40px;
    padding-top: 70px;
    padding-right: 70px;
}

.renewal .item02 ul li{
	background: #d8f0ea;
}

.renewal .item03 {
	top: 60px;
	right: 85px;
	z-index: 4;
}

.renewal .item03 h3 {
	font-size: 30px;
	color: #009ba9;
    background: url(../website/images/bg_website_item03.png) no-repeat;
	width: 341px;
	height: 207px;
    padding-top: 65px;
    padding-right: 70px;
}

.renewal .item03 ul {
	display: -ms-flexbox; /* IE10 */
	display: -webkit-box; /* Android4.3以下、Safari3.1〜6.0 */
	display: -webkit-flex; /* Safari6.1以降 */
	display: flex;
	-webkit-justify-content: space-between;  /* Safari etc. */
	-ms-justify-content: space-between;  /* IE10        */
	justify-content: space-between;
	-webkit-flex-wrap: wrap;  /* Safari etc. */
	-ms-flex-wrap: wrap;  /* IE          */
	flex-wrap: wrap;  /* = flex-direction:row;flex-wrap:wrap; */
	width: 420px;
}

.renewal .item03 ul li{
	background: #bfe6e9;
}


/* --- running ----------------------------*/

.running-contents {
	background: #eff9f9;
	margin-top: 45px;
}

.running-contents .inner {
	padding: 70px 0 230px;
}

.running-contents .item {
	display: -ms-flexbox; /* IE10 */
	display: -webkit-box; /* Android4.3以下、Safari3.1〜6.0 */
	display: -webkit-flex; /* Safari6.1以降 */
	display: flex;
	-webkit-justify-content: space-between;  /* Safari etc. */
	-ms-justify-content: space-between;  /* IE10        */
	justify-content: space-between;
	-webkit-flex-wrap: wrap;  /* Safari etc. */
	-ms-flex-wrap: wrap;  /* IE          */
	flex-wrap: wrap;  /* = flex-direction:row;flex-wrap:wrap; */
	position: relative;
}

.running-contents .list01,
.running-contents .list02 {
	position: relative;
}

.running-contents .list01 {
	width: 590px;
	margin: auto;
	margin-bottom: 70px;
}

.running-contents .list02 {
	width: 890px;
	margin: auto;
}

.running-contents .list01 h2 {
    position: absolute;
    left: -250px;
	top: -110px;
    background: url(../running/images/bg_running_content01.png) no-repeat;
    width: 331px;
    height: 270px;
    padding-top: 47px;
    padding-right: 100px;
    background-position: left 28px top;
}

.running-contents .list02 h2 {
    position: absolute;
    right: -165px;
    top: -180px;
    background: url(../running/images/bg_running_content02.png) no-repeat;
    width: 330px;
    height: 270px;
    padding-top: 32px;
}

.running-contents h2 {
	font-size: 40px;
	color: #0ba2c7;
	z-index: 9;
}

.running-contents h2 span {
	font-size: 14px;
	display: block;
	margin-top: 10px;
	font-family: 'Barlow', sans-serif;
	font-weight: 500;
}

.running-contents li {
	background: #fff;
	width: 290px;
	border-radius: 40px;
	z-index: 99;
	position: relative;
	text-align: center;
	margin-bottom: 10px;
	padding: 6px 0;
}

.running-contents li h3 {
	font-size: 14px;
	font-weight: normal;
	margin: 0;
}

.case_01,
.case_02,
.case_03 {
	position: relative;
}

.case_01 p,
.case_02 p,
.case_03 p {
	margin-top: 40px;
}

.case_01 p span,
.case_02 p span,
.case_03 p span {
	padding: 3px 7px;
	margin-bottom: 5px;
	display: inline-block;
	border-radius: 5px;
	color: #fff;
}

.case_01 p span{
	background: #A9DDD1;
}

.case_02 p span {
	background: #70C7CF;
}

.case_03 p span {
	background: #A7CEE4;
}

.case_01,
.case_02 {
	padding-bottom: 250px;
}

.case_02 {
	background: #f5fbfa;
}

.case_03 {
	padding-bottom: 145px;
}

.case_01 .copy,
.case_02 .copy,
.case_03 .copy {
    padding-top: 165px;
    position: absolute;
    right: 0;
    left: 0;
    margin: auto;
    top: -140px;
    padding-bottom: 10px;
}

.case_01 .copy {
    background: url(../running/images/bg_running_case01.png) no-repeat 46% 0;
}

.case_02 .copy {
    background: url(../running/images/bg_running_case02.png) no-repeat 46% 0;
}

.case_03 .copy {
    background: url(../running/images/bg_running_case03.png) no-repeat 46% 0;
}

.case_03 .catch {
	margin-top: 100px;
	font-weight: bold;
	text-align: center;
	font-size: 20px;
}


/* --- ec ----------------------------*/

.content .point_02.ec .inner {
    width: 1040px;
    padding-top: 95px;
    padding-left: 70px;
}

/* --- branding ----------------------------*/

.concept {
	padding: 0 0 200px
}

.concept .inner {
	padding-top: 0;
}

.concept h2 {
	color: #0ba2c7;
	font-size: 26px;
}

.concept .concept-step {
	display: -ms-flexbox; /* IE10 */
	display: -webkit-box; /* Android4.3以下、Safari3.1〜6.0 */
	display: -webkit-flex; /* Safari6.1以降 */
	display: flex;
	-webkit-justify-content: center;  /* Safari etc. */
	-ms-justify-content: center;  /* IE10        */
	justify-content: center;
	background-size: 100%;
	margin-top: 20px;
}

.concept .concept-step .item {
	width: 33%;
	text-align: center;
	padding: 27px;
	position: relative;
	background: #fff;
	border: 1px solid #0ba2c7;
	z-index: 0;
}

.concept .concept-step .item .step {
    display: inline-block;
	color: #fff;
    background: #0ba2c7;
    padding: 0 14px;
    border-radius: 7px;
	margin: 0;
	font-size: 14px;
	font-weight: bold;
	box-sizing: border-box;
}

.concept .concept-step .item:before {
	border-style: solid;
	border-width: 15px 0 15px 15px;
    border-color: transparent transparent transparent #fff;
    content: "";
    position: absolute;
    top: 48%;
    right: -15px;
    margin-top: -9px;
	display: block;
	width: 0px;
	height: 0px;
}

.concept .concept-step .item:after {
    border-style: solid;
    border-width: 16px 0 16px 16px;
    border-color: transparent transparent transparent #0ba2c7;
    content: "";
    position: absolute;
    top: 48%;
    right: -16px;
    margin-top: -10px;
	display: block;
	width: 0px;
	height: 0px;
	visibility: inherit;
}

.concept .concept-step .item.num1 {
	z-index: 9;
}

.concept .concept-step .item.num1:before {
	z-index: 8;
}

.concept .concept-step .item.num1:after {
	z-index: 7;
}

.concept .concept-step .item.num2 {
	z-index: 6;
	border-left: none;
    background: #e6f6f9;
}

.concept .concept-step .item.num2:before {
	z-index: 5;
	border-color: transparent transparent transparent #e6f6f9;
}

.concept .concept-step .item.num2:after {
	z-index: 4;
}

.concept .concept-step .item.num3 {
	z-index: 3;
	border-left: none;
	background: #ceecf4;
}

.concept .concept-step .item.num3:before,
.concept .concept-step .item.num3:after {
	display: none;
}

.concept .concept-step .item h3 {
    color: #0ba2c7;
    font-size: 20px;
	margin-top: 10px;
}

.concept .concept-step .item h4 {
    color: #0ba2c7;
    font-size: 14px;
	margin: 4px;
}

.blanding-point {
	background: #eff9f9;
	padding-bottom: 110px;
}

.blanding-point h2 {
    float: left;
    background: url(../images/bg_point.png) no-repeat 50% 0;
    background-position: left top;
    width: 275px;
    height: 130px;
    margin-left: -100px;
    margin-top: -146px;
    padding-left: 100px;
    padding-top: 145px;
	text-align: left;
	font-size: 36px;
}

.blanding-point .inner p {
    margin-top: 0;
}

.blanding-point .flex-box {
	clear: both;
}

.blanding-point .flex-box::after {
	content: none;
}

.blanding-bottom  {
    background: url(../branding/images/bg_branding_bottom.png), -moz-linear-gradient(left, #e6e5e3 50%, #dfdfdd);
    background: url(../branding/images/bg_branding_bottom.png), -webkit-linear-gradient(left, #e6e5e3 50%, #dfdfdd);
    background: url(../branding/images/bg_branding_bottom.png), linear-gradient(to right, #e6e5e3 50%, #dfdfdd);
	background-repeat: no-repeat;
	background-position: center top;
	height: 550px;
}




.blanding-bottom .inner {
	width: 1200px;
}

.blanding-bottom .inner .item {
	width: 410px;
	margin-left: auto;
}

.blanding-bottom .inner .item h2 {
	color: #0ba2c7;
	text-align: left;
	padding: 0;
	font-size: 40px;
}

/* --- contentmarketing ----------------------------*/

.contentmarketing-point {
	background: #eff9f9;
	margin-top: 170px;
	padding-bottom: 130px;
}

.contentmarketing-point h2 {
    background: url(../images/bg_point.png) no-repeat 50% 0;
    background-position: left top;
    margin-left: -100px;
    margin-top: -156px;
    padding-left: 100px;
    padding-top: 150px;
    text-align: left;
}

.contentmarketing-point p.catch {
	font-weight: bold;
	line-height: 2em;
	margin: 20px 0 0;
	font-size: 16px;
	text-align: left;
}

.contentmarketing-point .flex-box img {
	margin-top: 0;
}

.contentmarketing-case p {
	width: 800px;
	margin: auto;
}

.contentmarketing-case .trouble {
	margin-bottom: 50px;
}

.contentmarketing-case h2 {
	margin-bottom: 40px;
}

.contentmarketing-case .solution {
	margin-top: 70px;
}

.contentmarketing-case .solution h3 {
	color: #0ba2c7;
	margin: 0;
	padding: 0;
	font-size: 30px;
	line-height: 1.3;
}

.contentmarketing-case .solution img {
	margin: 40px 0;
}

.contentmarketing-flow {
	background: #eff9f9;
	margin-top: 160px;
}

.contentmarketing-flow h2 {
    background: url(../images/bg_flow.png) no-repeat 50% 0;
    background-position: left top;
    margin-left: -100px;
    margin-top: -146px;
    padding-left: 210px;
    padding-top: 100px;
    text-align: left;
}

.contentmarketing-flow .img {
	position: relative;
	width: 1220px;
	margin: -125px auto auto;
	text-align: center;
}

.contentmarketing-flow .img h3 {
	position: absolute;
	font-size: 18px;
    line-height: 1.4;
	color: #000;
}

.contentmarketing-flow .img h3:nth-child(2){
    top: 355px;
    left: 97px;
}

.contentmarketing-flow .img h3:nth-child(3){
    top: 510px;
    left: 254px;
}

.contentmarketing-flow .img h3:nth-child(4){
    top: 355px;
    left: 393px;
}

.contentmarketing-flow .img h3:nth-child(5){
    top: 525px;
    left: 595px;
}

.contentmarketing-flow .img h3:nth-child(6){
	font-size: 22px;
	text-align: left;
    top: 247px;
    right: 485px;
}

.contentmarketing-flow .img h3:nth-child(7){
	font-size: 22px;
    top: -25px;
    right: 270px;
}

.contentmarketing-flow .img h3:nth-child(8){
	font-size: 22px;
    top: 247px;
    right: -1px;
    text-align: right;
}

.contentmarketing-flow .img h3:nth-child(9){
	font-size: 22px;
    top: 518px;
    right: 232px;
}

.contentmarketing-flow .inner {
	padding-top: 70px
}

.contentmarketing-flow .catch {
	font-weight: bold;
	text-align: center;
	font-size: 20px;
	margin-top: 0;
	padding-bottom: 70px;
}

/* --- movie ----------------------------*/
.img {
	padding: 20px 0;
}
.txt {
	padding: 30px 0 20px 0;
}
.content.movie .inner {
	padding-top: 0;
}
.movie_center {
	text-align: center;
}


.movie--contents_b,
.movie--contents_w,
.movie--contents_g {
	padding: 20px 0 40px 0;
}
.movie--contents_b {
	background: #eff9f9;
}
.movie--contents_w {
	background: #fff;
}
.movie--contents_g {
	background: #F9F9F9;
}
.movie--contents_b .inner,
.movie--contents_w .inner,
.movie--contents_g .inner {
	padding: 0;
}
.movieTop--img {
	text-align: center;
	position: relative;
	height: 22px;
}
.img_movie_001 {
	padding: 0;
	position: absolute;
	top: -168px;
	right: 60px;
	width: 390px;
	display: none;
}

.movieTop {
	background-color: #fff;
	box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .2);
	width: 550px;
	position: relative;
	/*
	top: 30px;
	left: 65px;
	*/
	margin: 30px auto 0 auto;
}
.movieTop .playBtn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 77px !important;
}
.movieTop img {
	width: 100%;
}
.movieTop a:hover .playBtn img {
	visibility: hidden;
}
.movieTop a:hover .playBtn {
	background-color: transparent;
	background: url("../movie/images/img_movie_004_on.png") no-repeat;
}


.om {
	color: #0ba2c7;
}
.om .txt {
	font-weight: bold;
	text-align: center;
	font-size: 22px;
}
.om--flow {
	display: flex;
	justify-content: center;
	position: relative;
}
.img_movie_002_001 {
	position: absolute;
	left: 95px;
	top: -20px;
}
.om--list {
	margin: 0 !important;
	position: relative;
	left: 23px;
}
.om--list li {
	background-color: #fff;
	margin: 15px 0;
	padding: 8px 20px;
	display: flex;
	align-items: center;
}
.om--medium {
	width: 135px;
	font-weight: bold;
}
.om--text {
	width: 365px;
}
.om--flow2 {
	display: flex;
	align-items: center;
	margin: 0 auto;
	text-align: center;
	width: 660px;
	padding: 15px 0 0 0;
}
.arrow_r {
	display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 10px;
  border-top: 1px solid #0ba2c7;
  border-right: 1px solid #0ba2c7;
  transform: rotate(45deg);
}
.om--flow2text {
	width: 70px;
	height: 70px;
  overflow: hidden;
  position: relative;
  background:#0ba2c7;
	border-radius: 50%;
	margin: 0 auto;
}
.om--flow2text p {
	color: #fff;
	text-align: center;
	position: relative;
	top: 3px;
}
.om--flow2text:nth-child(3) p,
.om--flow2text:nth-child(5) p,
.om--flow2text:nth-child(7) p {
	top: 1px;
	line-height: 1;
}

.om--list li::before {
	content: "";
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    width: 10px;
    height: 2px;
    display: block;
    background-color: #0ba2c7;
    position: relative;
    top: 0px;
    right: 35px;
}

.om--media {
	position: relative;
}
.om--media > div::before {
	content: "";
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    width: 10px;
    height: 2px;
    display: block;
    background-color: #0ba2c7;
    position: relative;
    top: 15px;
    right: 15px;
}
.om--media > div::after {
	content: "";
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    width: 10px;
    height: 2px;
    display: block;
    background-color: #0ba2c7;
    position: relative;
    top: -15px;
		left: 68px;
		visibility: visible;
}
.om--media .tiktok::after,
.om--media .insta::after,
.om--media .null::after {
	content: none;
}
.om--media .null::before {
	content: none;
}
.om--media > div {
	width: 70px;
	font-size: 16px;
	font-weight: bold;
	border-left: 2px solid;
	border-right: 2px solid;
	padding: 0 18px;
}
.om--media .youtube {
	height: 180px;
}
.om--media .null  {
	height: 60px;
	border-left: 2px solid rgba(0, 0, 0, .0);
}

.movie--list {
	display: flex;
	justify-content: center;
	padding: 5px 0 20px 0;
	text-align: left;
}
.movie--list ul {
	padding: 0 20px;
}

.movie--choose {
	display: flex;
	justify-content: space-between;
	padding: 20px 0;
}
.movie--choose > div {
	text-align: center;
	padding: 0 4px;
	width: 200px;
	line-height: 1.5;
}
.movie--choose > div > div:first-of-type{
	padding: 10px 0 15px 0;
}
.movie--choose img {
	padding: 0 20px;
}

.subhead {
	color: #fff;
	background-color: #0ba2c7;
	display: block;
	padding: 5px 30px;
	margin: 15px auto 10px auto;
  width: fit-content;
}
@media all and (-ms-high-contrast: none) {
	.subhead {
		height: 20px;
	}	
}

h3.copy {
	font-size: 28px;
	font-weight: normal;
}


.caseArea {
	display: flex;
	justify-content: space-between;
	padding: 30px 0;
	text-align: left;
}
.movie {
	background-color: #fff;
	box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .2);
	position: relative;
}
.movie img {
	padding: 0 !important;
}
.movie a {
	text-decoration: none;
}
.movie--caption {
	padding: 10px;
}
.movie--movieName {
	font-size: 16px;
	font-weight: bold;
	position: relative;
	left: -5px;
	color: #0ba2c7;
}
.movie--txt {
	color: #333;
}
.movie .playBtn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 77px !important;
}
.movie .movie--thumbnail .playBtn {
	top: 39%;
}
.movie .playBtn img{
	width: 77px !important;
}
a:hover .movie .playBtn img {
	visibility: hidden;
}
a:hover .playBtn {
	background-color: transparent;
	background: url("../movie/images/img_movie_004_on.png") no-repeat;
}



.case {
	width: 340px;
	color: #0ba2c7;
	padding: 0 0 0 60px;
	font-size: 18px;
}
.case--title {
	font-weight: bold;
}
.case--company {
	width: 250px;
	background-color: #0ba2c7;
	color: #fff;
	padding: 35px 0 35px 10px;
}
.case--movieName {
	font-weight: bold;
	padding: 10px 0 0 0;
	position: relative;
  left: -10px;
}
.case--movieName .line2 {
	position: relative;
	left: 10px;
	padding: 0;
}
.case--txt {
	color: #333;
	font-size: 16px;
}

.caseImage {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.caseImage.column2 img {
	width: 490px;
	padding: 10px 0;
}
.caseImage.column3 img {
	width: 320px;
	padding: 10px 0;
}
.photo2 {
	justify-content: flex-start;
}
.photo2 .movie:nth-of-type(2) {
	padding: 0 0 0 20px;
}
.caseImage::after {
	content: none;
}
.caseImage .movie {
	box-shadow: none;
	background-color: rgba(255, 255, 255, 0);
}
.caseImage .movie .playBtn {
	top: 50%;
}

a.js-modal-video {
	text-decoration: none;
	transition: all .2s ease;
}
a.js-modal-video:hover {
	opacity: 0.8;
	transition: all .2s ease;
}

.suggestion {
	background-color: #fff;
	border-radius: 15px;
	width: 420px;
	padding: 0 10px;
	margin: 20px auto 0;
	text-align: center;
	color: #0ba2c7;
}
.suggestion--title {
	font-size: 20px;
	font-weight: bold;
	padding: 0;
	text-align: center;
	margin-top: 30px;
}
.suggestion--logo {
	position: relative;
	top: 40px;
	text-align: center;
	margin: 0 auto;
}
.suggestion--box {
	display: flex;
	flex-wrap: wrap;
	margin: 0 auto;
	padding: 40px 0;
	width: 100%;
}
.suggestion--box::after {
	content: none;
}
.suggestion--media {
	width: 95px;
	height: 95px;
	margin: 5px auto;
  overflow: hidden;
  position: relative;
  background:#0ba2c7;
	border-radius: 50%;
}
.suggestion--name {
	font-weight: bold;
	padding: 5px 0 0 0;
	color: #fff;
	position: relative;
	top: 36px;
	line-height: 1;
}
.suggestion--media:first-of-type .suggestion--name {
	top: 30px;
}
.movie--contact {
	text-align: center;
	margin: 0 auto;
	padding: 40px 0 0 0;
	width: 600px;
}
.contactBtn {
	background-color: #0ba2c7;
	color: #fff;
	margin: 0 auto;
	padding: 20px 0;
	font-size: 20px;
	transition: all .1s ease;
}
.contactBtn:hover {
	border-radius: 50px;
  transition: all .1s ease;
}
.contactTel {
	display: inline;
	color: #0ba2c7;
	position: relative;
	top: 10px;
	right: 10px;
	font-size: 26px;
}
.contactTel img{
	padding: 7px 12px;
}


.caseArea.table {
	flex-wrap: wrap;
}
.caseArea.table::after {
	content: none;
}
.caseArea.table > div {
	margin: 0 0 30px 0;
}
.caseArea.table > div:nth-child(even) {
	position: relative;
	top: 60px;
}
.caseArea.table a {
	text-decoration: none;
}
.caseArea.table img {
	width: 485px;
}
.caseArea.table .movie--movieName {
	color: #000;
	left: 0;
}
.caseArea.table .movie--txt {
	font-size: 14px;
	color: #333333;
}
.tag {
	padding: 30px 0 10px 0;
	display: flex;
}
.tag > div {
	border: 1px solid #000;
	border-radius: 20px;
	padding: 3px 8px;
	margin: 0 10px 0 0;
	font-size: 14px;
}

@media all and (-ms-high-contrast: none) {
	.tag > div {
		padding: 5px 8px 1px 8px;
	}
	.subhead {
		width: 70px;
	}
}



/* --- works-area ------------------------------*/

.works-area h3 {
	font-size: 16px;
	font-weight: normal;
}

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

.narrow .service-area-other h2{
    display: none;
}


/* --- local navi ------------------------------*/

.service-area-other .list + .btn-more{
    display: none;
}


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

.service-unit{
    padding: 100px 0;
    margin: 0;
    color: #fff;
}

.website-unit{
    margin-top: 50px;
}

.service-unit .area-inner{
    width: 840px;
    margin: 0 auto;
    min-height: 250px;
}

.website-unit          { background:#009ba9 url(../images/bg_website.png) no-repeat 10% 50%; }
.running-unit         { background:#62a8cf url(../images/bg_running.png) no-repeat 90% 50%; }
.ec-unit              { background:#66c3ae url(../images/bg_ec.png) no-repeat 10% 50%; }
.branding-unit        { background:#96ac00 url(../images/bg_branding.png) no-repeat 90% 50%; }
.contentmarketing-unit{ background:#0ba2c7 url(../images/bg_contentmarketing.png) no-repeat 10% 50%; }
.retail-unit          { background:#eb5600 url(../images/bg_retail.png) no-repeat 90% 50%; }

.service-unit {
  opacity: 0;
  transition: all .8s;
}
.service-unit.on {
  opacity: 1;
}

.service-unit h3{
    font-size: 2.5rem;
    margin-top: 0!important;
}

.service-unit h3 span{
    font-size: 1rem;
    display: block;
    padding-top: 5px;
    font-style: normal;
    font-weight: bold;
}

.service-unit h4{
    font-size: 1rem;
}
.service-unit h5{
    font-size: 0.9rem;
}

.service-unit .icon-list {
    overflow: hidden;
}
.service-unit .icon-list li{
    float: left;
    border: 1px solid #fff;
    padding: 3px 8px;
    margin: 0 10px 10px 0;
    font-size: 0.8rem;
    border-radius: 5px;
}
.service-unit .list li a,
.service-unit .list li a:link,
.service-unit .list li a:hover,
.service-unit .list li a:visited,
.service-unit .list li a:active {
    text-decoration:none;
    color:#fff;
}
.service-unit .list li a:hover::before,
.service-unit .list li a:active::before{
    border-bottom-color: #fff;
    border-left-color: #fff;
}
.service-unit .list li a:hover::after,
.service-unit .list li a:active::after{
    border-top-color: #fff;
    border-right-color: #fff;
}
.service-unit .list li a:hover dt::before,
.service-unit .list li a:active dt::before {
    color:#fff;
}

.service-unit .list .topic {
    color: #333;
    font-size: 0.9rem;
    line-height: 1;
}
.service-unit .grid-6 {
    width: 410px;
}
.service-unit .grid-4 {
    width: 266px;
}


/* --- keyvisual ------------------------------*/

.keyvisual{
    width: 840px;
    margin: 0 auto;
    padding-top: 90px;
}

.keyvisual.service {
    background: url(../images/bg_keyvisual.png) no-repeat 50% 0;
    width: 840px;
    margin: 0 auto;
    padding-top: 220px;
}

.keyvisual.website h3 {
    margin: 30px 0;
    padding: 0;
    font-size: 24px;
    line-height: 1.5em;
}

.keyvisual.running {
	width: 1000px;
}
 
.keyvisual.branding {
	width: 1050px;
}

.keyvisual.running h2 {
	font-size: 30px;
}

.keyvisual .copy{
    font-size: 40px;
    text-align: center;
	line-height: 1.3em;
	margin-top: 30px;
	padding-bottom: 0;
}

.keyvisual.service .copy{
    font-size: 3rem;
    text-align: center;
	line-height: 1.3em;
	margin-top: 30px;
	font-family: ""
}

.keyvisual p {
	text-align: center;
    line-height: 2;
}

/* --- font ------------------------------*/

.content h1, .content h2 {
	font-weight: bold;
}

.sub {
	font-weight: bold;
	font-size: 28px;
}

.service-area-other h2,
.works-area h2 {
}


/* -------------------------------------------- */

h2, h3, h4, h5{
    font-family: 'Barlow', "游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro",メイリオ,Meiryo,sans-serif;
}



.movie--embedded {
	margin: 60px auto 0;
	text-align: center;
	width: 700px;
	max-width: 100%;
}
.movie--embedded div {
	position: relative;
	padding-top: 56.25%;
}
.movie--embedded iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}