@charset "UTF-8"; body { color: black; font-size: 18px; background-color: #FFFFA5; } a { text-decoration: none; } img { max-width: 100%; } li{ list-style: none; } .section-title { display: inline-block; font-size: 24px; text-align: center; margin-bottom: 45px; } .wrapper { max-width: 960px; margin: 0 auto 100px auto; padding: 0 4%; text-align: center; } /*------------------------------------------- ヘッダー -------------------------------------------*/ #header { background-color: #00A834; } .header-inner{ display: flex; justify-content: space-between; align-items: center; margin: 0 auto; } .site-title { line-height: 1px; padding: 10px 0; } .site-title a { display: block; color: #fff; font-size: 23px; } .header-inner ul { display: flex; padding: 20px 0; } .header-inner li { margin-left: 30px; } .header-inner li a { color: #fff; font-size: 18px; } .header-inner li a:hover { opacity: 0.7; } /*------------------------------------------- Mainvisual -------------------------------------------*/ #mainvisual { margin-bottom: 80px; } #mainvisual img { width: 100%; max-width: 1920px; height: 600px; object-fit: cover; } /*------------------------------------------- about -------------------------------------------*/ #about { background-color: #f5f5f5; padding: 60px; margin-bottom: 60px; } #about .about-inner { border: solid 1px #333; padding: 30px; } #about .about-inner .about-text { text-align: center; } /*------------------------------------------- neko -------------------------------------------*/ #neko{ padding: 50px 16px 150px 16px; margin: 80px auto 80px auto; background-color: white; } #neko .grid { display: grid; gap: 50px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } #neko .grid .item img { vertical-align: top; height: 420px; width: 100%; object-fit: cover; } #neko .grid .item .neko-name{ text-align: center; margin-top: 30px; } /*------------------------------------------- footer -------------------------------------------*/ #footer { font-size: 16px; padding: 20px 0; text-align: center; background-color: #f2c94c; } /*------------------------------------------- SP -------------------------------------------*/ @media screen and (max-width: 600px) { body { font-size: 15px; } /*------------------------------------------- ヘッダー -------------------------------------------*/ .site-title a { font-size: 15px; } .header-inner ul { padding: 10px 0; } .header-inner li a { font-size: 14px; } /*------------------------------------------- Mainvisual -------------------------------------------*/ #mainvisual img { height: calc(100vh - 60px); } /*------------------------------------------- neko -------------------------------------------*/ }