@charset "utf-8";
/* GTM _ CSS (last update: 2020.06.26)

- 00 _ Base

*/

*, *::before, *::after { /* box-sizing all */
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.boxsizing-content	{
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing:content-box;
}

html { font-size: 62.5%;}
body {
  font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Arial, Helvetica,sans-serif;
  line-height:1.0;
  color:#333;
  letter-spacing:normal;
  background:#ebebeb;
  -webkit-text-size-adjust: 100%; /* SmartPhone表示用 */
}
/*-------------------------------
 00 _ Base
---------------------------------*/
/* 00 _ Link
-----------------------------*/
a,a:visited { text-decoration:none; color:#0588ce; }
a:hover { text-decoration:underline; color: #3a84df;}
.link__text--back {
  padding: 1em;
  margin: 1em auto;
  font-size: 1.6rem;
  text-align: center;
}
.link__text--back a {
  width: min(80%, 46rem);
  padding: 1em;
  background: rgba(0,0,0,0.8);
  border-radius: 5px;
  display: inline-block;
}
.link-back-container {
  padding: 1rem 2vw;
  background: #63686e;
}
/* 00 _ List
-----------------------------*/
.list_text {
}
.list_text li,
.list_text dd {
  padding:0.2em 0 0.2em 1em;
  margin: 0.5em auto;
  line-height: 1.3;
  text-indent:-1em;
}
/* 00 _ Image
-----------------------------*/
img {
  max-width:100%;
  height:auto;
}
img.img_half {
  max-width:50%;
  height:auto;
}
/* Image Position */
img.img_abslt { position:absolute;} /* 位置は直接タグへ指定 */

/* 00 _ Decoration
-----------------------------*/
hr {
  border: none;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #fff;
  margin: 5rem 2vw;
}
strong {
  font-size: 125%;
}
/*-------------------------------
 Navi _ Language
---------------------------------*/
.navi_lang {
  width: 100%;
  text-align: right;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 30;
}
.navi_lang p {
  padding: 0.5em;
  border: #555 solid 1px;
  color: #ccc;
  font-size: 1.2rem;
  display: inline-block;
  cursor: pointer;
  position: absolute; right: 2vmin; top:2vmin;
  z-index: 3;
}
.navi_lang p::before {
  content: "\0025b6";
  margin-right: 0.2em;
}
.navi_lang p:hover {
  background: rgba(256, 256, 256, 0.2);
  color: #fff;
}
.navi_lang p.active {
  background: rgba(256, 256, 256, 0.2);
  color: #fff;
  position: fixed;
}
.navi_lang p.active::before {
  content: "\0025bc";
}
.navi_lang p.active:hover {
  background: none;
}
.navi_lang ul {
  width: 100%;
  height: 100vh;
  padding-top: 25Vh;
  background: rgba(0,0,0,0.8);
  font-size: 1.6rem;
  display: none;
  position: fixed;
}
.navi_lang ul li {
  margin: 0.5em auto;
  text-align: center;
}
.navi_lang ul li a,
.navi_lang ul li span {
  padding: 1em 2vw;
  display: block;
}
.navi_lang ul li a {
  color: #fff;
  text-shadow: 0 0 5px #000 , 0 0 1px #000;
}
.navi_lang ul li a:hover {
  color: #ccc;
}
.navi_lang ul li span {
  color: #999;
}

/*-------------------------------
 Main
---------------------------------*/
main,footer { text-align:center; position: relative; z-index: 1;}

main h1 {display:none;}


section#heroheader,section.content	{
	position:relative;
	overflow:hidden;
	line-height:0;
}

section#heroheader {
  padding-bottom: 1px;
  background: #040001;
  z-index: 20;
}

section#heroheader  > div,
section.content  > div { margin: auto; position:relative; display:inline-block;}

section.content > div { max-width:50%; }
section#heroheader > div,
section.content.single > div { max-width: 960px;}

p.link_local {
  min-width: 50%;
  max-width: 480px;
  padding: 0 5vw;
  margin: 5% auto 10%;
  text-align: center;
  position: relative;
}
p.link_local a {
  padding: 1.5em 2em;
  border: #777 solid 1px;
  color: #ccc;
  font-size: 1.6rem;
  display: block;
}
p.link_local a:hover {
  background: #ccc;
  color:#000;
  text-decoration: none;
}


/*-------------------------------
 Notice & News
---------------------------------*/
.notice,
.news {
  padding: 10px 2vw;
  background: #111;
  color: #606060;
  font-size: 1.6rem;
  line-height: 1.3;
  text-align: center;
}
.notice {
  padding-top: 30px;
}
.news {
  padding-bottom: 30px;
}
.notice__inner,
.news__inner {
  max-width: 960px;
  margin: 0 auto;
  position: relative;
}
.notice__title,
.news__title {
  width: 100%;
  margin-bottom: 1.5rem;
  color: #dedede;
  font-size: 112.5%;
  font-weight: bold;
}
/*Notice*/
.notice__list {
  margin: 0 auto;
  font-size: 1.3rem;
  position: relative;
  display: flex;
  justify-content: center;
}
.notice__list-text {
  margin: 1rem;
  line-height: 1.3;
  color: #ccc;
  text-align: left;
}
.notice__list-text img {
  margin: 5px auto 0;
}
.notice__list-date {
  display: block;
}
/* News */
.news__inner {
  display: flex;
  flex-wrap: wrap;
}
.news__list {
  width: min(48%, 460px);
  padding: 1em;
  margin: 0 auto;
  background: #222;
  font-size: 1.4rem;
  position: relative;
}
.news__list-title {
  color: #dedede;
}
.news__list-text {
  color: #ccc;
  line-height: 1.5;
}


/*-------------------------------
 Youtube _ Responsive
---------------------------------*/
.videoArea {
  padding: 2vw;
  background: #222;
  color: #eee;
  position: relative;
  z-index: 20;
  /* Flex - parent */
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.videoArea h2{
  margin-bottom: 1em;
  font-size: 1.8rem;
}
.videoArea_textbox {
  margin-top: 2em;
  line-height: 1.5;
  font-size: 1.4rem;
  text-align: left;
}

.videoArea_conteiner {
  width: 100%;
  max-width: calc(100% / 4 - 1rem);
  margin: 0.5rem;
}
.video {
  width: 100%;
  height: 0;
  padding-top: 56.25%; /*アスペクト比16:9 = 9/16 * 100%*/
  position: relative;
}
.video iframe {
  width: 100%;
  height: 100%;
  position: absolute; left: 0; top: 0; right: 0; bottom: 0;
}

/*-------------------------------
 Product Detail
---------------------------------*/
.detail {
  padding: 5vmax 2vw;
  margin: 0 auto;
  background: #fdfdfd;
  font-size: 1.6rem;
}
.detail__container {
  max-width: 960px;
  margin: 0 auto;
  position: relative;
}
.detail__container .title {
  margin: 0 auto 2rem;
  color: #404040;
  font-size: 2rem;
  line-height: 1.4;
}
.detail__container .title strong {
  font-size: 220%;
}
.detail__container .title em {
  font-size: 135%;
  font-weight: bold;
}
.detail__container h2.title { }
.detail__container h3.title { }

.detail__container p strong {
  font-size: 150%;
}
.detail__container p em {
  font-size: 125%;
}

.detail__container > ul {
  margin: 1em auto;
  line-height: 1.4;
}
.detail__container > ul li {
  padding: 0.5em;
  margin: 0.5em 2vw;
}
.detail__container ul strong {
  font-size: 150%;
}
.detail__container ul em {
  font-size: 112.5%;
  font-weight: bold;
}
.detail__container ul em small {
  font-weight: normal;
}

/* Detail _ Price
-----------------------------*/
.detail__price {
  margin: 5rem 2vw;
  line-height: 1.5;
  font-size: 2rem;
} 
.detail__price p {
  margin: 1em auto;
}
.detail__price ul {
  padding: 2rem;
  margin: 0 auto;
}
.detail__price ul li {
  padding: 0.5em 0;
  margin: 0 auto;
}
.detail__price--campaign {
 
  background: #0588ce;
  color: #fff;
}
.detail__price--standard {
  padding: 2rem 0;
  background: #ccc;
  color: #333;
  font-size: 1.6rem;
}

/* Detail _ Option
-----------------------------*/
.detail__option {
  padding: 0;
  margin: 2rem 2vw;
  background: #000;
  color: #fff;
  line-height: 1;
}
.detail__option p {
  padding: 1em;
  line-height: 1.5;
}
.detail__option img {
  margin: 0 auto;
}

/* Detail _ Notice
-----------------------------*/
.detail__notice {
  margin: 5rem 2vw;
  position: relative;
}
.detail__notice dt {
  padding: 1em;
  margin: 0 auto 1em;
  background: #ccc;

}
.detail__notice dd {
  margin-left: 5px;
  margin-right: 5px;
  font-size: 1.2rem;
  text-align: justify;
}

/*-------------------------------
 contents
---------------------------------*/
.content__img--text-block {
  padding: 1em 2.65625% 1em 0;
  background: #ebebeb;
}

/*-------------------------------
 caravan
---------------------------------*/
.caravan {
  padding: 5vmax 2vw;
  margin: 0 auto;
  background: #040001 url("/gtm/image/kaiserin_bg_caravan.jpg") 60% 0 no-repeat;
  -webkit-background-size: auto 100%;
  background-size: auto 100%;
  color: #fff;
  font-size: 1.6rem;
  
}
.caravan__content {
  max-width: 960px;
  padding-right: 25%;
  margin: 0 auto;
}
.caravan__content h2 {
  padding: 0 1rem;
  margin: 0 0 1rem;
  font-size: 3.6rem;
}
.caravan__content h3 {
  margin: 0 0 1rem;
  font-size: 5rem;
}
.caravan__content h3 small {
  font-size: 2rem;
}
.caravan__content p {
  margin: 0 2rem 3rem;
  line-height: 1.5;
}
.caravan__schedule {
  margin: 2rem 1rem;
}
.caravan__schedule dt {
  padding: 0.5em 1em;
  margin: 0 0 1em;
  background: rgba(5,136,206,0.9);
  font-size: 125%;
  font-weight: bold;
}
.caravan__schedule dd {
  padding: 1em;
  margin: 0 0 1em;
  background: rgba(5,136,206,0.6);
  line-height: 1.5;
}
.caravan__schedule dd:first-line {
  font-size: 112.5%;
}

/*-------------------------------
 Include
---------------------------------*/
.include {
  padding: 1vmax 2vw;
  background: #696e71;
  color: #fff;
  line-height: 1;
  display: flex;
  flex-wrap: wrap;
}
.include__container {
  margin: 2vmax auto;
  position: relative;
  font-size: 1.5rem;
  text-align: center;
}

.include__container p {
  max-width: 800px;
  margin:1em auto;
  line-height: 1.5;
}

.container__tilte {
  padding:0 0 1em;
  font-size: 1.125em;
  font-weight: bold;
  line-height: 1.3;
}
.container__text--cap-just {
  text-align: justify;
}

.container--col1 {
  width: calc(100% / 1);
}
.container--col2 {
  width: calc(100% / 2);
}
.container--col3 {
  width: calc(100% / 3);
}

/*-------------------------------
 Information _ Experience meeting
---------------------------------*/
div.information {
  padding: 10rem 5vw;
  margin: 0 auto;
  background: #fff;
  font-size: 1.6rem;
}
.schedule {
  min-width: 50%;
  padding-bottom: 0.5em;
  margin: 2em auto;
  background: #fff;
  border: 1px solid #777;
  line-height: 1.3;
  display: inline-block;
}
.schedule dt {
  padding: 0.5em 1em;
  margin-bottom: 0.5em;
  background: #777;
  color: #fff;
  font-size: 112.5%;
  text-align: center;
}
.schedule dd {
  padding: 0.5em 1em;
}
.schedule dd span {
  margin-right: 1em;
}

/*-------------------------------
 Store Link
---------------------------------*/
.storeLink {
  width: 100%;
  background: #222;
  /*border-top: 1px solid #ebebeb;*/
  font-size: 1.6rem;
  text-align: center;
  position: fixed; left: 0; bottom: 0;
  z-index: 10;
}
.storeLink-none {
  display: none;
}
.storeLink > div {
  max-width: 960px;
  padding: 2rem 0;
  margin: 0 auto;
  position: relative;
}
a.link__btn--ols,
a.link__btn--closed{
  max-width: 50%;
  padding: 2rem 1rem;
  margin: 0 auto;
  background: #0588ce;
  border: 1px solid #0588ce;
  border-radius: 5px;
  color: #fff;
  line-height: 1.2;
  display: block;
}
a.link__btn--ols:hover {
  background: #fff;
  color: #0588ce;
  text-decoration: none;
}
a.link__btn--closed,
a.link__btn--closed:hover{
  background: #555;
  border-color: #555;
  color: #aaa;
  text-decoration: none;
}
.link__btn--disable {
  pointer-events: none;
}

/*-------------------------------
 Footer
---------------------------------*/
footer {
  width:100%;
  padding: 40px 0 10rem;
  background: #ebebeb;
}

footer .copyright{
  max-width:960px;
  padding:0 2vw;
  margin:0 auto 2em;
}
footer img.img_logo_vs	{ max-width:25%; margin:2em auto 1em;}

/*-------------------------------
 Special Contents _ Development secret story Q&A
---------------------------------*/
.spcontents {
  padding: 45vh 0 0;
  text-shadow: 0 0px 5px #000;
  color: #fff;
}

.spcontents__cover {
  width: 100%; height: 100%;
  background: #000 url("/gtm/image/kaiserin_bg_qa.jpg") 50% 0 no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
  position: fixed; left: 0; top: 0;
  z-index: 0;
  filter: brightness(0.6);
}

/* Special Contents _ Section
-----------------------------*/
.spcontents__qa-header,
.spcontents__qa {
  margin: 0 auto;
  position: relative;
  z-index: 1;
}  
.spcontents__qa-header {
  padding: 4vmax 2vw 0;
  background: rgba(5,136,206,0.5);
  text-align: center;
}
.spcontents__qa {
  padding: 5vh 2vw 2vh;
  background: rgba(0,0,0,0.5);
  text-align: left;
}

/* Special Contents _ Headline
-----------------------------*/
main.spcontents h1 {
  display: block;
}

.spcontents__title--main {
  padding: 0 0 1em; 
  color: #fff;
  font-size: 2.4rem;
  position: relative;
  z-index: 1;
}
.spcontents__title--subject {
  max-width: 940px;
  margin: 0 auto 1em;
  font-size: 2rem;
  font-weight: bold;
}
/* Special Contents _ Number
-----------------------------*/
.spcontents__number {
  font-size: 1.6rem;
  position: relative;
  z-index: 1;
  /* Flex */
  display: flex;
  justify-content: center;
}

.spcontents__number li {
  padding: 0.5em 1em;
}
.spcontents__number--select {
  /*border-bottom: 4px solid #fff;*/
}

/* Special Contents _ Text
-----------------------------*/
.spcontents__text {
  max-width: 960px;
  padding: 0 2vw;
  margin: 0 auto 4em;
  font-size: 1.5rem;
  line-height: 1.5;
}
.spcontents__text dt {
  min-height: 3em;
  margin: 0 0 1em;
  padding: 0.5em 0;
  clear: both;
}
.spcontents__text dd {
  text-align: justify;
}
.spcontents__text dt span,
.spcontents__text dd span {
  padding-right: 0.7em;
  font-size: 1.5em;
  display: block;
  float: left;
}
/*------------------- Media Screen ----------------------*/
@media (orientation: portrait) {
  section#heroheader { min-height: 70vh; }
}

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

/*-------------------------------
 Main
---------------------------------*/
  section.content > div {
    max-width:none;
    display:block;
  }
}

@media screen and (max-width: 767px) {
  html { font-size:50%;}
  /*-------------------------------
   Navi _ Language
  ---------------------------------*/
  .navi_lang p {
    font-size: 1rem;
  }
  .navi_lang ul {
  padding-top: 35%;
  }
  /*-------------------------------
   Notice &  News
  ---------------------------------*/
  .notice__list-text {
    padding-left: 0;
    text-indent: 0;
  }
  /*-------------------------------
   Youtube
  ---------------------------------*/
  .videoArea_conteiner {
    max-width: calc(100% / 2 - 1rem);
  }
  /*-------------------------------
   Footer
  ---------------------------------*/
  footer {
    font-size:calc(100vw / 45);
  }
  footer img.img_logo_vs { 
    max-width:calc(100% / 3);
  }
}