/* * {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

html {
  font-size: 62.5%;
} */

/* body {
  font-family: ;
  color: ;
  font-size: ;
  line-height:;
} */


.inner{
    max-width: 1200px;
    margin: 0 auto;
}
    

.header{
    display: flex;
    justify-content: space-between;
}

.header p{
    border: 1px solid #758694;
    margin: 15px 0;
}

.rogo{
    width: 165px;
    height: 45px;
}

.keyword{
    width: 250px;
    height: 45px;
}

/* main visual */

.main-article{
    background-color: #405D72;
}

.main-article ul{
    list-style: none;
    display: flex;
    justify-content: space-between;
    height: 40px;
    align-items: center;
}

.main_contents{
    background-color: #F7E7DC;
    height: 419px;
}

li{
    color: white;
    font-family:  "Noto Sans JP", sans-serif;;
    font-size: 20px;
}

.main_contents h1{
    font-family:  "Noto Sans JP", sans-serif;;
    font-size: 36px;
    color: #405D72;
    text-align: center;
    padding: 30px 0 25px 0;
}

.main_contents p{
    text-align: center;
    padding-bottom: 40px;
}

.main_item{
    max-width: 359px;
    width: 100%;
    height: 190px;
    border: 5px solid #758694;
    background-color: white;
    border-radius: 5%;
}

.main_wrap{
    display: flex;
    justify-content: space-between;
}

/* new_article */
.article_wrap h2{
    margin: 60px 0 25px 0;
}

.new-article{
    background-color: #CCCCCC;
    max-width: 250px;
    width: 100%;
    height: 131px;
}

.new_articlecontainer{
    display: flex;
    justify-content: space-between;
}

/* category */

.category_wrap h2{
    margin: 60px 0 20px 0;
}

.category_item h3{
    background-color: #405D72;
    color: white;
}

.coding-article{
    max-width: 350px;
    width: 100%;
    height: 184px;
    background-color: #CCCCCC;
}

.category_area{
    display: flex;
    justify-content: space-between;
    margin: 20px 0 30px 0;
}

.category_item p{
    max-width: 250px;
    width: 100%;
    height: 60px;
    background-color: #405D72;
    text-align: center;
    color: white;
    margin: 0 auto;
    margin-bottom: 80px;
    border-radius: 5%;
}

.banner p{
    max-width: 350px;
    width: 100%;
    height: 109px;
    background-color: #EBE7E7;
}

.banner{
    display: flex;
    justify-content: space-between;
    margin-bottom: 80px;
}

/* keywords */
.keyword_wrap h2{
    margin-bottom: 25px;
}

.banner_area{
    max-width: 800px;
    width: 100%;
    height: 150px;
    background-color: #F7E7DC;
    margin: 100px auto;
    border: 5px solid #405D72;
    font-size: 40px;
    color: #405D72;
    border-radius: 5%;
    text-align: center;
}

/* Insta */
.Insta_article{
    max-width: 250px;
    width: 100%;
    height: 333px;
    background-color: #CCCCCC;
}

.Insta_wrap{
    display: flex;
    justify-content: space-between;
    margin: 20px 0 120px 0;
}

/* footer */
footer p{
    background-color: #405D72;
    height: 133px;
}