@charset "utf-8";
:root {
  /* カラーパレット */
  --color-primary: #4c4948;
  --color-secondary: #ffffff;
  --color-accent: #005bab;

  /* フォントサイズ */
  --font-size-base: 16px;
  --font-size-small: 14px;
  --font-size-large: 18px;

  /* スペーシング */
  --spacing-unit: 8px;
  --spacing-small: calc(var(--spacing-unit) * 1);
  --spacing-medium: calc(var(--spacing-unit) * 2);
  --spacing-large: calc(var(--spacing-unit) * 3);

  /* ブレークポイント */
  --breakpoint-mobile: 767px;
  --breakpoint-tablet: 1024px;
  --breakpoint-desktop: 1280px;

  --easing: cubic-bezier(.2, 1, .2, 1);
  --transition: .5s var(--easing);
}

@font-face {
  font-family: "BMW Type Next Bold";
  font-weight: 700;
  src: url("../fonts/BMWTypeNextLatin-Bold.woff2") format("woff2"), url("../fonts/BMWTypeNextLatinTT-Bold.woff") format("woff");
}

@font-face {
  font-family: "BMW Type Next Light";
  src: url("../fonts/BMWTypeNextLatin-Light.woff2") format("woff2"), url("../fonts/BMWTypeNextLatinTT-Light.woff") format("woff");
}

/*----------------------------------------------------------------------------------------------
	base
----------------------------------------------------------------------------------------------*/

html {
  overflow-y: scroll;
  font-size: 62.5%;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  animation: fadeIn 2s ease 0s 1 normal;
  -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

body {
  position: relative;
  font-family: BMW Type Next Light, Helvetica, Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
  color: var(--color-primary);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  width: 100%;
  height: 100%;
  margin: auto;
}

#page_wrap {
  position: relative;
  padding-top: 0;
  overflow: hidden;
  z-index: 1;
}

a {
  -webkit-transition: .4s;
  transition: .4s;
}

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

a:hover,
a:active {
  color: #666;
  text-decoration: none;
}

@keyframes fadeIn {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

/*PCで表示させないセレクタ*/
#sp_header,
.tel-btn_sp {
  display: none;
}

.pc_hidden {
  display: none;
}



/*----------------------------------------------------------------------------------------------
	footer area
----------------------------------------------------------------------------------------------*/
.footer {
  background: #003476;
  color: #fff;
  line-height: 1;
  text-align: center;
  padding: 10px 0 15px;
  margin-top: 80px;
}

.f_copyright {
  font-weight: bold;
  font-family: BMW Type Next Bold, Helvetica, Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo;
  font-size: 12px;
  line-height: 1;
}

.spFtrFloat {
  display: none;
}

@media screen and (max-width:800px) {

  .footer {
    margin-top: 40px;
    margin-bottom: 55px;
  }

  .f_copyright {
    font-size: 10px;
  }

  .spFtrFloat {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
  }

  .spFtrFloat a {
    display: block;
    background-color: var(--color-primary);
    color: #fff;
    font-weight: bold;
    font-family: BMW Type Next Bold, Helvetica, Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo;
    font-size: 24px;
    text-align: center;
    padding: 10px 0;
  }

}




/*----------------------------------------------------------------------------------------------
	COMMON
----------------------------------------------------------------------------------------------*/
.row:after,
.col:after {
  content: "";
  display: block;
  clear: both;
}

.col {
  display: block;
  float: left;
}

.fl {
  float: left !important;
}

.fr {
  float: right !important;
}

.mt05 {
  margin-top: 5px;
}

.mt10 {
  margin-top: 10px;
}

.mt15 {
  margin-top: 15px;
}

.mt20 {
  margin-top: 20px;
}

.mt30 {
  margin-top: 30px;
}

.mt40 {
  margin-top: 40px;
}

.mt50 {
  margin-top: 50px;
}

.mt60 {
  margin-top: 60px;
}

.mb05 {
  margin-bottom: 5px;
}

.mb10 {
  margin-bottom: 10px;
}

.mb15 {
  margin-bottom: 15px;
}

.mb20 {
  margin-bottom: 20px;
}

.mb25 {
  margin-bottom: 25px;
}

.mb30 {
  margin-bottom: 30px;
}

.mb35 {
  margin-bottom: 35px;
}

.mb40 {
  margin-bottom: 40px;
}

.mb45 {
  margin-bottom: 45px;
}

.mb50 {
  margin-bottom: 50px;
}

.mb55 {
  margin-bottom: 55px;
}

.mb60 {
  margin-bottom: 60px;
}

.mb65 {
  margin-bottom: 65px;
}

.mb70 {
  margin-bottom: 70px;
}

.mb75 {
  margin-bottom: 75px;
}

.mb80 {
  margin-bottom: 80px;
}

.mb85 {
  margin-bottom: 85px;
}

.ctb {
  text-align: center;
}

.ac {
  text-align: center;
}

.al {
  text-align: left;
}

.ar {
  text-align: right;
}

a.hover img {
  -webkit-transition: .4s;
  transition: .4s;
}

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


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

.full_w_img img,
img.full_w_img {
  width: 100%;
  height: auto;
}

.fs_s {
  font-size: .8em;
}

.fs_ss {
  font-size: .6em;
}

sup {
  font-size: 70%;
  vertical-align: super;
}

.img_base {
  position: relative;
}


/* ===================================================================
//animation
=================================================================== */
.pageHddAnim {
  opacity: 0 !important;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

.pageHddAnim.is_view {
  opacity: 1 !important;
}

.fadeAnim {
  opacity: 0;
  -webkit-transform: translateY(20px);
  transform: translateY(20px);
  -webkit-transition: all 600ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 600ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.fadeAnim.is_view {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.fadeAnimB {
  opacity: 0;
  -webkit-transition: all 600ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 600ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.fadeAnimB.is_view {
  opacity: 1;
}

.fadeAnimC {
  opacity: 1;
  -webkit-transition: all 600ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 600ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.fadeAnimC.is_hide {
  opacity: 0;
}

.fadeAnimRightIn {
  opacity: 0;
  -webkit-transform: translateX(30px);
  transform: translateX(30px);
  -webkit-transition: all 600ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 600ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.fadeAnimRightIn.is_view {
  opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

.fadeAnimLeftIn {
  opacity: 0;
  -webkit-transform: translateX(-30px);
  transform: translateX(-30px);
  -webkit-transition: all 600ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 600ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.fadeAnimLeftIn.is_view {
  opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

.delay01 {
  -webkit-transition-delay: .1s !important;
  transition-delay: .1s !important;
}

.delay02 {
  -webkit-transition-delay: .2s !important;
  transition-delay: .2s !important;
}

.delay03 {
  -webkit-transition-delay: .3s !important;
  transition-delay: .3s !important;
}

.delay04 {
  -webkit-transition-delay: .4s !important;
  transition-delay: .4s !important;
}

.delay05 {
  -webkit-transition-delay: .5s !important;
  transition-delay: .5s !important;
}

.delay06 {
  -webkit-transition-delay: .6s !important;
  transition-delay: .6s !important;
}

.delay07 {
  -webkit-transition-delay: .7s !important;
  transition-delay: .7s !important;
}

.delay08 {
  -webkit-transition-delay: .8s !important;
  transition-delay: .8s !important;
}

.delay09 {
  -webkit-transition-delay: .9s !important;
  transition-delay: .9s !important;
}

.delay015 {
  -webkit-transition-delay: .15s !important;
  transition-delay: .15s !important;
}

.delay025 {
  -webkit-transition-delay: .25s !important;
  transition-delay: .25s !important;
}

.delay035 {
  -webkit-transition-delay: .35s !important;
  transition-delay: .35s !important;
}

.delay075 {
  -webkit-transition-delay: .75s !important;
  transition-delay: .75s !important;
}

.delay1 {
  -webkit-transition-delay: 1s !important;
  transition-delay: 1s !important;
}

.delay15 {
  -webkit-transition-delay: 1.5s !important;
  transition-delay: 1.5s !important;
}

.animImg {
  position: relative;
  overflow: hidden;
  -webkit-transition: all 600ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 600ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.animImg * {
  -webkit-transition: all 600ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 600ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.animImg::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  background: #000;
}

.animImg.is_view::before {
  -webkit-animation: animImgMask 1s ease;
  -moz-animation: animImgMask 1s ease;
  animation: animImgMask 1s ease;
}

@-webkit-keyframes animImgMask {
  0% {
    top: 100%;
  }

  25% {
    top: 0;
  }

  75% {
    top: 0;
  }

  100% {
    bottom: 100%;
  }
}

@-moz-keyframes animImgMask {
  0% {
    top: 100%;
  }

  25% {
    top: 0;
  }

  75% {
    top: 0;
  }

  100% {
    bottom: 100%;
  }
}

@keyframes animImgMask {
  0% {
    top: 100%;
  }

  25% {
    top: 0;
  }

  75% {
    top: 0;
  }

  100% {
    bottom: 100%;
  }
}

.animImg img {
  opacity: 0;
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  -webkit-transition: all 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.animImg.is_view img {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}

/* 光らせるためのstyle */
.shine {
  position: relative;
  overflow: hidden;
  display: block;
}

/* 光の疑似要素 */
.shine::before {
  content: "";
  animation: shine 3s cubic-bezier(0.25, 0, 0.25, 1) infinite;
  background-color: #afbec5;
  width: 140%;
  height: 100%;
  transform: skewX(-45deg);
  top: 0;
  left: -160%;
  opacity: 0.5;
  position: absolute;
}

/* 光の動き */
@keyframes shine {
  0% {
    left: -160%;
    opacity: 0;
  }

  70% {
    left: -160%;
    opacity: 0.5;
  }

  71% {
    left: -160%;
    opacity: 1;
  }

  100% {
    left: -20%;
    opacity: 0;
  }
}

/**********
//fadeText
**********/
.fadeText>span {
  opacity: 0;
  -webkit-transition: all 2s ease;
  transition: all 2s ease;
}

.fadeText>span.is_view {
  opacity: 1;
}

.fadeText>span:nth-child(3n+1) {
  -webkit-transition-delay: .15s;
  transition-delay: .15s;
}

.fadeText>span:nth-child(2n) {
  -webkit-transition-delay: .3s;
  transition-delay: .3s;
}


/* ===================================================================
//btns
=================================================================== */




/* ----------------------------------------------------------------------------------------------
	SP base
----------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px) {
  html {
    -webkit-text-size-adjust: none;
  }

  body {
    min-width: 320px;
    font-feature-settings: "palt";
    font-size: 15px;
  }

  #page_wrap {
    /* padding-top: 60px; */
  }

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

  /*スマホのみのオプション*/
  .sp_pic {
    width: 100%;
    height: auto;
    margin-bottom: 5px;
  }

  .sp_center {
    display: block;
    margin: 0px auto;
  }

  .sp_br {
    display: block;
    margin-top: 5px;
  }

  .sp_50 {
    width: 50%;
    margin: 0px auto 5px;
    display: block;
  }

  .sp_80 {
    width: 80%;
    margin: 0px auto 5px;
    display: block;
  }

  .FRight,
  .FLeft {
    float: none;
  }

  .sp_right {
    float: right;
  }

  .sp_left {
    float: left;
  }

  .sp_centering {
    text-align: center
  }

  /*スマホで表示させないセレクタ*/
  .h_nav_pc,
  #gnavi_wrap {
    display: none;
  }

  .pc_hidden {
    display: block;
  }

  .sp_hidden {
    display: none;
  }

  .pc_hidden.inlineb {
    display: inline-block;
  }

  .hidden-md {
    display: none;
  }

  .visible-md {
    display: block;
  }

  .xs-justify {
    text-align: justify;
  }

  .box_w900 {
    margin-left: 15px;
    margin-right: 15px;
  }

  /* ----------------------------------------------------------------------------------------------
   sp_header ※スマホのみ表示のセレクタ
---------------------------------------------------------------------------------------------- */
  

  .sp_img {
    width: 100%;
    height: auto;
  }

  .sp_img95 {
    width: 95%;
    height: auto;
  }

  .sp_img90 {
    width: 90%;
    height: auto;
  }

  .sp_img80 {
    width: 80%;
    height: auto;
  }

  /* ----------------------------------------------------------------------------------------------
	footer link
----------------------------------------------------------------------------------------------*/



  /* ----------------------------------------------------------------------------------------------
	common
----------------------------------------------------------------------------------------------*/
  .mt05 {
    margin-top: 5px;
  }

  .mt10 {
    margin-top: 10px;
  }

  .mt15 {
    margin-top: 15px;
  }

  .mt20 {
    margin-top: 10px;
  }

  .mt30 {
    margin-top: 15px;
  }

  .mt40 {
    margin-top: 20px;
  }

  .mt45 {
    margin-top: 22px;
  }

  .mt60 {
    margin-top: 30px;
  }

  .mb05 {
    margin-bottom: 5px;
  }

  .mb10 {
    margin-bottom: 10px;
  }

  .mb15 {
    margin-bottom: 15px;
  }

  .mb20 {
    margin-bottom: 10px;
  }

  .mb25 {
    margin-bottom: 14px;
  }

  .mb30 {
    margin-bottom: 15px;
  }

  .mb35 {
    margin-bottom: 17px;
  }

  .mb40 {
    margin-bottom: 20px;
  }

  .mb45 {
    margin-bottom: 22px;
  }

  .mb50 {
    margin-bottom: 25px;
  }

  .mb55 {
    margin-bottom: 27px;
  }

  .mb60 {
    margin-bottom: 30px;
  }

  .mb65 {
    margin-bottom: 32px;
  }

  .mb70 {
    margin-bottom: 35px;
  }

  .mb75 {
    margin-bottom: 37px;
  }

  .mb80 {
    margin-bottom: 40px;
  }

  .mb85 {
    margin-bottom: 47px;
  }

  .xs-mt10 {
    margin-top: 10px;
  }

  .xs-mt15 {
    margin-top: 15px;
  }

  .xs-mt20 {
    margin-top: 20px;
  }

  .xs-mt25 {
    margin-top: 25px;
  }

  .xs-mt30 {
    margin-top: 30px;
  }

  .xs-mt35 {
    margin-top: 35px;
  }

  .xs-mt40 {
    margin-top: 40px;
  }
}


/*----------------------------------------------------------------------------------------------
	top
----------------------------------------------------------------------------------------------*/

.l-container {
  width: clamp(300px, 90%, 1020px);
  margin-inline: auto;
  text-align: justify;
}

.m001 {
  margin-top: 40px;
}

.message {
  text-align: center;
  font-weight: bold;
  font-family: BMW Type Next Bold, Helvetica, Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo;
  font-size: 26px;
  line-height: 1.7;
  margin-top: 40px;
}

.Challenge01 {
  margin-top: 80px;
}

.list_ttl {
  text-align: center;
  font-weight: bold;
  font-family: BMW Type Next Bold, Helvetica, Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo;
  font-size: 40px;
  line-height: 1.4;
  color: #005bab;
  margin-top: 40px;
}

.list {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 40px;
}

.list_item {
  border: 6px solid var(--color-accent);
  padding: 35px 40px;
  border-radius: 30px;
  display: flex;
  gap: 1%;
}

.list_item_contents {
  flex: 1;
}

.list_item_ttl {
  font-weight: bold;
  font-family: BMW Type Next Bold, Helvetica, Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo;
  font-size: 30px;
  color: #005bab;
}

.list_item_txt01 {
  margin-top: .7em;
}
.list_item_txt02 {
  margin-top: .5em;
}
.list_item_price_caption {
  color: #005bab;
  font-size: 1.1em;
  margin-top: 1em;

}
.list_item_price {
  color: #005bab;
  font-size: 1.8em;
  line-height: 1.2;
}
.list_item_img {
  width: 48.8%;
}

.safe4_t01 {
  margin-top: 40px;
}

.safe4_t02 {
  margin-top: 40px;
}

.safe4_t02_txt {
  font-size: 30px;
  margin-top: .5em;
}

.safe4_t03 {
  margin-top: 40px;
}

.safe4_t03_txt {
  font-size: 14px;
  margin-top: 2em;
}

.shop {
  margin-top: 80px;
}

.shop__id01 {
  font-weight: bold;
  font-family: BMW Type Next Bold, Helvetica, Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo;
  font-size: 30px;
  color: #005bab;
  margin-top: 40px;
}

.shop__id01 a {
  color: #005bab;
  font-weight: bold;
}

.shop__txt {
  margin-top: .5em;
}
.shop__address {
  margin-top: .5em;
}
.shop__address_list {
  display: flex;
  flex-wrap: wrap;
  margin-top: .5em;
  line-height: 1.8;
}

.shop__address_list dt {
  width: 6em;
}

.shop__address_list dd {
  width: calc(100% - 6em);
}

.map {
  width: 100%;
  margin-inline: auto;
  margin-top: 40px;
}

.map iframe {
  width: 100%;
  height: 750px;
  border: none;
}

.cta {
  text-align: center;
  margin-top: 40px;
}

.cta a {
  display: block;
  background-color: var(--color-primary);
  color: #fff;
  font-weight: bold;
  font-family: BMW Type Next Bold, Helvetica, Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo;
  font-size: 30px;
  padding: 5px 0;
}

.cta a:hover {
  background: #003476;
}



@media (max-width: 800px) {

  .m001 {
    margin-top: 20px;
  }

  .message {
    font-size: 16px;
    margin-top: 30px;
  }

  .Challenge01 {
    margin-top: 30px;
  }

  .list_ttl {
    font-size: 20px;
    line-height: 1.4;
    color: #005bab;
    margin-top: 40px;
  }

  .list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
  }

  .list_item {
    border: 3px solid var(--color-accent);
    padding: 20px 15px;
    border-radius: 15px;
    display: flex;
    gap: 15px 1%;
    flex-direction: column-reverse;
  }

  .list_item_contents {
    flex: 1;
  }

  .list_item_ttl {
    font-size: 20px;
    color: #005bab;
  }

  .list_item_txt01 {
    margin-top: .7em;
  }
  .list_item_txt02 {
    margin-top: .5em;
  }
  .list_item_price_caption {
    color: #005bab;
    font-size: 1.1em;
    margin-top: 1em;

  }
  .list_item_price {
    color: #005bab;
    font-size: 1.8em;
    line-height: 1.2;
  }
  .list_item_img {
    width: 100%;
  }

  .safe4_t01 {
    margin-top: 20px;
  }

  .safe4_t02 {
    margin-top: 20px;
  }

  .safe4_t02_txt {
    font-size: 16px;
    margin-top: .5em;
  }

  .safe4_t03 {
    margin-top: 10px;
  }

  .safe4_t03_txt {
    font-size: 10px;
    margin-top: 1em;
  }

  .shop {
    margin-top: 30px;
  }

  .shop__id01 {
    font-weight: bold;
    font-family: BMW Type Next Bold, Helvetica, Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo;
    font-size: 20px;
    color: #005bab;
    margin-top: 20px;
  }

  .shop__id01 a {
    color: #005bab;
    font-weight: bold;
  }

  .shop__txt {
    margin-top: .5em;
  }
  .shop__address {
    margin-top: .5em;
  }
  .shop__address_list {
    display: flex;
    flex-wrap: wrap;
    margin-top: .5em;
    line-height: 1.8;
  }

  .shop__address_list dt {
    width: 6em;
  }

  .shop__address_list dd {
    width: calc(100% - 6em);
  }

  .cta {
    display: none;
  }
  

  .map {
    margin-inline: auto;
    margin-top: 20px;
  }

  .map iframe {
    width: 100%;
    height: 330px;
    border: none;
  }

}