/***************************************************************************
*
* INDEX STYLE
*
***************************************************************************/
/*#main*/
/*AREAABOUT*/
/*AREAABOUT*/
/*AREASERVICE*/
/*AREASERVICE*/
/*AREACONTACT*/
/*LOADDING CONTACT*/
@keyframes "dualLoadding" { 0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); } }
/*LOADDING CONTACT*/
/*AREACONTACT*/
/*ONLY PC*/
/*BREAKPOINT*/
/*SP STYLE*/
/*#MAIN*/
/*#MAIN*/
/*AREACONTACT*/
/*AREACONTACT*/
/*AREAABOUT*/
/*AREAABOUT*/
/*AREASERVICE*/
/*AREASERVICE*/
#main { position: relative; overflow: hidden; }
#main .mainImage { padding: 0 7.8vw; text-align: right; }
#main .mainCloud { position: absolute; top: 0; right: -8px; }
#main .mainLogo { position: absolute; top: 47.7%; left: 51%; width: 100%; max-width: 1700px; padding: 0 30px; transform: translate(-50%, -50%); }
#main #layer1 { position: absolute; top: 0; left: 5.7%; z-index: -1; }
#main #layer2 { position: absolute; top: 47.7%; left: 50.4%; width: 100%; max-width: 1700px; padding: 0 2.6%; transform: translate(-50%, -50%) !important; }

.areaAbout { margin-bottom: 275px; }

.areaService { overflow: hidden; margin-bottom: 167px; }
.areaService .serviceVideo { padding: 91px 0; z-index: -1; }
.areaService .serviceVideo:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; z-index: 1; }
.areaService .serviceVideo .slick-list { overflow: visible; }
.areaService .videoItem { max-width: 640px; width: 100%; height: 600px; margin: 0 20px; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); }
.areaService .videoItem video { position: relative; width: 100%; height: 100%; object-fit: cover; pointer-events: none; z-index: -1; }

.areaContact { position: relative; padding-bottom: 129px; }
.areaContact .areaText { display: flex; justify-content: space-between; margin-bottom: 74px; }
.areaContact .areaText .text { width: calc(100% - 281px); margin-right: 20px; }
.areaContact .areaText .btn { margin-top: 13px; }
.areaContact .areaText .btn a { width: 281px; line-height: 1.55; padding: 10px 25px 16px; }
.areaContact .areaText .btn a span { font-size: 14px; letter-spacing: 3px; padding-bottom: 1px; }
.areaContact .contactInfo { display: flex; justify-content: space-between; }
.areaContact .contactInfo .contactForm { width: 540px; margin-right: 30px; }
.areaContact .contactInfo .contactForm .contactItem + .contactItem { margin-top: 35px; }
.areaContact .contactInfo .contactForm .contactItem .itemName { font-size: 16px; margin-bottom: 4px; text-indent: -2px; letter-spacing: 0.2px; }
.areaContact .contactInfo .contactForm .contactItem .itemInput .inputStyle { width: 100%; height: 40px; appearance: none; border: 0; box-shadow: none; border-radius: 0; font-size: 16px; color: #fff; background: #333333; padding: 0 10px; font-family: 'Noto Serif JP', serif; }
.areaContact .contactInfo .contactForm .contactItem .itemInput .areaStyle { width: 100%; min-height: 180px; appearance: none; border: 0; box-shadow: none; border-radius: 0; font-size: 16px; color: #fff; background: #333333; padding: 10px; font-family: 'Noto Serif JP', serif; resize: none; }
.areaContact .contactInfo .contactForm .contactItem .submitStyle { width: 240px; height: 60px; margin: 0 auto; appearance: none; border: 1px solid #fff; box-shadow: none; border-radius: 0; font-size: 20px; color: #fff; background: #000; font-family: 'Noto Serif JP', serif; text-align: center; transition: all 0.3s; }
.areaContact .contactInfo .contactForm .contactItem.contactSubmit { display: flex; justify-content: center; text-align: center; }
.areaContact .contactInfo .contactForm .contactItem.contactSubmit .btn a { font-size: 20px; color: #fff; padding: 14px 25px; }
.areaContact .contactInfo .contactForm .contactItem.contactSubmit .wrapSubmit { display: none; }
.areaContact .contactInfo .contactForm .confirmStep .contactItem.contactSubmit .btnConfirm { display: none; }
.areaContact .contactInfo .contactForm .confirmStep .contactItem.contactSubmit .wrapSubmit { display: flex; width: 100%; justify-content: center; }
.areaContact .contactInfo .contactForm .confirmStep .contactItem.contactSubmit .wrapSubmit .btn + .btn { margin: 0; margin-left: 19px; }
.areaContact .contactInfo .contactForm .confirmStep .contactItem .itemName { margin-bottom: 2px; }
.areaContact .contactInfo .contactForm .confirmStep .contactItem .itemInput .inputStyle { background: #000; color: #999999; }
.areaContact .contactInfo .contactForm .confirmStep .contactItem + .contactItem { margin-top: 36px; }
.areaContact .contactInfo .contactMap { width: 600px; padding-top: 6px; }
.areaContact .contactInfo .contactMap .map iframe { width: 100%; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); -webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; -o-transition: all 0.7s ease; transition: all 0.7s ease; }
.areaContact .contactInfo .contactMap .mapInfo { padding: 28px 0; }
.areaContact .contactInfo .contactMap .mapInfo .infoTitle { font-size: 20px; letter-spacing: -0.3px; margin-bottom: 12px; }
.areaContact .contactInfo .contactMap .mapInfo .infoText { font-size: 16px; letter-spacing: 0.15px; }
.areaContact .contactInfo .contactMap .mapInfo .infoText span { display: inline-block; margin-right: 10px; }
.areaContact .contactInfo .contactMap .mapInfo .infoText span a { color: #fff; }
.areaContact .contactInfo .contactMap .mapInfo .infoText > a { color: #fff; }

.contactLoadding { position: absolute; display: flex; justify-content: center; align-items: center; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; z-index: 3000; transition: all 500ms linear; }

.contactLoadding.submitting { opacity: 1; visibility: visible; }

.dualLoadding { display: inline-block; width: 80px; height: 80px; }
.dualLoadding:after { content: " "; display: block; width: 64px; height: 64px; margin: 8px; border-radius: 50%; border: 6px solid #fff; border-color: #fff transparent #fff transparent; animation: dualLoadding 1.2s linear infinite; }

@media (min-width: 769px) { .areaContact .contactInfo .contactMap .mapInfo .infoText span a { pointer-events: none; }
  .areaContact .contactInfo .contactForm .contactItem .submitStyle:hover { box-shadow: 0 0 45px rgba(255, 255, 255, 0.6); } }
@media (max-width: 1657px) and (min-width: 769px) { #main .mainLogo { left: 50%; }
  #main #layer2 { left: 50%; }
  #main .mainCloud { width: 150%; } }
@media (max-width: 768px) { #main .mainImage { padding: 0; }
  #main .mainLogo { top: 55.2%; left: 50%; padding: 0 10px; }
  #main #layer2 { top: 55.2%; left: 50%; padding: 0 10px; }
  #main #layer1 { position: absolute; top: 0; left: -50%; width: 721px; height: 356px; z-index: -1; }
  #main .mainCloud img { width: 100%; height: 100%; object-fit: cover; }
  .areaContact { padding-bottom: 39px; }
  .areaContact .areaText { flex-direction: column; margin-bottom: 35px; }
  .areaContact .areaText .text { width: 100%; margin-right: 0; }
  .areaContact .areaText .text a { color: #fff; }
  .areaContact .areaText .btn { margin-top: 28px; }
  .areaContact .areaText .btn a { width: 100%; font-size: 20px; }
  .areaContact .areaText .btn a span { display: inline-block; margin-right: 11px; letter-spacing: 0; }
  .areaContact .contactInfo { flex-direction: column; }
  .areaContact .contactInfo .contactForm { width: 100%; margin-right: 0; }
  .areaContact .contactInfo .contactForm .contactItem + .contactItem { margin-top: 18px; }
  .areaContact .contactInfo .contactForm .contactItem .itemName { font-size: 14px; margin-bottom: 0; text-indent: -1px; letter-spacing: 0; }
  .areaContact .contactInfo .contactForm .contactItem .itemInput .inputStyle { font-size: 14px; height: 35px; }
  .areaContact .contactInfo .contactForm .contactItem .itemInput .areaStyle { font-size: 14px; min-height: 160px; }
  .areaContact .contactInfo .contactForm .contactItem .submitStyle { width: 160px; font-weight: normal; width: 50%; max-width: 240px; }
  .areaContact .contactInfo .contactForm .contactItem.contactSubmit .btn { width: 50%; max-width: 240px; }
  .areaContact .contactInfo .contactForm .contactItem.contactSubmit .btn a { width: 100%; }
  .areaContact .contactInfo .contactForm .confirmStep .contactItem.contactSubmit .wrapSubmit .btn + .btn { margin-left: 20px; }
  .areaContact .contactInfo .contactMap { width: 100%; padding-top: 40px; }
  .areaContact .contactInfo .contactMap .map iframe { height: 80vw; }
  .areaContact .contactInfo .contactMap .mapInfo { padding: 6px 0; }
  .areaContact .contactInfo .contactMap .mapInfo .infoTitle { font-size: 14px; letter-spacing: -0.3px; margin-bottom: 5px; }
  .areaContact .contactInfo .contactMap .mapInfo .infoText { font-size: 14px; letter-spacing: 0.15px; }
  .areaContact .contactInfo .contactMap .mapInfo .infoText a { color: #fff; }
  .areaContact .contactInfo .contactMap .mapInfo .infoText span a { pointer-events: none; }
  .areaContact .contactInfo .contactMap .mapInfo .infoText span a.fax { pointer-events: none; }
  .areaContact .contactInfo .contactMap .mapInfo .infoText span a.tel { pointer-events: inherit; }
  .areaAbout { margin-bottom: 69px; }
  .areaService { overflow: hidden; margin-bottom: 10px; }
  .areaService .serviceVideo { padding: 48px 0; margin: 0 -20px; }
  .areaService .serviceVideo .videoItem { max-width: 300px; width: 100%; height: 300px; margin: 0 10px; } }

/*# sourceMappingURL=index.css.map */