/******************************************************************************
START Glitch hello-app default styles

The styles in this section do some minimal CSS resets, set default fonts and 
colors, and handle the layout for our footer and "Remix on Glitch" button. If
you're new to CSS they may seem a little complicated, but you can scroll down
to this section's matching END comment to see page-specific styles.
******************************************************************************/


/* 
  The style rules specify elements by type and by attributes such as class and ID
  Each section indicates an element or elements, then lists the style properties to apply
  See if you can cross-reference the rules in this file with the elements in index.html
*/

/* Our default values set as CSS variables */
:root {
  --color-bg: #F0F0F0;
  --color-text-main: #000000;
  --color-primary: #000080;
  --wrapper-height: 87vh;
  --image-max-width: 300px;
  --image-margin: 3rem;
}

/* Basic page style resets */
* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}

body {
    font-family: "Helvetica Neue",
    "Segoe UI",
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "BIZ UDPGothic",
    Meiryo,
    sans-serif;
  background-color: var(--color-bg);
}

/* ヘッダの切り替え */
/* 画面がスマホサイズの時、PC版ヘッダーを消す */
.header-pc {
  display: none;
}

/* 画面がスマホサイズの時、スマホ版ヘッダーを表示 */
.header-smartphone {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 10px 10px;
  background-color: var(--color-primary);
}

/* メディアクエリ */
@media screen and (min-width: 768px) {

 /* 画面がPCサイズの時、PC版ヘッダーを表示 */
 .header-pc {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 10px 10px;
    background-color: var(--color-primary);
 }

 /* 画面がPCサイズの時、スマホ版ヘッダーを消す */
 .header-smartphone {
  display: none;
 }
}

/* ヘッダの支配 */
.header {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 1rem;
    background-color: var(--color-primary);
    position: relative;
}

/* 言語切り替え用 */
/* PC用：メニューの下、右寄せ */
.language-switch-pc {
  width: 100%;
  text-align: left;
  padding-left: 3rem;
  margin: 0.5rem 1rem 0 0;
}

/* スマホ用：Nishimura YukiとMenuの間に配置 */
.language-switch-sp {
  width: 100%;
  text-align: center;
  margin: 0.5rem 0;
  font-size: 0.9em;
}

.language-switch-pc a {
  color: #ffffff;
  text-decoration: underline;
}

.language-switch-sp a {
  color: #ffffff;
  text-decoration: underline;
}


.navigation {
  width: 100%;
  height: 3rem;
  background-color: var(--color-primary);
  padding-top: 0.5rem;
  box-sizing: border-box;
}

.navigation ul {
  display: flex;
  list-style: none;
}

.navigation li {
  margin-right: 45px;
}

.navigation a {
  color: #ffffff;
  text-decoration: none;
}

.header-title {
  color: #ffffff;
  align-items: center;
  font-size: 2rem;
}

.header-title a{
  color: #ffffff;
  text-decoration: none;
}


/*スマホ版ヘッダ
参考：https://deve-cat.com/dsp-element/ */


.dropdown {
  list-style: none;
}

.dropdown li{
  margin: 1rem;
  padding-left: 0px;
}

.dropdown a{
  color: #ffffff;
  text-decoration: none;
}

.clicktxt {
  display: block;
  height: 1rem;
  text-align: center;
  color: #ffffff;
  background-color: transparent;
  padding: 1rem 1.5rem;
  cursor : pointer;
}

.switchdsp input {
  display: none;
}

.switchdsp .dsp {
  padding: 0px 0rem;
  height: 0.5rem;
  overflow: hidden;
  transition: 0.3s;
  opacity: 0;
}

.switchdsp input:checked ~ .dsp {
  display: flex;
  padding: 0px 0px 0px 0rem;
  height: auto;
  opacity: 1;
}



/* 本文 */
p {
  margin: 1.5rem 0px;
  margin-left: 1.5rem
}

.contents{
  padding: 10px 10px;
  line-height: 1.5;
}

h1 {
  color: var(--color-primary);
  font-size: 2.25rem
}

/* 見出し */
h2 {
  color: var(--color-primary);
  font-size: 1.5rem
}

h3 {
  color: var(--color-primary);
  font-size: 1.25rem
}

.plainul li{
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding-left: 1rem
}

.plainol li{
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding-left: 1rem
}

.listup li{
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  padding-left: 1rem
}

/* 点のいらない箇条書き */
.no-dot-ul li{
  list-style: none;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

/* フッタの支配 */
.footer {
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: var(--color-primary);
}

.footer-edited{
  margin: 1rem 0px;
  align-items: center;
  font-size: 1rem;
  color: #ffffff
}

.contents a:link {
  color:#000080;
  text-decoration:underline;
}

.contents a:visited { 
  color:#000080;
  text-decoration:underline;
}

.contents a:hover { 
  color:#0000cd;
  text-decoration:underline;
}

.contents a:active { 
  color:#dc143c;
  text-decoration:underline;
}