Newer
Older
mi3-cafe / home.css
@みのさんじょー みのさんじょー on 25 Oct 2022 1 KB margin haijo
*{
    margin: 0;
    padding: 0;
}

html{
    font-size: 100%;
}

body{
    background-color: #ffffff;
    color: #626d71;
    display: block;
}


/* ヘッダー */
header{
    font-size: 400;
    margin: auto;
    width: 100%;
}

header h1{
    text-align: center;
}

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

.nav .iroiro li{
    width: 10%;
}

/* スライドさせる予定 */
.slide {
    margin: 25px 0;
    text-align: center;
}

/* 新着情報 */
.news{
    margin: 0 40px;
    padding: 30px;
}

.news .news_list .notice_title{
    font-size: 200%;
    text-align: center;
}

.news .news_list ul{
    list-style: none;
    padding: 20px 100px;
    width: 70%;
}

.news .news_list ul li{
    border-bottom: 1px dashed #626d71;
    margin: 0 0 15px 120px;
}

.notice p{
    display: inline-block;
    margin: 0 0 0 30px;
}

/* メイン部分 */
.main{
    margin: 0 25px;
    max-width: 100%;
}

/* 写真+説明 1セット */
.intro{
    margin: 20px 0;
    position: relative;
}

.intro .yoko{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    list-style: none;
    padding: 0 30px;
    text-align: center;
    min-width: 784px; /* これ以上小さくならない */
}

.set{
    margin: 0 1% 25px;
    position: relative;
    width: 23%;
}

.intro_img{
    position: relative;
}

.intro_img figure{
    position: relative;
}

.intro_img img{
    left: 0;
    top: 0;
}

.intro_place{
    background-color: #fcfdfe;
    border: double #8b4513;
    border-radius: 10px;
    color: #8b4513;
    position: absolute;
    text-align: center;
    top: 15px;
    width: 150px;
}

.intro_text{
    left: 0;
    text-align: center;
    top: 206px;
}

.key{
    position: relative;
}

.word{
    display: flex;
    flex-wrap: wrap;
    list-style: none;
}

.key .word li{
    text-align: center;
}

/*画面サイズが480px以下の場合適用*/
/*
@media screen (max-width:480px) {
    
}
*/