@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: white;

｝
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: 5px 5px;
    display: block;
    font-size: 0.9em;
    font-family: "MS Pゴシック"; 
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color:white;/*ヘッダーの項目の色*/
}
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;/*文字の上下位置*/
}



body{
max-height:500px;
}

/*全体背景日本*/
.big-bg {
width: 100%;
min-height:1400px;
background-image:url(../images/fuji.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}

/*全体背景ロシア*/
.big-bg-ru {
width: 100%;
min-height:1400px;
background-image:url(../images/redsquare.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}



.outer {
position:auto;
margin:auto;/*150px 350px;上下・左右が150・350➡左右中央寄せして*/
margin-top:150px;
background-color:white;
    width:1200px;/*インナーより50ピク大きく*/
    height: 935px;
    display: flex;
    align-inner: center;
    justify-content: center;
}

.inner {
background-color:white;
width: 1150px;
height:885px;
margin-top:25px;
margin-left:22px;
margin-right:22px;
}
    
.outer2 {
position:auto;
margin:auto;/*150px 350px;上下・左右が150・350➡左右中央寄せして*/
margin-top:150px;
background:linear-gradient(90deg, #ff2599,#f5b689, #740cf2);
    width:1200px;/*インナーより50ピク大きく*/
    height: 935px;
    display: flex;
    align-inner: center;
    justify-content: center;
}



.inner2 {
background:linear-gradient(90deg, #740cf2, #ff2599,#f5b689);
width: 1150px;
height:885px;
margin-top:25px;
margin-left:22px;
margin-right:22px;
}



/*メイン六枚の配置*/

.parent {
display: grid;
width:1150px;
height:900px;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-column-gap: 20px;
grid-row-gap: 20px;
}

.div1 { grid-area: 1 / 1 / 2 / 6; }
.div2 { grid-area: 2 / 1 / 5 / 2; }
.div3 { grid-area: 2 / 2 / 5 / 5; }
.div4 { grid-area: 2 / 5 / 6 / 6; }
.div5 { grid-area: 5 / 1 / 6 / 3; }
.div6 { grid-area: 5 / 3 / 6 / 5; }



.innerflame-img {
max-width: 100%;
height: auto;
width /***/:auto;
}


.wrapper2{
    max-width:1100px;
    margin:0 auto;
    padding:0 4%;
    text-align:center;
}


.page-title{
   font-size:3rem;
   font-faily:'Times New Roman', serif;
   font-style:normal;
   text-transform:uppercase;
   font-weight:bold;
   color:black;
}



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


aside{
    width:22%;
    background:white;
    padding:12px 12px;
}


/*ノートの下の文字色等*/
aside p {　
    padding:12px 10px !important;
    color:black;/*右側サブメニュー下段の文字色*/
    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  #740cf2 solid;
font-weight:normal;
color:black;/*右側サブメニュータイトル文字色*/
}

.sub-menu{
    margin-bottom:60px;
    list-style:none;
}
.sub-menu li{
    border-bottom:1px #ffbf1f solid;
}
.sub-menu a{
    color:black;/*右側サブメニュー上段文字色*/
    padding:10px;
    display:block;
    text-decoration: none;/*ハイパーリンク下線消す*/
    text-transform: capitalize;/*先頭のみ大文字*/
    font-family:'Yu Gothic Medium', sans-serif;
}
.sub-menu a:hover{
    font-color:white;
}

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

.post-info{
    position:relative;
    padding-top:4px;
    margin-bottom:40px;
    background:linear-gradient(90deg, #740cf2, #ff2599,#f5b689);/*記事タイトルの背景色*/
/*以下2つで記事タイトルに枠線*/
   /* border:solid;
    border-color:#de4d4d;*/
}

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




.post-date{
    background:#740cf2;
    border-radius:50%;
    color:#fff;
    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{
      text-align:center;/* margin-left:120px; 記事タイトルとカテゴリー名を日にちの丸の分だけずらすならこれ*/
}


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

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


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

}


/*トップページ　ロシア語のタイトル
-------------------------------------------*/

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


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

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

.button10 a:hover {
text-decoration: none;
  background-color:#740cf2;
}

.grid2 {
     display:grid;
     gap:60px;
     margin-top: 6%;
     margin-bottom: 50px;
     grid-template-columns: repeat(3, 1fr);
}

/*スライドタイミング等
---------------------------*/


.fadeslide {
	position: relative;
	width: 1150px;
	height: 222px;
	overflow: hidden;
	z-index: 0;
}

.fadeslide div {
	position: absolute;
	top: 0;
	left: 0;
}

.fadeslide div:nth-of-type(1) {
	animation: fadeslide 30s 0s infinite both;
	z-index: 5;
}

.fadeslide div:nth-of-type(2) {
	animation: fadeslide 30s 6s infinite both;
	z-index: 4;
}

.fadeslide div:nth-of-type(3) {
	animation: fadeslide 30s 12s infinite both;
	z-index: 3;
}

.fadeslide div:nth-of-type(4) {
	animation: fadeslide 30s 18s infinite both;
	z-index: 2;
}

.fadeslide div:nth-of-type(5) {
	animation: fadeslide 30s 24s infinite both;
	z-index: 1;
}
@keyframes fadeslide {
	0% { left: 0; opacity: 0; }
	5% { left: 0; opacity: 1; }
	20% { left: 0; opacity: 1; }
	25% { left: 0; opacity: 0; }
	26% { left: 100%; opacity: 0; }
	100% { left: 100%; opacity: 0; }
}