@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 { height: 660px; position: relative; margin-bottom: 120px; width: 100%; margin:0; padding:0; } .mainvisual-inner{ max-width: 100%; } .mainvisual-inner-title{ position: absolute; background-color: #ffffffc3; width: 500px; top: 150px; left: 70px; z-index: 999; } .mainvisual-title{ text-align: center; font-size: 2.4rem; font-weight: bold; margin-bottom: 60px; padding-top: 30px; z-index: 999; } .mainvisual-inner-title .mainvisual-title::after{ content: ''; position: absolute; top: 50%; left: 50%; width: 225px; height: 2px; background: #868686; transform: translateX(-50%); z-index: 999; } .mainvisual-text{ text-align: center; font-size: 1.1rem; line-height: 1.7; padding-bottom: 30px; z-index: 999; } .mainvisual-img{ position: relative; max-width: 100%; } #mainvisual .fade li { max-width: 100%; position: absolute; top: 0; right: 0; opacity: 0; animation: fade 25s infinite; list-style: none; } #mainvisual .fade li:nth-child(1) { animation-delay: 0s; } #mainvisual .fade li:nth-child(2) { animation-delay: 5s; } #mainvisual .fade li:nth-child(3) { animation-delay: 10s; } #mainvisual .fade li:nth-child(4) { animation-delay: 15s; } #mainvisual .fade li:nth-child(5) { animation-delay: 20s; } #mainvisual .fade li img { width: 1500px; height: 580px; object-fit: cover; border-radius:1% 1% 1% 1%; } #mainvisual .fade li::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; box-shadow: inset 0px 0px 10px 10px #fff; /* border-radius:1% 1% 1% 1%; */ } @keyframes fade { 0% { opacity: 0; } 15% { opacity: 1; } 25% { opacity: 1; } 35% { opacity: 0; } 100% { opacity: 0; } } @media screen and (max-width: 746px){ #mainvisual .top-text .text{ font-size: 1.4rem; line-height: 2.5rem; text-shadow: 0 3px 5px #000; } } /*------------------------------------------- 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; width: 13rem; /*ボタンの横幅*/ height: 7rem; 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: #e7eb0f;} .btn-html:hover, a.btn-html:hover { color: #fff; background: #dee940;} .btn-css,/*-------------------css---------------------*/ a.btn-css { color: #fff; background-color: #e0418e;} .btn-css:hover, a.btn-css:hover { color: #fff; background: #e284a2;} .btn-java,/*-------------------java---------------------*/ a.btn-java { color: #fff; background-color: #4689c8;} .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: #394862;} .btn-unity:hover, a.btn-unity:hover { color: #fff; background: #476179;} .btn-date,/*-------------------date---------------------*/ a.btn-date { color: #fff; background-color: #1c596a;} .btn-date:hover, a.btn-date:hover { color: #fff; background: #4093e0;} .btn-movie,/*-------------------movie---------------------*/ a.btn-movie { color: #fff; background-color: #2d8643;} .btn-movie:hover, a.btn-movie:hover { color: #fff; background: #1bbf49;} .btn-creat,/*-------------------creat---------------------*/ a.btn-creat { color: #fff; background-color: #a3273c;} .btn-creat:hover, a.btn-creat:hover { color: #fff; background: #ed3c65;} .btn-edit,/*-------------------edit---------------------*/ a.btn-edit { color: #fff; background-color: #a918e3;} .btn-edit:hover, a.btn-edit:hover { color: #fff; background: #db4eeb;} /*------------------------------------------- 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; } }