@charset "UTF-8";

/*

#3E3A39 文字用グレー
#F5F5F5 うすいグレー
*/


/*
SP
--------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------*/
/* 改行設定 */
@media only screen and (max-width: 670px) {

  .onlyPC{
    display: none;
  }
  
  .onlySP{
    display: block;
  }


/*-------------------------------------------*/
/* 基本 */


html{
  scroll-behavior: smooth;
}

body {
  background: linear-gradient(135deg, #87c9b7, #fffce7, #f8b8ae, #fffce7, #a4a7cb,#fffce7, #aecbd0);
  background: -webkit-linear-gradient(-45deg, #87c9b7, #fffce7, #f8b8ae, #fffce7, #a4a7cb,#fffce7, #aecbd0);
  background: -moz-linear-gradient(-45deg, #87c9b7, #fffce7, #f8b8ae, #fffce7, #a4a7cb,#fffce7, #aecbd0);
  width: 100vh;
  height: 100vh;
  background-size: 700% 700%;
  animation-name: gradation;
  animation-duration: 13s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
  overflow:hidden;

  color:#3E3A39;
  font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
  font-weight:300;
  font-feature-settings: "palt";
  letter-spacing: 0.05em;

  /*スクロールバー非表示（IE・Edge）*/
  -ms-overflow-style: none;
  /*スクロールバー非表示（Firefox）*/
  scrollbar-width: none;
}
  /*スクロールバー非表示（Chrome・Safari）*/
  body::-webkit-scrollbar{
    display:none;
  }


@keyframes gradation{
  0%{
      background-position: 0% 0%;
  }
  100%{
      background-position: 100% 100%;
  }
}

.Gothic{
  font-family:"YakuHanJPs", "neue-kabel" , "yu-gothic-pr6n", "San Francisco", meiryo, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  font-feature-settings: "palt";
}

.Mincho{
  font-family:"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  font-feature-settings: "palt";
}


/*-------------------------------------------*/
/* 全体 */

.top {
  display: block;
  position: fixed;
  top:13px;
  bottom:13px;
  left:13px;
  right:13px;
  opacity: 1;
  background-color: #fff;
  margin: auto 0;
}

.top_wp {
  position: absolute;
  top: 50%;
  left:50%;
  width: 90%;
  transform: translateY(-50%) translateX(-50%);
}


/* タイトル */
h2{
  display: block;
  width: 200px;
  margin: auto;
  margin-bottom: 20px;
}

/* 各見出し */
h3{
  margin: 20px auto 5px;
}

.explanation{
  font-size: 12px;
  letter-spacing: 0.15em;
  color: #9b9b9b;
}


/* リンクツリー全体 */

.LiB_wp{
  display: block;
  width: 100%;
  margin: auto;
}

/* 各コンテンツ格納 */

.link_wp{
  width: 100%;
  display: block;
  text-align: center;
}

ul.link_container{
  display: flex;
  justify-content: space-between;
  margin: 10px auto 0px;

}

/* 各 見出しロゴ幅 */
h3.hp img{
  width:140px
}

h3.insta img{
  width:90px
}

h3.youtube img{
  width:70px
}

/* ボタン */
    .link_container a{
      background-color:#f9f9f9;
      border-radius:15px;
      box-shadow:1px 1px 3px #c2c2c2;
      padding: 8px 4px;
      display:block;
      text-align:center;
    }

    .link_container a:hover{
      box-shadow:inset 2px 2px 4px #c7c7c7;
    }
    
/* / ボタン */


/* 各 列幅 */
li.hp{
  width: 30%;
}

li.insta{
  width: 30%; /* 2列は47% */
}

li.youtube{
  width: 65%;
  margin: 0 auto;
}


/* ロゴサイズ */
.link_container img{
  height: 50px;
}

/* 大会名 */
.name{
  font-size: 9px;
  margin-top: 5px;
  line-height: 1.3em;
}

/* @インスタアカウント文字 */
.acount{
  font-size: 7px;
  letter-spacing: 0em;
  margin-top: 5px;
  color: #a5a5a5;
}


/* OFFICIAL SNS　文字*/
h4{
  display: flex;
  font-size: 13px;
  justify-content: center;
  margin-top: 10px;
  letter-spacing: 0.3em;
  font-family: 'Avenir Next Condensed', Futura, 'Century Gothic', sans-serif;
  font-style: italic;
  font-weight: 600;
  color: #a5a5a5;
}


/* 罫線 */
.cp_hr11 {
  margin: 0 auto;
	height: 3.5px;
	border-width: 0;
	background-color: #fff;
	background-image: -webkit-linear-gradient(135deg,
  #3E3A39 0px,#3E3A39 0.85px, transparent 0.85px,transparent 2px,
	#3E3A39 1.5px, #3E3A39 3px, transparent 3px, transparent);
	background-image:         linear-gradient(-45deg,
	#3E3A39 0px,#3E3A39 0.85px, transparent 0.85px, transparent 2px,
	#3E3A39 1.5px, #3E3A39 3px, transparent 3px, transparent);
	background-size: 3px 3px;
  margin-top: 20px;
}
}

/*
PC
--------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------*/

/* --------- PC TAB--------- */
@media only screen and (min-width: 670px){


/* 改行設定 */
.onlyPC{
  display: block;
}

.onlySP{
  display: none;
}


/*-------------------------------------------*/
/* 基本 */


html{
  scroll-behavior: smooth;
}

body {
  background: linear-gradient(135deg, #87c9b7, #fffce7, #f8b8ae, #fffce7, #a4a7cb,#fffce7, #aecbd0);
  background: -webkit-linear-gradient(-45deg, #87c9b7, #fffce7, #f8b8ae, #fffce7, #a4a7cb,#fffce7, #aecbd0);
  background: -moz-linear-gradient(-45deg, #87c9b7, #fffce7, #f8b8ae, #fffce7, #a4a7cb,#fffce7, #aecbd0);

  background-size: 700% 700%;
  animation-name: gradation;
  animation-duration: 13s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
  overflow:hidden;
  color:#3E3A39;
  font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
  font-weight:300;
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
  margin:0 auto;
  width: 100vw;
  height: 100vh;
}

@keyframes gradation{
  0%{
      background-position: 0% 0%;
  }
  100%{
      background-position: 100% 100%;
  }
}

.Gothic{
  font-family:"YakuHanJPs", "neue-kabel" , "yu-gothic-pr6n", "San Francisco", meiryo, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  font-feature-settings: "palt";
}

.Mincho{
  font-family:"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  font-feature-settings: "palt";
}


/*-------------------------------------------*/
/* 全体 */

.top {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}


.top_wp {
  display: block;
  width:750px;
  background-color: #fff;
  padding: 50px;
}

/* タイトル */
h2{
  display: block;
  width: 230px;
  margin: auto;
  margin-bottom:40px;
  margin-top: 0px;
}

/* 各見出し */
h3{
  margin: 30px auto 10px;
}

.explanation{
  font-size: 13px;
  letter-spacing: 0.15em;
  color: #9b9b9b;
}


/* リンクツリー全体 */

.LiB_wp{
  display: block;
  width: 100%;
  margin: auto;
}

/* 各コンテンツ格納 */

.link_wp{
  width: 100%;
  display: block;
  text-align: center;
}

ul.link_container{
  display: flex;
  justify-content: space-between;
  margin: 15px auto 0px;

}

/* 各 見出しロゴ幅 */
h3.hp img{
  width:180px
}

h3.insta img{
  width:110px
}

h3.youtube img{
  width:85px
}

/* ボタン */
    .link_container a{
      background-color:#f9f9f9;
      border-radius:15px;
      box-shadow:1px 1px 3px #c2c2c2;
      padding: 8px 6px;
      display:block;
      text-align:center;

    }

    .link_container a:hover{
      box-shadow:inset 2px 2px 4px #c7c7c7;

    }

    
/* / ボタン */


/* 各 列幅 */
li.hp{
  width: 31%;
}

li.insta{
  width: 31%; /* 2列は48% */
}

li.youtube{
  width: 60%;
  margin: 0 auto;
}


/* ロゴサイズ */
.link_container img{
  height: 60px;
}

/* 大会名 */
.name{
  font-size: 12px;
  margin-top: 5px;
  line-height: 1.2em;
}

/* @インスタアカウント文字 */
.acount{
  font-size: 12px;
  margin-top: 2px;
  color: #a5a5a5;
}


/* OFFICIAL SNS　文字*/
h4{
  display: flex;
  font-size: 13px;
  justify-content: center;
  margin-top: 20px;
  letter-spacing: 0.3em;
  font-family: 'Avenir Next Condensed', Futura, 'Century Gothic', sans-serif;
  font-style: italic;
  font-weight: 600;
  color: #a5a5a5;
  margin-bottom: -10px;
}


/* 罫線 */
.cp_hr11 {
  margin: 0 auto;
	height: 3.5px;
	border-width: 0;
	background-color: #fff;
	background-image: -webkit-linear-gradient(135deg,
  #3E3A39 0px,#3E3A39 0.85px, transparent 0.85px,transparent 2px,
	#3E3A39 1.5px, #3E3A39 3px, transparent 3px, transparent);
	background-image:         linear-gradient(-45deg,
	#3E3A39 0px,#3E3A39 0.85px, transparent 0.85px, transparent 2px,
	#3E3A39 1.5px, #3E3A39 3px, transparent 3px, transparent);
	background-size: 3px 3px;
  margin-top: 20px;
}
}