/*ページ全体の設定
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

@import url("https://fonts.googleapis.com/css2?family=Anton&display=swap");
html{
	font-size: 62.5%;
	line-height: 1;
	color: #1B1135;
	background-size: 30%;
	font-family: 游ゴシック, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, "メイリオ", Meiryo, Arial, sans-serif;
	/*　デバイスフォント最適化　*/
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
body {
	font-size: 1.8rem;
	position: relative;
}
@media(max-width: 767px){
	html{
		font-size: 12px;
	}
}
html,body{
    width: 100%;
    -ms-overflow-x: hidden;
        overflow-x: hidden;
}

#main{
	color: #1B1135;
	background:#ffffff;
   
}

/*背景の設定
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

.bg-section{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 500vh;
	z-index: 1;
	background-repeat: no-repeat;
	background-position: center center; 
}

#bg-section01{
	background: linear-gradient(125deg,rgba(95,123,229,0.5),rgba(118,117,208,0.8)) fixed, 
	url('../images/mainimg01.jpg');
	background-position: center;
  background-blend-mode: multiply;
	-webkit-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}


/**/
#section03{
    position: relative;
    z-index: 3;
    padding: 20vh 0 0;
    background: #080126;
    overflow: hidden;
}

#bg-section02{
  background-image: url('../images/mainimg02.jpg');
	background-position: 50% 50%;
	height: 500vh!important;
	background-repeat: repeat;
}


/**/
#section05{
    position: relative;
    z-index: 3;
    padding: 50vh 0 0;
    background: #aaa;
    overflow: hidden;
}
#bg-section03{
  background-image: url('../images/mainimg01.jpg');
	background-position: 50% 70%;
	height: 300vh!important;
	background-repeat: repeat;
}

/**/
#section07{
    position: relative;
    z-index: 3;
    padding: 50vh 0 0;
    background: #080126;
    overflow: hidden;
}
#bg-section04{
    background-image: url('../images/mainimg02.jpg');
    top: 30vh;
	height: 500vh!important;
	background-repeat: repeat;
}
/**/
#section09{
    position: relative;
    z-index: 3;
    padding: 50vh 0 0;
    background: #080126;
    overflow: hidden;
}
#bg-section05{
    background-image: url('../images/mainimg01.jpg');
    top: 30vh;
	height: 500vh!important;
	background-repeat: repeat;
}

/**/
#section11{
    position: relative;
    z-index: 3;
    padding: 50vh 0 0;
    background: #080126;
    overflow: hidden;
}
#bg-section06{
	background-image: url('../images/mainimg02.jpg');
	top: 100vh;
	height: 800vh!important;
	background-repeat: repeat;
}
@media(max-width: 767px){

#bg-section02,
#bg-section05,
#bg-section04,
#bg-section05,
#bg-section06{
	height: 1200vh!important;
}
}

/*セクション１の設定
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#section01{
		color: #fff;
    position: relative;
		text-shadow: 0px 0px 5px #555;
    z-index: 2;
    font-size: 2rem;
    padding: 15vh 0;
}
main #section01 h2{
	text-align: center;
	font-size: 3rem;
	font-family: Impact,"Anton";
	margin: 0 0 40px;
}
#section01 .content-inner{
    max-width: 600px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
#section01 .inner-el{
    font-size: 8rem;
    position: relative;
    text-align: center;
	line-height: 1.2;
    padding: 0 10px;
    max-width:50px;
}
#section01 .oleo{
    font-size: 2.8rem;
		font-family: Impact,"Anton";
}

.btn-ghost{
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  max-width: 250px;
  margin: 1rem auto;
  text-transform: uppercase;
  font-size: 3rem;
  border: 1px solid #fff;
  color: #fff;
	font-family: Impact,"Anton";
	padding: 8px 15px;
}
.btn-ghost:hover{
    text-decoration: none;
    border-color: #fff;
    color: #fff;
}


.btn-ghost:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #eb34d8;
  transform: translateX(-100%);
  box-sizing: border-box;
  transition: 0.5s ease-in-out;
  z-index: -1;
}
.btn-ghost:hover:before {
  transform: translateX(0);
}


@media(max-width: 767px){
    #section01{
      font-size: 1.2rem;
			padding: 0 20px;
    }
    #section01 .inner-el{
			padding: 0 5px; 
			font-size: 3rem;
    }
}

/*セクション2 4 6 8 10の設定
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
main h2{
	text-align: center;
	font-size: 8rem;
	font-family: Impact,"Anton";
	margin: 0 0 40px;
}
main h2 span{
  background:linear-gradient(transparent 70%, rgb(235, 52, 216,0.9) 70%);
}
main h3{
	text-align: center;
	font-size: 3rem;
	margin: 20px 0 30px;
}

main h4{
	text-align: center;
	font-size: 2.1rem;
	margin: 0 0 20px;
}

article{
	width: 90%;
	max-width: 850px;
	margin: 0 auto;
	padding: 0 ;
}
.btn_03 {
  display: inline-block;
	text-decoration: none;
  background-color: #1B1135;
  color: #080126;
  font-size: 1.2rem;
  border: 2px solid #1B1135;
  padding: 8px 25px;
}
.btn_03 i {
	display: inline-block;
	padding: 0 0 0 8px; }
.btn_03:hover {
	color: #1B1135;
	border: 2px solid #1B1135;
text-decoration: none;
	background-color: transparent; }


@media(max-width: 767px){
main h2{
	font-size: 2rem;
}
main h3{
	font-size: 2rem;
}
#section02,#section04,#section06,#section08,#section10{
	padding: 40px 0;
	font-size: 1.5rem;
}
}
/*セクション2の設定
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#section02{
    position: relative;
    z-index: 4;
	background:#ffffff;
    padding:10vh 0;
}

/*セクション4の設定
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#section04{
    position: relative;
    z-index: 3;
	background:#ffffff;
    padding: 10vh 0;
}

/*セクション6の設定
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#section06{
    position: relative;
    z-index: 3;
	background:#ffffff;
    padding: 10vh 0;
}
/*セクション8の設定
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#section08{
    position: relative;
    z-index: 3;
	background:#ffffff;
    padding: 10vh 0;
}
/*セクション10の設定
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#section10{
    position: relative;
	background:#ffffff;
    z-index: 3;
    padding: 10vh 0;
}
/*フッターの設定
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#footer{
    color: #1B1135;
    padding: 50px 20px;
    font-size: 12px;
    text-align: center;
    background: #fff;
}


.title{
    letter-spacing: 4px;   
}
.z-depth-2{
    position: relative;
    z-index: 2;
}
.table{
    background-color: #1B1135;
    color: #333;
}

/*各種モジュール
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
* a,
* .link_dummy {
	color: #093475;
	transition: all .2s ease;
}
img{
	max-width: 100%;
}
/*　clearする　*/
.clearfix:after {
  content: "";
  clear: both;
  display: block; }

/*画像左右float	＿＿＿＿＿＿＿＿＿＿　*/
.img_left {
  float: left;
  padding: 0 10px 20px 0; }

.img_right {
  float: right;
  padding: 0 0 20px 10px; }
/*画像リスト	＿＿＿＿＿＿＿＿＿＿　*/
.img_list {
  display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	list-style: none;
  padding: 0 0 20px;
	margin: 0 auto;
}
.img_list li{
	width: 30%;
	margin: 0 0 20px;
}
.img_list li img{
	max-width: 100%;
	display: block;
}
@media(max-width: 767px){
.img_list li{
	width: 48%;
	margin: 0 0 20px;
}
}
/* 回転Y軸＿＿＿＿＿＿＿＿＿＿　*/	
/* スマホ表示用。flipYを指定している親要素に指定しないとうまく動かない*/
.choice-btn{
    transform:translate3d(0, 0, 0);
}
.flipY figure{/*テキストの基点となる位置を定義*/
  position: relative;
  display: block;
}
.flipY .figureImg{
  transition: all 0.35s ease;/*移り変わる速さを変更したい場合はこの数値を変更*/
  backface-visibility: hidden;/*三次元になった際に裏面を可視化させない*/
	box-shadow: 0px 0px 8px #555;
}

.flipY figure:hover .figureImg {/*hoverした時の変化*/
  transform: rotateY(-180deg);
  opacity: 0;
}

.flipY figure figcaption{
/*ここからエリアの絶対配置の指定*/
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
	box-shadow: 0px 0px 8px #555;
/*ここまでエリアの絶対配置の指定*/
  transition: all 0.35s ease;/*移り変わる速さを変更したい場合はこの数値を変更*/
  transform: rotateY(90deg);/*横軸に回転*/
  transform-origin: 50% 0%;/*回転する基点*/
  opacity: 0;
  background-color:#eb34d8;/*背景色*/
  color: #fff;/*テキストの色を変えたい場合はここを修正*/
 /*ここからテキスト中央寄せの指定*/
  display: flex;
  justify-content: center;
  align-items: center;
	flex-wrap: wrap;
 /*ここまでテキスト中央寄せの指定*/
	font-size: 1.1rem;
	padding: 10px;
}
.flipY figcaption p.capBtn{
	display: block;
	text-align: left;
}

#idCHARACTER .flipY figcaption p.capBtn{
	text-align: center;
}

.flipY figcaption p.capBtn a{
	display: inline-block;
	background-color: #fff;
  color:#eb34d8;
	text-align: center;
	font-weight: bold;
	padding: 8px 15px;
	margin: 1px;
}
.flipY figure:hover figcaption {/*hoverした時の変化*/
  transform: rotateY(0);/*横軸に回転*/
  opacity: 1;
  transition-delay: 0.15s;/*移り変わる速さを変更したい場合はこの数値を変更*/
}

@media(max-width: 767px){
.flipY figcaption p.capBtn a{
	font-size: .8rem;
}
.flipY figcaption p.capText{
	display: none;
}
	
#idCHARACTER .figureImg{
		background-color: #000;
		height: 150px;
		display: flex;
		align-items: center;
	}
}
/*width＿＿＿＿＿＿＿＿＿＿　*/
article .width10 {
  width: 10%; }
article .width15 {
  width: 15%; }
article .width20 {
  width: 20%; }
article .width25 {
  width: 25%; }
article .width30 {
  width: 30%; }
article .width35 {
  width: 35%; }
article .width40 {
  width: 40%; }
article .width50 {
  width: 50%; }
article .width60 {
  width: 60%; }
article .width70 {
  width: 70%; }
article .width80 {
  width: 80%; }
article .width90 {
  width: 90%; }
article .width100 {
  width: 100%; }
@media(max-width: 767px){
article .width10,
	article .width15,
	article .width20,
	article .width25,
	article .width30,
	article .width35,
	article .width40,
	article .width50,
	article .width60,
	article .width70,
	article .width80,
	article .width90,
	article .width100 {
  width: auto; }
}

/*margin＿＿＿＿＿＿＿＿＿＿　*/
main .mar05 {
  margin-bottom: 5px; }
main .mar10 {
  margin-bottom: 10px; }
main .mar15 {
  margin-bottom: 15px; }
main .mar20 {
  margin-bottom: 20px; }
main .mar25 {
  margin-bottom: 25px; }
main .mar30 {
  margin-bottom: 30px; }
main .mar35 {
  margin-bottom: 35px; }
main .mar40 {
  margin-bottom: 40px; }
main .mar50 {
  margin-bottom: 50px; }
main .mar60 {
  margin-bottom: 60px; }
main .mar70 {
  margin-bottom: 70px; }
main .mar80 {
  margin-bottom: 80px; }
main .mar90 {
  margin-bottom: 90px; }