@charset "utf-8";
/* ==============================================================
#リセット
============================================================== */
audio:not([controls]) {
display: none; /* Chrome 44-, iOS 8+, Safari 9+ */
}
button {
overflow: visible; /* Internet Explorer 11- */
-webkit-appearance: button; /* iOS 8+ */
}
details {
display: block; /* Edge 12+, Firefox 40+, Internet Explorer 11-, Windows Phone 8.1+ */
}
html {
-ms-overflow-style: -ms-autohiding-scrollbar; /* Edge 12+, Internet Explorer 11- */
overflow-y: scroll; /* All browsers without overlaying scrollbars */
-webkit-text-size-adjust: 100%; /* iOS 8+ */
}
input {
-webkit-border-radius: 0 /* iOS 8+ */
}
input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;/* iOS 8+ */
}
input[type="number"] {
width: auto;/* Firefox 36+ */
}
input[type="search"] {
-webkit-appearance: textfield;/* Chrome 45+, Safari 9+ */
}
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;/* Chrome 45+, Safari 9+ */
}
main {
display: block; /* Android 4.3-, Internet Explorer 11-, Windows Phone 8.1+ */
}
pre {
overflow: auto; /* Internet Explorer 11- */
}
progress {
display: inline-block; /* Internet Explorer 11-, Windows Phone 8.1+ */
}
small {
font-size: 75%; /* All browsers */
}
summary {
display: block; /* Firefox 40+, Internet Explorer 11-, Windows Phone 8.1+ */
}
svg:not(:root) {
overflow: hidden; /* Internet Explorer 11- */
}
template {
display: none; /* Android 4.3-, Internet Explorer 11-, iOS 7-, Safari 7-, Windows Phone 8.1+ */
}
textarea {
overflow: auto; /* Edge 12+, Internet Explorer 11- */
}
[hidden] {
display: none; /* Internet Explorer 10- */
}
/*
* Universal inheritance
*/
*,
:before,
:after {
box-sizing: inherit;
position: relative;
}
* {
font-size: inherit;
line-height: inherit;
}
:before,
:after {
text-decoration: inherit;
vertical-align: inherit;
}
/*
* Opinionated defaults
*/
/* specify the border style and width of all elements */
*,
:before,
:after {
border-style: solid;
border-width: 0;
}
/* specify the core styles of all elements */
* {
background-repeat: no-repeat;
margin: 0;
padding: 0;
outline: none;
}
/* specify the root styles of the document */
:root {
background-color: #FFF;
box-sizing: border-box;
cursor: default;
/*text-rendering: optimizeLegibility;自動的にカーニングしてくれる的なプロパティ*/
}
/* specify the text decoration of anchors */
a {
text-decoration: none;
}
/* specify the alignment of media elements */
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}
/* specify the background color of form elements */
button,
input,
select,
textarea {
background-color: transparent;
border: none;
}
/* specify the inherited color and font of form elements */
button,
input,
select,
textarea {
color: inherit;
font-family: inherit;
font-style: inherit;
font-weight: inherit;
}
/* specify the minimum height of form elements */
button, [type="button"], [type="date"], [type="datetime"], [type="datetime-local"], [type="email"], [type="month"], [type="number"], [type="password"], [type="reset"], [type="search"], [type="submit"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], select, textarea {
min-height: 1.5em;
}
[role="button"] {
cursor: pointer;
}
/* specify the font family of code elements */
code,
kbd,
pre,
samp {
font-family: roboto, sans-serif;
}
/* specify the standard appearance of selects */
select {
-moz-appearance: none; /* Firefox 40+ */
-webkit-appearance: none /* Chrome 45+ */
}
select::-ms-expand {
display: none;/* Edge 12+, Internet Explorer 11- */
}
select::-ms-value {
color: currentColor;/* Edge 12+, Internet Explorer 11- */
}
/* specify the border styling of tables */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* specify the resizability of textareas */
textarea {
resize: vertical;
}
/* //////////////////////////////////////////////////////////////////
Tips：ハイライト時の背景色と文字色の設定
////////////////////////////////////////////////////////////////// */
::-moz-selection {
background-color: #D2FF4D; /* required when declaring ::selection */
color: #4c2b03;
text-shadow: none;
}
::selection {
background-color: #D2FF4D; /* required when declaring ::selection */
color: #4c2b03;
text-shadow: none;
}
/* specify the progress cursor of updating elements */
[aria-busy="true"] {
cursor: progress;
}
/* specify the pointer cursor of trigger elements */
[aria-controls] {
cursor: pointer;
}
/* specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements */
[aria-disabled] {
cursor: default;
}
/* specify the style of visually hidden yet accessible elements */
[hidden][aria-hidden="false"] {
clip: rect(0 0 0 0);
display: inherit;
position: absolute
}
[hidden][aria-hidden="false"]:focus {
clip: auto;
}
/* ==============================================================
#フォントの設定／Noto Sans Japanese
//Noto Sans Japanese (japanese) http://www.google.com/fonts/earlyaccess//
============================================================== */
/*
@font-face {
font-family: 'Noto Sans Japanese';
font-style: normal;
font-weight: 100;
src: url(http://fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Thin.woff2) format('woff2'),
url(http://fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Thin.woff) format('woff'),
url(http://fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Thin.otf) format('opentype');
}
*/
/*
@font-face {
font-family: 'Noto Sans Japanese';
font-style: normal;
font-weight: 200;
src: url(http://fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Light.woff2) format('woff2'),
url(http://fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Light.woff) format('woff'),
url(http://fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Light.otf) format('opentype');
}
*/
/*@font-face {
font-family: 'Noto Sans Japanese';
font-style: normal;
font-weight: 300;
src: url(http://fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-DemiLight.woff2) format('woff2'), url(http://fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-DemiLight.woff) format('woff'), url(http://fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-DemiLight.otf) format('opentype');
}*/
/*@font-face {
font-family: 'Noto Sans Japanese';
font-style: normal;
font-weight: 400;
src: url(http://fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.woff2) format('woff2'),
url(http://fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.woff) format('woff'),
url(http://fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.otf) format('opentype');
}
*/
/*@font-face {
font-family: 'Noto Sans Japanese';
font-style: normal;
font-weight: bold;
src: url(http://fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Medium.woff2) format('woff2'),
url(http://fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Medium.woff) format('woff'),
url(http://fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Medium.otf) format('opentype');
}*/
/*@font-face {
font-family: 'Noto Sans Japanese';
font-style: normal;
font-weight: 600;
src: url(http://fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.woff2) format('woff2'), url(http://fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.woff) format('woff'), url(http://fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.otf) format('opentype');
}*/
/*
@font-face {
font-family: 'Noto Sans Japanese';
font-style: normal;
font-weight: 900;
src: url(http://fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Black.woff2) format('woff2'),
url(http://fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Black.woff) format('woff'),
url(http://fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Black.otf) format('opentype');
}
*/
/* ==============================================================
#基本設定
============================================================== */
html {
color: #1D1F21;
font-size: 14px;
font-weight: normal;
height: 100%;
width: 100%;
min-width: 320px;
}
@media (min-width: 1024px) {
html {
font-size: 14px;
}
}
body {
font-family: "游ゴシック", "Yu Gothic", YuGothic, 'Noto Sans Japanese', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
font-size: 1rem;
line-height: 1.4;
height: 100%;
width: 100%;
word-break: break-word;
}
hr {
width: 100%;
margin-top: 30px;
margin-bottom: 30px;
border: 0;
border-top: transparent solid 1px;
border-color: #E0E0E0;
}
hr.no {
margin-top: 0;
margin-bottom: 0;
}
/* ==============================================================
#見出し
============================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: bold;
line-height: 1.4;
margin-top: 1rem;
margin-bottom: 1rem;
}
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Tips：.fw-h*は、任意のフォントサイズにしたい時に。
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
h1,
.fw-h1 {
font-size: 24px;
font-size: 1.714285rem; /* 24px */
}
h2,
.fw-h2 {
font-size: 24px;
font-size: 1.714285rem; /* 24px */
}
h3,
.fw-h3 {
font-size: 18px;
font-size: 1.28571rem; /* 18px */
}
h4,
.fw-h4 {
font-size: 16px;
font-size: 1.14285rem; /* 16px */
}
h5,
.fw-h5 {
font-size: 14px;
font-size: 1rem; /* 14px */
}
h6,
.fw-h6 {
font-size: 14px;
font-size: 1rem; /* 14px */
}
@media (min-width: 960px) {
h1,
.fw-h1 {
font-size: 36px;
font-size: 2.25rem; /* 36px */
}
h2,
.fw-h2 {
font-size: 32px;
font-size: 2.286rem; /* 32px */
}
h3,
.fw-h3 {
font-size: 24px;
font-size: 1.5rem; /* 24px */
}
h4,
.fw-h4 {
font-size: 18px;
font-size: 1.28571rem; /* 18px */
}
h5,
.fw-h5 {
font-size: 16px;
font-size: 1rem; /* 16px */
}
h6,
.fw-h6 {
font-size: 14px;
font-size: 0.875rem; /* 14px */
}
}
/* ==============================================================
#本文
============================================================== */
p {
font-size: 13px;
margin-top: 1rem;
margin-bottom: 1rem;
line-height: 1.6;
}
@media (min-width: 1200px) {
p {
font-size: 1rem;
line-height: 1.8;
}
}
.line-through {
}
.small {
}
/* ==============================================================
テキスト
============================================================== */
/* 強調 */
strong {
color: inherit;
font-weight: bold;
}
/* 左寄せ */
.text-left {
text-align: left;
}
/* 右寄せ */
.text-right {
text-align: right;
}
/* センター寄せ */
.text-center {
text-align: center;
}
/* ==============================================================
#リンク
============================================================== */
a {
color: inherit;
}
a:hover {
color: #34d3c4;
}
a:active {
text-decoration: underline;
}
a:focus {
}
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Tips：ページ内リンク時、サイトが固定ヘッダー場合は、ヘッダーの高さをmargin-top、padding-topに設定する
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
a.fw-anchor {
margin-top: -100px;
padding-top: 100px;
}
/* ==============================================================
#リスト
============================================================== */
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Tips：リストアイコンは基本非表示
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
ul,
ol {
margin: 0;
padding: 0;
list-style: none;
}
ul li,
ol li {
margin-bottom: 0.5em;
}
ul li:last-child,
ol li:last-child {
margin-bottom: 0;
}
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Tips：リストアイコンを表示させる場合は以下クラスを付ける
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
ul.fw-list,
ol.fw-list {
list-style: none;
padding-left: 0;
display: table;
}
ul.fw-list li,
ol.fw-list li {
padding-left: 1em;
position: relative;
display: table-row;
}
ol.fw-list li:before {
content: counter(table-ol) ".";
display: table-cell;
width: 1em;
height: 1em;
text-align: right;
}
/* ==============================================================
#画像
============================================================== */
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Tips：固定サイズでない限り、画像には下記クラスを付けること
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
img.responsive {
max-width: 100%;
height: auto;
}
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Tips：imgにdata属性"zoom"を設定すると、画像クリックで拡大表示できるように
例）
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
img[data-action="zoom"] {
cursor: pointer;
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
}
.zoom-img,
.zoom-img-wrap {
position: relative;
z-index: 6666;
-webkit-transition: all 300ms;
-o-transition: all 300ms;
transition: all 300ms;
}
img.zoom-img {
cursor: pointer;
cursor: -webkit-zoom-out;
cursor: -moz-zoom-out;
}
.zoom-overlay {
z-index: 420;
background-color: rgba(255,255,255,0.6);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
filter: "alpha(opacity=0)";
opacity: 0;
-webkit-transition: opacity 300ms;
-o-transition: opacity 300ms;
transition: opacity 300ms;
}
.zoom-overlay-open .zoom-overlay {
filter: "alpha(opacity=100)";
opacity: 1;
}
.zoom-overlay-open,
.zoom-overlay-transitioning {
cursor: default;
}
/* ==============================================================
#バナー
============================================================== */
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Tips：バナーを囲むリンク要素には、とりあえず下記クラスを付けとけば幸せになれる。
例）
![]()
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
.fw-Banner-item {
display: block;
text-align: center;
-webkit-transition: ease-out .2s;
transition: ease-out .2s;
}
.fw-Banner-item:hover {
opacity: 0.7;
}
.fw-Banner-item img {
border-radius: 2px;
overflow: hidden;
}
/* ==============================================================
#テーブル
============================================================== */
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Tips：レシポンシブ未対応。各プロジェクト毎に対応して下さい
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
theader {}
tbody {}
tfooter {}
td,
th {
border: transparent solid 1px;
border-color: #E0E0E0;
padding: 10px;
font-size: 0.875rem;
}
/* ==============================================================
#レイアウト
============================================================== */
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Tips：レイアウトの組み方は下記例を基本にする事
例）
＊コンテンツ幅の設定
＊セルの並びを設定
＊セルの合計値が100になるように