/*
1. 箱の色
A) htmlの背景色
B) index.htmlの#index-nav ⇒ 「~の方」部分:3種を決める
C) B)で決めた色からリンク表示部分:3種を決める
D)
E)
2. 文字色
A) サイトロゴ
B)
C)
D)
E)
*/
/*
-----------------------------
index.css
------------------------------
- Color
緑濃 : #18453A
緑淡 : #53F0C9
黄濃 : #18453A
黄淡 : #18453A
赤濃 : #18453A
赤淡 : #18453A
- SP用のカラーテーマも収納
*/
/*
#index-navで決めた3色が関係あるページ
- sitemap
*/
/* ==================== */
/* style.css */
/* ==================== */
/* 背景色 */
html{
background:#323232;
}
/* 通常のリンクアンカーやテキストなど */
a:visited, section.news p, #global-nav .menu > li:hover a{
color:#fff;
}
/* ==================== */
/* サイトロゴ */
/* -- */
header, header div, header div a{
color:#fff;
}
/* ==================== */
/* サイトロゴ 補足ナビ(サイトマップ お問い合わせ アクセシビリティ) */
/* -- */
header nav, header nav a, header nav a:visited {
color: #fff;
}
header nav a:hover {
color: #8c8c8c;
}
/* ==================== */
/* グローバルナビ */
/* -- */
/* 背景 */
#global-nav{
background: #323232;
}
/* 非選択状態の文字色 */
#global-nav .menu > li a,
#global-nav .menu > li a:visited {
color: #8c8c8c;
}
/* 選択状態の文字色 */
#global-nav .menu > li.gactive a,
#global-nav .menu > li a:hover {
color: #e8e8e8;
}
/* SP用文字色 */
@media screen and (max-width:549px){
/* 非選択状態の文字色 */
#global-nav .menu > li a,
#global-nav .menu > li a:visited {
color: #002319;
}
#global-nav .sp-menu > li a,
#global-nav .sp-menu > li a:visited{ /* SP用のみ表示させるメニューエリア */
color: #002319;
}
/* 選択状態の文字色 */
#global-nav .menu > li.gactive a,
#global-nav .menu > li a:hover{
color:#002319;
}
}
/* ==================== */
/* パンくずリスト */
/* -- */
.breadcrumbs, .breadcrumbs a:visited, .breadcrumbs a, div.footer-top{
color:#a3a3a3;
}
.breadcrumbs a:hover{
color:#c4c4c4;
}
/* ==================== */
/* 新着ニュース */
/* -- */
section.news p.new-arrivals, section.news p.new-arrivals a:visited, section.news p.new-arrivals a{
color:#b5b5b5;
}
section.news p.new-arrivals a:hover, section.news p.new-arrivals a::after, section.news p.news-more{
color:#b5b5b5;
}
section.news p.news-more, section.news p.news-more a, section.news p.news-more a:visited {
color:#b5b5b5;
}
@media screen and (max-width:549px){
section.news p.new-arrivals a:hover, section.news p.new-arrivals a::after{
color:#323232;
}
section.news p.new-arrivals, section.news p.new-arrivals a, section.news p.new-arrivals a:visited,
section.news p.news-more, section.news p.news-more a, section.news p.news-more a:visited {
color:#323232;
}
section.news p.news-more span {
border: 1px solid #323232;
}
section.news p.news-more span:hover {
background: #b5b5b5;
border-color: #b5b5b5;
}
}
@media screen and (min-width: 550px){
section.news p.news-more a {
border-bottom-color: #b5b5b5;
}
}
/* Newの文字色 */
section.news p.new-arrivals span{
color:#d1474c;
}
/* アンカーの下線 */
section.news .anchor{
border-color: #b5b5b5;
}
@media screen and (max-width:549px){
section.news .anchor{
border-color: #323232;
}
}
/* ==================== */
/* フッターらへん */
/* -- */
div.footer-bottom {
color: #9e9e9e;
}
footer section.link-banner ul li a:visited, footer section.link-banner ul li a, section.address{
color:#a3a3a3;
}
footer section.link-banner ul li a:hover{
color:#c4c4c4;
}
footer section.link-banner div a{
border-color:#aaa;
}
/* ==================== */
/* index.css */
/* ==================== */
/* ==================== */
/* 目的別ナビ */
/* -- */
nav#index-nav .target-users label.label-users {
color: #fff;
background:#f4fac7;
border-bottom-color: #fff;
}
/* 目的別ナビ共通 */
.accodion ~ nav {
background: #fff;/* default 各訪問者毎に上書き */
border-bottom-color: #fff;
}
.accodion ~ nav ul, .accodion ~ nav ul li a{
color:#323232;
}
.accodion ~ nav ul li a::after{
border-bottom-color: #323232;
}
.read {
background: linear-gradient(270deg,rgba(128, 128, 128, 0) 40%, rgba(128, 128, 128, 0.8) 70%, rgba(128, 128, 128, 1));
}
div.tool:checked ~ div.read{
overflow:hidden;
background: linear-gradient(90deg,rgba(115, 158, 238, 1) 0%, rgba(115, 158, 238, 0.8) 20%, rgba(115, 158, 238, 0)) right no-repeat;
}
.accodion ~ div.read p{
color:#fff;
}
/* 業務依頼 */
.order-photo{
background: linear-gradient(270deg,rgba(128, 128, 128, 0) 40%, rgba(128, 128, 128, 0.8) 70%, rgba(128, 128, 128, 1)), url(../../img/order-photo.jpg) right no-repeat;
}
nav#index-nav section.target-users label.label-tool:hover ~ div.order-photo,
nav#index-nav section.target-users nav:hover ~ div.order-photo,
nav#index-nav section.target-users label.label-users:hover ~ div.order-photo{
background: linear-gradient(90deg,rgba(83, 240, 201, 1) 0%, rgba(83, 240, 201, 0.8) 20%, rgba(83, 240, 201, 0.5) 40%,rgba(83, 240, 201, 0.3) 60%,rgba(83, 240, 201, 0)), url(../../img/order-photo.jpg) right no-repeat;
}
nav#index-nav section.order-user label.label-users{background-color:#18453A;}
nav#index-nav section.order-user nav{background-color:#53F0C9;}
nav#index-nav section.order-user label.label-tool::after {color:#53f0c9;}
@media screen and (max-width:549px){
nav#index-nav section.order-user {
background-color: #53f0c9;
background-image: url(../../img/order-photo.jpg) ;
}
nav#index-nav section.order-user nav{background-color:#53f0c9;}
nav#index-nav section.order-user label.label-users {
background-color: #53f0c9;
color: #323232;
}
}
/* 学内向けサービス */
.service-photo{
background: linear-gradient(270deg,rgba(128, 128, 128, 0) 40%, rgba(128, 128, 128, 0.8) 70%, rgba(128, 128, 128, 1)), url(../../img/service-photo.jpg) right no-repeat;
}
nav#index-nav section.target-users label.label-tool:hover ~ div.service-photo,
nav#index-nav section.target-users nav:hover ~ div.service-photo,
nav#index-nav section.target-users label.label-users:hover ~ div.service-photo{
background: linear-gradient(90deg,rgba(255, 188, 39, 1) 0%, rgba(255, 188, 39, 0.8) 20%, rgba(255, 188, 39, 0.5) 40%,rgba(255, 188, 39, 0.3) 60%,rgba(255, 188, 39, 0)), url(../../img/service-photo.jpg) right no-repeat;
}
nav#index-nav section.service-user label.label-users{background-color:#f5a125;}
nav#index-nav section.service-user nav {background-color:#ffbc27;}
nav#index-nav section.service-user label.label-tool::after {color:#ffbc27;}
@media screen and (max-width:549px){
nav#index-nav section.service-user label.label-users {background-color: #ffbc27; color: #323232;}
}
/* 技術部について */
.all-photo{
background: linear-gradient(270deg,rgba(128, 128, 128, 0) 40%, rgba(128, 128, 128, 0.8) 70%, rgba(128, 128, 128, 1)), url(../../img/order-photo.jpg) right no-repeat;
}
nav#index-nav section.target-users label.label-tool:hover ~ div.all-photo,
nav#index-nav section.target-users nav:hover ~ div.all-photo,
nav#index-nav section.target-users label.label-users:hover ~ div.all-photo{
background: linear-gradient(90deg,rgba(255, 87, 92, 1) 0%, rgba(255, 87, 92, 0.8) 20%, rgba(255, 87, 92, 0.5) 40%,rgba(255, 87, 92, 0.3) 60%,rgba(255, 87, 92, 0)), url(../../img/order-photo.jpg) right no-repeat;
}
nav#index-nav section.all-user label.label-users{background-color:#d1474c;}
nav#index-nav section.all-user nav {background-color:#ff575c;}
nav#index-nav section.all-user label.label-tool::after {color:#ff575c;}
@media screen and (max-width:549px){
nav#index-nav section.all-user label.label-users {background-color: #ff575c; color: #323232;}
}
/* ==================== */
/* サイトマップ */
/* -- */
h2.sitemap-user-order {
border-left-color: #18453A;
}
h2.sitemap-user-service {
border-left-color: #f5a125;
}
h2.sitemap-user-all {
border-left-color: #d1474c;
}