@charset "UTF-8";

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

body {
  margin: 0px;
  padding: 0px;
  height: 100%;
  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 {
  position: static;
  margin: 0 auto;
  padding: 0;
  color: #fff;
  background-color: #052d6140;
  font-size: 1.7rem;
}

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

.h2 {
  margin: 0 auto;
  padding: 0.6rem;
  text-align: center;
  display: inline-block;
  font-size: 2rem;
  line-height: 2rem;
}

.index-h2 {
  margin: 1rem auto 0 auto;
  padding: 0.6rem;
  text-align: center;
  display: inline-block;
  color: #ff8800;
  background-color: #052d6185;
  font-size: 2rem;
  line-height: 2rem;
}

.studylink-color {
  margin: 0;
  padding: 0;
  text-align: center;
  color: #64ffea;
  background: none;
}

h3 {
  margin: 0;
  padding: 1rem 0;
  font-size: 1.4rem;
  text-align: left;
  color: #e5ff00;
}

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


/*画面幅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 auto;
  padding: 0;
  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;
}

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

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

.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;
  padding: 0;
}

.management {
  /*注意文とリンクボタンまでの範囲設定*/
  margin: 0 0 2rem 0;
  padding: 0 0;
}

/*================================================
 *      ヘッダー下～リンクボタンまで
 ================================================*/
.introduction {
  margin: 0 auto;
  width: 80%;
}

/*================================================
 *      トップの注意書き
 ================================================*/
.note {
  margin: 0.8rem auto;
  padding: 0.2rem 0;
  text-align: left;
  line-height: 1.4;
  color: #a4fff3;
  background-color: #052d6140;
  list-style: none;
}

.note a:link {
  color: #ffee00;
}

.note a:visited {
  color: #ffee00;
}

.note a:hover {
  color: #eaffa0;
}

.note a:active {
  color: #00ffc8;
}

/*================================================
 *   NAV ナビのリンクボタンを並べる
 ================================================*/
.toplink-btn {
  /*  */
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;

  @media (max-width: 768px) {
    justify-content: center;
    flex-direction: column;
  }
}

.bbs-toplink-btn-right {
  /*ゲイ交流掲示板 Gay Online Forumの2行折り返し*/
  display: grid;
  place-content: center;
  margin: 0.2rem;
  padding: 1.1rem 1rem 1.5rem 1rem;
  font-size: 1.7rem;
  letter-spacing: 0.25em;
  line-height: 1;
  /* height と同じ値にすると上下中央になります。 */
  text-align: center;
  width: 250px;
  height: 1.7rem;
  color: #fff;
  background-color: #00213d;
  cursor: pointer;
  text-decoration: none;
  /* リンクの下線を表示しない。 */
}

.toplink-btn-right {
  margin: 0.2rem;
  /* ボタン間の余白 */
  padding: 1.0rem;
  /* ボタン間の余白 */
  font-size: 1.6rem;
  letter-spacing: 0.4em;
  text-align: center;
  line-height: 1.0rem;
  /* height と同じ値にすると上下中央になります。 */
  height: 1.0rem;
  width: 250px;
  color: #fff;
  background-color: #00213d;
  cursor: pointer;
  text-decoration: none;
  /* リンクの下線を表示しない。 */
}

.toplink-btn-right:hover {
  background-color: #33649c
}

.toplink-btn-left {
  display: grid;
  place-content: center;
  margin: 0.2rem;
  padding: 1.0rem;
  font-size: 1.6rem;
  letter-spacing: 0.4em;
  line-height: 1.0rem;
  /* height と同じ値にすると上下中央になります。 */
  height: 1.0rem;
  text-align: center;
  width: 250px;
  color: #fff;
  background-color: #002d55;
  cursor: pointer;
  text-decoration: none;
  /* リンクの下線を表示しない。 */
}

.toplink-btn-left:hover {
  background-color: #33649c
}

.bbs-toplink-btn-left:hover {
  background-color: #33649c
}

.shadow {
  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.5);
}


/*================================================
 * バナー広告：バナーボタンの並び
  ================================================*/
/* バナー広告のボックスを並べる */
.banner-box {
  margin-bottom: 1.2rem;
  display: flex;
  justify-content: center;
  align-items: center;

  @media (max-width: 768px) {
    justify-content: center;
    flex-direction: column;
  }
}

.banner-box-left img {
  width: 270px;
  height: 90px;
}

.banner-box-right img {
  width: 270px;
  height: 90px;
}

.banner-box-right {
  margin: 1rem;
  padding: 0;
  line-height: 0;
  cursor: pointer;
}

.banner-box-right:hover {
  background-color: #696969
}

.banner-box-left {
  margin: 1rem;
  padding: 0;
  line-height: 0;
  cursor: pointer;
}

.banner-box-left:hover {
  background-color: #696969
}


/*================================================
 * 傷つかない傷つけないために
  ================================================*/
.no-hurt {
  width: 80%;
  margin: 0 auto;
  padding: 0.8rem;
  /*font-size: 1.5rem;*/
  line-height: inherit;
  letter-spacing: 0.05em;
  background-color: #052d6190;
  color: #a4fff3;
}


/*================================================
 * 学習と注意事項のボックス群
  ================================================*/

.study-flex {
  width: 80%;
  margin: 0 auto;
  display: flex;
}

.studylink {
  display: flex;
  /* 直下の要素を並列に */
  flex-direction: column;
  /* 直下の要素を縦積みに */
  width: 50%;
  margin: 0.4rem;
  padding: 1.2rem;
  /*background-color: #cbe3ff;*/
  cursor: pointer;
  text-decoration: none;
  border: solid 2px #38a2b4;
  /* リンクの下線を表示しない。 */
}

.studylink-content {
  flex: 1 1 auto;
  /* 比率を指定 */
  display: flex;
  /* 直下の要素を並列に */
  flex-direction: column;
  /* 直下の要素を縦積みに */
}

.studylink-text {
  margin: 0.6rem 0;
  padding: 0.6rem 0;
  text-align: left;
  flex-grow: 1;
  /* 比率を指定 */
  font-size: 1.4rem;
  line-height: 1.4;
  letter-spacing: 0.1em;
  /* ボタン間の余白 */
  color: #FFF;
}

.btn {
  border-radius: 20px;
  padding: 1rem;
  font-size: 0.8rem;
  width: 100px;
  margin: 0 auto;
  background-color: #023d58;
}

.studylink a {
  font-size: 1.4rem;
  letter-spacing: 0.1rem;
  color: #FFF;
  text-decoration: none;
}

.studylink-btn:hover {
  background-color: #33649c
}


/*================================================
 *      お知らせボックス
 ================================================*/
.info-box {
  background-color: #70d101;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 80%;
  height: 8rem;
  margin: 1rem auto 0 auto;
  overflow-y: scroll;
}

.info-box dd,
.info-box dt {
  box-sizing: border-box;
  width: 100%;
  padding-bottom: 0.5rem;
  padding-left: 0.5rem;

}

.info-box dt {
  display: flex;
  font-style: normal;
  font-weight: initial;
  text-align: left;
}

.info-box dt:first-of-type {
  padding-top: 0.5rem;
  border-top: 1px dotted #49ffc8;
}

.info-box dt time {
  margin-right: 0.5rem;
}

.info-box dt span {
  box-sizing: border-box;
  display: inline-block;
  width: 7rem;
  margin-right: 0.5rem;
  padding: 0 0.5rem;
  background-color: #009688;
  color: #fff;
  font-size: 1.2rem;
  line-height: 1.75;
  text-align: center
}

.info-box time {
  color: #454546
}

.info-box dd {
  margin-left: 0;
  margin-bottom: 0.5rem;
  border-bottom: 1px dotted #343a40;
  text-align: left;
}

.info-box dd:nth-of-type(-n+3) {
  position: relative
}

/*================================================
 * 利用規約
  ================================================*/

/* 規約とフッターのグラデーション背景 */
.gradation {
  background-image: -webkit-linear-gradient(left, #00c3ff, #052d61, #00c3ff);
  background-image: -moz-linear-gradient(left, #00c3ff, #052d61, #00c3ff);
  background-image: -ms-linear-gradient(left, #00c3ff, #052d61, #00c3ff);
  background-image: -o-linear-gradient(left, #00c3ff, #052d61, #00c3ff);
}

/* 規約の上のボーダー */
hr.style1 {
  border: 0;
  height: 2px;
  background-image: -webkit-linear-gradient(left, #fff, #0392b6, #fff);
  background-image: -moz-linear-gradient(left, #fff, #0392b6, #fff);
  background-image: -ms-linear-gradient(left, #fff, #0392b6, #fff);
  background-image: -o-linear-gradient(left, #fff, #0392b6, #fff);
  margin: 0;
}

.kiyaku-90 {
  width: 90%;
  margin: 0 auto;
}

.kiyaku {
  margin: 0 auto;
  padding: 1.8rem 0;
  line-height: 160%;
  text-align: left;
  color: #fff;
}

/* 利用規約の番号付箇条書きタグ ol につけたクラス名*/
.rules-kiyaku {
  margin: 0;
  padding-left: 4rem;
  text-align: left;
  color: #fff;
}

.sub-list {
  padding-left: 1.6rem;
}

.sub-list li {
  margin: 0;
  padding-left: 0.4rem;
  text-align: left;
}

.rules {
  margin: 0;
  padding-left: 4rem;
  color: #fff;
}

/* olの直下リスト: ol li */
.rules li {
  padding-left: 0.8rem;
  line-height: 160%;
}

/* 利用規約の最下層のリスト ol li ol*/
.rules li ol {
  padding-left: 1.2rem;
}

/* 利用規約の最下層のリスト ol li ol li*/
.rules li ol li {
  padding-left: 0.8rem;
}

/* 利用規約の番号付箇条書きと同じ階層のP*/
.rules-p {
  margin: 0 auto;
  padding-left: 2rem;
  padding-bottom: 2rem;
  text-align: left;
  line-height: 160%;
  color: #fff;
}

.rules-p a {
  color: darkorange;
}


/*================================================
 * コンテンツの最後尾  X のリンク画像
  ================================================*/
.grid-container-two {
  display: flex;
  justify-content: center; /*上下の中央揃え */
}

.grid-icon {
  width: 15%; /* 画像が２つ並ぶように設定 */
  text-align: center;
}

.grid-icon img {
  width: 40%;
    height: auto;
    display: block;
    padding: 1rem 0;
}

/*================================================================================================
 *      フッター
 ================================================================================================*/
.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;
  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 {
    font-family: "Noto Sans JP", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-size: 1.2rem;
  }

  .bbs-toplink-btn-right {
    /*ゲイ交流掲示板 Gay Online Forumの2行折り返し*/
    display: grid;
    place-content: center;
    margin: 0.2rem 0;
    padding: 1.1rem 0 1.5rem 0;
    font-size: 1.7rem;
    letter-spacing: 0.25em;
    line-height: 2.1rem; /* height と同じ値にすると上下中央になります。 */
    height: 2.1rem; /* リンクの下線を表示しない。 */
  }

  .toplink-btn-right {
    margin: 0.2rem 0;
    padding: 1rem 0;
    font-size: 1.4rem;
    letter-spacing: 0.3em;
    line-height: 0.8;
    height: 1.2rem;
  }

  .toplink-btn-left {
    margin: 0.2rem 0;
    padding: 1rem 0;
    font-size: 1.4rem;
    letter-spacing: 0.3em;
    line-height: 1.2;
    height: 1.2rem;
  }

  /* お知らせボックス */
  .info-box {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    width: 90%;
    margin: 1rem auto 1rem auto;
    flex-wrap: wrap;
  }

  .info-box dt {
    width: 12.5rem;
    margin-bottom: 0;
    width: 45%;
    flex-wrap: wrap;
  }

  .info-box dd {
    width: 100%;
    margin: 0;
    padding-left: 0.6rem;
    padding-right: 0.6rem;

    border-bottom: 1px dotted #343a40;
  }

  .info-box dd ul {
    margin: 0;
    padding-left: 1.8rem;
  }

  .info-box dd ul li {
    padding: 0rem;
  }

  .info-box dt span {
    width: 6rem;
    margin-right: 0;
  }

  .info-box dd:first-of-type {
    padding-top: 0.2rem;
  }

  .info-box dt time {
    margin-left: 0.5rem;
  }

  /*リンクボタン*/


  .rules-kiyaku {
    margin: 0;
    padding-left: 0.8rem;
  }

  /* 利用規約の番号付箇条書きタグ ol につけたクラス名*/
  .rules {
    margin: 0;
    padding-left: 0.6rem;
  }

  /* olの直下リスト: ol li */
  .rules li {
    padding-left: 0.4rem;
  }

  /* 利用規約の最下層のリスト ol li ol*/
  .rules li ol {
    padding-left: 0.6rem;
  }

  /* 利用規約の最下層のリスト ol li ol li*/
  .rules li ol li {
    padding-left: 0.6rem;
  }

  /* 利用規約の番号付箇条書きと同じ階層のP*/
  .rules-p {
    margin: 0 auto;
    padding-left: 1.8rem;
    padding-right: 1.8rem;
    padding-bottom: 2rem;
  }

  .rules-p a {
    color: darkorange;
  }

  .grid-icon img {
    width: 70%;
  }
}


/*================================================
  *           700px以下のレイアウト 
================================================*/
@media (max-width: 700px) {
  .study-flex {
    width: 100%;
    flex-direction: column;
  }

  h2 {
    font-size: 1.6rem;
    line-height: 1.6rem;
  }

  .index-h2 {
    margin: 0 auto;
    padding: 0.6rem;
    text-align: center;
    color: #ff8800;
    background: none;
    font-size: 1.6rem;
    line-height: 1.6rem;
  }

  .no-hurt {
    /*4つの項目の上にある管理者からのメッセージ*/
    margin: 0 auto;
    padding: 0 0 0.6rem;
    line-height: inherit;
    letter-spacing: 0.05em;
    background: none;
  }

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

  .info-box {
    width: 80%;
    margin: 1rem auto 1rem auto;
  }

  .studylink {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 80%;
    margin: 0.6rem auto;
    padding: 1rem 0;
    border: solid 1px #38a2b4;
    border-radius: 15px;
  }

  .studylink-text {
    margin: 1rem;
    padding: 0;
    text-align: left;
    flex-grow: 1;
    /* 比率を指定 */
    font-size: 1.4rem;
    line-height: 1.4;
    letter-spacing: 0.1em;
    /* ボタン間の余白 */
  }

  .introduction {
    /* 龍の舞台は沖縄を拠点にゲイの… */
    margin: 0 auto;
    width: 90%;
  }

}

@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;
  }

}