@charset "utf-8";
/*------------------------------
contents.css
------------------------------*/

/*
common
-------------------*/
/* lead */
.page-lead-section { padding-top: 3rem; padding-bottom: 3rem; text-align: center; }
.page-lead { position: relative; z-index: 1; font-size: 1.8rem; font-weight: bold; line-height: 1.2; text-align: center; display: inline-block; margin: auto; }
.page-lead:after { 
	content: ""; display: block; position: absolute; width: 100%; height: 1.5em; top: 50%; left: 0; z-index: -1; 
	background-color: #f2907a; transform: translateY(-50%) rotate(-2deg);
}
@media screen and (min-width:768px){
	.page-lead-section { padding-top: 8rem; padding-bottom: 8rem; }
	.page-lead { font-size: 3.6rem; }
	.page-lead:after { height: 1em; }
}

/* list */
.list-row { display: table; width: 100%; border-bottom: #cacaca 1px dotted; }
.list-header,
.list-body { display: table-cell; vertical-align: top; padding-top: 0.9em; padding-bottom: 0.8em; }
.list-header { padding-right: 1em; }
@media screen and (min-width:768px){
	.list-header { padding-right: 2em; }
}

/* sample-images */
.sample-images {  }
.sample-images-col2 { display: block; float: left; width: 47%; margin-top: 2em; margin-right: 6%; }
.sample-images-col2:nth-of-type(even) { margin-right: 0; }
.sample-images-col4 { display: block; float: left; width: 20.5%; margin-top: 2em; margin-right: 6%; }
.sample-images-col4:nth-of-type(4n) { margin-right: 0; }

/* page-contact */
.page-contact-section { text-align: center; }
.page-contact-header-wrapper { background-image: url(../img/contact_ico.png); background-repeat: no-repeat; background-position: 50% 0; }
.page-contact-header {
	font-weight: bold; font-size: 1.6rem;
	display: inline-block; position: relative; z-index: 1; margin: 0 auto 1em;
}
.page-contact-header:after { 
	content: ""; display: block; position: absolute; width: 100%; height: 1.5em; top: 50%; left: 0; z-index: -1; 
	background-color: #fbf30d; transform: translateY(-50%) rotate(-2deg);
}
.page-contact-lead { margin: 1em auto 2em; }
.page-contact-bnr { margin-top: 2em; }
.page-contact-bnr a { display: block; margin-top: 1em; }
@media screen and (max-width:767px){
	.page-contact-header-wrapper { background-size: 22px 27px; padding-top: 35px; }
}
@media screen and (min-width:768px){
	.page-contact-header-wrapper { padding-top: 80px; }
	.page-contact-header { font-size: 3.2rem; }
	.page-contact-header:after { height: 1em; }
	.page-contact-phone { float: left; width: 48%; }
	.page-contact-btn { float: right; width: 48%; box-sizing: border-box; font-size: 2.4rem; }	
	.page-contact-phone-num { font-size: 4.2rem; line-height: 1.3; }
	.page-contact-phone-note { font-size: 1.6rem; }
  .page-contact-bnr { margin-top: 4em; }
  .page-contact-bnr a { display: block; margin-top: 2em; }
}

/* lightcase */
#lightcase-overlay { background-color: #000; }
a[class*="lightcase-icon-"]:hover { text-shadow: none; }
.lightcase-icon-prev::before,
.lightcase-icon-next::before,
.lightcase-icon-close::before { height: 1em; background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; opacity: 0.6; transition: all 0.3s; }
.lightcase-icon-prev::before { content: ""; background-image: url(../img/arr_white.svg); transform: rotate(180deg); }
.lightcase-icon-next::before { content: ""; background-image: url(../img/arr_white.svg); }
.lightcase-icon-close::before { content: ""; background-image: url(../img/close_white.svg); width: 0.8em; height: 0.8em; }
a[class*="lightcase-icon-"]:hover::before { opacity: 1; }


/*
home
-------------------*/
/* hero */
.home-hero { width: 100%; height: 0; padding-top: 66%; position: relative; overflow: hidden; }
.hero-video { position: absolute; width: auto!important; height: 100%!important; top: 50%; left: 0; transform: translateY(-50%); }
.home-hero .hero-copy-wrapper { pointer-events: none; }
@media screen and (max-width:767px){
	.hero-copy.home { width: 50%; max-width: 443px; }
}
@media screen and (min-width:768px){
	.home-hero { padding-top: 34%; }
	.hero-video { width: 100%!important; height: auto!important; }
	.hero-copy.home { width: 40%; max-width: 443px; }
}

/* lead */
.home-lead-section { padding-top: 3rem; padding-bottom: 2rem; text-align: left; }
.home-lead-shopnow { font-weight: bold; font-size: 1.6rem; line-height: 1.5; margin-bottom: 0.8em; }
.home-lead-shopnow-ico { text-indent: 1.5em; background-image: url("../img/home/insta.png"); background-repeat: no-repeat; background-position: 0 0; background-size: 1.3em auto; }
@media screen and (min-width:768px){
	.home-lead-section { padding-top: 8rem; padding-bottom: 2rem; }
  .home-lead-left { width: 48%; float: left; }
  .home-lead-right { width: 48%; float: right; }
  .home-lead-shopnow { font-size: 2.8rem; }
}
@media screen and (min-width:1024px){
  .home-lead-shopnow { font-size: 3.2rem; }
}

/* actual introduction */
.home-actualintroduction-item { float: left; margin-bottom: 2em; }
.home-actualintroduction-header { font-weight: bold; line-height: 1.2; margin-bottom: 0.4em; }
.home-actualintroduction-btn { text-align: center; }
@media screen and (max-width:767px){
	.home-actualintroduction-item { width: 48%; margin-right: 4%; }
	.home-actualintroduction-item:nth-of-type(even) { margin-right: 0; }
	.home-actualintroduction-body { font-size: 1rem; }
}
@media screen and (min-width:768px){
	.home-actualintroduction-item { width: 22%; margin-right: 4%; }
	.home-actualintroduction-item:nth-of-type(4n) { margin-right: 0; }
	.home-actualintroduction-body { font-size: 1.4rem; }
	.home-actualintroduction-btn { margin-top: 2em; }
}

/* news */
.home-news-header { width: 5em; vertical-align: middle; }

/* bnr */
.home-bnr-item { display: block; margin-top: 1em; }
@media screen and (max-width:767px){
	.home-bnr-section { margin-top: 3em; }
}
@media screen and (min-width:768px){
	.home-news-section { float: left; width: 57%; }
	.home-bnr-section { float: right; width: 35%; }
	.home-bnr-item { margin-top: 2em; }
	.home-bnr-item:first-of-type { margin-top: 0; }
}


/*
casting
-------------------*/
/* for user */
@media screen and (max-width:767px){
	.foruser-block { margin-top: 6em; }
	.foruser-arr { padding: 1em 0 0; text-align: center; }
	.foruser-arr img { transform: rotate(90deg); height: 20vw; width: auto; }
}
@media screen and (min-width:768px){
	.foruser-block { margin-top: 3em; }
	.foruser-arr { position: absolute; top: 30%; right: -14%; width: 9%; }
	.foruser-arr img { width: 100%; height: auto; }
}

/* step */
.casting-step-item { margin-top: 2em; }
.casting-step-header { margin-bottom: 0.8em; font-weight: bold; font-size: 1.4rem; }
.casting-step-num { display: inline-block; font-weight: 600; color: #fff; background-color: #337bae; padding: 0 0.6em; margin-right: 0.5em; vertical-align: middle; font-size: 2.4rem; line-height: 1.5; }
@media screen and (max-width:767px){
	.casting-step-img { margin-top: 1em; }
}
@media screen and (min-width:768px){
	.casting-step-txt { float: left; width: 64%; }
	.casting-step-img { float: right; width: 30%; }
	.casting-step-header { font-size: 2.4rem; }
	.casting-step-num { font-size: 4.8rem; }
}

/* sample */
.casting-sample-wrapper { margin-top: 2em; }
.casting-sample-item { padding: 1em; box-sizing: border-box; margin-top: 1em; overflow: hidden; }
.casting-sample-model { 
	float: left; width: 40%; padding-right: 20%; 
	background-image: url(../img/arr_pink.svg); background-repeat: no-repeat; background-position: 91% 50%; background-size: 16% auto;
}
.casting-sample-plan { float: right; width: 40%; }
.casting-sample-header { font-weight: bold; line-height: 1.3; margin-bottom: 0.2em; }
.casting-sample-body { line-height: 1.3; }
@media screen and (max-width:767px){
	.casting-sample-header { font-size: 1rem; }
	.casting-sample-body { font-size: 1rem; }
}
@media screen and (min-width:768px){
	.casting-sample-wrapper { margin-top: 1em; }
	.casting-sample-item { float: left; width: 47%; margin-right: 6%; padding: 2em; margin-top: 2em; }
	.casting-sample-item:nth-of-type(even) { margin-right: 0; }
}
.page-contact-section.casting { padding-top: 0; }


/*
photographing
-------------------*/
/* scene */
.photographing-scene-header { font-weight: bold;  }
.photographing-scene-figure { margin-top: 2em; }
.photographing-scene .contents-paragraph { margin-top: 0; }
@media screen and (max-width:767px){
	.photographing-scene { margin-top: 5em; }
}
@media screen and (min-width:768px){
	.photographing-scene { margin-top: 2em; }
	.photographing-scene .header-two-parent { margin-top: 4em; }
}

/* staff */
.photographing-staff-item { margin-top: 2em; }
.photographing-staff-header { margin-bottom: 0.8em; font-weight: bold; font-size: 1.4rem; }
.photographing-staff-arr { 
	display: inline-block; background-color: #337bae; width: 2.7em; height: 2.7em; box-sizing: border-box; 
	padding: 0.3em 0.8em; margin-right: 0.5em; vertical-align: middle; line-height: 1.5; 
}
.photographing-staff-img-wrapper { display: block; position: relative; width: 100%; height: 0; padding-top: 36%; }
.photographing-staff-img img { width: 53%; height: auto; position: absolute; }
.photographing-staff-img1 { bottom: 0; right: 0; }
.photographing-staff-img2 { top: 0; left: 0; }
.photographing-staff-img3 { bottom: 0; left: 0; }
.photographing-staff-img4 { top: 0; right: 0; }

/* design */
.photographing-design-list { margin-top: 1em; }
.photographing-design-list-item { font-weight: bold; line-height: 1.2; text-align: center; padding: 1em; box-sizing: border-box; }
@media screen and (max-width:767px){
	.photographing-staff-img { margin-top: 1em; }
	.photographing-design-list{ margin-bottom: 2em; }
	.photographing-design-list-item { display: block; float: left; width: 31%; margin-top: 1em; height: 6em; position: relative; }
	.photographing-design-list-item:nth-of-type(3),
	.photographing-design-list-item:nth-of-type(4) { margin-right: 3.5%; }
	.photographing-design-list-item:nth-of-type(1),
	.photographing-design-list-item:nth-of-type(2) { width: 48%; }
	.photographing-design-list-item:nth-of-type(1) { margin-right: 4%; }
	.photographing-design-list-txt { display: block; position: absolute; width: 100%; height: auto; top: 50%; left: 0; box-sizing: border-box; transform: translateY(-50%); padding: 0 1em; }
}
@media screen and (min-width:768px){
	.photographing-staff-item { margin-top: 3em; }
	.photographing-staff-txt { float: left; width: 38%; }
	.photographing-staff-img { float: right; width: 57.5%; }
	.photographing-staff-txt.item2 { float: right; }
	.photographing-staff-img.item2 { float: left; }
	.photographing-staff-header { font-size: 2.4rem; }
	.photographing-design-list { display: table; width: 100%; border-collapse: separate; border-spacing: 5px; table-layout: fixed; }
	.photographing-design-list.clearfix::after { display: none; }
	.photographing-design-list-item { display: table-cell; vertical-align: middle; padding: 2em 1em; }
}


/*
works
-------------------*/
.works-list-item { display: block; float: left; margin-top: 3em; }
.works-images { display: block; }
.works-ico { margin-top: 1em; margin-bottom: 0.5em; }
.works-ico-item { position: relative; display: inline-block; background-color: #a852ff; color: #fff; padding: 0.4em; line-height: 1; }
.works-ico-item.location { background-color: #ffa8d3; }
.works-ico-item.studio { background-color: #00dbec; }
.works-ico-item.design { background-color: #ff906b; }
.works-ico-item.movie { background-color: #95d904; }
.works-ico-tips { 
  opacity: 0; width: auto; height: 0; transform: translate(-50%,1em);
  position: absolute; bottom: calc(100% + 8px); left: 50%; pointer-events: none;
  display: block; padding: 0; white-space: nowrap; transition: height 0.1s, padding 0.1s, opacity 0.3s, transform 0.3s;
  background-color: #212121; color: #fff; text-align: center;
}
.works-ico-item.hover .works-ico-tips { 
  opacity: 1; height: 1em; transform: translate(-50%, 0); padding: 0.5em; 
  transition: height 0.4s, padding 0.4s, opacity 0.3s, transform 0.3s;
}
.works-ico-item.hover .works-ico-tips:after { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute;
	pointer-events: none; border-color: rgba(0,0,0, 0); border-top-color: #212121; border-width: 5px; margin-left: -5px;
}
@media screen and (max-width:767px){
  .works-list-item { width: 48%; margin-right: 4%; }
  .works-list-item:nth-of-type(even) { margin-right: 0; }
  .works-list-item:nth-of-type(odd) .works-ico-item:first-child .works-ico-tips,
  .home-actualintroduction-item:nth-of-type(odd) .works-ico-item:first-child .works-ico-tips { left: 0; transform: translateX(0); }
  .works-list-item:nth-of-type(odd) .works-ico-item:first-child .works-ico-tips:after,
  .home-actualintroduction-item:nth-of-type(odd) .works-ico-item:first-child .works-ico-tips:after { left: 1.1rem; }
  .works-ico-tips { font-size: 1rem; }
  .works-ttl { font-size: 1rem; }
}
@media screen and (min-width:768px){
  .works-list-item { width: 31%; margin-right: 3.5%; }
  .works-list-item:nth-of-type(3n) { margin-right: 0; }
  .works-ico-item { font-size: 2rem; }
  #home .works-ico-item { font-size: 1.4rem; }
  .works-ico-tips { font-size: 1.2rem; }
  .works-ttl { font-size: 1.4rem; }
}
@media screen and (min-width:1100px) {
  .works-ico-tips { font-size: 1.4rem; }
}
@media screen and (min-width:1100px) and (max-width:1200px){
  .works-list-item:nth-of-type(1) .works-ico-item:first-child .works-ico-tips,
  .works-list-item:nth-of-type(3n+1) .works-ico-item:first-child .works-ico-tips,
  .home-actualintroduction-item:nth-of-type(1) .works-ico-item:first-child .works-ico-tips { left: 0; transform: translateX(0); }
  .works-list-item:nth-of-type(1) .works-ico-item:first-child .works-ico-tips:after,
  .works-list-item:nth-of-type(3n+1) .works-ico-item:first-child .works-ico-tips:after,
  .home-actualintroduction-item:nth-of-type(1) .works-ico-item:first-child .works-ico-tips:after { left: 1.8rem; }
}


/*
company
-------------------*/
.company-subheader { margin-bottom: 1em; font-weight: bold; font-size: 1rem; }
.company-subheader-icon { 
	display: inline-block; color: #fff; background-color: #337bae; padding: 0 0.6em; margin-right: 0.5em; vertical-align: middle; 
	font-size: 2rem; line-height: 2;
}
.company-subheader .hind { font-size: 1.8rem; padding-right: 0.5em; }

.company-about-list { margin-top: 2em; }
.company-about-header { font-weight: bold; }

.company-map-wrapper { position: relative; width: 100%; height: 0; padding-top: 52.5%; margin-top: 2em; }
.company-map-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%!important; height: 100%!important; }
@media screen and (max-width:767px){
	.company-message-figure { width: 80%; margin: 1em auto; }
	.company-message-figure-w { display: none; }
	
	.company-about-header,
	.company-about-body { display: block; }
	.company-about-header { padding-right: 0; padding-bottom: 0; }
}
@media screen and (min-width:768px){
	.company-subheader { font-size: 1.6rem; }
	.company-subheader-icon { font-size: 4rem; }
	.company-subheader .hind { font-size: 3.2rem; }
	.company-message-figure { display: none; }
	.company-message-row { display: table; width: 100%; }
	.company-message-txt,
	.company-message-figure-w { display: table-cell; vertical-align: middle; }
	.company-message-figure-w { width: 38%; padding-left: 8%; }
	
	.company-about-header { width: 28%; min-width: 6em; }
	
	.company-map-wrapper { height: 400px; padding-top: 0; }
}


/*
contact
-------------------*/
/* form */
.form-input-block {  }
.contact-form-line { display: block; margin-top: 1rem; }
.contact-form-line:first-of-type { margin-top: 0; }
.list-header.contact-form-header { font-weight: bold; }
.contact-form-header-sub { font-size: 80%; }
@media screen and (max-width:767px){
	.form-input-block { margin-top: 3rem; }
	.form-input-block .list-row { display: block; }
	.list-header.contact-form-header,
	.list-body.contact-form-body { display: block; }
	.list-header.contact-form-header { padding-bottom: 0; }
}
@media screen and (min-width:768px){
	.contact-lead { text-align: center; }
	.form-input-block { margin-top: 8rem; }
	.contact-form-header { width: 20em; padding-top: 1.5rem; }
	.contact-form-line.col2 { float: none; margin-right: 0; width: 100%; }
}
@media screen and (min-width:1100px){
	.contact-form-line.col2 { display: inline-block; vertical-align: top; margin-top: 0; width: 49%; }
	.contact-form-line.col3 { display: inline-block; vertical-align: top; margin-top: 0; width: 32%; }
}
/* validate */
.formError .formErrorContent { border: 0; border-radius: 0; font-size: 1.2rem; padding: 0.4em 1em; }
@media screen and (min-width:768px){
  .formError .formErrorContent { font-size: 1.6rem; }
}

/* error */
.contact-err-item { color: #f00; font-size: 120%; margin: 1em auto; }
@media screen and (max-width:767px){
	.contact-err-list { margin-top: 3rem; text-align: left; }
}
@media screen and (min-width:768px){
	.contact-err-list { margin-top: 5rem; text-align: center; }
}

/* privacy */
.privacy-section { background-color: #f2f7F8; }
.contact-privacy { background: #fff; border: #d8d8d8 1px solid; height: 200px; overflow-y: scroll; }
.contact-privacy-inner { padding: 1em; }
.privacy-header1 { font-weight: bold; font-size: 122%; margin-bottom: 1em; }
.privacy-header-2 { font-weight: bold; margin-top: 1.5em; margin-bottom: 1em; }
@media screen and (min-width:768px){
	.contact-privacy-inner { padding: 1em 2em; }
}


/*
entry
-------------------*/
.news-single-entry p,
.news-single-entry ul,
.news-single-entry ol,
.news-single-entry dl,
.news-single-entry table,
.news-single-entry blockquote,
.news-single-entry pre,
.news-single-entry h1,
.news-single-entry h2,
.news-single-entry h3,
.news-single-entry h4,
.news-single-entry h5, 
.news-single-entry h6 { margin-bottom: 2em; }
.news-single-entry ul li { margin: 1em 0 1em 1em; list-style: disc outside; }
.news-single-entry ol li { margin: 1em 0 1em 1em; list-style: decimal outside; }
.news-single-entry th,
.news-single-entry td { padding: 0.5em; }
.news-single-entry h1,
.news-single-entry h2 { font-size: 126%; font-weight: bold; color: #7f56c6; }
.news-single-entry h3 { font-size: 110%; font-weight: bold; }
.news-single-entry h4 { font-size: 105%; color: #7f56c6; }
.news-single-entry h5 { font-size: 105%; }
.news-single-entry img { max-width: 100%; height: auto; }
.news-single-entry img.alignleft { display: inline-block; float: left; margin-right: 15px; }
.news-single-entry img.aligncenter { clear: both; display: block; float: none; margin-left: auto; margin-right: auto; }
.news-single-entry img.alignright { display: inline-block; float: right; margin-left: 15px; }
.news-single-entry img.alignnone { float: none; }
.news-single-entry strong { font-weight: bold; }
.news-single-entry b { font-weight: bold; }
.news-single-entry em { font-style: italic; }
.news-single-entry del { text-decoration: line-through; }
.news-single-entry hr { border: 0; border-top: #eee 1px solid; height: 0; }