@charset "UTF-8";

* {
  box-sizing:border-box;
  /* tap */
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-box-shadow: none;
  box-shadow: none;
  outline: none;
}
*:focus { outline: none; }

html { overflow-x:hidden; overflow-y:scroll; font-size: 16px; line-height:1.5; color:#000; letter-spacing:0.05em; font-feature-settings: "palt"; }
body {
  width:100%; margin:0; padding:0;
  font-family: "游ゴシック", YuGothic, 'Noto Sans JP', "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif;
  background:#fff;
}
body.fixed { position:fixed; width:100%; height:100%; }

header, main, footer {width: 100%;}

ol, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, h7,figure, form, p , figure { margin:0; padding:0; font-weight: 500;}
img { border:0; }
li { list-style-type:none; }
table { border-collapse: collapse; border-spacing: 0;}
table th { font-weight: normal;}

a { overflow:hidden; -webkit-transition:.2s linear; transition:.2s linear; }
a:link		{ color: #000; text-decoration: none; }
a:visited	{ color:#000; }
a:hover		{ opacity:0.7; }
a:active	{ opacity:0.7; }
a img { -webkit-transition:.2s linear; transition:.2s linear; }
a:hover img { opacity:0.7; }
a.underline { text-decoration:underline; }

img { max-width:100%; height:auto; vertical-align:top; }

/* clearfix */
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

.serif { font-family: 'Noto Serif JP', serif; font-weight: 500;}
.en { font-family: 'Oswald', serif; }

.bold  { font-weight:bold; }
.txt_l { text-align:left; }
.txt_c { text-align:center; }
.txt_r { text-align:right; }
.f_left { float:left; }
.f_right { float:right; }
.clear { clear:both; }
.red { color:#f25252; }

.no_pc {display: none;}

/* -------------------------------------------- */
/*  animation */
/* -------------------------------------------- */
@keyframes zoomUp {
  0% { transform: scale(1);}
  100% { transform: scale(1.15);}
}

.swiper-slide-active .slide-img,
.swiper-slide-duplicate-active .slide-img,
.swiper-slide-prev .slide-img{ animation: zoomUp 10s linear 0s 1 normal both;  }
.swiper-slide {overflow: hidden;}

.slide-img img{ display: block;}


/* header */
#header {padding: 50px 0; background-color: #fff;}
#header *{transition: all 500ms 0s ease;}
#header .header_inner {position: relative; width: 100%; max-width: 1400px; margin: auto;}
#header .header_name {text-align: center; font-size: 28px; font-weight: 400; letter-spacing: 0.2em;}
#header .header_name span {display: block; font-size: 16px;}

#header.fixed {position: fixed; left: 0; top: 0; padding: 20px 0; z-index: 50;}
#header.fixed .header_name {font-size: 22px;}
#header.fixed .header_name span {font-size: 12px;}

/* nav */
#nav {position: absolute; top: 35%; left: 80px;}
#nav .nav_link {display: flex;}
#nav .nav_link li {font-size: 14px;}
#nav .nav_link li + li {margin-left: 2em;}

/* contents */
#contents {display: block; width: 100%; max-width: 1400px; margin: auto;}
#contents section {margin-bottom: 120px;}
#contents .contents_inner {width: 1200px; margin: 0 auto;}
#contents .contents_h2 {margin-bottom: 10px; font-size: 34px; line-height: 2; letter-spacing: 0.05em; text-align: center;}
#contents .contents_lead {margin-bottom: 60px; text-align: center; font-weight: 300;}

/* mv */
#contents .mv {position: relative;}
#contents .mv_catchcopy {position: absolute; top: 60px; left: 80px; color: #fff; line-height: 2;font-size: 34px; letter-spacing: 0.2em; z-index: 1;}

/* top */
#contents .top_inner {display: flex;}
#contents .top_image {width: 50%;}
#contents .top_txt {width: 50%; padding: 50px 0 50px 50px; line-height: 2;}
#contents .top_txt p {font-size: 18px; letter-spacing: 0.05em;}
#contents .top_h2 {margin-bottom: 30px; font-size: 30px; letter-spacing: 0.1em;}

/* service */
#contents .service_outline {background: url(../img/service_image01.jpg) center top / 100% auto no-repeat;}
#contents .service_mask {padding-top: 70px; background-color: rgba(255,255,255,0.3);}
#contents .service_txt {margin-bottom: 70px; text-align: center; line-height: 2.5; text-shadow: 0 9px 9px #fff;}
#contents .service_list {display: flex; justify-content: space-between;}
#contents .service_list + .service_list {margin-top: 10px;}
#contents .service_list li {width: 394px; padding: 40px 35px; background-color: #fff; letter-spacing: 0.05em; box-shadow: 2px 0 10px rgba(0,0,0,0.12);}
#contents .service_list li p {font-size: 14px; line-height: 2;}
#contents .service_list li p.service_head {margin-bottom: 40px; font-size: 20px; vertical-align: middle;}
#contents .service_list li p.service_head .icon {margin-right: 20px;}

/* flow */
#contents .flow_notes {display: block; margin-top: 1em; font-size: 14px;}
#contents .flow_outline {display: flex; justify-content: space-between;}
#contents .flow_image {width: 560px;}
#contents .flow_image img {position: -webkit-sticky; position: sticky; left: 0; top: 0;}
#contents .flow_list {width: 825px;}
#contents .flow_list li {display: flex; align-items: center; background-color: #f7f7f7;}
#contents .flow_list li + li {margin-top: 10px;}
#contents .flow_list li.flow_customer {background-color: #f7dad2;}
#contents .flow_num {width: 124px; text-align: center;}
#contents .flow_num p {display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; margin: 0 auto; font-size: 28px; border: 1px solid #000; border-radius: 50%;}
#contents .flow_list li.flow_customer span {display: block; margin-top: 10px; font-size: 14px; color: #e6855e;}
#contents .flow_commentary {width: 700px; padding: 20px 30px; border-left: 1px solid #000;}
#contents .flow_commentary p {font-size: 14px; line-height: 2; letter-spacing: 0.05em;}
#contents .flow_commentary p.flow_head {font-size: 24px;}

/* work */
#contents .works {padding: 300px 0 0; background: url(../img/work_image01.jpg) center top / 100% auto no-repeat #f7f7f7;}
#contents .works_outline {padding: 50px 50px 100px; background-color: #f7f7f7;}
#contents .works_list {display: flex; justify-content: space-between;}
#contents .works_list li {width: 270px; padding: 30px 0; text-align: center; background-color: #fff; box-shadow: 2px 0 10px rgba(0,0,0,0.12);}
#contents .works_list li p {font-size: 18px; line-height: 1.7;}
#contents .works_list li p.works_num {font-size: 30px;}
#contents .works_list li p.works_num span {font-size: 50px;}
#contents .works_list li p.works_supplement {font-size: 14px;}

/* aboutus */
#contents .aboutus {position: relative; margin-top: 324px; background-color: #f7f7f7;}
#contents .aboutus .contents_inner {padding: 95px 0;}
#contents .aboutus_image {position: absolute; top: -200px; right: 0;}
#contents .aboutus_head {position: relative; width: 480px; padding: 80px 40px; line-height: 2; letter-spacing: 0.05em; background-color: #fff; box-shadow: 2px 0 10px rgba(0,0,0,0.12); z-index: 1;}
#contents .aboutus_h2 {margin-bottom: 10px; font-size: 34px;}
#contents .aboutus_outline {float: right; margin-top: -100px; padding-right: 100px; background-color: #f7f7f7;}
#contents .aboutus_outline table th, #contents .aboutus_outline table td {line-height: 2; letter-spacing: 0.05em;}
#contents .aboutus_outline table th {vertical-align: top;}
#contents .aboutus_outline table td a {pointer-events: none; cursor: default; text-decoration: none;}

/* contact */
#contents .contact_inner {display: flex; justify-content: space-between;}
#contents .contact_outline {width: 480px;}
#contents .contact_outlinebox {position: -webkit-sticky; position: sticky; left: 0; top: 0;}
#contents .contact_outline p {line-height: 2;}
#contents .contact_h2 {margin-bottom: 10px; font-size: 34px; letter-spacing: 0.05em;}
#contents .contact_h3 {margin-bottom: 0.5em; padding-bottom: 0.5em; font-size: 24px; line-height: 2; letter-spacing: 0.05em; border-bottom: 1px solid #000;}
#contents .contact_tel {margin-top: 50px; padding: 60px 75px; background-color: #fdf4f1;}
#contents .contact_num {font-size: 24px;}
#contents .contact_num a {pointer-events: none; cursor: default; text-decoration: none;}
#contents .contact_num span {font-size: 14px;}
#contents .contact_form {width: 620px;}
#contents .contact_form p {font-size: 14px;}
#contents .contact_form p + form {margin-top: 60px;}
#contents .contact_form dl dt {margin-bottom: 20px; font-size: 14px;}
#contents .contact_form dl dt.required:after {content: "*"; color: #e6855e;}
#contents .contact_form dl dd + dt {margin-top: 30px;}
#contents .contact_form input[type="text"], #contents .contact_form input[type="tel"], #contents .contact_form input[type="email"], #contents .contact_form textarea {width: 100%; padding: 10px; border: 1px solid #222;}
#contents .contact_form input[type="text"], #contents .contact_form input[type="tel"], #contents .contact_form input[type="email"] {height: 80px;}
#contents .contact_form textarea {font-family: "Arial";}
#contents .contact_btn {position: relative; width: 400px; margin: 40px auto 0;}
#contents .contact_btn:after {content: ""; position: absolute; right: 0; top: 50%; width: 40px; height: 1px; background-color: #fff;}
#contents .contact_btn input {display: flex; justify-content: center; align-items: center; width: 100%; height: 90px; margin: 0 auto; color: #fff; font-size: 16px; border: none; font-family: 'Noto Serif JP', serif; font-weight: 500; cursor: pointer; -webkit-transition:.2s linear; transition:.2s linear;}
#contents .contact_btn input:hover {opacity: 0.7;}
#contents .contact_btn input[type="submit"] {background-color: #000;}
#contents .contact_btn input.back {background-color: #7b7b7b;}
#contents .contact_btn a.contact_top {display: flex; justify-content: center; align-items: center; width: 100%; height: 90px; margin: 0 auto; color: #fff; font-size: 16px; background-color: #000;}

#contents .contact_confirm {margin: 0 auto;}
#contents .contact_confirm dd {margin-left: 1em; min-height: 1em;}
#contents .contact_confirm_btn {display: flex; justify-content: space-between;}
#contents .contact_confirm_btn .contact_btn {width: 45%;}

/* footer */
#footer {color: #fff; font-family: 'Noto Serif JP', serif; font-weight: 500; font-size: 14px; background-color: #222;}
#footer .footer_inner {display: flex; justify-content: space-between; align-items: baseline; padding: 90px 0 70px; width: 1200px; margin: 0 auto;}
#footer .footer_left p{line-height: 2; letter-spacing: 0.05em;}
#footer .footer_left p.footer_name {margin-bottom: 30px; text-align: center; font-size: 28px; line-height: normal; letter-spacing: 0.2em;}
#footer .footer_left p.footer_name span {font-size: 16px;}
#footer .footer_left .footer_tel {pointer-events: none; cursor: default; text-decoration: none; color: #fff;}
#footer .footer_right {text-align: right;}
#footer .footer_pagelink {display: flex; margin-bottom: 40px;}
#footer .footer_pagelink li {width: 130px; text-align: center;}
#footer .footer_pagelink li + li {border-left: 1px solid #fff;}
#footer .footer_pagelink a {color: #fff;}
#footer .footer_banner {display: flex; justify-content: flex-end; margin-bottom: 50px;}
#footer .footer_banner li + li {margin-left: 10px;}

/* pagetop */
.pagetop { display: none; position: fixed; bottom: 30px; right: 15px;}

/* ======================================================================================================================= */
/* for IE */
/* ======================================================================================================================= */
@media screen\0 {
}

@media print, screen and (max-width: 1400px) {
  /* header */
  #header .header_inner {max-width: 100%; width: 100%;}

  /* contents */
  #contents {max-width: 100%; width: 100%;}
  #contents .contents_inner {width: 90%; margin: 0 5%;}

  /* mv */
  #contents .mv_catchcopy {left: 8%;}

  /* service */
  #contents .service_list li {width: 33%;}

  /* flow */
  #contents .flow_image {width: 40%;}
  #contents .flow_list {width: 59%;}
  #contents .flow_num {width: 15%;}
  #contents .flow_commentary {width: 85%;}

  /* works */
  #contents .works_outline {padding: 50px 4% 100px;}
  #contents .works_list li {width: 23%; padding: 30px 10px;}
  #contents .works_list li p {height: 3em;}

  /* aboutus */
  #contents .aboutus_head {width: 40%;}
  #contents .aboutus_outline {width: 55%; padding-right: 0;}

  /* contact */
  #contents .contact_outline {width: 40%;}
  #contents .contact_form {width: 52%;}
  #contents .contact_btn {width: 65%;}

  /* footer */
  #footer .footer_inner {width: 90%; margin: 0 5%;}
}
@media print, screen and (max-width: 1200px) {
  /* header */
  #header {padding: 50px 4%;}

  /* nav */
  #nav {left: 1%; top: auto; bottom: -35px;}
  #header.fixed #nav {bottom: 0;}

  /* top */
  #contents .top_txt {padding: 50px 0 50px 8%;}

  /* service */
  #contents .service_txt {margin-bottom: 35px;}

  /* works */
  #contents .works {padding: 20% 0 0;}

  /* contact */
  #contents .contact_tel {padding: 60px 15%;}
}

@media print, screen and (max-width: 1000px) {
  /* header */
  #header.fixed {padding: 20px 0 40px;}
  /* nav */
  #nav {left: 0; right: 0;}
  #nav .nav_link {justify-content: center;}
  #header.fixed #nav {bottom: -25px;}

  /* service */
  #contents .service_outline {background: url(../img/service_image01.jpg) 15% top / 200% auto no-repeat;}
  #contents .service_list {display: block;}
  #contents .service_list li {display: flex; align-items: center; width: 100%; padding: 20px 10px;}
  #contents .service_list li + li {margin-top: 10px;}
  #contents .service_list li p.service_head {width: 40%; margin-bottom: 0; text-align: center;}
  #contents .service_list li p.service_head .icon {display: block; margin-right: 0;}
  #contents .service_list li p.service_head + p {width: 60%;}

  /* works */
  #contents .works_list {display: block;}
  #contents .works_list li {width: 49%; margin-bottom: 10px;}
  #contents .works_list li:nth-of-type(odd) {float: left;}
  #contents .works_list li:nth-of-type(even) {float: right;}
  #contents .works_list li p {height: auto;}

  /* aboutus */
  #contents .aboutus .contents_inner {padding: 0 0 95px;}
  #contents .aboutus_head {width: 100%; padding: 40px;}
  #contents .aboutus_outline {float: none; width: 100%; margin-top: 30px;}

  /* contact */
  #contents .contact_tel {padding: 30px 5%;}

  /* footer */
  #footer .footer_left {margin-bottom: 30px;}
  #footer .footer_inner {display: block; padding: 50px 0 50px;}
  #footer .footer_left p {text-align: center;}
  #footer .footer_pagelink {justify-content: center;}
  #footer .footer_banner {justify-content: center;}
}

@media print, screen and (max-width: 680px) {
  .no_pc {display: block;}
  .no_sp {display: none;}

  /* header */
  #nav .nav_link li {font-size: 11px;}

  /* nav */
  #nav {bottom: -25px;}

  /* contents */
  #contents section {margin-bottom: 60px;}
  #contents .contents_h2 {font-size: 20px;}
  #contents .contents_lead {font-size: 16px; padding: 0 5%; margin-bottom: 30px;}

  /* mv */
  #contents .mv_catchcopy { left: 3%; top: 5%; line-height: 1.8; font-size: 16px;}

  /* top */
  #contents .contents_inner {display: block;}
  #contents .top_image {width: 100%;}
  #contents .top_txt {width: 100%; padding: 25px 0;}
  #contents .top_h2 {font-size: 20px; margin-bottom: 15px; text-align: center;}
  #contents .top_txt p {font-size: 14px;}

  /* service */
  #contents .service_outline {background: url(../img/service_image01.jpg) 15% top / 100% auto no-repeat;}
  #contents .service_mask {padding-top: 35%; background-color: transparent;}
  #contents .service_txt {margin-bottom: 20px; font-size: 14px;}
  #contents .service_list li {display: block; padding: 20px;}
  #contents .service_list li p.service_head {width: 100%; font-size: 16px;}
  #contents .service_list li p.service_head + p {width: 100%;}

  /* flow */
  #contents .flow_notes {font-size: 12px;}
  #contents .flow_outline {display: block;}
  #contents .flow_image {width: 100%; margin-bottom: 10px;}
  #contents .flow_image img {position: static;}
  #contents .flow_list {width: 100%;}
  #contents .flow_list li {display: block;}
  #contents .flow_num {width: 100%; padding: 10px;}
  #contents .flow_commentary {width: 100%; padding: 10px 15px; border-left: none; border-top: 1px solid #000;}
  #contents .flow_commentary p.flow_head {font-size: 16px; text-align: center;}

  /* works */
  #contents .works_outline {padding: 25px 4% 50px;}
  #contents .works_list li {width: 100%; padding: 15px 10px;}
  #contents .works_list li:nth-of-type(odd) {float: none;}
  #contents .works_list li:nth-of-type(even) {float: none;}
  #contents .works_list li p {font-size: 16px;}
  #contents .works_list li p.works_num {font-size: 20px;}
  #contents .works_list li p.works_num span {font-size: 30px;}

  /* aboutus */
  #contents .aboutus {margin-top: 0;}
  #contents .aboutus .contents_inner {padding: 0 0 40px;}
  #contents .aboutus_image {position: static; top: 0;}
  #contents .aboutus_head {padding: 20px; margin-top: -5%; text-align: center;}
  #contents .aboutus_h2 {font-size: 20px;}
  #contents .aboutus_lead {font-size: 14px;}
  #contents .aboutus_outline {margin-top: 15px;}
  #contents .aboutus_outline table th, #contents .aboutus_outline table td {font-size: 14px;}
  #contents .aboutus_outline table th {width: 25%;}
  #contents .aboutus_outline table td a {pointer-events: auto;}

  /* contact */
  #contents .contact_h2 {font-size: 20px; text-align: center;}
  #contents .contact_lead {text-align: center;}
  #contents .contact_outline {width: 100%;}
  #contents .contact_outlinebox {position: static;}
  #contents .contact_tel {margin: 25px 0 30px;}
  #contents .contact_h3 {font-size: 18px;}
  #contents .contact_outline p {font-size: 14px;}
  #contents .contact_num {font-size: 18px;}
  #contents .contact_num a {pointer-events: auto;}
  #contents .contact_form {width: 100%;}
  #contents .contact_form p + form {margin-top: 30px;}
  #contents .contact_form input[type="text"], #contents .contact_form input[type="tel"], #contents .contact_form input[type="email"] {height: 40px;}
  #contents .contact_btn {width: 100%; margin: 20px auto 0;}
  #contents .contact_btn input, #contents .contact_btn a.contact_top {height: 60px;}

  #contents .contact_confirm_btn {display: block;}
  #contents .contact_confirm_btn .contact_btn {width: 100%;}

  /* footer */
  #footer .footer_inner {padding: 25px 0;}
  #footer .footer_left .footer_tel {pointer-events: auto;}
  #footer .footer_pagelink {display: block;}
  #footer .footer_pagelink li {width: 100%;}
  #footer .footer_pagelink li + li {border-left: none; border-top: 1px solid #fff;}
  #footer .footer_pagelink li a {display: block; padding: 5px;}

  /* pagetop */
  .pagetop {width: 40px;}
}