@charset "UTF-8";

* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

body {
  font-family: 'Arial', sans-serif;
  line-height: 1.6;
  color: #333;
  height: 100%;
  background-color: #eef8ff;

  /* 背景 方眼デザイン */
  background-image:
    linear-gradient(rgba(255,255,255,.5) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255,255,255,.5) 2px, transparent 2px),
    linear-gradient(rgba(255,255,255,.28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.28) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;

  min-width: 375px; /* ページ最小幅 iPhone基準 */ 
}

/* h2装飾 (下線) */
h2:after { 
    content: '';
    display: block;
    width: 120pt;
    height: 3pt;
    margin-top: 0pt;
    background-color: #f99f1d;
}


/* header */

/* ヘッダバナー */
header {
  width: 100%;
  position: relative;
}

/* ヘッダバナー画像 */
header img.banner {
  /*opacity: 0.5;
  display:block;
  width:100%;*/
}

/* ヘッダバナー左上タグ */
header p.tag{
  top: 6pt;
  left: 10pt;
  position: absolute;

  margin: 0pt;
  padding: 0pt;
  width: 200px;

  background-color: rgba(10,10,100,0);

  /*color: #ffffff;*/
  /*font-size: 11pt;*/
  /*font-weight: bold;*/
  /*text-align: center;*/
}

/* ヘッダバナーキャッチフレーズ */
header p.chatchphrase {
  top: 50%;
  left: 18%;
  position: absolute;
  width: 64%;

  margin: 0pt;
  padding: 0pt;

  /*border: 3pt solid #FFF100;*/
  background-color: rgba(255,250,100,0.3);
  background-image: radial-gradient(rgba(255,250,100,0.4) 13%, transparent 13%), radial-gradient(rgba(255,250,100,0.4) 13%, transparent 13%);
  background-size: 50px 50px;
  background-position: 0 0, 25px 25px;

  color: #ffffff;
  font-size: 34pt;
  /*font-weight: bold;*/
  text-shadow:
     1px  1px 0 #000,
    -1px  1px 0 #000,
    -1px -1px 0 #000,
     1px -1px 0 #000,
     3px  3px 0 rgba(0,0,0,0.3);
  text-align: center;
}

header p.chatchphrase:before {
  position: absolute;
  top: -7pt;
  left: -7pt;
  width: 100%;
  height: 100%;
  content: '';
  border: dashed 2pt rgba(240,230,100,1);
}

/* ヘッダバナーテキスト */
header p.text {
  top: 65%;
  left: 18%;
  position: absolute;

  margin: 0pt;
  padding: 10pt;

  background-color: rgba(10,10,100,0.1);

  color: #ffffff;
  font-size: 12pt;
  /*font-weight: bold;*/
  /*text-align: center;*/
}

/* ヘッダバナー右下タグ */ 
header p.lowertag {
  background-color: #fff;
  right: 12pt;
  bottom: 36pt;
  padding: 2pt;
  position: absolute;
  background-color: rgba(255,255,255,0.3);
}

/* メニュー */
menu {
  /*position: absolute;*/
  position: relative;
  /*top: 95%;*/
  top: -35pt;
  left: 10pt;
  width: 100%;
  background-color: rgba(10,10,100,0);
}

/* ナビゲーション */
nav {
  /*top: 95%;*/
  left: 14pt;
  position: absolute;

  background-color: rgba(10,10,100,0.1);
  text-align: center;

  /*display: none;*/ /* 非表示(メディアクエリーで表示する) */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

nav ul {
  list-style: none;
  padding: 4pt;
  text-align: center;
}

nav ul li {
  display: inline-block;
  margin: 0pt 8pt;
}

nav ul li a {
  text-decoration: none;
  font-size: 12pt;
  font-weight: bold;
  color: #333;
}

nav ul li a:hover {
  text-decoration: underline;
}

/* ハンバーガーメニュー */
#hbgChk {
  display: none; /* 常時非表示にする(labelをクリックするため) */
}

#hbgChk:checked ~ nav {
  /*display: block;*/

  opacity: 1;
  visibility: visible;
}

.hbgmenu {
  cursor: pointer;
  position: absolute;
  top: 0pt;
  right: 22pt;
  z-index: 100;
  width: 28pt;
  height: 28pt;
  border: 1pt solid #CCC;
  border-radius: 3pt;

  /*display: block;*/
  opacity: 1;
  visibility: visible;
}

.hbgmenu::before,
.hbgmenu::after {
  content: "";
}

.hbgmenu span,
.hbgmenu::before,
.hbgmenu::after {
  content: "";
  position: absolute;

  top: 50%;
  left: 25%;
  width: 50%;

  border-bottom: 2pt solid #333;
  transition: transform .5s;
}

.hbgmenu::before {
  transform: translateY(-6pt);
}

.hbgmenu::after {
  transform: translateY(6pt);
}

#hbgChk:checked + .hbgmenu span {
  transform: scaleX(0);
}

#hbgChk:checked + .hbgmenu::before {
  transform: rotate(45deg);
}

#hbgChk:checked + .hbgmenu::after {
  transform: rotate(-45deg);
}

/* メインロゴ */

div.mainlogo {
  display: block;
  /*justify-content: center;*/
}

p.mainlogo {
  display: block;
  text-align: center;
}

p.mainlogo img {
  width: 284px;
  height: 92px;
}

p.maincopy {
  display: block;
  justify-content: center;

  margin: 0pt 1%;
  padding: 10pt 0pt;
  width: 98%;

  background-color: rgba(80,220,240,0.25);
  background-image: radial-gradient(rgba(100,250,255, 0.55) 13%, transparent 13%), radial-gradient(rgba(100,250,255,0.55) 13%, transparent 13%);
  background-size: 50px 50px;
  background-position: 0 0, 25px 25px;
  text-shadow:
     1px  1px 0 #000,
    -1px  1px 0 #000,
    -1px -1px 0 #000,
     1px -1px 0 #000,
     2px  2px 0 rgba(0,0,0,0.3);

  color: #ffffff;
  font-size: 13pt;
  /*font-weight: bold;*/
  text-align: center;

  border: 2pt solid #1099dd;
  border-radius: 4pt;
}

/* main contents */
main {
  padding: 1rem;
  max-width: 1200px;
  margin: 0 auto;
  flex-grow: 1;
  display: grid;
  grid-template-columns: 1fr;
}

section {
  padding: 20px;
  background: rgba(220,240,255,0.4);
  width: 100%;
}

.container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}


/* footer */
footer {
  background: #333;
  color: #fff;
  text-align: center;
  padding: 1rem;
  width: 100%;
}


/* メディアクエリー(スマホ用) */
@media all and (max-width: 600px) {

  /* ヘッダバナー左上タグ */
  header p.tag {
    width: 70px;
  }

  /* ヘッダバナーキャッチフレーズ */
  header p.chatchphrase {
    font-size: 14pt;
    text-shadow:
       1pt  1pt 0 #000,
      -1pt  1pt 0 #000,
      -1pt -1pt 0 #000,
       1pt -1pt 0 #000;
  }
 
  header p.chatchphrase:before {
    top: -3pt;
    left: -3pt;
    border: dashed 1pt rgba(240,230,100,1);
  }

  /* ヘッダバナーテキスト */
  header p.text {
    top: 62%;
    left: 0%;
    width: 100%;
    position: absolute;
    padding: 5pt;
    font-size: 8pt;
  }

  /* メニュー */
  menu {
    top: -20pt;
    left: 4pt;
  }

  /* ハンバーガーメニュー */
  .hbgmenu {
    width: 18pt;
    height: 18pt;
    right: 12pt;
  }

  .hbgmenu::before {
    transform: translateY(-3pt);
  }

  .hbgmenu::after {
    transform: translateY(3pt);
  }

  /* ナビゲーション */
  nav ul {
    padding: 0pt;
  }

  nav ul li a {
    font-size: 8pt;
  }

}

/* メディアクエリー(タブレット用) */
@media all and (min-width: 600px) {

  .container {
    grid-template-columns: 1fr 1fr;
  }

  /* ヘッダバナー左上タグ */
  header p.tag{
    width: 100px;
  }

  /* ヘッダバナーキャッチフレーズ */
  header p.chatchphrase {
    font-size: 22pt;
  }

  header p.chatchphrase:before {
    top: -5pt;
    left: -5pt;
  }

  /* ヘッダバナーテキスト */
  header p.text {
    top: 64%;
    left: 6%;
    position: absolute;

    margin: 0pt;
    padding: 10pt;

    background-color: rgba(10,10,100,0.1);

    color: #ffffff;
    font-size: 10pt;
    /*font-weight: bold;*/
    /*text-align: center;*/
  }

}

/* メディアクエリー(コンピュータ用) */
@media all and (min-width: 1025px) {

  header h1 {
    font-size: 3rem;
  }

  /* ヘッダバナー左上タグ */
  header p.tag{
    width: 200px;
  }

  /* ヘッダバナーキャッチフレーズ */
  header p.chatchphrase {
    font-size: 34pt;
  }

  header p.chatchphrase:before {
    top: -7pt;
    left: -7pt;
  }

  /* ヘッダバナーテキスト */
  header p.text {
    top: 65%;
    left: 18%;
    position: absolute;

    margin: 0pt;
    padding: 10pt;

    background-color: rgba(10,10,100,0.1);

    color: #ffffff;
    font-size: 12pt;
    /*font-weight: bold;*/
    /*text-align: center;*/
  }

  /* ナビゲーション(表示) */
  nav {
    /*display: block;*/

    opacity: 1;
    visibility: visible;
  }

  /* ハンバーガーメニュー(非表示) */
  #hbgChk,
  .hbgmenu {
    /*display: none;*/

    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
  }

  main {
    grid-template-columns: 1fr 1fr;
  }

  .sec01 {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: 2;
  }

  .sec02 {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 2;
    grid-column-end: 3;
  }

  .sec03 {
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 1;
    grid-column-end: 3;
  }

  .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

}