@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Zen+Old+Mincho&display=swap');


html {
    /* スクロールをスムーズに */
    scroll-behavior: smooth;
    text-align: center;
    /* フォント */
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color: #333;
    background-color: #efefef;
}

body {
    /* ページ遷移でふわっと表示するために必要 */
    display: none;
}

a {text-decoration: none}
a:link.n-button,
a:visited.n-button,
a:hover.n-button,
a:active.n-button {
    color:#333;
}

main {
    padding: 0;
    margin:0;
    display: inline-block;
    text-align: left;
    width: 900px;
    background-color: #fefefe;
}

nav {
    padding: 20px 0;
    display: flex;
}

.n-button { /* ナビゲーションの戻るボタン */
    display: inline-block;
    width: 60px;
    height: 60px;
    background-color: #ddd;
    border-radius: 0 6px 6px 0;
    font-size:2em;
    display: flex;
    justify-content: center;
    align-items: center;
}


.n-tag { /* ナビゲーションのテキスト部分 */
    display: inline-block;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
    font-size: 80%;
    color: #aaa;
}

h1 { /* タイトル */
    font-size: 36px;
    line-height: 1.6em ;
    text-align: left;
    font-family: "Zen Old Mincho", serif;
    font-weight: 400;
    font-style: normal;
    padding: 50px;
}

h2 { /*章節*/
    font-size: 27px;
    line-height: 1.6em;
    display: inline-block;
    width: 100%;
    text-align: center;
    margin:120px 0 30px 0;
    color: #aaa;
}

section { /* 本文 */
    font-size: 18px;
    line-height: 1.65em ;
    padding: 50px;
    margin-bottom: 100px;
}

p{ 
    display: block;
    margin: 18px 0;}

/* 罫線 */
mark{
    display: inline-block;
    background-color: #fefefe;
    width: 100%;
    text-align: center;
    color: #ccc;
    padding: 100px;
    font-size: 80%;}
    


/* ふりがな */
rt {
	translate: 0 .5em;
    -webkit-translate: 0 .5em;
    margin:0;padding:0;
}
@-moz-document url-prefix() {
	rt {
		position: relative;
		top: .5em;
        -webkit-position: relative;
        -webkit-top: .5em;
	}
}



/* フッターとフッターのボタン */
.footer {
    width: 100%;
    height: 200px; 
    text-align: center;
  /* 中央揃えのための表記 */
    align-items:center;
}

/* Waveboxのボタン */
.btn-gradient-radius {
    display: inline-block;
    padding: 7px 20px;
    border-radius: 25px;
    text-decoration: none;
    color: #eee;
    background-color: #333;
    transition: .8s;
    }
.btn-gradient-radius:hover {
    color: #333;
    background-color: #eee;
    }

  /* Animation */
.btn-gradient-radius {
    animation: floating-y 1s ease-in-out infinite alternate-reverse;
  }
  @keyframes floating-y {
    0% {
      transform: translateY(-10%);
    }
    100% {
      transform: translateY(10%);
    }
  }



/* めでぃあくえり */
@media screen and (max-width: 959px) {

    main {
        width: 100%;
    }

    section { /* 本文 */
        font-size: 15px;
        line-height: 1.65em;
        padding: 20px;
    }
    
    h1 { /* タイトル */
        font-size: 24px;
        padding: 20px 40px;
    }

    rt {
        font-size: .4em;
    }

    .section-line { /* 区切り線 */
        padding: 60px;
    }
}