@charset "UTF-8";
/*----------------------------------
 font 
-----------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@900&display=swap");
@font-face {
  src: url("../font/Montserrat-Medium.woff") format("woff");
  font-family: 'Montserrat';
  font-weight: 500;
  font-display: swap; }
@font-face {
  src: url("../font/Montserrat-Bold.woff") format("woff");
  font-family: 'Montserrat';
  font-weight: 700;
  font-display: swap; }
@font-face {
  src: url("../font/NotoSansJP__Regular.woff") format("woff");
  font-family: "Noto Sans JP";
  font-weight: 400;
  font-display: swap; }
@font-face {
  src: url("../font/NotoSansJP__Medium.woff") format("woff");
  font-family: "Noto Sans JP";
  font-weight: 500;
  font-display: swap; }
@font-face {
  src: url("../font/NotoSansJP__Bold.woff") format("woff");
  font-family: "Noto Sans JP";
  font-weight: 700;
  font-display: swap; }
html {
  font-family: "Noto Sans JP", 'Zen Kaku Gothic New', 'ゴシックMB101 R', 'Gothic MB101 Regular', '游ゴシック',YuGothic,'Yu Gothic','Yu Gothic UI','Meiryo UI','ヒラギノ角ゴシック','Hiragino Sans','Arial','Helvetica', sans-serif;
  font-size: 62.5%;
  font-weight: 400;
  overflow-x: hidden; }

body {
  margin: 0;
  color: #000;
  font-size: 1.6rem;
  line-height: 1.8;
  letter-spacing: 0.2em;
  position: relative;
  overflow-x: hidden; }
  @media (max-width: 768px) {
    body {
      font-size: 1.4rem; } }

p {
  line-height: 2; }

a, a:link, a:visited {
  color: #000;
  text-decoration: none;
  transition: 0.3s; }

img {
  max-width: 100%;
  width: auto;
  height: auto;
  vertical-align: bottom;
  transition: 0.3s; }

a:hover, a:hover img {
  opacity: 0.7; }

.container {
  margin: 0 auto;
  width: 85%;
  max-width: 1440px;
  height: auto;
  box-sizing: border-box;
}
@media (max-width: 480px) {
	.container {
	  width: 90%;
	}
}
main {
  display: block; }


h3 {
	font-size: 6.4rem;
	font-weight: 700;
}
h3 .en {
	display: block;
	text-transform: uppercase;
	font-size: 1.8rem;
	font-weight: 500;
	margin-left: 1.0em;
}
@media (max-width: 1024px) {
	h3 {
		font-size: 4.2rem;
		line-height: 1.6;
	}
	h3 .en {
		font-size: 1.6rem;
		margin-left: .5em;
	}
}
@media (max-width: 480px) {
	h3 {
		font-size: 3.2rem;
	}
	h3 .en {
		font-size: 1.4rem;
		margin-left: .5em;
	}
}

.bgTxt {
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 160px;
	color: #F1F1F1;
	line-height: 1.0;
}
@media (max-width: 768px) {
	.bgTxt {
		font-size: 120px;
	}
}
@media (max-width: 480px) {
	.bgTxt {
		font-size: 60px;
	}
}
.minTxt {
	font-family: 'Shippori Mincho B1', serif;
}
.minTxt span {
	font-family: "Noto Sans JP", 'Zen Kaku Gothic New', 'ゴシックMB101 R', 'Gothic MB101 Regular', '游ゴシック',YuGothic,'Yu Gothic','Yu Gothic UI','Meiryo UI','ヒラギノ角ゴシック','Hiragino Sans','Arial','Helvetica', sans-serif;
	letter-spacing: .15em;
}
.commonBtn a {
  position: relative;
  box-sizing: border-box;
  font-family: 'Montserrat';
  font-weight: 500;
  color: #fff;
  max-width: 460px;
  height: 100px;
  background: #000;
  padding: 0 2em;
  display: flex;
  flex-direction: column;
  justify-content: center; }
  .commonBtn a::after {
    content: '';
    display: block;
    width: 46px;
    height: 2px;
    position: absolute;
    top: 50%;
    right: 2em;
    margin: 0;
    background: #006DB7; }


/*=====================================================================
	header
=====================================================================*/
header {
  width: 100%;
  z-index: 9990;
  box-sizing: border-box;
  position: fixed; }
header.change-color {
  background-color: rgba(255,255,255,.8);
  transition: 0.3s;
}
  @media (max-width: 1024px) {
    header {
      height: 80px; } }
  @media (max-width: 480px) {
    header {
      height: 60px; } }
  header .headerTop {
    width: 95%;
	  margin: auto;
    align-items: center;
    padding: 15px 1%;
    box-sizing: border-box; }
    @media (max-width: 768px) {
      header .headerTop {
        padding: 0 3%; } }
  @media (max-width: 768px) {
    header .topLogo {
      width: 150px; } }
  @media (max-width: 480px) {
    header .topLogo {
      width: 105px; } }
  header .telNumber {
    text-align: center; }
    header .telNumber p {
      font-size: 1.2rem;
      line-height: 1.4;
      letter-spacing: 0.175em;
    }
      header .telNumber p:first-of-type {
        font-size: 2.4rem;
        font-family: 'Poppins', sans-serif;
		  letter-spacing: .1em;
        font-weight: 500;
        line-height: 1;
        margin-bottom: 0.5rem; }
        @media (max-width: 480px) {
          header .telNumber p:first-of-type {
            font-size: 1.8rem; } }
  header .headContact a {
    color: #000;
    background: #edfe53;
    font-weight: 700;
    width: 260px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    transition: .3s;
    position: relative; }
    @media (max-width: 1200px) {
      header .headContact a {
        display: none; } }
    @media (max-width: 480px) {
      header .headContact a {
        width: 130px;
        height: 50px; } }

.btnshine {
  /*キラッと光る基点とするためrelativeを指定*/
  position: relative;
  /*ボタンの形状*/
  display: inline-block;
  background: #edfe53;
  color: #fff;
  padding: 10px 20px;
  text-decoration: none;
  outline: none;
  overflow: hidden; }

/*キラッと光る*/
.btnshine::before {
  content: '';
  /*絶対配置でキラッと光るの位置を決める*/
  position: absolute;
  top: 0;
  left: -75%;
  /*キラッと光る形状*/
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
  transform: skewX(-25deg); }

/*hoverした際の移動のアニメーション*/
.btnshine:hover::before {
  animation: shine 0.7s;
}

@keyframes shine {
  100% {
    left: 125%; } }

.headerBtm {
	background: #fff;
	height: 50px;
}
.sp-menu .headTel,
.sp-menu .headContact {
	display: none;
}
@media (max-width: 1024px) {
	.headerBtm {
		background: none;
	}
	.sp-menu {
		display: block;
	}
	.telNumber {
		display: none;
	}
	header .sp-menu .headTel,
	header .sp-menu .headContact {
		display: block;
	}
	.sp-menu .headTel a,
	.sp-menu .headContact a {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 80px;
		height: 80px;
		text-align: center;
		letter-spacing: 0;
	}
	.sp-menu .headTel a p,
	.sp-menu .headContact a p {
		font-weight: 400;
		font-size: 8px;
	}
	.sp-menu .headContact a img {
		padding: 3px 0 2px;
	}
	.sp-menu .headTel a {
		background: #006db7;
		color: #fff;
	}
	.sp-menu .headContact a {
		background: #edfe53;
		color: #000;
	}

}
@media (max-width: 480px) {
	.sp-menu .headTel a,
	.sp-menu .headContact a {
		width: 60px;
		height: 60px;
	}
}
/*=====================================================================
	footer
=====================================================================*/
footer {
  padding: 100px 0;
  background: #000;
	color: #fff;
}
  @media (max-width: 768px) {
    footer {
      padding: 50px 0; } }
  footer .footerWrap {
    align-items: flex-end;
    margin: 0 5%; }
    @media (max-width: 480px) {
      footer .footerWrap {
        align-items: initial; } }
  footer .company p:first-of-type {
    font-size: 1.8rem;
    margin-bottom: 0.5em; }
    @media (max-width: 768px) {
      footer .company p:first-of-type {
        font-size: 1.6rem; } }
  footer .copy {
    font-size: 1.2rem; }
    @media (max-width: 480px) {
      footer .copy {
        margin-top: 50px; } }

/*============================================================================
	topBtn
=============================================================================*/
#back_to_top.sc {
  opacity: 1; }

#back_to_top {
  margin: 0 auto;
  width: 100px;
  height: 100px;
  position: fixed;
  right: 40px;
  bottom: 30px;
  z-index: 200;
  transition: 0.3s ease;
  opacity: 0;
  text-align: center; }
  @media (max-width: 768px) {
    #back_to_top {
      right: 25px;
      width: 70px;
      height: 70px; } }
  @media (max-width: 480px) {
    #back_to_top {
      right: 20px;
      bottom: 20px;
      width: 50px;
      height: 50px; } }
  #back_to_top button {
    background: url("../img/arrow_blown2.svg") no-repeat;
    background-size: contain;
    transform: rotate(-90deg);
    width: 100px;
    height: 100px;
    position: relative;
    border: none;
    cursor: pointer;
    transition: 0.3s; }
    #back_to_top button:hover {
      opacity: 0.7; }
    @media (max-width: 768px) {
      #back_to_top button {
        width: 70px;
        height: 70px; } }
    @media (max-width: 480px) {
      #back_to_top button {
        width: 50px;
        height: 50px; } }

/*================================
	scアニメ
================================*/
.fadein, .fadein02, .fadein03 {
  opacity: 0;
  transition: all 2.5s; }

.fadein.show, .fadein02.show, .fadein03.show {
  opacity: 1; }

.upfade {
  opacity: 0;
  transform: translate(0, 50px);
  transition: all 1.0s; }

.upfade.scrollin {
  opacity: 1;
  transform: translate(0, 0); }

.fvupfade1, .fvupfade2 {
  opacity: 0;
  transform: translate(0, 50px);
  transition: all 1.0s; }

.fvupfade1.display, .fvupfade2.display {
  opacity: 1;
  transform: translate(0, 0); }

.downfade {
  opacity: 0;
  transform: translate(0, -50px);
  transition: all 1.0s; }

.downfade.scrollin {
  opacity: 1;
  transform: translate(0, 0); }

.fade {
  opacity: 0;
  transition: all 1.2s; }

.fade.active {
  opacity: 1; }

.scalbig {
  transform: scale(0.9); }

.scalbig.scrollin {
  transform: scale(1); }

.sclinWrap {
  height: auto;
  overflow: hidden; }

.sclin_right {
  opacity: 0;
  transform: translate(50px, 0);
  transition: all 1.0s; }

.sclin_right.scrollin {
  opacity: 1;
  transform: translate(0, 0); }

.sclin_left {
  opacity: 0;
  transform: translate(-50px, 0);
  transition: all 1.0s; }

.sclin_left.scrollin {
  opacity: 1;
  transform: translate(0, 0); }

/*============================================================================
	調整用
=============================================================================*/
.fl {
  display: -webkit-flex;
  display: -moz-flex;
  display: flex; }


.fl-tab {
  display: -webkit-flex;
  display: -moz-flex;
  display: flex; }
  @media (max-width: 1024px) {
    .fl-tab {
      -webkit-flex-direction: column;
      -moz-flex-direction: column;
      flex-direction: column; } }

.fl-smp {
  display: -webkit-flex;
  display: -moz-flex;
  display: flex; }
  @media (max-width: 480px) {
    .fl-smp {
      -webkit-flex-direction: column;
      -moz-flex-direction: column;
      flex-direction: column; } }

.fl-jst {
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between; }

.fl-cen {
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center; }

.fl-end {
  -webkit-justify-content: flex-end;
  -moz-justify-content: flex-end;
  justify-content: flex-end; }

.fl-wrap {
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }

.fl-col {
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  flex-direction: column; }

.fl-reverse {
  -webkit-flex-direction: row-reverse;
  -moz-flex-direction: row-reverse;
  flex-direction: row-reverse; }

.mt0 {
  margin-top: 0 !important; }

.mt5 {
  margin-top: 5px !important; }

.mt10 {
  margin-top: 10px !important; }

.mt15 {
  margin-top: 15px !important; }

.mt20 {
  margin-top: 20px !important; }

.mt30 {
  margin-top: 30px !important; }

.mt35 {
  margin-top: 35px !important; }

.mt40 {
  margin-top: 40px !important; }

.mt45 {
  margin-top: 45px !important; }

.mt50 {
  margin-top: 50px !important; }

.mt100 {
  margin-top: 100px !important; }

.mr0 {
  margin-right: 0 !important; }

.mr5 {
  margin-right: 5px !important; }

.mr10 {
  margin-right: 10px !important; }

.mr15 {
  margin-right: 15px !important; }

.mr20 {
  margin-right: 20px !important; }

.mr25 {
  margin-right: 25px !important; }

.mb0 {
  margin-bottom: 0 !important; }

.mb5 {
  margin-bottom: 5px !important; }

.mb10 {
  margin-bottom: 10px !important; }

.mb12 {
  margin-bottom: 12px !important; }

.mb15 {
  margin-bottom: 15px !important; }

.mb20 {
  margin-bottom: 20px !important; }

.mb25 {
  margin-bottom: 25px !important; }

.mb30 {
  margin-bottom: 30px !important; }

.mb35 {
  margin-bottom: 35px !important; }

.mb40 {
  margin-bottom: 40px !important; }

.mb50 {
  margin-bottom: 50px !important; }

.mb60 {
  margin-bottom: 60px !important; }

.mb80 {
  margin-bottom: 80px !important; }

.ml0 {
  margin-left: 0 !important; }

.ml5 {
  margin-left: 5px !important; }

.ml10 {
  margin-left: 10px !important; }

.ml15 {
  margin-left: 15px !important; }

.ml20 {
  margin-left: 20px !important; }

.ml25 {
  margin-left: 25px !important; }

.ml30 {
  margin-left: 30px !important; }

.ls5 {
  letter-spacing: 5px !important; }

.ls10 {
  letter-spacing: 10px !important; }

.ls15 {
  letter-spacing: 15px !important; }

.ls40 {
  letter-spacing: 40px !important; }

.ls60 {
  letter-spacing: 60px !important; }

br {
  display: inline; }
  @media (min-width: 1025px) {
    br.show1024 {
      display: none !important; } }
  @media (min-width: 769px) {
    br.show768 {
      display: none !important; } }
  @media (min-width: 481px) {
    br.show480 {
      display: none !important; } }
  @media (max-width: 1024px) {
    br.hdn1024 {
      display: none !important; }
    br.show1024 {
      display: inherit; } }
  @media (max-width: 768px) {
    br.hdn768 {
      display: none !important; }
    br.show768 {
      display: inherit; } }
  @media (max-width: 480px) {
    br.hdn480 {
      display: none !important; }
    br.show480 {
      display: inherit; } }

span, a {
  display: inline-block; }
  @media (min-width: 1025px) {
    span.show1024, a.show1024 {
      display: none !important; } }
  @media (min-width: 769px) {
    span.show768, a.show768 {
      display: none !important; } }
  @media (min-width: 481px) {
    span.show480, a.show480 {
      display: none !important; } }
  @media (max-width: 1024px) {
    span.hdn1024, a.hdn1024 {
      display: none !important; }
    span.show1024, a.show1024 {
      display: inherit; } }
  @media (max-width: 768px) {
    span.hdn768, a.hdn768 {
      display: none !important; }
    span.show768, a.show768 {
      display: inherit; } }
  @media (max-width: 480px) {
    span.hdn480, a.hdn480 {
      display: none !important; }
    span.show480, a.show480 {
      display: inherit; } }

p, div, figure, ul {
  display: block; }
  @media (min-width: 1025px) {
    p.show1024, div.show1024, figure.show1024, ul.show1024 {
      display: none !important; } }
  @media (min-width: 769px) {
    p.show768, div.show768, figure.show768, ul.show768 {
      display: none !important; } }
  @media (min-width: 481px) {
    p.show480, div.show480, figure.show480, ul.show480 {
      display: none !important; } }
  @media (max-width: 1024px) {
    p.hdn1024, div.hdn1024, figure.hdn1024, ul.hdn1024 {
      display: none !important; }
    p.show1024, div.show1024, figure.show1024, ul.show1024 {
      display: inherit; } }
  @media (max-width: 768px) {
    p.hdn768, div.hdn768, figure.hdn768, ul.hdn768 {
      display: none !important; }
    p.show768, div.show768, figure.show768, ul.show768 {
      display: inherit; } }
  @media (max-width: 480px) {
    p.hdn480, div.hdn480, figure.hdn480, ul.hdn480 {
      display: none !important; }
    p.show480, div.show480, figure.show480, ul.show480 {
      display: inherit; } }

.ta_cnt {
  text-align: center; }

.ta_right {
  text-align: right; }

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

.mw_wp_form_confirm .confirm-hidden {
  　display: hidden; }

.button_container {
  margin: 0 auto;
  text-align: center; }

.button_su {
  overflow: hidden;
  position: relative;
  display: inline-block;
  border-radius: 3px;
  margin-bottom: -65px; }
  @media (max-width: 480px) {
    .button_su {
      width: 100%; } }
  .button_su a:hover {
    opacity: 1 !important; }
    .button_su a:hover::before, .button_su a:hover::after {
      background: #fff;
      transition: 0.3s; }
  .button_su a::before {
    content: '';
    display: block;
    width: 14px;
    height: 2px;
    position: absolute;
    top: calc(50% - 1px);
    right: 1.8em;
    margin: 0;
    background: #006DB7;
    transform: translateY(calc(-50% - 2px)) rotate(40deg); }
  .button_su a::after {
    content: '';
    display: block;
    width: 46px;
    height: 2px;
    position: absolute;
    top: 50%;
    right: 2em;
    margin: 0;
    background: #006DB7; }

.su_button_circle {
  background-color: red;
  border-radius: 1000px;
  position: absolute;
  left: 0;
  top: 0;
  width: 0px;
  height: 0px;
  margin-left: 0px;
  margin-top: 0px;
  pointer-events: none;
  /*animation-timing-function: ease-in-out; */ }

.button_su_inner {
  display: inline-block;
  background: #000;
  color: #F4F4F4 !important;
  font-size: 16px;
  font-weight: normal;
  width: 400px;
  font-family: 'Montserrat';
  text-align: left;
  border-radius: 3px;
  transition: 400ms;
  text-decoration: none;
  padding: 35px;
  z-index: 100000; }
  @media (max-width: 480px) {
    .button_su_inner {
      display: flex;
      width: 100%; } }

.button_text_container {
  position: relative;
  z-index: 10000; }

.explode-circle {
  animation: explode 0.5s forwards; }

.desplode-circle {
  animation: desplode 0.5s forwards; }

@keyframes explode {
  0% {
    width: 0px;
    height: 0px;
    margin-left: 0px;
    margin-top: 0px;
    background-color: rgba(42, 53, 80, 0.2); }
  100% {
    width: 1000px;
    height: 400px;
    margin-left: -500px;
    margin-top: -200px;
    background-color: #006DB7; } }
@keyframes desplode {
  0% {
    width: 1000px;
    height: 400px;
    margin-left: -200px;
    margin-top: -200px;
    background-color: #006DB7; }
  100% {
    width: 0px;
    height: 0px;
    margin-left: 0px;
    margin-top: 0px;
    background-color: #000; } }