@charset "UTF-8";
@keyframes notScaleY { 100% { transform: scaleY(0); } }
@keyframes scaleY { 100% { transform: scaleY(1); } }
/*　テンプレート*/
/*　固定　TOPボタン*/
a:link { transition: all 0.5s ease-out; }

a { text-decoration: none; }

.font_b { font-weight: bold; }

.bg_main { background-color: #131834; }

#page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; }

#page-top a { background: #666; text-decoration: none; color: #fff; width: 100px; padding: 30px 0; text-align: center; display: block; border-radius: 5px; }

object { pointer-events: none; position: relative; max-width: 100%; width: 100%; }

body { line-height: 1.8; font-feature-settings: "palt"; letter-spacing: .1em; font-family: "Noto Sans JP", sans-serif; }

main { overflow-x: hidden; }

.mainWidth { width: 100%; max-width: 1180px; margin-left: auto; margin-right: auto; }
@media screen and (max-width: 800px) { .mainWidth { width: 90%; } }

.harfWidth { width: 100%; max-width: 740px; margin-left: auto; margin-right: auto; }
@media screen and (max-width: 800px) { .harfWidth { width: 70%; } }

.pb { padding-bottom: 100px; }

.pb2 { padding-bottom: 200px; }
@media screen and (max-width: 800px) { .pb2 { padding-bottom: 100px; } }

.mb { margin-bottom: 100px; }
@media screen and (max-width: 800px) { .mb { margin-bottom: 25px; } }

@media screen and (max-width: 800px) { .mb_s { margin-bottom: 25px; } }

.mb_1 { margin-bottom: 10px; }

.mb_2 { margin-bottom: 20px; }

.mb_5 { margin-bottom: 50px; }

.mt_200 { margin-top: -200px; }
@media screen and (max-width: 800px) { .mt_200 { margin-top: -30px; } }

.mt_1 { margin-top: -1em; }

.content { margin-bottom: 200px; }
@media screen and (max-width: 800px) { .content { margin-bottom: 50px; } }

.box_border { border: 1px solid #fff; padding: 40px 60px; position: relative; text-align: center; }
.box_border .boxTitle_border { position: absolute; top: -.5em; line-height: 1em; left: 50%; transform: translateX(-50%); background-color: #131834; padding: 0 3em; }
@media screen and (max-width: 800px) { .box_border { padding: 40px 40px; } }

.z900 { position: relative; z-index: 900; }

h2.title_top, h1.title_top { font-size: 48px; font-weight: 500; text-align: center; padding: 20px 0; }
@media screen and (max-width: 800px) { h2.title_top, h1.title_top { font-size: 32px; } }

h2.title_service { font-size: 48px; font-weight: 700; text-align: center; padding: 20px 0; }
@media screen and (max-width: 800px) { h2.title_service { font-size: 32px; } }

h3.midashi_top { font-size: 48px; font-weight: 500; margin-bottom: 1.5em; color: #fff; }
@media screen and (max-width: 800px) { h3.midashi_top { font-size: 32px; margin-bottom: 0em; } }

h3.midashi_service { font-size: 24px; font-weight: 500; margin-bottom: 1.5em; color: #fff; text-align: center; white-space: nowrap; }

h3.midashi_borderAni { font-size: 24px; font-weight: 500; color: #fff; margin-bottom: 2em; }
h3.midashi_borderAni span { position: relative; display: inline-block; }
h3.midashi_borderAni span::after { content: ""; width: 100%; min-width: calc(50VW - 100%); height: 1px; background-color: #fff; position: absolute; right: 0; bottom: -.5em; transform: scaleX(0); transform-origin: left center; -webkit-transition: 1s 0.3s transform cubic-bezier(1, 0, 0, 1); transition: 1s transform cubic-bezier(1, 0, 0, 1); }
h3.midashi_borderAni span.isActive::after { transform: scaleX(1); }
@media screen and (max-width: 800px) { h3.midashi_borderAni { margin-bottom: 1em; } }

h4.komidashi_top { font-size: 24px; font-weight: 500; color: #fff; }
@media screen and (max-width: 800px) { h4.komidashi_top { font-weight: 700; font-size: 20px; } }

p.point { font-size: 500px; color: #1b2040; text-align: center; font-weight: 500; white-space: nowrap; line-height: 1; }
@media screen and (max-width: 800px) { p.point { font-size: 110px; } }

.upper { text-transform: uppercase; }

.textArea_90 { padding: 2% 5%; }

.line_4 { line-height: 4; }
@media screen and (max-width: 800px) { .line_4 { line-height: 2; } }

.line_2 { line-height: 2; }

.line_3 { line-height: 3; }

.wc { color: #fff; }
.wc a { color: #fff; }

a.wc { color: #fff; }

.en { font-family: "Oswald", sans-serif; }

.animated[data-animate="fadeIn"] { opacity: 0; }

a.inb { display: inline-block; }

.f1 { flex: 1; }

.f_a { flex: auto; }

.cen_cen { text-align: center; display: flex; flex-direction: column; justify-content: space-around; }

.copy { text-align: center; padding: 2em 0; }

.breadcrumb { width: 90%; margin-left: auto; margin-right: auto; }
.breadcrumb .breadcrumbItem { display: flex; }
.breadcrumb .breadcrumbItem li { padding-left: 1.5em; margin-left: 1em; position: relative; }
.breadcrumb .breadcrumbItem li:first-child { padding-left: 0px; margin-left: 0px; }
.breadcrumb .breadcrumbItem li:nth-child(n + 2)::before { position: absolute; left: 0; font-family: "Font Awesome 5 Free"; content: "\f054"; font-weight: 900; }

/*　ーーーーーーーーーーーーーーーーーー
アニメーション
ーーーーーーーーーーーーーーーーーーー*/
a.btnA { color: #FFE1AB; position: relative; }
a.btnA::after { content: "\f35a"; font-family: "Font Awesome 5 Free"; font-weight: 400; position: absolute; right: -1.3em; top: .1em; }
a.btnA:hover::after { animation: leftToRight 2s ease-out infinite; }

button.btnA { color: #FFE1AB; position: relative; background: none; border: none; font-size: 20px; font-weight: 500; }
button.btnA::after { content: "\f35a"; font-family: "Font Awesome 5 Free"; font-weight: 400; position: absolute; right: -1.3em; top: .1em; }
button.btnA:hover::after { animation: leftToRight 2s ease-out infinite; }

@keyframes leftToRight { 40% { opacity: 1; transform: translateY(0) translateX(0.3em); }
  80% { opacity: 1; transform: translateY(0) translateX(0.8em); }
  100% { opacity: 0; transform: translateY(0) translateX(1em); } }
.fadeLeft { width: 100%; height: auto; position: relative; }
.fadeLeft ::after { content: ""; width: 100%; height: 100%; background-color: #131834; z-index: 10; position: absolute; top: 0; left: 0; }

.isActive.fadeLeft ::after { transform: scaleX(0); transform-origin: right center; -webkit-transition: 1s 0.3s transform cubic-bezier(1, 0, 0, 1); transition: 1s 0.3s transform cubic-bezier(1, 0, 0, 1); }

#typ1 { min-height: 1em; }

#typ2 { min-height: 1em; }

#typ3 { min-height: 1em; }

.fadeUp { overflow: hidden; }
.fadeUp p { -webkit-transform: translateY(100%); transform: translateY(100%); transition: -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s; transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s; -webkit-transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s; }
.fadeUp.isActive p { -webkit-transform: translateY(0%); transform: translateY(0%); }

/*　ーーーーーーーーーーーーーーーーーー
ヘッダー
ーーーーーーーーーーーーーーーーーーー*/
#top #headTopPc { background: url(../img/img_1.jpg) no-repeat; background-size: cover; height: 40vw; width: 100%; padding-top: 20px; }
@media screen and (max-width: 800px) { #top #headTopPc { height: 120vw; background-size: cover; background-position: center; } }
#top #headTopPc #logo_h { width: 70%; line-height: 0; }
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) { #top #headTopPc { background-image: url(../img/img_1@2x.jpg); } }
#top #headTopSp { background: url("../img/img_1-sp.jpg") no-repeat; height: 100vw; width: 100%; background-size: cover; background-position: center; }

.logo { width: 60%; height: 100%; }

#inner_h { width: 90%; margin-left: auto; margin-right: auto; background-color: rgba(255, 255, 255, 0.9); padding: 10px 30px; }
#inner_h #nab_h li a { color: #131834; }

/*　ーーーーーーーーーーーーーーーーーー
bg
ーーーーーーーーーーーーーーーーーーー*/
.bg_def { width: 100%; height: 20VW; }
@media screen and (max-width: 800px) { .bg_def { height: 50VW; } }

#top #bg_top1 { background: url("../img/img_3.jpg") no-repeat; background-position: center; background-size: cover; }
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) { #top #bg_top1 { background-image: url(../img/img_3@2x.jpg); } }

#bg_top2 { background: url("../img/img_7.jpg") no-repeat; background-position: center; background-size: cover; padding: 3% 0; }
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) { #bg_top2 { background-image: url(../img/img_7@2x.jpg); } }

#bg_srv1 { background: url("../img/img_8.jpg") no-repeat; background-position: center; background-size: cover; }

#bg_comp { background: url("../img/img_13.jpg") no-repeat; background-position: center; background-size: cover; }

#bg_cont { background: url("../img/img_14.jpg") no-repeat; background-position: center; background-size: cover; }

.bg_right_bottom { position: absolute; right: 0; bottom: 0; z-index: -1; }

/*　ーーーーーーーーーーーーーーーーーー
セクション1
ーーーーーーーーーーーーーーーーーーー*/
#top #sec01 dl.news dt { padding: 20px 10px; }
@media screen and (max-width: 800px) { #top #sec01 dl.news dt { padding: 10px 10px; } }
#top #sec01 dl.news dd { padding-left: 10px; padding-bottom: 20px; border-bottom: 1px solid #fff; }

/*　ーーーーーーーーーーーーーーーーーー
セクション2
ーーーーーーーーーーーーーーーーーーー*/
#top #sec02 { min-height: 100px; }

.fadeIn-cube { font-size: 100px; color: #1b2040; text-align: center; font-weight: 500; white-space: nowrap; }
@media screen and (max-width: 800px) { .fadeIn-cube { font-size: 24px; } }
.fadeIn-cube .fadeIn-cube_vertial { font-size: 4em; line-height: 1.1em; }
.fadeIn-cube .fadeIn-cube_vertial span { position: relative; display: inline-block; transform: scaleY(0); }
.fadeIn-cube .fadeIn-cube_vertial span:before { content: ''; display: block; height: 100%; width: 100%; background-color: #000; position: absolute; top: 0; left: 0; }
.fadeIn-cube .fadeIn-cube_vertial span { animation: scaleY 0.36s cubic-bezier(0.84, 0.01, 0.78, 0.13) forwards; }
.fadeIn-cube .fadeIn-cube_vertial span:before { animation: notScaleY 0.3s cubic-bezier(0.11, 1.05, 0.32, 1.03) forwards; }
.fadeIn-cube .fadeIn-cube_vertial span:nth-of-type(odd) { transform-origin: bottom; }
.fadeIn-cube .fadeIn-cube_vertial span:nth-of-type(odd):before { transform-origin: bottom; }
.fadeIn-cube .fadeIn-cube_vertial span:nth-of-type(even) { transform-origin: top; }
.fadeIn-cube .fadeIn-cube_vertial span:nth-of-type(even):before { transform-origin: top; }
.fadeIn-cube .fadeIn-cube_vertial span:nth-of-type(1) { animation-delay: 0.1s; }
.fadeIn-cube .fadeIn-cube_vertial span:nth-of-type(1):before { animation-delay: 0.45s; }
.fadeIn-cube .fadeIn-cube_vertial span:nth-of-type(2) { animation-delay: 0.2s; }
.fadeIn-cube .fadeIn-cube_vertial span:nth-of-type(2):before { animation-delay: 0.55s; }
.fadeIn-cube .fadeIn-cube_vertial span:nth-of-type(3) { animation-delay: 0.3s; }
.fadeIn-cube .fadeIn-cube_vertial span:nth-of-type(3):before { animation-delay: 0.65s; }
.fadeIn-cube .fadeIn-cube_vertial span:nth-of-type(4) { animation-delay: 0.4s; }
.fadeIn-cube .fadeIn-cube_vertial span:nth-of-type(4):before { animation-delay: 0.75s; }
.fadeIn-cube .fadeIn-cube_vertial span:nth-of-type(5) { animation-delay: 0.5s; }
.fadeIn-cube .fadeIn-cube_vertial span:nth-of-type(5):before { animation-delay: 0.85s; }
.fadeIn-cube .fadeIn-cube_vertial span:nth-of-type(6) { animation-delay: 0.6s; }
.fadeIn-cube .fadeIn-cube_vertial span:nth-of-type(6):before { animation-delay: 0.95s; }
.fadeIn-cube .fadeIn-cube_vertial span:nth-of-type(7) { animation-delay: 0.7s; }
.fadeIn-cube .fadeIn-cube_vertial span:nth-of-type(7):before { animation-delay: 1.05s; }

#company #sec02 .companyInfo { background-color: #FAFAFA; padding: 80px; }
@media screen and (max-width: 800px) { #company #sec02 .companyInfo { padding: 25px; } }
#company #sec02 .companyInfo .companyMenu { color: #131834; display: flex; flex-wrap: wrap; }
@media screen and (max-width: 800px) { #company #sec02 .companyInfo .companyMenu { display: block; } }
#company #sec02 .companyInfo .companyMenu dt { width: 10%; padding-right: 10%; margin-right: 5%; position: relative; margin-bottom: 100px; }
@media screen and (max-width: 800px) { #company #sec02 .companyInfo .companyMenu dt { width: 100%; margin-bottom: 10px; } }
#company #sec02 .companyInfo .companyMenu dt::after { content: ""; width: 50%; height: 1px; background-color: #131834; position: absolute; right: 0; top: 50%; transform: scaleX(0); transform-origin: left center; -webkit-transition: 1s 0.2s transform cubic-bezier(1, 0, 0, 1); transition: 1s 0.2s transform cubic-bezier(1, 0, 0, 1); }
@media screen and (max-width: 800px) { #company #sec02 .companyInfo .companyMenu dt::after { left: 0; top: 120%; } }
#company #sec02 .companyInfo .companyMenu dt:last-of-type { margin-bottom: 0px; }
@media screen and (max-width: 800px) { #company #sec02 .companyInfo .companyMenu dt:last-of-type { margin-bottom: 10px; } }
#company #sec02 .companyInfo .companyMenu dt.isActive::after { transform: scaleX(1); }
#company #sec02 .companyInfo .companyMenu dd { flex: 1; min-width: 70%; }
@media screen and (max-width: 800px) { #company #sec02 .companyInfo .companyMenu dd { width: 100%; margin-bottom: 40px; }
  #company #sec02 .companyInfo .companyMenu dd:last-of-type { margin-bottom: 0px; } }

#contact #sec02 .formrun { color: #131834; }
#contact #sec02 .formrun input:not([type="checkbox"]), #contact #sec02 .formrun textarea { width: 100%; font-size: 16px; line-height: 2em; }
#contact #sec02 .formrun label { font-family: "Noto Sans JP", sans-serif; font-weight: 700; box-sizing: border-box; display: inline-block; margin-bottom: 10px; }
#contact #sec02 .formrun label .check { font-size: 13px; background-color: #FFE1AB; border: 1px #131834 solid; padding: 2px 10px; }
#contact #sec02 .contactInfo { background-color: #FAFAFA; padding: 100px; }
@media screen and (max-width: 800px) { #contact #sec02 .contactInfo { padding: 25px; } }

@media screen and (max-width: 800px) { #sec03 .box_top { margin-bottom: 25px; } }

/*　ーーーーーーーーーーーーーーーーーー
セクションコンタクト
ーーーーーーーーーーーーーーーーーーー*/
#secContact h2.title_top { padding: 0; }

/*　ーーーーーーーーーーーーーーーーーー
footer
ーーーーーーーーーーーーーーーーーーー*/
#footer { width: 95%; background-color: #fff; margin-left: auto; margin-right: auto; padding: 3% 0; }
#footer .logoArea_f { margin-right: 5%; }

.title_1 { text-align: center; font-size: 16px; color: #131834; font-family: "Noto Sans JP", sans-serif; margin-bottom: 50px; }
.title_1 span { font-size: 40px; font-family: "Oswald", sans-serif; display: block; }
@media screen and (min-width: 1401px) { .title_1 span { font-size: 80px; } }

.title_2 { font-size: 25.6px; color: #131834; font-family: "Noto Sans JP", sans-serif; margin-bottom: 50px; }
.title_2 span { font-size: 16px; font-family: "Oswald", sans-serif; display: block; position: relative; padding-left: 19.2px; }
.title_2 span::before { content: ""; display: block; position: relative; left: -19.2px; top: 16px; width: 8px; height: 2px; background-color: #DAC298; }

.title_3_bg { width: 100%; height: 22.6VW; position: relative; margin-bottom: 50px; background: url("../img/bg_1.jpg") no-repeat center/cover; }
.title_3_bg .title_3 { font-size: 16px; font-family: "Oswald", sans-serif; font-weight: 700; text-align: center; position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%); }
.title_3_bg .title_3 span { display: block; }
.title_3_bg .title_3 span.cover { font-size: 64px; color: rgba(255, 255, 255, 0); text-stroke: 1px #FFF; -webkit-text-stroke: 1px #FFF; margin-bottom: 10px; }

.title_4 { font-size: 14.72px; color: #111; font-family: "Noto Sans JP", sans-serif; margin-bottom: 50px; }
.title_4 span { font-size: 32px; font-weight: 700; font-family: "Oswald", sans-serif; margin-right: 1em; }

.title_5 { font-size: 38.72px; font-weight: 700; color: #111; font-family: "Noto Sans JP", sans-serif; margin-bottom: 50px; }
.title_5 span:nth-child(2) { font-size: 12px; font-family: "Oswald", sans-serif; display: block; font-weight: 400; }
.title_5 span:nth-child(1) { position: relative; }
.title_5 span:nth-child(1)::before { background-color: #444444; content: ""; display: block; width: 35%; height: 1px; position: absolute; top: -33.3333333333px; left: 0; -webkit-transform-origin: left top; transform-origin: left top; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: transform 1s cubic-bezier(0.6, 0.25, 0, 1); transition: transform 1s cubic-bezier(0.6, 0.25, 0, 1); }
.title_5 span:nth-child(1).is_active::before { -webkit-transform: scaleX(1); transform: scaleX(1); }

@media screen and (min-width: 801px) { .sp { display: none; } }
/*文字サイズ　レスポンジブ*/
@media screen and (max-width: 800px) { .pc { display: none; }
  /*ドロワー*/
  .fixedTop { position: fixed; width: 100%; height: 100%; }
  #headTopSp nav { width: 100%; height: 60px; position: relative; }
  #headTopSp .drawer { display: flex; flex-direction: row; align-items: center; justify-content: space-between; position: relative; height: 60px; padding: 0 1em; background-color: #fff; }
  #headTopSp .navbar_toggle { z-index: 9999; }
  #headTopSp .navbar_toggle_icon { position: relative; display: block; height: 2px; width: 30px; background: #5c6b80; -webkit-transition: ease .5s; transition: ease .5s; }
  #headTopSp .navbar_toggle_icon:nth-child(1) { top: 0; }
  #headTopSp .navbar_toggle_icon:nth-child(2) { margin: 8px 0; }
  #headTopSp .navbar_toggle_icon:nth-child(3) { top: 0; }
  /*OPEN時の動き*/
  #headTopSp .navbar_toggle.open .navbar_toggle_icon:nth-child(1) { top: 10px; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
  #headTopSp .navbar_toggle.open .navbar_toggle_icon:nth-child(2) { -webkit-transform: translateY(-50%); transform: translateY(-50%); opacity: 0; }
  #headTopSp .navbar_toggle.open .navbar_toggle_icon:nth-child(3) { top: -10px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
  #headTopSp .menu { -webkit-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: ease .5s; transition: ease .5s; position: relative; z-index: 1000; background-color: rgba(0, 0, 0, 0.7); height: 100Vh; }
  #headTopSp .menu ul li { padding: 2em; border-bottom: 1px solid #CCC; }
  /*OPEN時の動き*/
  #headTopSp .menu.open { -webkit-transform: translateX(0); transform: translateX(0); overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .hbTaL_s { text-align: left; } }