@charset "utf-8";

/* ============ARTA Styles================= */

#container{
    position: relative;
}
 
#topbtn {
    position: fixed;
    bottom: 15px;
    right: 15px;
    width: 50px;
    height: 50px;
    background: #FF6600;
    opacity: 0.7;
	border-radius: 50%;
}
#topbtn a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#topbtn a::before{
font-family: "FontAwesome";
	content:"\f106";
  font-weight: 900;
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -5px;
  bottom: 15px;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}


/* About */
.maximg {
	max-width: 600px;
	margin:10px auto;
}

.about_img {
	max-height: 300px;
	padding:5px;
	border:1px solid #DDD;
	margin: 0 15px 0;
}

.mb15 {margin-bottom:15px;}

/* Project first */
#project_contents a {
	color:#333;
	text-decoration:none;
}
.profile {
	text-align:center;
}
.img-aguri {
	max-width:200px;
	border: 4px solid #DDD;
}
.img-project {
	max-width:130px;
	border: 4px solid #DDD;
}
.img-support {
	max-width:80px;
	border: 4px solid #DDD;
}
.img-car {
	width:auto;
	max-height:160px;
	margin:0 auto;
}
h3.profile-heading { margin-top: 3px;}
h3.nameone {margin-top:0; padding:15px 0;}

.profile p { font-size:12px; padding:10px 0 0; margin:0;}

table.profile-details {
    width: 100%;
    margin-bottom: 20px;
	border:0;
}

@media (max-width: 991px) {
table.profile-details {margin-top:20px;}
}

table.profile-details tr {
    border-bottom: solid 1px #d5d5d5;
	font-size:18px;
}

table.profile-details tr th {
    padding: 5px;
    border-bottom: solid 1px #d5d5d5;
	background-color: #DDD;
	font-size:18px;
}

table.profile-details tr td {
    padding: 5px;
    border-bottom: solid 1px #d5d5d5;
	font-size:18px;
}

.profilebox {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
}
.profilecaption {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	background: rgba(255,153,0,.8);
	-webkit-transition: .3s;
	transition: .3s;
	opacity: 0;
	display: flex;
	align-items: center;
}

.profilecaption:before {
	display: block;
	content: '';
	position: absolute;
	top: 6px;
	right: 6px;
	bottom: 6px;
	left: 6px;
	border: 1px solid rgba(255, 255, 255, 0.6);
}

.profilebox a:hover .profilecaption {
	opacity: 1;
}

.linkcaption {
	position: absolute;
	z-index: 3;
	color:#FFF;
	width:100%;
	height:50%;
	margin: 0 auto;
}

.linkcaption h3, .linkcaption p{
	margin-top:0;
}


@media (max-width: 767px) {
.profilecaption {
	display:none;
}
/*.linkcaption {
	position: absolute;
	z-index: 3;
	color:#FFF;
	width:100%;
	height:100%;
	margin: 0 auto;
}

.linkcaption h3 {
	display:none;
}
.linkcaption p{
	margin-top:-1em;
	font-size: 14px;
}*/
}



/* Parnter */
.row-eq-height {
    display: flex;
    flex-wrap: wrap;
	margin-bottom:25px;
}

.col-five {
  position: relative;
  min-height: 1px;
  padding-right: 10px;
  padding-left: 10px;
	text-align: center;
}  
.col-five {
  width: 20%;
  float: left;
} 

.col-five2 {
  position: relative;
  min-height: 1px;
  padding-right: 25px;
  padding-left: 25px;
	text-align: center;
}  
.col-five2 {
  width: 20%;
  float: left;
}
.col-five3 {
  position: relative;
  min-height: 1px;
  padding-right: 55px;
  padding-left: 55px;
	text-align: center;
}  
.col-five3 {
  width: 25%;
  float: left;
} 

.col-three {
  position: relative;
  min-height: 1px;
  padding-right: 10px;
  padding-left: 10px;
	text-align: center;
}  
.col-three {
  width: 33%;
  float: left;
} 

.col-four {
  position: relative;
  min-height: 1px;
  padding-right: 45px;
  padding-left: 45px;
	text-align: center;
}  
.col-four {
  width: 25%;
  float: left;
} 

.col-five p, .col-five2 p, .col-five3 p, .col-three p, .col-four p {
	font-size: 14px;
	padding:15px 3px 0px 3px;
}

.plogo {
	padding: 15px 0px;
	border:1px solid #EEE;
    height: 100%;
	cursor: pointer;
} 
.plogo img {
  max-width: 90%;
}

.col-five3 .plogo img {
  max-width: 95%;
}

.plogo:hover {
	border-bottom:1px solid #1B5EC6;
}

@media (max-width: 991px) {
.col-five, .col-five2, .col-five3 {
	position: relative;
	min-height: 1px;
	padding-right: 5px;
	padding-left: 5px;
	text-align: center;
	width: 20%;
	float: left;
}
.col-three {
	position: relative;
	min-height: 1px;
	padding-right: 5px;
	padding-left: 5px;
	text-align: center;
	width: 33%;
	float: left;
}
.col-four {
	position: relative;
	min-height: 1px;
	padding-right: 5px;
	padding-left: 5px;
	text-align: center;
	width: 25%;
	float: left;
}
}

@media (max-width: 767px) {
.row-eq-height {
    display: flex;
    flex-wrap: wrap;
	margin-bottom:0px;
}

.col-five, .col-five2, .col-five3, .col-three, .col-four {
	position: relative;
	min-height: 1px;
	margin-bottom:25px;
	padding-right: 5px;
	padding-left: 5px;
	text-align: center;
	width: 100%;
	float: left;
} 
.plogo {
	padding: 5px 0px;
	border:none;
	border-bottom:1px solid #EEE;
    height: 100%;
	cursor: pointer;
} 
.plogo img {
  max-width: 80%;
}
.col-five p, .col-five2 p, .col-five3 p, .col-three p, .col-four p {
	font-size: 16px;
	padding:5px 0px;
}
}

/* report */
#countdown {
	font-size: 48px;
	color: #333;
	line-height: 1.1em;
	margin: 40px 0 60px;
}

.img-comment {
	max-width: 126px;
	border:2px solid #CCC;
}

@media (max-width: 768px) {
.img-comment {
	max-width: 64px;
	border:2px solid #CCC;
}
}

.comment_row {
	margin-bottom:15px;
}

.media-heading {
    margin-bottom: 10px;
	font-weight:bold;
}

/*2022*/
.comment-box{
margin-bottom:25px;
}

.comment-title{
	display: table;
	padding: 10px 0;
}
.comment-title .photocircle {
	padding-right: 15px;
}
.comment-title div{
	display: table-cell;
	vertical-align: middle;
}

.pagenation_content {
  width: 100%;
  max-width: 420px;
  margin: 15px auto;
}
.pagenation-button {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  color: #fff;
  text-align: center;
  background: #333333;
  overflow: hidden;
  border-radius: 3px;
}
.pagenation-selected_wrapper {
  position:relative;
  display: block;
  width: 100%;
}
.pagenation-selected {
  position: absolute;
  text-align: center;
  width: 100%;
  padding: 10px 8px 10px 0;
}
.pagenation-selected i {
  position: absolute;
  right: 15px;
  top: 16px;
}
.pagenation-selected-list {
  -webkit-appearance: none;
  appearance: none;
  height: 100%;
  border: none;
  opacity: 0;
  z-index: 2;
  cursor: pointer;
  color: #333333;
  width: 100%;
}
.pagenation-prev,
.pagenation-next {
  padding: 12px 15px;
  min-width: 85px;
}

.pagenation-prev {
  border-right: 1px solid #fff;
}
.pagenation-next {
  border-left: 1px solid #fff;
}
.pagenation-prev a,
.pagenation-next a,
.pagenation-prev a i,
.pagenation-next a i {
  color:#fff;
}

/* Gallery */
h2.takumi {
  overflow: hidden;
  text-align: center;
  margin: 30px 0 25px;
}

h2.takumi span {
  position: relative;
  display: inline-block;
  margin: 0 2.5em;
  padding: 0 1em;
  text-align: left;
}

h2.takumi span::before {
  right: 100%;
}

h2.takumi span::before, h2.takumi span::after {
  position: absolute;
  top: 50%;
  content: '';
  width: 400%;
  height: 1px;
  background-color: #DDD;
}

h2.inpression {
	overflow: hidden;
	text-align: center;
	margin:30px 0 25px;
}
h2.inpression span {
	position: relative;
	display: inline-block;
	margin: 0 2.5em;
	padding: 0 1em;
	text-align: left;
}
h2.inpression span::before,
h2.inpression span::after {
	position: absolute;
	top: 50%;
	content: '';
	width: 400%;
	height: 1px;
	background-color: #DDD;
}
h2.inpression span::before {
	right: 100%;
}
h2.inpression span::after {
	left: 100%;
}

h3.inprettion {
	overflow: hidden;
	text-align: center;
	margin:30px 0 25px;
}

table.inpression-details {
    width: 100%;
    margin-bottom: 20px;
	border:0;
}

table.inpression-details tr {
    border-bottom: solid 1px #d5d5d5;
	font-size:14px;
}

table.inpression-details tr td {
    padding: 5px;
    border-bottom: solid 1px #d5d5d5;
	font-size:14px;
}

img.inpression-title {margin:15px auto;}

.img-thumbnail {
    border-radius: 0;
}

.img-inpression {
box-shadow:rgb(179, 182, 186) 0px 7px 13px 0px;
-webkit-box-shadow:rgb(179, 182, 186) 0px 7px 13px 0px;
-moz-box-shadow:rgb(179, 182, 186) 0px 7px 13px 0px;
margin-bottom:15px;
}

h2.Exprettion {
	overflow: hidden;
	text-align: center;
	margin:30px 0 25px;
}
h2.Exprettion span {
	position: relative;
	display: inline-block;
	margin: 0 2.5em;
	padding: 0 1em;
	text-align: left;
}
h2.Exprettion span::before,
h2.Exprettion span::after {
	position: absolute;
	top: 50%;
	content: '';
	width: 400%;
	height: 1px;
	background-color: #DDD;
}
h2.Exprettion span::before {
	right: 100%;
}
h2.Exprettion span::after {
	left: 100%;
}

h3.Exprettion {
	overflow: hidden;
	text-align: center;
	margin:30px 0 25px;
}

table.Exprettion-details {
    width: 100%;
    margin-bottom: 20px;
	border:0;
}

table.Exprettion-details tr {
    border-bottom: solid 1px #EEE;
	font-size:14px;
}

table.Exprettion-details tr td {
    padding: 5px;
    border-bottom: solid 1px #EEE;
	font-size:14px;
}

img.Exprettion-title {margin:15px auto;}

.img-thumbnail {
  border: none !important;
}


.gallery {
    display: block;
    position: relative;
    padding: 0;
}

.grid-sizer.col-md-2 .grid-item.col-md-2 {
	width: 16.66666%;
	position: relative;
	overflow: hidden;
	margin:0;
	padding:0;
}

.grid-sizer.col-sm-3 .grid-item.col-sm-3 {
	width: 25%;
	position: relative;
	overflow: hidden;
	margin:0;
	padding:0;
}

.grid-sizer.col-xs-4 .grid-item.col-xs-4 {
	width: 33.3333%;
	position: relative;
	overflow: hidden;
	margin:0;
	padding:0;
}

.img-wrapper {
	height:120px;
	position: relative;
	overflow: hidden;
	cursor: pointer;
	margin-bottom: 20px;
	padding:0;
}

@media (max-width: 767px) {
.img-wrapper {
	height:80px;
	position: relative;
	overflow: hidden;
	cursor: pointer;
	margin-bottom: 20px;
	padding:0;
}
img.takumi-title {width:250px;}

}

.img-wrapper img {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: auto;
	height: 100%;
}

/* Campaign */
iframe{
	width:100% !important;
}

.iframeBox{
	position: relative ;
	margin-top: 1.2em ;
	margin-bottom: 1.2em ;
	padding-top: 69px ;
	padding-bottom: 50% ;
	overflow: hidden ;
	background-color:#FFF;
}

.iframeBox iframe{
	position:absolute;
	top:0;
	left:0;
	width:100% !important;
	height:100% !important
}

.spnomargin {margin-bottom:20px;}

.amsctext {max-width:900px;}

.amsctext img {margin: 0 20px 15px 0;}

#campaign .table > tbody > tr > td,
#campaign .table > tbody > tr > th,
#campaign .table > tfoot > tr > td,
#campaign .table > tfoot > tr > th,
#campaign .table > thead > tr > td,
#campaign .table > thead > tr > th {
    padding: 10px 2px;
    border-top: 0;
    border-bottom: 1px solid #ddd;
	line-height: 1.9;
}

#campaign .table > tbody > tr > th {
	width:150px;
}

#app_link {
	position: relative;
	margin:0 auto;
	max-width:326px;
}

#app_link .btn_apple {
	position: absolute;
	top: 41.4110%;
	left: 9.2024%;
}

#app_link .btn_google {
	position: absolute;
	top: 61.3496%;
	left: 9.2024%;
}

#app_link .thaibtn_apple {
	position: absolute;
	top: 51.4110%;
	left: 9.2024%;
}

#app_link .thaibtn_google {
	position: absolute;
	top: 75.4110%;
	left: 9.2024%;
}

#app_link .btn_insta {
	position: absolute;
	top: 36.8089%;
	left: 9.2024%;
}

.oubo {
	display: inline-block;
	width:100%;
	text-align: center;
	text-decoration: none;
	outline: none;
	background-color: #F60;
	color: #FFF;
	font-size: 160%;
	font-weight:bold;
	padding:10px;
	border-radius:5px;
	margin:40px 0 30px;
}
	

#kiyaku ul > li {
	list-style-type: none;
	padding-left:1em;
	text-indent:-1em;
}

#kiyaku ul > li span {
	padding-left:1em;
}

#kiyaku ul > li.number {
	list-style-type: none;
	padding-left:2.6em;
	text-indent:-2.6em;
}

#kiyaku ul.subnumber {
	margin:8px 0;
}
#kiyaku ul.subnumber li {
	font-size:14px/1.5;
	list-style-type: none;
	padding-left:1.6em;
	text-indent:-1.6em;
}

.img-portfolio {
    margin-bottom: 20px;
}



/* =========================================================
@meida 
========================================================= */
@media (max-width:1199px) {
h2.exad {padding-top:32px;}
}

@media (max-width:991px) {
h2.exad {padding-top:0;}
}

@media (min-width: 768px) {
.hidden_pc {display:none;}

#app_link {
	position: relative;
	margin:0 auto;
}

#app_link .btn_apple {
	position: absolute;
	top: 41.4110%;
	left: 9.2024%;
	z-index:99;
	width:50%;
}

#app_link .btn_google {
	position: absolute;
	top: 61.3496%;
	left: 9.2024%;
	z-index:99;
	width:50%;
}

#app_link .thaibtn_apple {
	position: absolute;
	top: 51.4110%;
	left: 8.2024%;
	z-index:99;
	width:50%;
}

#app_link .thaibtn_google {
	position: absolute;
	top: 76.3496%;
	left: 8.2024%;
	z-index:99;
	width:50%;
}

#app_link .btn_insta {
	position: absolute;
	top: 36.8089%;
	left: 9.2024%;
	z-index:99;
	width:50%;
	height:90%;
}
#app_link .btn_apple img,
#app_link .btn_google img,
#app_link .thaibtn_apple img,
#app_link .thaibtn_google img,
#app_link .btn_insta img
 {
	width:65%;
	height:50%;
}
}

@media (max-width: 767px) {
/* About */
.maximg {
	max-width: 90%;
	margin:10px auto;
}

.hidden_sp {display:none;}
.sp_right {display:block; text-align:right; line-height:160%;}
.about_img {
	max-height: 300px;
	padding:5px;
	border:1px solid #DDD;
	margin: 0 15px 0;
}

.about_img2 {
	max-height: 300px;
	padding:5px;
	border:1px solid #DDD;
	margin: 0 auto 15px;
}

/* partner */
.partner_link_p  {
	width: 99%;
}

.partner_link_p div {
	width: 33%;
	height: 100px;
	display:block;
	overflow: hidden;
	position: relative;
	float: left;
}

.partner_link_p:after {
    content: "";
    clear: both;
    display: block;
}

.partner_link {
	width: 100%;
}

.partner_link div {
	width: 20%;
	height: 100px;
	display:block;
	overflow: hidden;
	position: relative;
	float: left;
}

.partner_link_p h3,
.partner_link h3 {
	margin-top:10px;
	font-size: 70%;
}

/* Project */

.profile {
	text-align:center;
	padding-bottom:10px;
	margin-bottom:10px;
}
.profile img {float:left; max-width:80px;}
.profile img.img-car {
	float:none;
	display:block;
	min-width:280px;
	margin:5px auto;
}


@media (max-width: 767px) {
.partner_link_p {
	width: 100%;
	margin:25px auto;
}


.partner_link_p div {
	width: 33.3333%;
	height: 100px;
	display:block;
	overflow: hidden;
	position: relative;
	float: left;
}

.partner_link_g {
	width: 90%;
	margin:0px auto 15px;
}

.partner_link_g div {
	width: 33.333%;
	height: 100px;
	display:block;
	overflow: hidden;
	position: relative;
	float: left;
}
.partner_link {
	width: 100%;
	overflow:hidden;
	margin:25px auto 35px;
}

.partner_link div {
	width: 25%;
	height: 100px;
	display:block;
	overflow: hidden;
	position: relative;
	float: left;
}

}

@media (max-width: 599px) {
h1 {
	font-size:22px;
}

h2 {
	font-size:20px;
}

.breadcrumb {
	font-size:12px;
}

/* About */
.maximg {
	max-width: 280px;
	margin:10px auto;
}

.about_img {
	max-height: 200px;
	padding:5px;
	border:1px solid #DDD;
	margin: 0 20px 15px 0;
}

/* Partner */
.partner_link_p  {
	width: 100%;
}

.partner_link_p div {
	width: 49.5%;
	height: 60px;
	display:block;
	overflow: hidden;
	position: relative;
	float: left;
}

.partner_link_p:after {
    content: "";
    clear: both;
    display: block;
}

.partner_link_g,
.partner_link {
	width: 99%;
}

.partner_link_g div {
	width: 33%;
	height: 60px;
	display:block;
	overflow: hidden;
	position: relative;
	float: left;
}

.partner_link div {
	width: 25%;
	height: 60px;
	display:block;
	overflow: hidden;
	position: relative;
	float: left;
}


.partner_logo {
	position: relative;
	overflow: hidden;
	padding-bottom: 10%;
}

.partner_logo img.img-vertical {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	height:50%;
}

.partner_logo img.img-vertical2 {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	height:40%;
}

.partner_logo img.img-vertical3 {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	height:35%;
}

.partner_logo img.img-horizontal {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width:70%;
}

.partner_logo img.img-horizontal2 {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width:55%;
}

.partner_logo img.img-horizontal3 {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width:40%;
}


.partner_link_p div img,
.partner_link_g div img,
.partner_link div img {
	margin:0 auto;
	vertical-align:middle;
	text-align: center;
}

.partner_link_p div a:hover img,
.partner_link_g div a:hover img,
.partner_link div a:hover img {
	opacity:0.8;
}

.partner_link_p div.caption,
.partner_link_g div.caption,
.partner_link div.caption {
	display:none;
}

.partner_link_p div:hover div.caption,
.partner_link_g div:hover div.caption,
.partner_link div:hover div.caption {
	display:none;
}

.partner_amsc {
	text-align: left;
	font-size: 78%;
}

.pagenation-selected {
  position: absolute;
  text-align: center;
  width: 100%;
  padding: 10px 0;
}
.pagenation-selected i {
  position: absolute;
  right: 5px;
  top: 16px;
}

/* campaign */

.spnomargin {padding-right:8px; padding-left:8px;}
.sptopmargin {margin-bottom:20px;}
.spnocenter {text-align:left;}

.amsctext {margin:5px;}

.amsctext img {max-width:150px; margin:0 auto;}

.oubo {
	display: inline-block;
	width:100%;
	text-align: center;
	text-decoration: none;
	outline: none;
	background-color: #F60;
	color: #FFF;
	font-size: 12px;
	font-weight:bold;
	padding:5px;
	border-radius:5px;
	margin:40px 0 30px;
}
	

#kiyaku ul {
    padding-left:0;
}

#kiyaku ul > li {
	list-style-type: none;
	padding-left:1em;
	text-indent:-1em;
}

#kiyaku ul > li.number {
	list-style-type: none;
	padding-left:1.6em;
	text-indent:-1.6em;
}

#kiyaku ul.subnumber {
	margin:8px 0;
	padding-left:1em;
	text-indent:-1em;
}
#kiyaku ul.subnumber li {
	font-size:14px/1.5;
	list-style-type: none;
	padding-left:0.6em;
	text-indent:-0.6em;
}

.thai_img2 {
	max-width: 320px;
	padding:5px;
	border:1px solid #DDD;
}
}