@charset "UTF-8";

html {
  margin: 0px;
  padding: 0px;
  height: 100%;
  -webkit-font-smoothing: aliased;
  font-size: 62.5%;
  /* remにて計算しやすくした。例：16px = 1.6rem = 1.6em*/
}

body {
  margin: 0px;
  padding: 0px;
  font-family: Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, YuGothicM, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#wrapper {
  display: flex;
  /* フレックスボックスに有効に */
  flex-flow: column;
  /* 要素を縦に並べる */
  min-height: 100vh;
  /* bodyの最小の高さを画面の高さに設定します。 */
  margin: 0 auto;
  padding: 0;
  clear: both;
  text-align: center;
}

#container {
  display: flex;
  /* フレックスボックスに有効に */
  flex-flow: column;
  /* 要素を縦に並べる */
  min-height: 100vh;
  /* 最小でも画面の高さ分のbodyの高さを担保する */

  padding: 0;
  margin: 0 auto;
  background-image: url('../img/backgroundimg.png'), linear-gradient(180deg, #030c19 90%, #3f7bae 100%);
  /*グラデーション背景に画像を重ねる*/
  /*background-color:#020a17;*/
  background-size: cover;
  /* 画像を画面全体に覆う*/
  background-position: top;
  /* 画像を中央に配置*/
  background-repeat: no-repeat;
  /* 画像を繰り返さない*/
  /*background-attachment: fixed;    /* スクロール時に画像を固定*/
  /*min-height: 100vh;     /* 最小高さを画面全体に*/
  background-size: 100% auto;
}


/*================================================
 *     テキスト
 ================================================*/
.h1-foryou {
  margin: 0 auto;
  padding: 0;
  font-family: "Noto Sans JP", serif;
  font-optical-sizing: auto;
  color: #FFF;
  font-style: normal;
}

h2 {
  margin: 0 0 1rem 0;
  padding: 0.6rem 0;
  letter-spacing: 0.1rem;
  text-align: center;
  color: #fff;
  line-height: 1.8;
}

.h2-guide {
  color: #90ee90;
  font-size: 1.8rem;
}

h3 {
  margin: 0 1.6rem;
  padding: 0;
  font-size: 1.4rem;
  text-align: center;
  color: #c2fd7f;
}

p {
  font-family: "Noto Sans JP", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  text-align: left;
  font-size: 1.4rem;
  line-height: 1.4;
  color: #fff;
  padding: 0 0.8rem;
}

.p-padding {
  /* pの左右の余白設定 */
  margin: 0;
  padding: 0 1.2rem;
}

section {
  margin: 0 0 1.6rem 0;
}

/*画面幅480px：最小値:0.875rem(14px) → 画面幅840px：最大値:1.125rem(20px)*/
.font-size-S {
  font-size: clamp(0.938rem, 0.521rem + 1.39vw, 1.25rem);
}

/**画面幅480px：最小値:1rem(16px) → 画面幅840px：最大値:1.375rem(22px)*/
.font-size-M {
  font-size: clamp(1rem, 0.5rem + 1.67vw, 1.375rem);
}

/*画面幅480px：最小値:1rem(16px) → 画面幅840px： 最大値:2rem(32px)*/
.font-size-L {
  font-size: clamp(1rem, -0.333rem + 4.44vw, 2rem);
  margin: 0;
  padding: 0.4em 0.8em;
  text-align: left;
}

.font-text-noto400 {
  font-family: "Noto Sans JP", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  color: #000;
}

.font-text-noto600 {
  font-family: "Noto Sans JP", serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}


/*================================================
 * ホバーをするとテキストの中央から下線が広がるリンクテキスト
 ================================================*/
.text-link {
  position: relative;
  display: inline-block;
  transition: .3s;
  text-decoration: none;
  color: #ffee00;
}

.text-link::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  content: '';
  width: 0;
  height: 2px;
  background-color: #31aae2;
  transition: .3s;
  transform: translateX(-50%);
}

.text-link:hover::after {
  width: 100%;
}

.text-link :link {
  text-decoration: none;
  /*リンクのアンダーバーを消す*/
  color: aqua;
}

.text-link:active {
  color: #26a69a;
}


/*================================================================================================
 *     ヘッダー
 ================================================================================================*/
header {
  position: relative;
  text-align: center;
  width: 100%;
}

img {
  padding: 0;
  margin: 0 auto;
}

/*================================================================================================
 *     main コンテンツ
 ================================================================================================*/
.main {
  flex: 1;
  /* 画面の高さから他の同レイヤーの要素の高さを引いた値に */
  margin: 0 auto;
  padding: 0;
  width: 92%;
}

.guide-box {
  border: 2px groove #31aae280;
  margin: 0;
  padding: 0;
}

.guide li {
  color: #c6f8ff;
  list-style-type: square;
  text-align: left;
  font-size: 1.4rem;
  line-height: 1.6;
  margin-left: -1.2rem;
  padding: 0;
}

.std-guide {
  margin: 0.8rem 0 0.8rem -3rem;
}

.std-guide li{
  text-align: left;
  list-style-type:none;
  font-size: 1.4rem;
  line-height: 1;
  padding: 0.8em;
  margin: 0;
}

/*================================================
 * 目次リスト
  ================================================*/

.index {
  /* 目次 */
  width: 40%;
  margin: 1.2rem auto;
  padding: 0.6rem;
  background-color: #102b4f95;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}

.mokuji {
  margin: 0;
  padding: 0.4rem;
  font-size: 1.4rem;
  line-height: 1.2rem;
  letter-spacing: 0.05rem;
  text-align: left;
  list-style-type: custom-counter-style;
  text-decoration: none;
  color: #ffffff;
}

.mokuji a {
  color: #FFF;
  text-decoration: none;
}

.biginner-background {
  background: #102b4f95;
}

/*================================================================================================
 *      フッター
 ================================================================================================*/
.copyright {
  width: 100%;
  line-height: 3.1rem;
  height: 3.1rem;
  color: #fff;
  font-size: 1.4rem;
  display: grid;
  place-content: center;
}

.footer p {
  margin: 0;
  padding: 0;
  line-height: 3.1rem;
  height: 3.1rem;
  color: #fff;
  font-size: 1.4rem;
  background-image: -moz-linear-gradient(left, #fff, #274d79, #fff);
  background-image: -webkit-linear-gradient(left, #fff, #274d79, #fff);
  background-image: linear-gradient(left, #fff, #274d79, #fff);

}


/*================================================
    *  画面サイズが480pxからはここを読み込む
  ================================================*/
@media screen and (max-width: 480px) {

  /* 沖縄のゲイ情報＆交流プラットフォーム */
  h1 {
    font-size: small;
  }

  h2 {
    font-size: 1.2em;
  }

}

/*================================================
  *           650px以下のレイアウト 
================================================*/
@media (max-width: 650px) {

  .index {
    /* 目次 */
    width: 85%;
  }

  .biginner-background {
    background:none;
  }
}

/*================================================
  *           700px以下のレイアウト 
================================================*/
@media (max-width: 700px) {

  img {
    width: 50%;
    padding: 0;
    margin: 0 auto;
  }

}


@media screen and (min-width: 840px) {
  /*================================================
  *           840px以上 
================================================*/

  #wrapper {
    display: flex;
    /* フレックスボックスに有効に */
    flex-flow: column;
    /* 要素を縦に並べる */
    min-height: 100vh;
    /* bodyの最小の高さを画面の高さに設定します。 */

    width: 840px;
    margin-left: auto;
    margin-right: auto;
  }

}