@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; } /*------------------------------------------- movie -------------------------------------------*/ /*------------------------------------------- ーボタン -------------------------------------------*/ *, *:before, *:after { -webkit-box-sizing: inherit; box-sizing: inherit; } .btn, a.btn, button.btn { font-size: 1.15rem; font-weight: 750; line-height: 1.5; position :relative; display:inline-block; padding:1rem 2rem; width: 13rem; /*ボタンの横幅*/ margin: 0.2rem; /*余白*/ cursor: pointer; -webkit-transition: all 0.3s; transition: all 0.3s; text-align: center; vertical-align: middle; letter-spacing: 0.1em; border-radius: 0.5rem; } /*------------------------------------------- ーボタンそれぞれ -------------------------------------------*/ .midashi{font-size: 1.5rem;} .btn-html, /*------------------html------------------*/ a.btn-html { color: #fff; background-color: #c1c806;} .btn-html:hover, a.btn-html:hover { color: #fff; background: #dee940;} .btn-css,/*-------------------css---------------------*/ a.btn-css { color: #fff; background-color: #dd538a;} .btn-css:hover, a.btn-css:hover { color: #fff; background: #e284a2;} .btn-java,/*-------------------java---------------------*/ a.btn-java { color: #fff; background-color: #0b4fe3;} .btn-java:hover, a.btn-java:hover { color: #fff; background: #2893f6;} .btn-blender,/*-------------------Blender---------------------*/ a.btn-blender { color: #fff; background-color: #e3700b;} .btn-blender:hover, a.btn-blender:hover { color: #fff; background: #f69928;} .btn-unity,/*-------------------unity---------------------*/ a.btn-unity { color: #fff; background-color: #021841;} .btn-unity:hover, a.btn-unity:hover { color: #fff; background: #476179;} .btn-date,/*-------------------date---------------------*/ a.btn-date { color: #fff; background-color: #0a708c;} .btn-date:hover, a.btn-date:hover { color: #fff; background: #4093e0;} .btn-movie,/*-------------------movie---------------------*/ a.btn-movie { color: #fff; background-color: #08a12e;} .btn-movie:hover, a.btn-movie:hover { color: #fff; background: #28f662;} .btn-creat,/*-------------------creat---------------------*/ a.btn-creat { color: #fff; background-color: #e30b2f;} .btn-creat:hover, a.btn-creat:hover { color: #fff; background: #ed3c65;} .btn-edit,/*-------------------edit---------------------*/ a.btn-edit { color: #fff; background-color: #e30b94;} .btn-edit:hover, a.btn-edit:hover { color: #fff; background: #eb4eb4;} /*------------------------------------------- footer -------------------------------------------*/ #footer { font-size: 16px; padding: 20px 0; text-align: center; background-color: #00A834; } /*------------------------------------------- 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; } }