* {
font-family:"游ゴシック体",YuGothic,"游ゴシック","Yu Gothic","メイリオ","Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;
}
table
{
width: 100%;
border-collapse: collapse;
background-color: white;
color: black;
font: 10pt verdana, arial;
margin-bottom: 25%; }
tr.subhead
{
background-color: #cccccc;
}
th
{
padding: 0 3%;
}
th.alt
{
background-color: black;
color: white;
padding: 3% 3% 2%;
}
td
{
padding: 0 3%;
}
tr.alt
{
background-color: #eeeeee;
}
h1
{
font: 24pt;
margin: 0;
}
h2
{
font: 18pt;
margin: 0;
}
h3
{
font: 12pt;
margin: 0;
}
th a
{
color: #00008b;
font: 8pt;
}
a
{
color: #00008b;
text-decoration: none;
}
a:hover
{
color: #00008b;
text-decoration: underline;
}
div.outer
{
width: 90%;
margin: 15%;
}
table.viewmenu td
{
background-color: #006699;
color: white;
padding: 0 5%;
}
table.viewmenu td.end
{
padding: 0;
}
table.viewmenu a
{
color: white;
font: 8pt verdana, arial;
}
table.viewmenu a:hover
{
color: white;
font: 8pt verdana, arial;
}
a.tinylink
{
color: #00008b;
font: 8pt verdana, arial;
text-decoration: underline;
}
a.link
{
color: #00008b;
text-decoration: underline;
}
div.buffer
{
padding-top: 7%;
padding-bottom: 17%;
}
.small
{
font: 8pt verdana, arial;
}
table td
{
padding-right: 20%;
}
table td.nopad
{
padding-right: 5%;
}
@font-face {
font-family: 'しろくまフォント';
src: url(//ito-hamster.com/fonts/001Shirokuma-Regular.otf);
}
.menu__wrapper {
margin:0 auto;
max-width:600px;
}
.menu {
display: flex;
flex-wrap: wrap;
justify-content: center;
max-width: 600px;
font-feature-settings: "palt";
}
.menu li {
list-style: none;
margin: 5px;
}
.menu li a {
display: flex;
align-items: center;
justify-content: center;
font-family: "しろくまフォント";
font-size: 28px;
letter-spacing: -5px;
text-decoration: none;
background: #ff4200;
transition: all 0.3s ease-out;
}
.menu li a:hover {
color: #ff4200;
}
.menu__top {
color: #dabd7b;
width: 110px;
height: 56px;
clip-path: polygon(14.55% 8.14%, 6.73% 27.29%, 10.45% 81.86%, 24.55% 88.14%, 78.73% 91.14%, 92% 75%, 99% 30.93%, 89.82% 5.58%, 49.82% 12.93%);
}
.menu__top:hover {
background: #dabd7b;
}
.menu__self {
color: #a5da7d;
width: 150px;
height: 56px;
clip-path: polygon(14.55% 8.14%, 6.73% 27.29%, 10.45% 81.86%, 24.55% 88.14%, 78.73% 91.14%, 92% 75%, 99% 30.93%, 89.82% 5.58%, 49.82% 12.93%);
}
.menu__self:hover {
background:#a5da7d;
}
.menu__news {
color: #e1b0aa;
width: 117px;
height: 56px;
clip-path: polygon(14.55% 8.14%, 5.02% 48.72%, 13.87% 85.43%, 43.36% 89.92%, 75.31% 85.78%, 96.27% 78.57%, 99% 22%, 77.85% 7.37%, 49.82% 12.93%);
}
.menu__news:hover {
background: #e1b0aa;
}
.menu__blog {
color: #e6ef9b;
width: 92px;
height: 56px;
clip-path: polygon(14.55% 8.14%, 6.73% 45.15%, 10.45% 81.86%, 24.55% 88.14%, 62.43% 84%, 92% 85.71%, 97.91% 47%, 89.82% 5.58%, 40.04% 11.14%);
}
.menu__blog:hover {
background: #e6ef9b;
}
.menu__picture {
color: #21d2b5;
width: 86px;
height: 56px;
clip-path: polygon(15.96% 15.28%, 6.73% 48.72%, 10.45% 81.86%, 38.63% 93.5%, 78.73% 91.14%, 92% 75%, 97.59% 43.43%, 79.96% 12.73%, 49.82% 9.36%);
}
.menu__picture:hover {
background: #21d2b5;
}
.menu__work {
color: #3ac290;
width: 102px;
height: 56px;
clip-path: polygon(14.55% 8.14%, 6.73% 27.29%, 10.45% 81.86%, 24.55% 88.14%, 78.73% 91.14%, 92% 75%, 99% 30.93%, 89.82% 5.58%, 49.82% 12.93%);
}
.menu__work:hover {
background: #3ac290;
}
.menu__goods {
color: #99c43d;
width: 117px;
height: 56px;
clip-path: polygon(14.55% 8.14%, 6.73% 27.29%, 10.45% 81.86%, 24.55% 88.14%, 78.73% 91.14%, 92% 75%, 99% 30.93%, 89.82% 5.58%, 49.82% 12.93%);
}
.menu__goods:hover {
background: #99c43d;
}
.menu__mail {
color: #5b9ccf;
width: 109px;
height: 56px;
clip-path: polygon(14.55% 8.14%, 6.73% 27.29%, 10.45% 81.86%, 24.55% 88.14%, 78.73% 91.14%, 92% 75%, 99% 30.93%, 89.82% 5.58%, 49.82% 12.93%);
}
.menu__mail:hover {
background: #5b9ccf;
}
.menu__link {
color: #d9b377;
width: 104px;
height: 56px;
clip-path: polygon(14.55% 8.14%, 6.73% 27.29%, 10.45% 81.86%, 24.55% 88.14%, 78.73% 91.14%, 92% 75%, 99% 30.93%, 89.82% 5.58%, 49.82% 12.93%);
}
.menu__link:hover {
background: #d9b377;
]
@media only screen and (max-width: 640px){
#container {
display: none;
max-width:90%;
}
.top {
display: none;
flex-direction: column;
}
}