@charset "utf-8"; /*================================================== スライダーのためのcss ===================================*/ /*画像の横幅を100%にしてレスポンシブ化*/ img{ text-align: center; width: 50%; height: auto; vertical-align: bottom;/*画像の下にできる余白を削除*/ } /*メイン画像下に余白をつける*/ .gallery{ margin: 0 0 10px 0; } /*矢印の設定*/ /*戻る、次へ矢印の位置*/ .slick-prev, .slick-next { position: absolute;/*絶対配置にする*/ z-index: 3; top: 42%; cursor: pointer;/*マウスカーソルを指マークに*/ outline: none;/*クリックをしたら出てくる枠線を消す*/ border-top: 2px solid #ccc;/*矢印の色*/ border-right: 2px solid #ccc;/*矢印の色*/ height: 25px; width: 25px; } .slick-prev {/*戻る矢印の位置と形状*/ left:2.5%; transform: rotate(-135deg); } .slick-next {/*次へ矢印の位置と形状*/ right:2.5%; transform: rotate(45deg); } /*選択するサムネイル画像の設定*/ .choice-btn li{ cursor: pointer; outline: none; background:#333; width:25%!important; } .choice-btn li img{ opacity: 0.4;/*選択されていないものは透過40%*/ } .choice-btn li.slick-current img{ opacity: 1;/*選択されているものは透過しない*/ } /*========= レイアウトのためのCSS ===============*/ /*エリア全体を中央寄せ*/ .wrapper{ width:50%; /*max-width: 900px;*/ margin:0 auto; } ul{ margin:0; padding: 0; list-style: none; } a{ color: #333; } a:hover, a:active{ text-decoration: none; } h1{ text-align: center; font-size:4vw; letter-spacing: 0.1em; text-transform: uppercase; margin:30px 0; } h2{ text-align: center; font-size: large; margin: 20px auto; color: #006400; } p{ margin:30px 0; word-wrap : break-word; } /*=================我々が用意したcss===========*/ body{background-color: #CCFFFF;} nav { border-top: 10px solid #316745; background: #98b98e; margin-bottom: 15px; } nav ul { overflow: hidden; list-style: none; margin: 0 auto; padding: 0; } nav li { box-sizing: border-box; float: left; border-right: 1px solid #316745; width: 20%; } nav li:last-child { border-right: none; } nav li a { display: block; padding: 14px 0; width: 100%; text-align: center; font-size: 16px; font-weight: bold; color: #ffffff; } nav li a:hover { background: #316745; } nav li a.imakoko { background: #316745; } h3{ padding:0.5em; color:#494949; background:#FFFACD; border-left: solid 7px #8B4513; border-bottom: solid 7px #8B4513; } .picture{ margin:0 auto auto 0; border: 1px solid #c0c0c0; padding: 15px; width: 600px; background-color: #e7e7e7; border-radius: 10px; box-shadow: 0px 3px 10px 2px rgba(0,0,0,3); } .kaku{ padding:0.5em; color:#494949; background:#F0FFF0; border-left: solid 7px #006400; } #container { display: flex; flex-wrap: wrap; gap: 1px; } #container div { text-align: center; width: calc(25% - 22px); padding: 10px; color: #FFFFFF; background: #008000; }