@charset "UTF-8"; .design-C{ display: none; } .design-D{ display: block; } * { margin: 0px; padding: 0px; } html { font-size: 100%; } body{ margin: 0; height: 100%; font-family: 'Noto Sans JP', sans-serif; color: rgb(45, 45, 45); line-height: 1.7; } body:after{ margin: 0; position: fixed; top: 0; left: 0; width: 100%; height: 100%; content: ""; background: #afeeee; /* background: -moz-linear-gradient(top, #afeeee 0%,#FFF 100%); */ /* background: -webkit-linear-gradient(top, #afeeee 0%,#FFF 100%); */ background: linear-gradient(to bottom, #afeeee 0%, #fff 100%); z-index: -1; } body.vmenuspace {margin-top: 2em; border-top: 3px solid;} div.scrollbox { height: 6em; overflow: auto; background: #eff; } img { max-width: 100%; } /* --------------------------------------ヘッダー ------------------------------------------------------------*/ .header{ width: 100vw; height: auto; z-index: 99; position: fixed; transition: all .5s; top:0; padding-top: 10px; padding-bottom: 10px; } #hamburger-menu{ opacity: 0; position: fixed; } .header.change-color { background-color: #ffffff; } .header-nav { height: auto; max-width: 1400px; margin: 0 auto; padding: 0 5%; } .header-nav .sp-logo{ display: none; } .header-nav nav ul { display: flex; justify-content: space-around; align-items: center; font-size: 1rem; } .header-nav nav ul li { /* margin-right: 50px; */ list-style: none; /* font-size: 1.05em; */ /* padding-left: 9px; */ /* padding-right: 9px; */ border-left: grey 2px dotted; border-right: grey 2px dotted; } .header-nav nav ul li:last-child{ margin-right: 50px; } .header-nav nav ul .bd-no{ border: none; } .header-nav nav ul li a{ text-decoration: none; color: black; transition: .3s; display: block; } .header-nav nav ul li a:hover{ border-bottom: grey 3px dotted; } .header-nav nav ul li .bd-none:hover{ border-bottom: none; } .top-logo{ width: 65px; height: 65px; object-fit: cover; } header.scroll-nav{ background: white; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); padding-top: 0; padding-bottom: 0; } /*--------------------------------------common---------------------------------*/ .wrapper { max-width: 1150px; margin: 0 auto; padding: 0 5%; padding-top: 30px; margin-bottom: 80px; } .section-title { font-size: 2.1rem; text-align: center; position: relative; width: 100%; margin-top: 30px; margin-bottom: 20px; text-shadow: 0 4px 6px rgb(194, 194, 194); } .section-title::before{ content: ''; display: inline-block; width: 170px; height: 170px; background-image: url(../img/green.png); background-size: contain; vertical-align: middle; } .section-title::after{ content: ''; display: inline-block; width: 170px; height: 170px; background-image: url(../img/yellow-green.png); background-size: contain; vertical-align: middle; } .section-text{ text-align: center; font-size: 1.3rem; padding-top: 10px; padding-bottom: 30px; max-width: 800px; margin: 0 auto; line-height: 1.7; } /*--------------------------------------//common----------------------------------*/ #mainvisual { height: 660px; position: relative; margin-bottom: 120px; width: 100%; margin:0; padding:0; } .mainvisual-inner{ margin-top: 110px; max-width: 100%; } #mainvisual .top-text{ position: absolute; z-index: 10; top: 85px; left: 6%; overflow: hidden; } #mainvisual .top-text .text{ font-size: 1.8rem; font-weight: bold; margin-bottom: 10px; color: white; line-height: 4rem; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; text-shadow: 0 4px 6px #000; } .top-text-color{ color: rgb(1, 204, 255); } #mainvisual .top-title{ position: absolute; z-index: 10; top: 280px; right:30%; overflow: hidden; } #mainvisual .top-title .site-title{ font-size: 3.1rem; font-weight: bold; color: white; text-shadow: 0 4px 6px #000; text-align: center; } #mainvisual .top-title .site-title .small{ font-size: 1.6rem; color: indianred; text-shadow: 0 4px 6px #000; font-weight: bold; text-align: center; } .mainvisual-img{ position: relative; max-width: 100%; } .mainvisual-img .top-title{ position: absolute; top: 270px; right: 30%; z-index: 10; font-size: 2.8rem; } #mainvisual .fade li { max-width: 100%; position: absolute; top: 0; right: 0; opacity: 0; animation: fade 15s 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 img { width: 1500px; height: 610px; 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; } 30% { opacity: 1; } 45% { opacity: 0; } 100% { opacity: 0; } } /* ---------------------------------------------------------//mainvisual */