html { font-size: 100%; } body { margin:0; padding:0; background-color: #f4f4f4; margin: auto; max-width:100%; line-height: 1.7; } html { font-size: 100%; } img { width: 100%; max-width: 800px; margin:0; padding:0; } a{ text-decoration: none; } h1{ margin: 0; padding: 0; } h2{ margin: 0; padding: 0; } h3{ margin: 0; padding: 0; font-size: 25px; color: #f4f4f4; } p{ margin:0; padding:0; font-size: 15px; color: #f4f4f4; } section{ max-width: 800px; margin:auto; padding:20px 5%; background-color: #f4f4f4; } .menu-open{ transform: translate(-40%, 0); } .container{ margin: 0; padding: 0; z-index: 0; } /*共通*/ .common-title{ text-align: center; font-size: 40px; color: #0a9b94; margin-top:50px; margin-bottom: 50px; } .common-text{ text-align: center; color: #0a9b94; font-size: 18px; } /*トップイメージ*/ .img-center{ text-align: center; } .top-image{ position: fixed; z-index: -10; transform: translate(-50%, 0); top:0; } .kumo{ position:relative; z-index: -30; margin:0 auto; background-color: #f4f4f4; display: flex; } /*ヘッダー*/ header{ margin-top: 0; padding: 0; z-index: 10; } .site-header{ position: absolute; width: 100%; } .fixed{ position: fixed; top: 0; } .header-list ul{ list-style-type: none; text-align: center; margin: 0; background-color: #0a9b94; padding :0; } .header-list li{ display:inline-block; text-align: center; background-color: #0a9b94; height: 50px; line-height: 48px; margin:0; } .header-list a{ text-decoration: none; font-weight: bold; color: #f4f4f4; font-size: 13px; padding:15px 15px; margin:0; } .header-list a:hover { background-color: #008080; } .menu-ready{ display: none; font-size: 13px; color:#f4f4f4; margin: 0; background-color: #0a9b94; position: absolute; width: 100%; height: 50px; } .menu-ready p{ float: right; font-size: 13px; padding:15px 15px } .menu-ready p:hover{ background-color: #008080; } /*コンテンツ全体*/ /*SKIPの紹介*/ .introduction { margin-top:50px; } .introduction h1{ text-align: center; font-size: 40px; color: #0a9b94; } .introduction p{ text-align: center; color: #0a9b94; font-size: 18px; } .skip-mean{ font-size: 50px; color: #0a9b94; font-weight: lighter; margin-bottom: 30px; } /*活動*/ .activities h1{ text-align: center; font-size: 40px; color: #0a9b94; padding-bottom: 15px; } .activities a:hover .activity{ background-color:#FEDED4 /*#E8C1A5*/; } .activities a:hover h3{ color: #0a9b94; } .activities a:hover p{ color: #0a9b94; } .activities a:hover img{ border-radius: 10px 10px 10px 10px; } .activity{ width:100%; height: 150px; padding: 10px 0; margin:20px 0; background-color: #ff905a /*#ff7e5a*/; position: relative; border-radius: 10px 10px 10px 10px; transition: 1s; } .activity img{ width: 150px; height: 150px; border-radius: 50%; /*background-position: left top;*/ display: inline-block; margin-left:10px; transition: 1s; } .activity-text{ display: inline-block; vertical-align: top; position: absolute; left:170px; margin-right: 10px; } .activity h3{ transition: 1s; } .activity p{ transition: 1s; } /*伝統芸能*/ #movie { padding: 50px 16px 50px 16px; margin: -50px auto 10px auto; } .fadein { opacity : 0; transform: translateY(20px); transition: all 1s; } #movie .grid { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .grid:hover{ color: #0a9b94; } .item{ background-color: #ff905a; } .item:hover{ background-color: #FEDED4; } .page > .item:hover p{ color: #0a9b94; } #movie .grid .item { transition: all 0.3s ease; box-shadow: 0 0 8px 4px #ccc; } #movie .grid .item-content { padding: 30px; } #movie .grid .item-cat { font-size: 1,0rem; margin-bottom: 20px; } #movie .grid .item-text { font-size: 1.1rem; font-weight: bold; margin-bottom: 20px; } #movie .grid .item-date { font-size: 0.85rem; text-align: right; } #movie-page{ margin: 0 auto; } /*フッター*/ footer{ background-color: #313131; margin: 0; padding:15px 10px; } footer p{ text-align: center; color: #f4f4f4; } /*レスポンシブ*/ @media screen and (max-width:959px) {/*タブレット用*/ h3{ font-size: 22px; } } @media screen and (max-width:619px) {/*タブレット用*/ h3{ font-size: 16px; } p{ font-size: 12px; } .header-list ul{ transform: translate(250%, 0); width: 40%; margin:0 ; background-color: #f4f4f4; z-index: -5; } .header-list .menu{ display: block; width: 100%; } .header-list a{ width: 100%; } .menu-ready{ display: block; width: 100%; } .introduction p{ font-size: 15px; } .common-text{ font-size: 15px; } .activity { height: 120px; margin-bottom: 50px; } .activity img{ width: 120px; height: 120px; } .activity-text{ left: 140px; } }