@charset "UTF-8";
/* font
----------------------------------------------- */
:root {
--mincho:"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "MS P明朝", serif; /* font-family: var(--mincho); */
--gothic:'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro',‘游ゴシック体, YuGothic, 'Yu Gothic', "游ゴシック Medium", "Yu Gothic Medium", メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; /* font-family: var(--gothic); */
--open: 'Open Sans', sans-serif;
--robot: 'Roboto', sans-serif;
  
}

/* default sp
	----------------------------------------------- */
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, section, summary, time, mark, audio, video { padding: 0; margin: 0; font: inherit; word-wrap: break-word; border: 0; vertical-align: baseline; outline: none; }

body {padding: 0;margin: 0;color: #000;font-size: 3.6vw;font-family: var(--gothic);-webkit-text-size-adjust: 100%;font-style: normal;line-height: 1;/* background: url("../images/bg.jpg") no-repeat center top 150px; */background-size: 100%;}

article, aside, canvas, details, figcaption, figure, header, footer, hgroup, main, menu, nav, section, summary { display: block; }

blockquote, q { quotes: none; }

strong, b { font-weight: bold; }

ul, ol, li { list-style: none; }

table { border-spacing: 0; border-collapse: collapse; }

img, video, object {height: auto;border: none;display: block;max-width: 100%;}

ins { background: none; color: #000; text-decoration: none; }

mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }

hr { height: 1px; padding: 0; margin: 1em 0; border: 0; border-top: 1px solid #ccc; display: block; }

*:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

a {color: #000;text-decoration: none;display: block;-moz-transition: all 0.3s cubic-bezier(0.76, 0, 0.24, 1);-o-transition: all 0.3s cubic-bezier(0.76, 0, 0.24, 1);-webkit-transition: all 0.3s cubic-bezier(0.76, 0, 0.24, 1);transition: all 0.3s cubic-bezier(0.76, 0, 0.24, 1);}
a:hover { opacity: 0.6; }

.clearfix:after { content: ''; display: block; clear: both; }

.pc { display: none; }

.sp { display: block; }

/* common sp
----------------------------------------------- */

.main {padding-top: 0;min-height: 50vh;overflow: hidden;}

.video-bg {position: fixed;top: 0;width: 100%;height: 100vh;z-index: -1;}
.video-bg video {max-width: none;min-width: 100%;height: 100%;}

/* fade
----------------------------------------------- */
.fade {opacity: 0;-moz-transition: 2.0s;-o-transition: 2.0s;-webkit-transition: 2.0s;transition: 2.0s;}
.fade-left { -moz-transform: translateX(-10px); -ms-transform: translateX(-10px); -webkit-transform: translateX(-10px); transform: translateX(-10px); }
.fade-right { -moz-transform: translateX(10px); -ms-transform: translateX(10px); -webkit-transform: translateX(10px); transform: translateX(10px); }
.fade-bottom {-moz-transform: translateY(30px);-ms-transform: translateY(30px);-webkit-transform: translateY(30px);transform: translateY(30px);}
.fade-active { opacity: 1; -moz-transform: translate(0); -ms-transform: translate(0); -webkit-transform: translate(0); transform: translate(0); }

/* btn sp
----------------------------------------------- */
.more01 {width: 40vw;text-align: center;font-family: var(--robot);font-weight: 500;letter-spacing: 0.05em;color: #fff;border: 1px solid #000;border-radius: 100px;background: url("../images/icon-arrow-white.svg") no-repeat right 3vw center;background-size: 4vw;background-color: #000;padding: 3vw 0;transition: all 0.3s ease;}
.more01:hover {color: #000;background: url("../images/icon-arrow-black.svg") no-repeat right 20px center;background-color: #fff;opacity: 1;}

/* header sp
----------------------------------------------- */
.header {position: fixed;width: 100%;top: 0;z-index: 10;background: rgb(255 255 255 / 80%);}
.header-top {display: -webkit-box;display: -moz-box;display: -webkit-flex;display: box;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: space-between;justify-content: space-between;align-items: center;padding: 3vw 0 4vw 4vw;}
.header-logo {width: 33vw;}
.header-contact-sp {background: url("../images/icon-contact-white.png") no-repeat center center;background-size: 6vw;background-color: #cccccc;width: 13vw;height: 13vw;position: absolute;right: 13vw;top: 0;}
.header-contact-sp:hover {background: url("../images/icon-contact-black.png") no-repeat center center;background-size: 6vw;background-color: #fff;color: #000;opacity: 1;}
.header-navi-btn {width: 13vw;height: 13vw;position: absolute;z-index: 10;top: 0;right: 0;background: #000;transition: all 0.3s ease;}
.header-navi-btn .line {position: absolute;width: 50%;height: 2px;background: #fff;transition: all 0.3s ease;transform-origin: center center 0;left: 50%;transform: translate(-50%);
/* キーワードで指定する場合*/transform-origin:left top;
/* 数値で指定する場合*/transform-origin:0 0;}
.header-navi-btn .line-top {top: 34%;}
.header-navi-btn .line-mid {top: 50%;}
.header-navi-btn .line-btm {top: 65%;}
.header-navi {padding: 12vw 5vw;font-family: var(--open);font-weight: 500;letter-spacing: 0.18em;width: 33vw;position: absolute;right: -33vw;top: 13vw;background: #fff;z-index: -1;transition: all 0.3s ease;}
.header-navi ul {margin: 0;}
.header-navi li {margin-bottom: 4.4vw;}
.header-navi li a {display: inline-block;}
.header-navi li:last-child {margin-bottom: 0;}

.header-navi-open .header-navi-btn {background: #fff;}
.header-navi-open .header-navi-btn .line {background: #000;}
.header-navi-open .header-navi-btn .line-top {top: 50%;transform: rotate(45deg) translate(-50%, -50%);}
.header-navi-open .header-navi-btn .line-mid {opacity: 0;}
.header-navi-open .header-navi-btn .line-btm {top: 50%;transform: rotate(-45deg) translate(-50%);}
.header-navi-open .header-navi {right: 0;}

/* bread sp
----------------------------------------------- */
.breadcrumb {padding: 5vw 0 4.5vw;background: #ececec;z-index: 2;position: relative;}

.breadcrumb-items { width: 90vw; margin: 0 auto; font-size: 0; }
.breadcrumb-items li { font-size: 3.42vw; position: relative; display: inline-block; }
.breadcrumb-items li:after { content: "\f105"; margin: 0 2.5vw 0 1.5vw; font-weight: normal; font-family: 'icon'; display: inline-block; }
.breadcrumb-items li:last-child:after { display: none; }
.breadcrumb-items li:last-child a { color: var(--sky); font-weight: bold; }
.breadcrumb-items a { display: inline-block; }
.breadcrumb-items a:hover { opacity: 1; }

/* footer sp
----------------------------------------------- */
.footer {background: #fff;}
.footer-in {padding: 14vw 13vw 8vw;}
.footer-logo {width: 54vw;margin: 0 0 6vw;}
.footer-right {margin: 0;}
.footer-right ul {font-family: var(--open);font-weight: 500;margin-top: 5vw;}
.footer-right li {margin-bottom: 5vw;letter-spacing: 0.2em;font-size: 3vw;}
.footer-right li:last-child {margin-right: 0;}
.footer-contact {display: none;}
.footer-contact:hover {color: #000;opacity: 1;background-color: #fff;}
.copyright {text-align: center;color: #fff;padding: 4vw 0;font-family: var(--open);font-size: 3vw;letter-spacing: 0.12em;background: #000;}

/* contact
----------------------------------------------- */

.contact {text-align: center;padding: 21vw 0;position: relative;}
.contact .contact-ttl {font-size: 3vw;font-weight: 500;margin-bottom: 5vw;}
.contact .more01 {margin: 0 auto;}

/* second hero

----------------------------------------------- */
.second-hero {padding-top: 19vw;padding-bottom: 10vw;background: #fff;}
.second-midashi {width: 86vw;margin: 0 auto 3.5vw;}
.second-midashi .en {font-size: 13.5vw;font-family: var(--robot);font-weight: bold;letter-spacing: 0.1em;display: block;}
.second-midashi .jp {font-size: 3.6vw;font-weight: bold;margin-top: -0.5vw;display: block;}
.second-visual {border-radius: 0 0 0 40px;overflow: hidden;position: relative;width: 85.3vw;height: 58.7vw;margin: 0 0 0 auto;}
.second-visual p {position: absolute;bottom: 3vw;left: 5vw;font-size: 4vw;font-weight: bold;color: #fff;line-height: 2;text-shadow: 0 0 10px #aaa;}
.visual-txt {margin-top: 4vw;line-height: 2.66;font-size: 3.4vw;padding: 0 5vw;}

/* =============================================
pc-size
================================================*/
@media screen and (min-width: 736px) {
  /* default pc
  ----------------------------------------------- */
  body { font-size: 16px; }
  .main {padding-top: 0;overflow: hidden;}
  .sp { display: none; }
  .pc { display: block; }

  .video-bg {position: fixed;top: 0;width: 100%;z-index: -1;}
  .video-bg video {height: 150%;}

  /* btn pc
  ----------------------------------------------- */
  .more01 {width: 290px;background: url("../images/icon-arrow-white.svg") no-repeat right 42px center;background-color: #000;padding: 21px 0;}
  .more01:hover {color: #000;background: url("../images/icon-arrow-black.svg") no-repeat right 20px center;background-color: #fff;opacity: 1;}
  
  /* header pc
  ----------------------------------------------- */
  .header {background: none;}
  .header-top {padding: 0 43px;height: 138px;}
  .header-logo {width: 278px;}
  .header-navi-btn {display: none;}
  .header-contact-pc {background: url("../images/icon-arrow-white.svg") no-repeat right 42px center;background-color: #000;font-family: var(--open);font-weight: 500;font-size: 16px;padding: 22px;width: 290px;text-align: center;letter-spacing: 0.08em;color: #fff;border-radius: 100px;transition: all 0.3s ease;border: 1px solid #000;cursor: pointer;}
  .header-contact-pc:hover {background: url("../images/icon-arrow-black.svg") no-repeat right 20px center;background-color: #fff;color: #000;opacity: 1;}
  .header-navi {margin: 35px 41px;padding: 0;width: auto;position: relative;right: auto;top: auto;z-index: 10;background: none;}
  .header-navi ul {margin: 0;}
  .header-navi li {margin-bottom: 29px;}
  .header-navi li:last-child {margin-bottom: 0;}

  .header-second {background: rgb(255 255 255 / 85%);}
  .header-second .header-navi {margin: 0;position: absolute;right: 379px;top: 64px;background: none;}
  .header-second .header-navi ul {display: -webkit-box;display: -moz-box;display: -webkit-flex;display: box;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: flex-start;justify-content: flex-start;align-items: center;}
  .header-second .header-navi li {margin-bottom: 0;margin-right: 50px;position: relative;}
  .header-second .header-navi li:last-child {margin-right: 0;padding-right: 0;}
  .header-second .header-navi li:last-child:after {display: none;}
  
  /* bread pc ----------------------------------------------- */
  .breadcrumb {padding: 12px 0 10px;}
  .breadcrumb-items { width: 960px; }
  .breadcrumb-items li { font-size: 14px; }
  .breadcrumb-items li:after { margin: 0 12px 0 10px; }

  /* footer pc
  ----------------------------------------------- */
  .footer {margin: 0;}
  .footer-in {display: -webkit-box;display: -moz-box;display: -webkit-flex;display: box;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: space-between;justify-content: space-between;align-items: center;padding: 79px 45px;}
  .footer-logo {width: 278px;margin: 0 0 0 78px;}
  .footer-right {margin: 0;}
  .footer-right ul {margin-top: 0;display: -webkit-box;display: -moz-box;display: -webkit-flex;display: box;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: space-between;justify-content: space-between;align-items: center;}
  .footer-right li {margin-right: 44px;margin-bottom: 0;font-size: 16px;}
  .footer-right li:last-child {margin-right: 0;}
  .footer-contact {display: block;margin: 38px 0 0 auto;width: 290px;text-align: center;font-family: var(--robot);font-weight: 500;letter-spacing: 0.05em;color: #fff;border: 1px solid #000;border-radius: 100px;background-color: #000;padding: 21px 0;transition: all 0.3s ease;}
  .footer-contact:hover {color: #000;opacity: 1;background-color: #fff;}
  .copyright {text-align: right;padding: 17px 47px;font-size: 14px;}

  /* contact
  ----------------------------------------------- */
  .contact {padding: 160px 0;}
  .contact .contact-ttl {font-size: 18px;margin-bottom: 39px;}

  /* second hero
  ----------------------------------------------- */
  .second-hero {padding-top: 241px;padding-bottom: 124px;}
  .second-midashi {width: 1600px;margin: 0 auto 48px;}
  .second-midashi .en {font-size: 100px;font-family: var(--robot);font-weight: bold;letter-spacing: 0.1em;display: block;}
  .second-midashi .jp {font-size: 18px;font-weight: bold;margin-top: 6px;display: block;}
  .second-visual {border-radius: 0 0 0 80px;height: auto;}
  .second-visual img {max-width: none;}
  .second-visual p {position: absolute;bottom: 50px;left: 76px;font-size: 36px;font-weight: bold;color: #fff;}
  .visual-txt {margin-top: 50px;line-height: 2.66;font-size: 18px;padding: 0;}
}