@charset "UTF-8";
/* 汎用 */
.clearfix:after { content: ""; display: table; clear: both; }

.fontm { font-size: 0.88em; line-height: 1.57; }

html { font-size: 16px; }

body { color: #4D4D4D; font-family: 'Helvetica Neue',Helvetica,Arial,"Meiryo UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN","Yu Gothic UI", "MS PGothic", sans-serif; background-color: #FFF; font-size: 1rem; }

a { color: #656565; text-decoration: none; }

a img { border: 0; }

.mt30 { margin-top: 30px; }

h1, h2, h3, h4, h5, p, body, ul, ol, li, dl, dt, dd { margin: 0; padding: 0; display: block; }

body { color: #555; background-color: #FFF; }

a { color: #555; }

section { width: 1200px; margin-left: auto; margin-right: auto; }

article { margin-bottom: 180px; }
article h3 { font-size: 2.438rem; text-align: center; font-weight: normal; padding-bottom: 64px; letter-spacing: 0.66em; margin-left: 0.66em; color: #333333; }
article h3 span { display: block; font-size: 0.75rem; letter-spacing: 1em; padding-left: -2em; padding-top: 1em; color: #777777; }
article h3 span::before, article h3 span::after { content: "-"; }
article:last-of-type { margin-bottom: 0; }

header { position: fixed; top: 0; left: 0; right: 0; padding: 0; margin: 0; height: 80px; display: flex; justify-content: space-between; z-index: 12; background-image: -webkit-linear-gradient(white 30%, rgba(255, 255, 255, 0) 100%); background-image: -o-linear-gradient(white 30%, rgba(255, 255, 255, 0) 100%); background-image: linear-gradient(white 30%, rgba(255, 255, 255, 0) 100%); }
header h1 { padding: 22px 0 0 20px; }
header ul { display: flex; justify-content: flex-end; }
header li { text-align: center; padding-right: 22px; }
header li a { display: block; padding: 20px 0 20px 0; line-height: 40px; font-size: 1.125rem; }
header li a:hover, header li a.now { border-bottom-color: #FFF; }

#humberger-flag, #humberger-mat, .humberger { display: none; }

footer { background-image: -webkit-linear-gradient(#FFFFFF 0%, #C2C2C2 50%); background-image: -o-linear-gradient(#FFFFFF 0%, #C2C2C2 50%); background-image: linear-gradient(#FFFFFF 0%, #C2C2C2 50%); text-align: center; padding-top: 150px; height: 150px; }
footer a { margin: 36px auto 32px; display: block; width: 50.6px; height: 41.3px; }
footer a img { width: 100%; height: 100%; }
footer #copyright { font-size: 0.688rem; color: #8B8B8B; }

.onlypc { display: block; }

.onlysp { display: none; }

p.lead { margin-bottom: 20px; font-size: 1.375rem; text-align: center; line-height: 1.75; }
p.lead strong { font-size: 1.75rem; font-weight: normal; }

p.kome { font-size: 0.875rem; }

.gmappin { vertical-align: middle; margin-left: 1em; }

.contactbtn a { display: block; margin: 0 auto; width: 528px; background-color: #8CAFE3; padding: 30px 0; font-size: 1.5rem; line-height: 1.67; border-radius: 5px; text-align: center; color: #FFF; }
.contactbtn a:hover { opacity: 0.75; }

#concept { width: 100%; position: relative; }
#concept p.lead { padding: 80px 0 95px; margin-bottom: 0; font-family: "Roboto Slab" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif; font-weight: normal; -webkit-transform: rotate3d(0, 0, 1, 0.028deg); -moz-transform: rotate3d(0, 0, 1, 0.028deg); -o-transform: rotate3d(0, 0, 1, 0.028deg); transform: rotate3d(0, 0, 1, 0.028deg); font-size: 2rem; }
#concept ul { display: flex; justify-content: space-between; }
#concept li { width: 47.5%; text-align: left; font-size: 1.125rem; line-height: 2; }
#concept li:first-of-type { padding-bottom: 2em; }
#concept p.kome { position: absolute; bottom: 0; left: 0; text-align: left; }

#service ul { display: flex; justify-content: space-between; list-style: none; flex-wrap: wrap; }
#service ul h4 { font-family: 'Century Gothic'; font-size: 2rem; font-weight: normal; color: #333; margin-bottom: 0.5em; }
#service ul h4::first-letter { font-size: 2.25rem; }
#service ul h4 span { font-size: 1.125rem; font-family: 'Helvetica Neue',Helvetica,Arial,"Meiryo UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN","Yu Gothic UI", "MS PGothic", sans-serif; }
#service ul h4 span::before { content: '（'; }
#service ul h4 span::after { content: '）'; }
#service ul li { width: 570px; margin-bottom: 46px; }
#service ul li p { background-position: left top; background-repeat: no-repeat; background-size: 160px 250px; line-height: 1.8; padding-left: 180px; min-height: 250px; }
#service ul .service--video p { background-image: url(../images/service_video.jpg); }
#service ul .service--video h4::first-letter { color: #AF3333; }
#service ul .service--web p { background-image: url(../images/service_web.jpg); }
#service ul .service--web h4::first-letter { color: #4B64AB; }
#service ul .service--design p { background-image: url(../images/service_design.jpg); }
#service ul .service--design h4::first-letter { color: #2F8225; }
#service ul .service--media p { background-image: url(../images/service_media.jpg); }
#service ul .service--media h4::first-letter { color: #B8973B; }

#profile dt, #profile dd { padding-top: 27px; padding-bottom: 27px; color: #555; }
#profile dt { float: left; width: 310px; text-align: right; letter-spacing: 1em; }
#profile dd { padding-left: 349px; border-bottom: 1px dashed #707070; }

#works { position: relative; }
#works h4 { position: relative; line-height: 2em; text-align: center; font-size: 1.375rem; color: #707070; font-weight: normal; margin-bottom: 42px; padding-top: 10px; padding-bottom: 10px; }
#works h4::before, #works h4::after { content: ""; width: 29px; height: 47px; position: absolute; }
#works h4::before { top: 0; left: 0; border-top: 1px solid #999; border-left: 1px solid #999; }
#works h4::after { bottom: 0; right: 0; border-bottom: 1px solid #999; border-right: 1px solid #999; }
#works .works--inner { margin-right: 430px; min-height: 375px; }
#works ul.works--imglist { position: absolute; right: 0; top: 129px; }
#works p.kome { margin-top: 30px; }

.works--clients li { display: inline; white-space: nowrap; line-height: 1.75; }
.works--clients li::after { content: ' /'; display: inline; margin-left: 0.5em; margin-right: 0.5em; color: #999; }
.works--clients li:last-of-type::after { display: none; }

ul.works--imglist { display: flex; justify-content: space-between; list-style: none; flex-wrap: wrap; width: 375px; }
ul.works--imglist li { width: 180px; margin-bottom: 15px; }
ul.works--imglist li img { width: 100%; height: auto; display: block; }
ul.works--imglist li p { padding-top: 20px; }

#access iframe { width: 100%; height: 450px; margin-bottom: 27px; }
#access p { line-height: 1.75; }
#access .access--attention { color: #157F2E; }
#access .access--rail { margin-top: 2.5em; }

#gotocontact .gotocontact--pretext { font-size: 1.25rem; text-align: center; margin-bottom: 13px; letter-spacing: 2px; }

#contact-mail { padding: 140px 0 0; }
#contact-mail h3 { letter-spacing: 0.33em; margin-left: 0.33em; }
#contact-mail h4 { text-align: center; font-size: 2rem; font-weight: normal; padding-bottom: 1.5em; }
#contact-mail h4 span { position: relative; display: inline-block; letter-spacing: 0.66em; padding-left: 0.66em; color: #666; }
#contact-mail h4 span::before, #contact-mail h4 span::after { content: ""; position: absolute; display: block; top: 50%; width: 100px; height: 2px; }
#contact-mail h4 span::before { left: -120px; background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%); background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%); background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%); }
#contact-mail h4 span::after { right: -120px; background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%); background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%); background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%); }
#contact-mail p.lead { font-size: 1.25rem; }
#contact-mail div.telbox { padding: 20px 0 40px; text-align: center; }
#contact-mail div.telbox h5 { font-size: 1.25rem; font-weight: normal; }
#contact-mail div.telbox address { padding: 10px 0; display: block; font-size: 3rem; font-style: normal; }
#contact-mail div.telbox span { font-size: 1.25rem; font-weight: bold; margin-right: 0.5em; color: #777; }
#contact-mail form { padding: 30px; border: 1px solid #DDD; border-radius: 5px; background-color: #F7F7F7; }
#contact-mail dl { display: block; flex-wrap: wrap; justify-content: space-between; }
#contact-mail dt { font-weight: normal; line-height: 1.5rem; font-size: 1rem; padding-bottom: 5px; letter-spacing: 0.33em; }
#contact-mail dd { padding-bottom: 20px; width: 50%; }
#contact-mail dd:nth-of-type(3) { width: 33%; }
#contact-mail dd:nth-last-of-type(3), #contact-mail dd:nth-last-of-type(2), #contact-mail dd:nth-last-of-type(1) { width: 100%; }
#contact-mail .subtext { line-height: 1.5rem; font-size: 1rem; }
#contact-mail .required label::after { content: '必 須'; display: inline-block; font-size: 14px; padding: 0 6px; height: 19px; line-height: 19px; letter-spacing: 0; background-color: #d80d0d; text-align: center; color: #FFF; margin: 0 8px; vertical-align: middle; transform: translateY(-2px); }
#contact-mail ul.confirm .required label::after { display: none; }
#contact-mail input[type="text"], #contact-mail input[type="email"], #contact-mail input[type="tel"], #contact-mail textarea { display: block; -webkit-appearance: none; font-size: 1rem; line-height: 1.5; padding: 8px 10px; box-sizing: border-box; border: 1px #B3B3B3 solid; background-color: #FFF; }
#contact-mail input[type="text"]:focus, #contact-mail input[type="email"]:focus, #contact-mail input[type="tel"]:focus, #contact-mail textarea:focus { border: 1px #777 solid; outline: 0 none; }
#contact-mail input[type="text"]::placeholder, #contact-mail input[type="email"]::placeholder, #contact-mail input[type="tel"]::placeholder, #contact-mail textarea::placeholder { color: #BFBFBF; }
#contact-mail input[type="text"]:-ms-input-placeholder, #contact-mail input[type="email"]:-ms-input-placeholder, #contact-mail input[type="tel"]:-ms-input-placeholder, #contact-mail textarea:-ms-input-placeholder { color: #BFBFBF; }
#contact-mail input[type="text"]::-ms-input-placeholder, #contact-mail input[type="email"]::-ms-input-placeholder, #contact-mail input[type="tel"]::-ms-input-placeholder, #contact-mail textarea::-ms-input-placeholder { color: #BFBFBF; }
#contact-mail input[type="text"], #contact-mail input[type="email"], #contact-mail input[type="tel"] { width: 100%; }
#contact-mail textarea { height: 10em; width: 100%; }
#contact-mail input[type="submit"] { border: 0 none; display: block; margin: 0 auto; width: 320px; background-color: #8CAFE3; padding: 20px 0 20px 0.25em; font-size: 1.25rem; line-height: 1.5; border-radius: 5px; letter-spacing: 0.25em; text-align: center; color: #FFF; }
#contact-mail input[type="submit"]:hover { opacity: 0.75; }
#contact-mail .btndd { text-align: center; padding: 55px 0 35px; }
#contact-mail .err { color: #F00; }
#contact-mail .comment { padding-top: 3em; text-align: center; }
#contact-mail .comment a { color: #003288; text-decoration: underline; }

#contact-policy h3 { letter-spacing: 0.33em; margin-left: 0.33em; }
#contact-policy dl { margin-top: 1.625em; padding-bottom: 0; }
#contact-policy p, #contact-policy dt, #contact-policy dd { font-size: 1rem; line-height: 1.625; }
#contact-policy dt { font-weight: bold; }
#contact-policy dd { margin-bottom: 1.625rem; }
#contact-policy .pri_sho { text-align: right; }

.covervideo { margin-top: 80px; position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; background-color: #000; }
.covervideo iframe, .covervideo #untouch { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.covervideo #untouch { transition: opacity 3s; background: radial-gradient(rgba(0, 0, 0, 0) 50%, black 80%); }
.covervideo #untouch.remove { opacity: 0; }

@media only screen and (max-width: 480px) { .w100 { width: 100%; height: auto; }
  section { width: auto; }
  article { margin-bottom: 110px; margin-right: 15px; margin-left: 15px; }
  article h3 { font-size: 1.625rem; padding-bottom: 29px; }
  article h3 span { font-size: 0.625rem; }
  header { height: 50px; }
  header h1 { padding: 5px 0 0 8px; }
  header h1 img { width: 262px; height: 24px; }
  header nav { position: fixed; z-index: 10; color: #000; overflow: auto; top: 0; left: 0; width: 100%; height: 100%; background-color: #FFF; transition: .2s ease-in-out; transform: translateY(-105%); text-align: center; }
  header ul { display: inline-block; padding-top: 20px; }
  header li { text-align: center; padding-right: 0; }
  header li a { display: block; line-height: 20px; font-size: 1.125rem; }
  .humberger { display: block; position: absolute; right: 5px; top: 5px; width: 25px; height: 25px; padding: 5px; cursor: pointer; z-index: 11; text-align: center; }
  .humberger span, .humberger span::before, .humberger span::after { display: block; position: absolute; width: 25px; left: 0; }
  .humberger span, .humberger span::before, .humberger span::after { height: 3px; background-color: #A5A5A5; transition: .1s ease-in-out; content: ''; border-radius: 1.5px; }
  .humberger span::before { top: -8px; }
  .humberger span { top: 17px; left: 5px; }
  .humberger span::after { top: 9px; }
  #humberger-mat { position: fixed; z-index: 9; top: 0; left: 0; width: 100%; height: 100%; background-color: #FFF; opacity: 0; transition: .3s ease-in-out; }
  #humberger-flag:checked ~ #gnav { transform: translateY(0%); }
  #humberger-flag:checked ~ .humberger span::before { top: 0px; left: 0; transform: rotate(-45deg); }
  #humberger-flag:checked ~ .humberger span { background-color: rgba(255, 255, 255, 0); }
  #humberger-flag:checked ~ .humberger span::after { top: 0px; transform: rotate(45deg); }
  footer { padding-top: 50px; height: 150px; }
  footer #copyright { font-size: 0.625rem; }
  .onlypc { display: none; }
  .onlysp { display: block; }
  ul.imglist { display: block; }
  ul.imglist li { width: 100%; margin-bottom: 25px; }
  ul.imglist li p { padding-top: 15px; font-size: 0.938rem; }
  p.lead { margin-bottom: 30px; font-size: 1.125rem; }
  p.lead strong { font-size: 1.5rem; }
  p.kome { font-size: 0.75rem; }
  .contactbtn a { width: 100%; padding: 20px 0; font-size: 1.313rem; line-height: 1.85; }
  #concept { width: auto; }
  #concept p.lead { padding: 40px 0 40px; font-size: 1.125rem; }
  #concept ul { display: block; }
  #concept li { width: auto; font-size: 0.875rem; padding-bottom: 1em; }
  #concept li:first-of-type { padding-bottom: 1.5em; }
  #concept p.kome { position: static; font-size: 0.75rem; }
  #service ul { display: block; }
  #service ul h4 { font-size: 1.625rem; }
  #service ul h4::first-letter { font-size: 1.75rem; }
  #service ul h4 span { font-size: 0.75rem; }
  #service ul li { width: auto; }
  #service ul li p { background-position: top left; background-size: 120px 188px; padding-left: 135px; min-height: auto; font-size: 0.875rem; }
  #profile { margin-left: 0; margin-right: 0; }
  #profile dt, #profile dd { padding-top: 15px; padding-bottom: 15px; font-size: 0.875rem; }
  #profile dt { width: 90px; letter-spacing: 0; }
  #profile dd { padding-left: 108px; }
  #works h4 { line-height: 1.4; font-size: 1rem; margin-bottom: 26px; }
  #works .works--inner { margin-right: 0; min-height: auto; }
  #works .works--clients { text-align: center; }
  #works ul.works--imglist { position: static; }
  #works p.works--notes { margin-top: 1em; text-align: right; font-size: 0.75rem; }
  #works p.kome { margin-top: 30px; margin-bottom: 2em; }
  .works--clients li { font-size: 0.875rem; }
  ul.works--imglist { width: auto; }
  ul.works--imglist li { width: 47.8%; margin-bottom: 15px; }
  ul.works--imglist li img { width: 100%; height: auto; display: block; }
  ul.works--imglist li p { padding-top: 20px; }
  #access { margin-right: 0; margin-left: 0; }
  #access iframe { height: 320px; margin-bottom: 15px; }
  #access p { font-size: 0.875rem; margin-right: 15px; margin-left: 15px; }
  #gotocontact { margin-bottom: 0; }
  #gotocontact .gotocontact--pretext { font-size: 1.063rem; margin-bottom: 13px; letter-spacing: 2px; }
  #contact-mail { margin-left: 0; margin-right: 0; padding: 92px 0 0; }
  #contact-mail h4 { font-size: 1.25rem; }
  #contact-mail h4 span::before, #contact-mail h4 span::after { width: 50px; }
  #contact-mail h4 span::before { left: -60px; }
  #contact-mail h4 span::after { right: -60px; }
  #contact-mail p.lead { font-size: 0.875rem; margin-bottom: 12px; padding: 0 15px; }
  #contact-mail div.telbox { padding: 15px 0 35px; }
  #contact-mail div.telbox h5 { font-size: 1rem; }
  #contact-mail div.telbox address { padding: 5px 0; font-size: 2rem; }
  #contact-mail div.telbox span { font-size: 1rem; }
  #contact-mail form { padding: 15px 15px 35px; border-left: 0 none; border-right: 0 none; border-bottom: 0 none; border-radius: 0; }
  #contact-mail dd { width: auto; padding-bottom: 20px; }
  #contact-mail dd:nth-of-type(3), #contact-mail dd:nth-last-of-type(3), #contact-mail dd:nth-last-of-type(2), #contact-mail dd:nth-last-of-type(1) { width: auto; }
  #contact-mail label, #contact-mail .subtext { font-size: 0.875rem; }
  #contact-mail .required label::after { font-size: 0.75rem; padding: 0 3px; height: 15px; line-height: 15px; margin: 0 4px; transform: translateY(-1px); }
  #contact-mail input[type="text"], #contact-mail input[type="email"], #contact-mail input[type="tel"], #contact-mail textarea { font-size: 0.875rem; line-height: 22px; padding: 8px 10px; }
  #contact-mail input[type="text"], #contact-mail input[type="email"], #contact-mail input[type="tel"] { height: 40px; }
  #contact-mail textarea { height: 10em; }
  #contact-mail input[type="submit"] { padding: 17px 0; width: 100%; font-size: 1.25rem; }
  #contact-mail .btndd { text-align: center; padding: 25px 0 5px; }
  #contact-policy p.lead { text-align: left; }
  #contact-policy dl { margin-top: 1.667em; }
  #contact-policy p, #contact-policy dt, #contact-policy dd { font-size: 0.75rem; }
  #contact-policy dd { margin-bottom: 1.667em; }
  #popup .covervideo { left: 0; right: 0; }
  .covervideo { margin-top: 50px; } }