@charset "UTF-8";

/* 共通部分
---------------------------------------------*/
html {
               font-size: 100%;
}
body {
              font-family: "Times New Roman","Yu Gothic Medium", "游Gothic Medium", "YuGothic","游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
        line-height: 1.7;
              color:black;
}
a ｛
　　　　text-decoration: none;
}
img {
   max-width: 100%;
 }
/*共通部分ここまで*/


/* 大メニュー*/
 
header{
    margin-top:0;
    position:auto;/*fixedで固定*/
    margin-bottom: 13em;
    height:auto;
    width: /*100%*/ max-content;
     min-width: 100%;
    background:linear-gradient(90deg, #740cf2, #ff2599,#f5b689);
    z-index:10;/*最前面に表示*/

}

ul>li{
    display: inline-block;
}
ul>li> a{
   padding:25px 5px;
    display: block;
    font-size: 0.9em;
    font-family: "MS Pゴシック"; 
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color:white;/*ヘッダーの項目の色*/
text-decoration:none;
}

ul>li>span{
    margin-left: 1.2em;
} 

/*ロゴとメニューを横並びに*/
.page-wrapper{  
    display: flex;
    justify-content: center;
   max-width: 100%;
   margin: 0 auto;
   padding: 1%;
}

/*ロゴとナビメニューの離れすぎを防ぐ
---------------------------------------------*/
.wrapper {
           max-width: 1400px; /*記事の横幅はこれにおさまる。もとは1100px。長文読解と雑学には少し狭いかも*/
           margin: 0 auto;
           padding: 0 4%;
}


/*ホバー時のバーの設定*/
header a {
  position: relative;
  display: inline-block;
  text-decoration: none;
}
header a::after {
  position: absolute;
  bottom: 2px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: white;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
}
 header a:hover::after {
  bottom: -4px;
  opacity: 1;
  visibility: visible;
}


/*ヘッダー*/
.page-wrapper{
font-size:1rem;
margin-top:0px;
}
.page-wrapper li {
margin:15px 15px;/*文字の上下位置*/
}



/*ロシア語のタイトル
-------------------------------------------*/

.wrapper2 {
           max-width: 1100px; /*横幅はこれにおさまる。もとは1100ｐｘ*/
           margin: 0 auto;
           padding: 0 4%;
           text-align:center;/*文字の中央寄せ*/
}


.page-title {
        font-size: 3rem;
        font-family: 'Times New Roman', serif;
        font-style:normal;/*斜体はoblique*/
        text-transform: uppercase;/*全て大文字になる*/
        font-weight: bold;
        color:#ff2599;/*#ff006f;*/
}




/*日本語ページのタイルの並びに関係　変更加えないで*/
.wrapper3{
           max-width: 1000px; /*記事の横幅はこれにおさまる。もとは1100ｐｘ*/
           margin: 0 auto;
           padding: 0 4%;
           text-align:center;/*文字の中央寄せ*/
}






/*最下層ページ全体背景--------------------------------*/
#music{
background-color:#eeed; 
min-height:100vh;
}
#news{
background-color:#eeed; 
min-height:100vh;
}
#trivia{
background-color:#eeed; 
min-height:100vh;
}
#outline{
background-color:#eeed; 
min-height:100vh;
}
#contact{
background-color:#eeed; 
min-height:100vh;
}
#language{
background-color:#eeed; 
min-height:100vh;
}
#grammar{
background-color:#eeed; 
min-height:100vh;
}
#mondai{
background-color:#f0b24f; /*-image:linear-gradient(#ed1c24, #faa61a);*/
min-height:100vh;
}
#edit{
background-color:#eeed; 
min-height:100vh;
}
#kanji{
/*background-color:#f0b24f; /*-image:url(../images/snow.png);*/
background-size: cover;*/
background-image:linear-gradient(125deg, #f9e900, #f5a500);
min-height:100vh;
}




/*--------------------------------------*/

/*メイン記事とサブ記事の比率.記事背景色*/
article{
    width:74%;
    background:white;
    padding:14px 20px;
}
article2{
    width:74%;
    background:white;/*#97cdf3;*/
    padding:14px 20px;
}


aside{
    width:18%;
    background:#ff2599;
    padding:12px 12px;
}


/*ノートの下の文字色等*/
aside p {　
    padding:12px 10px !important;
    color:white;/*右側サブメニュー下段の文字色*/
    font-size:1rem;
}


/*メイン記事とサブ記事を横並びに*/
.kiji-contents{
display:flex;
justify-content:space-between;
margin:bottom:50px;
}
/*kijiは記事のタイトルのこと*/
#kiji {
     height: 270px;
     margin-bottom:40px;
}
#kiji.page-title {
   text-align: center;
}

/*サブ記事の装飾*/ 

.sub-title{/*「カテゴリー」「ノート」[のみ*/
font-size:1.375rem;
padding: 0 8px 8px;
border-bottom: 2px #f67690 solid;
font-weight:normal;
color:white;/*右側サブメニュータイトル文字色*/
}

.sub-menu{
    margin-bottom:60px;
    list-style:none;
}
.sub-menu li{
    border-bottom:1px #7acbe1 solid;
}
.sub-menu a{
    color:white;/*右側サブメニュー上段文字色*/
    padding:10px;
    display:block;
}
.sub-menu a:hover{
    font-color:#0bd;
}

/*メイン記事内の装飾*/

.post-info{
    position:relative;
    padding-top:4px;
    margin-bottom:40px;
    background:#eeed;/*記事タイトルの背景色*/
/*以下2つで記事タイトルに枠線*/
   /* border:solid;
    border-color:#de4d4d;*/
  color:black;
}

.post-info2{
    position:relative;
    padding-top:4px;
    margin-bottom:40px;
    background:white;/*#97cdf3;*//*ウクライナ記事タイトルの背景色*/
}




.post-date{
    background:#ff2599;
    border-radius:50%;
    color:white;
    width:100px;
    height:100px;
    font-size:1.625rem;
    text-align:center;
    position:absolute;
    top:0;
    padding-top:10px;
}
.post-date span{
    font-size:1rem;
    border-top:1px rgba(255,255,255,.5) solid;
    padding-top:6px;
    display:block;
    width:60%;
    margin:0 auto;
}
.post-title{
     font-family:"Yu Mincho", "YuMincho", serif;
     font-size:2rem;
     font-weight:normal;
}
.post-title,
.post-cat{
       margin-left:120px; /*記事タイトルとカテゴリー名を日にちの丸の分だけずらす*/
}


/*タイル式配置　横2つまで*/
.grid{
display:grid;
gap:26px;
grid-template-columns:1fr 1fr;
margin-top:6%;
margin-bottom:50px;
}


/*タイル式　日本語文法ページ、景色のページ*/
/*タイル式配置　横3つまで*/
.grid2 {
     display:grid;
     gap:60px;
     margin-top: 6%;
     margin-bottom: 50px;
     grid-template-columns: repeat(3, 1fr);
}

.grid3 {
display:grid;
grid-column-gap: 20px;
grid-row-gap: 20px;
grid-template-columns:1fr 1fr 1fr;
margin-top:6%;
margin-bottom:50px;
}

/*画像の縮小*/

.item img{
    width: 250px;  /* 横幅を200pxに */
    height: 160px;
}

.item2 img{
    width: 180px;  
    height: 160px;
}



/*フッター
------------------------------------------------*/

footer {
     background: #432;
     text-align: center;/*左右について中央寄せ*/
     padding: 18px 0;
    bottom: 0 ; /*下に固定*/
    width: 100%; /*フッターの幅*/ 
}
footer p {
     color: #fff;
     font-size: 0.875rem;
}




input[type="text"]{
background:rgba(255,255,255,.5);
border:3px black solid;
border-radius:5px;
padding:10px;
font-size:1rem;

}

input[type=button]{
background:#740cf2;
border:3px #ffaa6f solid;
border-radius:5px;
padding:10px;
font-size:0.8rem;

}





.button{
font-size:0.8rem;
background:#0bd;
color:#fff;
border-radius:2px;
padding:9px 16px;
}
.button:hover{
 background:#0090aa;
}




/*view*/
.view{
text-align:center;
}




/*モバイル版*/
@media (max-width:670px){
   .page-title{
    font-size:2.5rem;
    }
}


/*ヘッダー*/
.page-wrapper{
font-size:1rem;
margin-top:10px;
}
.page-wrapper li {
margin:0 20px;
}

html{
    scroll-behavior: smooth;
}
.gotop{
    display: block;
    width: 60px;
    height: 60px;
    box-sizing: border-box;
    background: #ffbf1f;
    border: 1px solid #999;
    padding-top: 30px;
    text-align: center;
    letter-spacing: -1px;
    font-size: 85%;
    text-decoration: none;
    color: #333;
    opacity: 0.5;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10000;
}
.gotop::before{
    content: "";
    display: block;
    border-top: 2px solid #333;
    border-right: 2px solid #333;
    width: 25%;
    height: 25%;
    top: 25%;
    left: 0;
    right: 0;
    margin: auto;
    position: absolute;
    transform: rotate(-45deg);
}
.gotop:hover{
    opacity: 1;
}
@media(max-width:750px){
    .gotop{
        width: 40px;
        height: 40px;
        text-indent: -9999px;
        opacity: 1;
        border: none;
        background: none;
        bottom: 10px;
        right: 10px;
    }
    .gotop::before{
        bottom: 0;
    }
}


/*------------リンク先選択ボタン-------------------*/
.button01 a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  padding: 1em 2em;
  width: 250px;
  height: 100px;
  color: white;
  font-size: 18px;
  font-weight: 700;
  background-color: #740cf2;
  transition: 0.1s;/*速度*/
text-decoration: none;
}

.button00 a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  padding: 1em 2em;
  width: 250px;
  height: 100px;
  color: white;
  font-size: 18px;
  font-weight: 700;
  background-color: red;
  transition: 0.1s;/*速度*/
text-decoration: none;
}

.button02 a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  padding: 1em 2em;
  width: 250px;
  height: 100px;
  color: white;
  font-size: 18px;
  font-weight: 700;
  background-color: #58f229;
  transition: 0.1s;/*速度*/
text-decoration: none;
}
.button03 a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  padding: 1em 2em;
  width: 250px;
  height: 100px;
  color: white;
  font-size: 18px;
  font-weight: 700;
  background-color: black;
  transition: 0.1s;/*速度*/
text-decoration: none;
}

.button10 a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  padding: 1em 2em;
  width: 150px;
  color: #333;
  font-size: 12px;
  font-weight: 700;
  background-color:#f0b24f;
  border-radius: 50vh;
}



/*---------------------------------------------------------*/


.button01 a::after {
  content: '';
  width: 5px;
  height: 5px;
  border-top: 3px solid #333333;
  border-right: 3px solid #333333;
  transform: rotate(45deg);
}
.button00 a::after {
  content: '';
  width: 5px;
  height: 5px;
  border-top: 3px solid #333333;
  border-right: 3px solid #333333;
  transform: rotate(45deg);
}
.button02 a::after {
  content: '';
  width: 5px;
  height: 5px;
  border-top: 3px solid #333333;
  border-right: 3px solid #333333;
  transform: rotate(45deg);
}
.button03 a::after {
  content: '';
  width: 5px;
  height: 5px;
  border-top: 3px solid #333333;
  border-right: 3px solid #333333;
  transform: rotate(45deg);
}

.button10 a::after {
  content: '';
  width: 5px;
  height: 5px;
  border-top: 3px solid #333333;
  border-right: 3px solid #333333;
  transform: rotate(45deg);
}


/*-------------------------------------*/


.button01 a:hover {
text-decoration: none;
  background-color: #ffbf1f;
}
.button00 a:hover {
text-decoration: none;
  background-color: #ffbf1f;
}
.button02 a:hover {
text-decoration: none;
  background-color: #ffbf1f;
}
.button03 a:hover {
text-decoration: none;
  background-color: #ffbf1f;
}
.button10 a:hover {
text-decoration: none;
  background-color:#740cf2;
}