@charset "utf-8";
/* すべてのWebページに適応される　*/
@import url('https://fonts.googleapis.com/css?family=Cinzel');
@import url('https://fonts.googleapis.com/css2?family=Kaisei+Decol&family=Kiwi+Maru:wght@500&display=swap');
body{
    margin: 0;
    padding: 0;
    background-color:#5B0045;
        background-image: url('../images/parts-deco-pattern.png'); /* 絶対パスで確認 */
    background-size: 128px 145px;
    background-repeat: repeat;
    background-size: 100px;
}

* {
    margin: 0;
    padding: 0;
}
*, *:before, *:after {
    box-sizing: border-box;
}
* {
  box-sizing: border-box;
}

html, body {
    height: 100%;
}
body {
    
    

    -webkit-text-size-adjust: 100%;
}

a {font-family:'Kiwi Maru','Lato', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
    
    color: #D7D1D3;/* リンクの色*/
    font-weight: bold;
}

@media screen and (max-width: 767px) {
  br {
    display: none;
  }
}







/*indexの画像*/


.index-img{
  display: flex;
  flex-wrap: wrap;






}

.index-img ul {

align-items: center; /* 垂直中心 */
  justify-content: center; /* 水平中心 */
  width: fit-content;
    margin: auto;
margin-top: -30px;
}

.index-img li {
  list-style: none;/*追加*/

position: relative;

}




    .index-img li img{

    object-fit: cover;/*アスペクト比維持のための記述*/
  object-position: center;
   width: 100%; /* bodyの幅に対する割合。100%から変更 */

}





.index-img h4{
  position: absolute;
    display: flex;
  align-items: center; /* 垂直中心 */
  justify-content: center; /* 水平中心 */
   top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
  color: white;
  font-family: 'Kaisei Decol', cursive;
  font-size: 30px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
}




@media(max-width:750px){
    .index-p {
    font-size: 18px;

    font-family:'Kiwi Maru','Lato', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
    color:  #D7D1D3;
    margin-bottom: 1em;
    line-height: 1.0;
    margin-top: 10px;
    text-align: center;
}

}
@media(min-width:751px){
    .index-p {
    font-size: 22px;

    font-family:'Kiwi Maru','Lato', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
    color:  #D7D1D3;
    margin-bottom: 9px;
    line-height: 1.0;
    margin-top: 0px;
    text-align: center;
}

}


/*indexのサイド画像*/
.index-sideimg{
  display: flex;
  flex-wrap: wrap;
}

.index-sideimg img{
margin: auto;
    object-fit: cover;/*アスペクト比維持のための記述*/
  object-position: center;
  max-width: 200px;
   width: 100%; /* bodyの幅に対する割合*/
}




@media ( min-width : 751px ){
  .index-sideimg {
    display: none !important;
  }

}



/* index背景用*/

#main-index {
    background: #D7D1D3;

  background-image: url('../images/wallpaper-space.gif'); /* 絶対パスで確認 */
    image-rendering: pixelated;


}







.displacement {
      width: 500px;/*追加*/
      height: 300px;/*追加*/
      /*中央揃え
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      */
}

@media(max-width:750px){
    .displacement {
      width: 300px;/*追加*/
      height: 100px;/*追加*/
}


.displacement-center {

      width: 800px;/*追加*/
      height: 500px;/*追加*/
     
}





.index-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 3fr 1fr;
}
.grid1 {
  order: 2;
  position: relative;

}



.grid2 {
  position: relative;
    order: 3;
}


.grid13 {
  position: relative;
  order: 1;
}



.grid1,
  .grid2,
  .grid3 {
  padding: 2%;

  
}



@media ( max-width : 400px ){
  .index-grid {
    grid-template-columns: 1fr;
  }



  .grid2,
  .grid3 {
    display: none !important;
  }

}