@charset "utf-8";
/*
html5doctor.com Reset Stylesheet
キラキラショップ
http://kanmusu.chu.jp/
*/
/*PC用**********/
* {
padding:0;
margin:0;
}
html, body, div, span, object, iframe,, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
font-family:"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
body {
line-height:100%;
}
article, aside, dialog, figure, footer, header, hgroup, nav, section {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after, q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
border:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
color:#333;
text-decoration:none;
}
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
li {
list-style-type:none;
}
img {
max-width:100%;
}
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted #000;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
.clearfix:after {
content:"";
display:block;
clear:both;
}
/* PagiNation
--------------------------- */
.pagiNation {
bottom: 30px;
left: 0;
width: 100%;
height: 15px;
text-align: center;
position: fixed; /* absolute or fixed */
z-index: 110; /* 非表示にする場合は「90」以下に */
visibility: visible; /* 非表示にする場合は「hidden」に */
}
.pagiNation a {
margin: 0 5px;
width: 20px;
height: 20px;
display: inline-block;
overflow: hidden;
background: #000;
}
.pagiNation a.pnActive {
filter:alpha(opacity=100)!important;
-moz-opacity: 1!important;
opacity: 1!important;
}
/* Wrapper
--------------------------- */
#wrapper {
width:480px;
margin:0 auto!important;
text-align: left;
}
h1 {
font-size:20px;
font-weight:normal;
display:block;
text-align:center;
position:relative;
padding:0 0 10px;
}
h1 span {
display:block;
font-size:12px;
margin-bottom:5px;
}
.footer_box {
position:fixed;
bottom:0;
}
.bnr li {
width:33%;
display:block;
float:left;
text-align:center;
}
.kboard-default-poweredby {
display:none;
}
header {
position:relative;
}
.tit {
position: relative;
background: #ff9900;
padding:10px;
text-align:center;
color:#fff;
font-size:120%;
}
.mitubox {
margin-bottom:20px;
background: url(./img/pattern02_yellow02.jpg);
width:90%;
margin:0 auto;
}
.mitubox dl {
padding:10px;
display:block;
}
.mitubox dt {
float:left;
width:30%;
display:block;
}
.w {
background:#fff!important;
}
.mitubox input {
border:solid 1px #ff9900;
border-radius:5px;
font-size:16px;
padding:7px;
text-align:right;
width:30%;
}
.noline, .red {
border:none!important;
color:#FF0000!important;
font-size:18px!important;
font-weight:bold;
}
.bnr {
background:#f7e2be;
padding:20px 10px 0;
margin-bottom:20px;
}
.bnr li {
margin-bottom:20px;
}
.upbtn {
padding:10px 0;
}
.upbtn li {
width:50%;
float:left;
text-align:center;
display:block;
}
.upbtn li a {
background:#73de00;
display:block;
color:#fff;
width:80%;
margin:0 auto;
padding:20px;
font-size:18px;
font-weight:bold;
}
.blue a {
background:#59c2ff!important;
}
.n2-section-smartslider {
width:95%!important;
margin:0 auto!important;
}
.n2-section-smartslider img {
width:100%!important;
height:auto!important;
}
.g_bnr li {
display:block;
float:left;
border:dotted 1px #75cbf3;
width:49%;
text-align:center;
padding:10px 0;
}
.g_bnr li a {
display:block;
}
/*タブ切り替え全体のスタイル*/
.tabs {
margin-top: 50px;
padding-bottom: 40px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
width: 100%;
margin: 0 auto;
}/*タブのスタイル*/
.tab_item {
width: calc(100%/2);
height: 50px;
border-bottom: 3px solid #5ab4bd;
background-color: #d9d9d9;
line-height: 50px;
font-size: 16px;
text-align: center;
color: #565656;
display: block;
float: left;
text-align: center;
font-weight: bold;
transition: all 0.2s ease;
}
.tab_item:hover {
opacity: 0.75;
}/*ラジオボタンを全て消す*/
input[name="tab_item"] {
display: none;
}
.tab_content_description table {
width::100%!important;
}/*タブ切り替えの中身のスタイル*/
.tab_content {
display: none;
padding: 40px 40px 0;
clear: both;
overflow: hidden;
}
#all:checked ~ #all_content, #programming:checked ~ #programming_content, #design:checked ~ #design_content {
display: block;
}
/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
background-color: #5ab4bd;
color: #fff;
}
/*タブ切り替え全体のスタイル*/
.tabs01 {
margin-top: 50px;
padding-bottom: 40px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
width: 100%;
margin: 0 auto;
}/*タブのスタイル*/
.tab_item01 {
width: calc(100%/7);
height: 50px;
border-bottom: 3px solid #5ab4bd;
background-color: #d9d9d9;
line-height: 50px;
font-size: 16px;
text-align: center;
color: #565656;
display: block;
float: left;
text-align: center;
font-weight: bold;
transition: all 0.2s ease;
}
.tab_item01:hover {
opacity: 0.75;
}/*ラジオボタンを全て消す*/
input[name="tab_item01"] {
display: none;
}
.tab_content_description table {
width::100%!important;
}/*タブ切り替えの中身のスタイル*/
.tab_content {
display: none;
padding: 40px 40px 0;
clear: both;
overflow: hidden;
}/*選択されているタブのコンテンツのみを表示*/
#hana:checked ~ #hana_content, #du:checked ~ #du_content, #se:checked ~ #se_content, #ne:checked ~ #ne_content, #o:checked ~ #o_content, #yuk:checked ~ #yuk_content, #chi:checked ~ #chi_content {
display: block;
}/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item01 {
background-color: #5ab4bd;
color: #fff;
}
/* 以下、スマートフォン（ディスプレイ幅480px以下）より小さい画面に使われるCSS */
@media screen and (max-width: 600px) {
#wrapper {
width:100%;
}
}