@charset "UTF-8";
/*----------------------------------------------------
読み込み専用のマスターファイルです。
このファイルに直接スタイルを書き込まないでください。
----------------------------------------------------*/
/*--------------------------
setting
--------------------------*/
/*----------------------------------------------------
font-familyの一覧ファイルです。
基本変更することはありません。
----------------------------------------------------*/
/*----------------------------------------------------
Noto Sans
*/
@font-face {
font-family: 'Noto Sans Japanese';
font-style: normal;
font-weight: 200;
src: url("../fonts/noto_sans/NotoSansCJKjp-Light.woff") format("woff"), url("../fonts/noto_sans/NotoSansCJKjp-Light.ttf") format("truetype"); }
@font-face {
font-family: 'Noto Sans Japanese';
font-style: normal;
font-weight: 400;
src: url("../fonts/noto_sans/NotoSansCJKjp-Regular.woff") format("woff"), url("../fonts/noto_sans/NotoSansCJKjp-Regular.ttf") format("truetype"); }
@font-face {
font-family: 'Noto Sans Japanese';
font-style: normal;
font-weight: 700;
src: url("../fonts/noto_sans/NotoSansCJKjp-Bold.woff") format("woff"), url("../fonts/noto_sans/NotoSansCJKjp-Bold.ttf") format("truetype"); }
@font-face {
font-family: 'Noto Sans Japanese';
font-style: normal;
font-weight: 900;
src: url("../fonts/noto_sans/NotoSansCJKjp-Black.woff") format("woff"), url("../fonts/noto_sans/NotoSansCJKjp-Black.ttf") format("truetype"); }
/*----------------------------------------------------
Noto Serif
*/
@font-face {
font-family: 'Noto Serif Japanese';
font-style: normal;
font-weight: 200;
src: url("../fonts/noto_serif/NotoSerifCJKjp-Light.woff") format("woff"), url("../fonts/noto_serif/NotoSerifCJKjp-Light.ttf") format("truetype"); }
@font-face {
font-family: 'Noto Serif Japanese';
font-style: normal;
font-weight: 400;
src: url("../fonts/noto_serif/NotoSerifCJKjp-Regular.woff") format("woff"), url("../fonts/noto_serif/NotoSerifCJKjp-Regular.ttf") format("truetype"); }
@font-face {
font-family: 'Noto Serif Japanese';
font-style: normal;
font-weight: 700;
src: url("../fonts/noto_serif/NotoSerifCJKjp-Bold.woff") format("woff"), url("../fonts/noto_serif/NotoSerifCJKjp-Bold.ttf") format("truetype"); }
@font-face {
font-family: 'Noto Serif Japanese';
font-style: normal;
font-weight: 900;
src: url("../fonts/noto_serif/NotoSerifCJKjp-Black.woff") format("woff"), url("../fonts/noto_serif/NotoSerifCJKjp-Black.ttf") format("truetype"); }
/*----------------------------------------------------
サイトの基本設定のファイルです。
最初の設定以外、基本変更することはありません。
----------------------------------------------------*/
/*--------------------------
フォントの設定
--------------------------*/
/*--------------------------
カラーの設定
--------------------------*/
/*--------------------------
レイアウトの設定
--------------------------*/
/*--------------------------
グリッドのガター
--------------------------*/
/*--------------------------
レスポンシブの設定
--------------------------*/
/*--------------------------
アニメーションの設定
--------------------------*/
/*--------------------------
libs
--------------------------*/
/*----------------------------------------------------
自作関数をまとめたファイルです。
基本的に変更することはありません。
自作関数を追加したい場合、_functions_●●.scssという
別ファイルを生成し、追加してください。
----------------------------------------------------*/
/*----------------------------------------------------
Mixinをまとめたファイルです。
基本的に変更することはありません。
Mixinを追加したい場合、_mixin_●●.scssという
別ファイルを生成し、追加してください。
----------------------------------------------------*/
/*--------------------------
センター配置
--------------------------*/
/*--------------------------
レスポンシブ関連
--------------------------*/
/*----------------------------------------------------
アニメーション
----------------------------------------------------*/
.metronome {
background: red;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 0px 2.5px red;
box-shadow: 0px 0px 2.5px red;
height: 10px;
width: 60px;
position: fixed;
top: 15px;
left: 15px; }
.metronome.active {
animation: rhythm 500ms infinite; }
.metronome.active.metronome-4 {
animation: rhythm 500ms infinite; }
.metronome.active.metronome-2 {
animation: rhythm 1000ms infinite; }
.metronome.active.metronome-8 {
animation: rhythm 250ms infinite; }
@keyframes rhythm {
0% {
opacity: 1; }
50% {
opacity: 0.1; }
75% {
opacity: 0; }
99% {
opacity: 0; }
100% {
opacity: 1; } }
/*--------------------------
utility
--------------------------*/
/*----------------------------------------------------
汎用クラスをまとめたファイルです。
基本的に変更することはありません。
汎用クラスを追加したい場合、_utility_●●.scssという
別ファイルを生成し、追加してください。
命名規則として、クラス名の頭に
u-* (utilityのu)という接頭辞をつけることを推奨します。
----------------------------------------------------*/
.u-align-l {
text-align: left; }
.u-align-c {
text-align: center; }
.u-align-r {
text-align: right; }
/*--------------------------
padding margin 調整用
--------------------------*/
.u-mt120 {
margin-top: 120px !important; }
.u-mb120 {
margin-bottom: 120px !important; }
.u-ml120 {
margin-left: 120px !important; }
.u-mr120 {
margin-right: 120px !important; }
.u-pt120 {
padding-top: 120px !important; }
.u-pb120 {
padding-bottom: 120px !important; }
.u-pl120 {
padding-left: 120px !important; }
.u-pr120 {
padding-right: 120px !important; }
@media screen and (max-width: 1024px) {
.u-mt120-tab {
margin-top: 120px !important; }
.u-mb120-tab {
margin-bottom: 120px !important; }
.u-ml120-tab {
margin-left: 120px !important; }
.u-mr120-tab {
margin-right: 120px !important; }
.u-pt120-tab {
padding-top: 120px !important; }
.u-pb120-tab {
padding-bottom: 120px !important; }
.u-pl120-tab {
padding-left: 120px !important; }
.u-pr120-tab {
padding-right: 120px !important; } }
@media screen and (max-width: 767px) {
.u-mt120-phab {
margin-top: 120px !important; }
.u-mb120-phab {
margin-bottom: 120px !important; }
.u-ml120-phab {
margin-left: 120px !important; }
.u-mr120-phab {
margin-right: 120px !important; }
.u-pt120-phab {
padding-top: 120px !important; }
.u-pb120-phab {
padding-bottom: 120px !important; }
.u-pl120-phab {
padding-left: 120px !important; }
.u-pr120-phab {
padding-right: 120px !important; } }
@media screen and (max-width: 767px) {
.u-mt120-sp {
margin-top: 120px !important; }
.u-mb120-sp {
margin-bottom: 120px !important; }
.u-ml120-sp {
margin-left: 120px !important; }
.u-mr120-sp {
margin-right: 120px !important; }
.u-pt120-sp {
padding-top: 120px !important; }
.u-pb120-sp {
padding-bottom: 120px !important; }
.u-pl120-sp {
padding-left: 120px !important; }
.u-pr120-sp {
padding-right: 120px !important; } }
.u-mt110 {
margin-top: 110px !important; }
.u-mb110 {
margin-bottom: 110px !important; }
.u-ml110 {
margin-left: 110px !important; }
.u-mr110 {
margin-right: 110px !important; }
.u-pt110 {
padding-top: 110px !important; }
.u-pb110 {
padding-bottom: 110px !important; }
.u-pl110 {
padding-left: 110px !important; }
.u-pr110 {
padding-right: 110px !important; }
@media screen and (max-width: 1024px) {
.u-mt110-tab {
margin-top: 110px !important; }
.u-mb110-tab {
margin-bottom: 110px !important; }
.u-ml110-tab {
margin-left: 110px !important; }
.u-mr110-tab {
margin-right: 110px !important; }
.u-pt110-tab {
padding-top: 110px !important; }
.u-pb110-tab {
padding-bottom: 110px !important; }
.u-pl110-tab {
padding-left: 110px !important; }
.u-pr110-tab {
padding-right: 110px !important; } }
@media screen and (max-width: 767px) {
.u-mt110-phab {
margin-top: 110px !important; }
.u-mb110-phab {
margin-bottom: 110px !important; }
.u-ml110-phab {
margin-left: 110px !important; }
.u-mr110-phab {
margin-right: 110px !important; }
.u-pt110-phab {
padding-top: 110px !important; }
.u-pb110-phab {
padding-bottom: 110px !important; }
.u-pl110-phab {
padding-left: 110px !important; }
.u-pr110-phab {
padding-right: 110px !important; } }
@media screen and (max-width: 767px) {
.u-mt110-sp {
margin-top: 110px !important; }
.u-mb110-sp {
margin-bottom: 110px !important; }
.u-ml110-sp {
margin-left: 110px !important; }
.u-mr110-sp {
margin-right: 110px !important; }
.u-pt110-sp {
padding-top: 110px !important; }
.u-pb110-sp {
padding-bottom: 110px !important; }
.u-pl110-sp {
padding-left: 110px !important; }
.u-pr110-sp {
padding-right: 110px !important; } }
.u-mt100 {
margin-top: 100px !important; }
.u-mb100 {
margin-bottom: 100px !important; }
.u-ml100 {
margin-left: 100px !important; }
.u-mr100 {
margin-right: 100px !important; }
.u-pt100 {
padding-top: 100px !important; }
.u-pb100 {
padding-bottom: 100px !important; }
.u-pl100 {
padding-left: 100px !important; }
.u-pr100 {
padding-right: 100px !important; }
@media screen and (max-width: 1024px) {
.u-mt100-tab {
margin-top: 100px !important; }
.u-mb100-tab {
margin-bottom: 100px !important; }
.u-ml100-tab {
margin-left: 100px !important; }
.u-mr100-tab {
margin-right: 100px !important; }
.u-pt100-tab {
padding-top: 100px !important; }
.u-pb100-tab {
padding-bottom: 100px !important; }
.u-pl100-tab {
padding-left: 100px !important; }
.u-pr100-tab {
padding-right: 100px !important; } }
@media screen and (max-width: 767px) {
.u-mt100-phab {
margin-top: 100px !important; }
.u-mb100-phab {
margin-bottom: 100px !important; }
.u-ml100-phab {
margin-left: 100px !important; }
.u-mr100-phab {
margin-right: 100px !important; }
.u-pt100-phab {
padding-top: 100px !important; }
.u-pb100-phab {
padding-bottom: 100px !important; }
.u-pl100-phab {
padding-left: 100px !important; }
.u-pr100-phab {
padding-right: 100px !important; } }
@media screen and (max-width: 767px) {
.u-mt100-sp {
margin-top: 100px !important; }
.u-mb100-sp {
margin-bottom: 100px !important; }
.u-ml100-sp {
margin-left: 100px !important; }
.u-mr100-sp {
margin-right: 100px !important; }
.u-pt100-sp {
padding-top: 100px !important; }
.u-pb100-sp {
padding-bottom: 100px !important; }
.u-pl100-sp {
padding-left: 100px !important; }
.u-pr100-sp {
padding-right: 100px !important; } }
.u-mt90 {
margin-top: 90px !important; }
.u-mb90 {
margin-bottom: 90px !important; }
.u-ml90 {
margin-left: 90px !important; }
.u-mr90 {
margin-right: 90px !important; }
.u-pt90 {
padding-top: 90px !important; }
.u-pb90 {
padding-bottom: 90px !important; }
.u-pl90 {
padding-left: 90px !important; }
.u-pr90 {
padding-right: 90px !important; }
@media screen and (max-width: 1024px) {
.u-mt90-tab {
margin-top: 90px !important; }
.u-mb90-tab {
margin-bottom: 90px !important; }
.u-ml90-tab {
margin-left: 90px !important; }
.u-mr90-tab {
margin-right: 90px !important; }
.u-pt90-tab {
padding-top: 90px !important; }
.u-pb90-tab {
padding-bottom: 90px !important; }
.u-pl90-tab {
padding-left: 90px !important; }
.u-pr90-tab {
padding-right: 90px !important; } }
@media screen and (max-width: 767px) {
.u-mt90-phab {
margin-top: 90px !important; }
.u-mb90-phab {
margin-bottom: 90px !important; }
.u-ml90-phab {
margin-left: 90px !important; }
.u-mr90-phab {
margin-right: 90px !important; }
.u-pt90-phab {
padding-top: 90px !important; }
.u-pb90-phab {
padding-bottom: 90px !important; }
.u-pl90-phab {
padding-left: 90px !important; }
.u-pr90-phab {
padding-right: 90px !important; } }
@media screen and (max-width: 767px) {
.u-mt90-sp {
margin-top: 90px !important; }
.u-mb90-sp {
margin-bottom: 90px !important; }
.u-ml90-sp {
margin-left: 90px !important; }
.u-mr90-sp {
margin-right: 90px !important; }
.u-pt90-sp {
padding-top: 90px !important; }
.u-pb90-sp {
padding-bottom: 90px !important; }
.u-pl90-sp {
padding-left: 90px !important; }
.u-pr90-sp {
padding-right: 90px !important; } }
.u-mt80 {
margin-top: 80px !important; }
.u-mb80 {
margin-bottom: 80px !important; }
.u-ml80 {
margin-left: 80px !important; }
.u-mr80 {
margin-right: 80px !important; }
.u-pt80 {
padding-top: 80px !important; }
.u-pb80 {
padding-bottom: 80px !important; }
.u-pl80 {
padding-left: 80px !important; }
.u-pr80 {
padding-right: 80px !important; }
@media screen and (max-width: 1024px) {
.u-mt80-tab {
margin-top: 80px !important; }
.u-mb80-tab {
margin-bottom: 80px !important; }
.u-ml80-tab {
margin-left: 80px !important; }
.u-mr80-tab {
margin-right: 80px !important; }
.u-pt80-tab {
padding-top: 80px !important; }
.u-pb80-tab {
padding-bottom: 80px !important; }
.u-pl80-tab {
padding-left: 80px !important; }
.u-pr80-tab {
padding-right: 80px !important; } }
@media screen and (max-width: 767px) {
.u-mt80-phab {
margin-top: 80px !important; }
.u-mb80-phab {
margin-bottom: 80px !important; }
.u-ml80-phab {
margin-left: 80px !important; }
.u-mr80-phab {
margin-right: 80px !important; }
.u-pt80-phab {
padding-top: 80px !important; }
.u-pb80-phab {
padding-bottom: 80px !important; }
.u-pl80-phab {
padding-left: 80px !important; }
.u-pr80-phab {
padding-right: 80px !important; } }
@media screen and (max-width: 767px) {
.u-mt80-sp {
margin-top: 80px !important; }
.u-mb80-sp {
margin-bottom: 80px !important; }
.u-ml80-sp {
margin-left: 80px !important; }
.u-mr80-sp {
margin-right: 80px !important; }
.u-pt80-sp {
padding-top: 80px !important; }
.u-pb80-sp {
padding-bottom: 80px !important; }
.u-pl80-sp {
padding-left: 80px !important; }
.u-pr80-sp {
padding-right: 80px !important; } }
.u-mt75 {
margin-top: 75px !important; }
.u-mb75 {
margin-bottom: 75px !important; }
.u-ml75 {
margin-left: 75px !important; }
.u-mr75 {
margin-right: 75px !important; }
.u-pt75 {
padding-top: 75px !important; }
.u-pb75 {
padding-bottom: 75px !important; }
.u-pl75 {
padding-left: 75px !important; }
.u-pr75 {
padding-right: 75px !important; }
@media screen and (max-width: 1024px) {
.u-mt75-tab {
margin-top: 75px !important; }
.u-mb75-tab {
margin-bottom: 75px !important; }
.u-ml75-tab {
margin-left: 75px !important; }
.u-mr75-tab {
margin-right: 75px !important; }
.u-pt75-tab {
padding-top: 75px !important; }
.u-pb75-tab {
padding-bottom: 75px !important; }
.u-pl75-tab {
padding-left: 75px !important; }
.u-pr75-tab {
padding-right: 75px !important; } }
@media screen and (max-width: 767px) {
.u-mt75-phab {
margin-top: 75px !important; }
.u-mb75-phab {
margin-bottom: 75px !important; }
.u-ml75-phab {
margin-left: 75px !important; }
.u-mr75-phab {
margin-right: 75px !important; }
.u-pt75-phab {
padding-top: 75px !important; }
.u-pb75-phab {
padding-bottom: 75px !important; }
.u-pl75-phab {
padding-left: 75px !important; }
.u-pr75-phab {
padding-right: 75px !important; } }
@media screen and (max-width: 767px) {
.u-mt75-sp {
margin-top: 75px !important; }
.u-mb75-sp {
margin-bottom: 75px !important; }
.u-ml75-sp {
margin-left: 75px !important; }
.u-mr75-sp {
margin-right: 75px !important; }
.u-pt75-sp {
padding-top: 75px !important; }
.u-pb75-sp {
padding-bottom: 75px !important; }
.u-pl75-sp {
padding-left: 75px !important; }
.u-pr75-sp {
padding-right: 75px !important; } }
.u-mt70 {
margin-top: 70px !important; }
.u-mb70 {
margin-bottom: 70px !important; }
.u-ml70 {
margin-left: 70px !important; }
.u-mr70 {
margin-right: 70px !important; }
.u-pt70 {
padding-top: 70px !important; }
.u-pb70 {
padding-bottom: 70px !important; }
.u-pl70 {
padding-left: 70px !important; }
.u-pr70 {
padding-right: 70px !important; }
@media screen and (max-width: 1024px) {
.u-mt70-tab {
margin-top: 70px !important; }
.u-mb70-tab {
margin-bottom: 70px !important; }
.u-ml70-tab {
margin-left: 70px !important; }
.u-mr70-tab {
margin-right: 70px !important; }
.u-pt70-tab {
padding-top: 70px !important; }
.u-pb70-tab {
padding-bottom: 70px !important; }
.u-pl70-tab {
padding-left: 70px !important; }
.u-pr70-tab {
padding-right: 70px !important; } }
@media screen and (max-width: 767px) {
.u-mt70-phab {
margin-top: 70px !important; }
.u-mb70-phab {
margin-bottom: 70px !important; }
.u-ml70-phab {
margin-left: 70px !important; }
.u-mr70-phab {
margin-right: 70px !important; }
.u-pt70-phab {
padding-top: 70px !important; }
.u-pb70-phab {
padding-bottom: 70px !important; }
.u-pl70-phab {
padding-left: 70px !important; }
.u-pr70-phab {
padding-right: 70px !important; } }
@media screen and (max-width: 767px) {
.u-mt70-sp {
margin-top: 70px !important; }
.u-mb70-sp {
margin-bottom: 70px !important; }
.u-ml70-sp {
margin-left: 70px !important; }
.u-mr70-sp {
margin-right: 70px !important; }
.u-pt70-sp {
padding-top: 70px !important; }
.u-pb70-sp {
padding-bottom: 70px !important; }
.u-pl70-sp {
padding-left: 70px !important; }
.u-pr70-sp {
padding-right: 70px !important; } }
.u-mt65 {
margin-top: 65px !important; }
.u-mb65 {
margin-bottom: 65px !important; }
.u-ml65 {
margin-left: 65px !important; }
.u-mr65 {
margin-right: 65px !important; }
.u-pt65 {
padding-top: 65px !important; }
.u-pb65 {
padding-bottom: 65px !important; }
.u-pl65 {
padding-left: 65px !important; }
.u-pr65 {
padding-right: 65px !important; }
@media screen and (max-width: 1024px) {
.u-mt65-tab {
margin-top: 65px !important; }
.u-mb65-tab {
margin-bottom: 65px !important; }
.u-ml65-tab {
margin-left: 65px !important; }
.u-mr65-tab {
margin-right: 65px !important; }
.u-pt65-tab {
padding-top: 65px !important; }
.u-pb65-tab {
padding-bottom: 65px !important; }
.u-pl65-tab {
padding-left: 65px !important; }
.u-pr65-tab {
padding-right: 65px !important; } }
@media screen and (max-width: 767px) {
.u-mt65-phab {
margin-top: 65px !important; }
.u-mb65-phab {
margin-bottom: 65px !important; }
.u-ml65-phab {
margin-left: 65px !important; }
.u-mr65-phab {
margin-right: 65px !important; }
.u-pt65-phab {
padding-top: 65px !important; }
.u-pb65-phab {
padding-bottom: 65px !important; }
.u-pl65-phab {
padding-left: 65px !important; }
.u-pr65-phab {
padding-right: 65px !important; } }
@media screen and (max-width: 767px) {
.u-mt65-sp {
margin-top: 65px !important; }
.u-mb65-sp {
margin-bottom: 65px !important; }
.u-ml65-sp {
margin-left: 65px !important; }
.u-mr65-sp {
margin-right: 65px !important; }
.u-pt65-sp {
padding-top: 65px !important; }
.u-pb65-sp {
padding-bottom: 65px !important; }
.u-pl65-sp {
padding-left: 65px !important; }
.u-pr65-sp {
padding-right: 65px !important; } }
.u-mt60 {
margin-top: 60px !important; }
.u-mb60 {
margin-bottom: 60px !important; }
.u-ml60 {
margin-left: 60px !important; }
.u-mr60 {
margin-right: 60px !important; }
.u-pt60 {
padding-top: 60px !important; }
.u-pb60 {
padding-bottom: 60px !important; }
.u-pl60 {
padding-left: 60px !important; }
.u-pr60 {
padding-right: 60px !important; }
@media screen and (max-width: 1024px) {
.u-mt60-tab {
margin-top: 60px !important; }
.u-mb60-tab {
margin-bottom: 60px !important; }
.u-ml60-tab {
margin-left: 60px !important; }
.u-mr60-tab {
margin-right: 60px !important; }
.u-pt60-tab {
padding-top: 60px !important; }
.u-pb60-tab {
padding-bottom: 60px !important; }
.u-pl60-tab {
padding-left: 60px !important; }
.u-pr60-tab {
padding-right: 60px !important; } }
@media screen and (max-width: 767px) {
.u-mt60-phab {
margin-top: 60px !important; }
.u-mb60-phab {
margin-bottom: 60px !important; }
.u-ml60-phab {
margin-left: 60px !important; }
.u-mr60-phab {
margin-right: 60px !important; }
.u-pt60-phab {
padding-top: 60px !important; }
.u-pb60-phab {
padding-bottom: 60px !important; }
.u-pl60-phab {
padding-left: 60px !important; }
.u-pr60-phab {
padding-right: 60px !important; } }
@media screen and (max-width: 767px) {
.u-mt60-sp {
margin-top: 60px !important; }
.u-mb60-sp {
margin-bottom: 60px !important; }
.u-ml60-sp {
margin-left: 60px !important; }
.u-mr60-sp {
margin-right: 60px !important; }
.u-pt60-sp {
padding-top: 60px !important; }
.u-pb60-sp {
padding-bottom: 60px !important; }
.u-pl60-sp {
padding-left: 60px !important; }
.u-pr60-sp {
padding-right: 60px !important; } }
.u-mt55 {
margin-top: 55px !important; }
.u-mb55 {
margin-bottom: 55px !important; }
.u-ml55 {
margin-left: 55px !important; }
.u-mr55 {
margin-right: 55px !important; }
.u-pt55 {
padding-top: 55px !important; }
.u-pb55 {
padding-bottom: 55px !important; }
.u-pl55 {
padding-left: 55px !important; }
.u-pr55 {
padding-right: 55px !important; }
@media screen and (max-width: 1024px) {
.u-mt55-tab {
margin-top: 55px !important; }
.u-mb55-tab {
margin-bottom: 55px !important; }
.u-ml55-tab {
margin-left: 55px !important; }
.u-mr55-tab {
margin-right: 55px !important; }
.u-pt55-tab {
padding-top: 55px !important; }
.u-pb55-tab {
padding-bottom: 55px !important; }
.u-pl55-tab {
padding-left: 55px !important; }
.u-pr55-tab {
padding-right: 55px !important; } }
@media screen and (max-width: 767px) {
.u-mt55-phab {
margin-top: 55px !important; }
.u-mb55-phab {
margin-bottom: 55px !important; }
.u-ml55-phab {
margin-left: 55px !important; }
.u-mr55-phab {
margin-right: 55px !important; }
.u-pt55-phab {
padding-top: 55px !important; }
.u-pb55-phab {
padding-bottom: 55px !important; }
.u-pl55-phab {
padding-left: 55px !important; }
.u-pr55-phab {
padding-right: 55px !important; } }
@media screen and (max-width: 767px) {
.u-mt55-sp {
margin-top: 55px !important; }
.u-mb55-sp {
margin-bottom: 55px !important; }
.u-ml55-sp {
margin-left: 55px !important; }
.u-mr55-sp {
margin-right: 55px !important; }
.u-pt55-sp {
padding-top: 55px !important; }
.u-pb55-sp {
padding-bottom: 55px !important; }
.u-pl55-sp {
padding-left: 55px !important; }
.u-pr55-sp {
padding-right: 55px !important; } }
.u-mt50 {
margin-top: 50px !important; }
.u-mb50 {
margin-bottom: 50px !important; }
.u-ml50 {
margin-left: 50px !important; }
.u-mr50 {
margin-right: 50px !important; }
.u-pt50 {
padding-top: 50px !important; }
.u-pb50 {
padding-bottom: 50px !important; }
.u-pl50 {
padding-left: 50px !important; }
.u-pr50 {
padding-right: 50px !important; }
@media screen and (max-width: 1024px) {
.u-mt50-tab {
margin-top: 50px !important; }
.u-mb50-tab {
margin-bottom: 50px !important; }
.u-ml50-tab {
margin-left: 50px !important; }
.u-mr50-tab {
margin-right: 50px !important; }
.u-pt50-tab {
padding-top: 50px !important; }
.u-pb50-tab {
padding-bottom: 50px !important; }
.u-pl50-tab {
padding-left: 50px !important; }
.u-pr50-tab {
padding-right: 50px !important; } }
@media screen and (max-width: 767px) {
.u-mt50-phab {
margin-top: 50px !important; }
.u-mb50-phab {
margin-bottom: 50px !important; }
.u-ml50-phab {
margin-left: 50px !important; }
.u-mr50-phab {
margin-right: 50px !important; }
.u-pt50-phab {
padding-top: 50px !important; }
.u-pb50-phab {
padding-bottom: 50px !important; }
.u-pl50-phab {
padding-left: 50px !important; }
.u-pr50-phab {
padding-right: 50px !important; } }
@media screen and (max-width: 767px) {
.u-mt50-sp {
margin-top: 50px !important; }
.u-mb50-sp {
margin-bottom: 50px !important; }
.u-ml50-sp {
margin-left: 50px !important; }
.u-mr50-sp {
margin-right: 50px !important; }
.u-pt50-sp {
padding-top: 50px !important; }
.u-pb50-sp {
padding-bottom: 50px !important; }
.u-pl50-sp {
padding-left: 50px !important; }
.u-pr50-sp {
padding-right: 50px !important; } }
.u-mt45 {
margin-top: 45px !important; }
.u-mb45 {
margin-bottom: 45px !important; }
.u-ml45 {
margin-left: 45px !important; }
.u-mr45 {
margin-right: 45px !important; }
.u-pt45 {
padding-top: 45px !important; }
.u-pb45 {
padding-bottom: 45px !important; }
.u-pl45 {
padding-left: 45px !important; }
.u-pr45 {
padding-right: 45px !important; }
@media screen and (max-width: 1024px) {
.u-mt45-tab {
margin-top: 45px !important; }
.u-mb45-tab {
margin-bottom: 45px !important; }
.u-ml45-tab {
margin-left: 45px !important; }
.u-mr45-tab {
margin-right: 45px !important; }
.u-pt45-tab {
padding-top: 45px !important; }
.u-pb45-tab {
padding-bottom: 45px !important; }
.u-pl45-tab {
padding-left: 45px !important; }
.u-pr45-tab {
padding-right: 45px !important; } }
@media screen and (max-width: 767px) {
.u-mt45-phab {
margin-top: 45px !important; }
.u-mb45-phab {
margin-bottom: 45px !important; }
.u-ml45-phab {
margin-left: 45px !important; }
.u-mr45-phab {
margin-right: 45px !important; }
.u-pt45-phab {
padding-top: 45px !important; }
.u-pb45-phab {
padding-bottom: 45px !important; }
.u-pl45-phab {
padding-left: 45px !important; }
.u-pr45-phab {
padding-right: 45px !important; } }
@media screen and (max-width: 767px) {
.u-mt45-sp {
margin-top: 45px !important; }
.u-mb45-sp {
margin-bottom: 45px !important; }
.u-ml45-sp {
margin-left: 45px !important; }
.u-mr45-sp {
margin-right: 45px !important; }
.u-pt45-sp {
padding-top: 45px !important; }
.u-pb45-sp {
padding-bottom: 45px !important; }
.u-pl45-sp {
padding-left: 45px !important; }
.u-pr45-sp {
padding-right: 45px !important; } }
.u-mt40 {
margin-top: 40px !important; }
.u-mb40 {
margin-bottom: 40px !important; }
.u-ml40 {
margin-left: 40px !important; }
.u-mr40 {
margin-right: 40px !important; }
.u-pt40 {
padding-top: 40px !important; }
.u-pb40 {
padding-bottom: 40px !important; }
.u-pl40 {
padding-left: 40px !important; }
.u-pr40 {
padding-right: 40px !important; }
@media screen and (max-width: 1024px) {
.u-mt40-tab {
margin-top: 40px !important; }
.u-mb40-tab {
margin-bottom: 40px !important; }
.u-ml40-tab {
margin-left: 40px !important; }
.u-mr40-tab {
margin-right: 40px !important; }
.u-pt40-tab {
padding-top: 40px !important; }
.u-pb40-tab {
padding-bottom: 40px !important; }
.u-pl40-tab {
padding-left: 40px !important; }
.u-pr40-tab {
padding-right: 40px !important; } }
@media screen and (max-width: 767px) {
.u-mt40-phab {
margin-top: 40px !important; }
.u-mb40-phab {
margin-bottom: 40px !important; }
.u-ml40-phab {
margin-left: 40px !important; }
.u-mr40-phab {
margin-right: 40px !important; }
.u-pt40-phab {
padding-top: 40px !important; }
.u-pb40-phab {
padding-bottom: 40px !important; }
.u-pl40-phab {
padding-left: 40px !important; }
.u-pr40-phab {
padding-right: 40px !important; } }
@media screen and (max-width: 767px) {
.u-mt40-sp {
margin-top: 40px !important; }
.u-mb40-sp {
margin-bottom: 40px !important; }
.u-ml40-sp {
margin-left: 40px !important; }
.u-mr40-sp {
margin-right: 40px !important; }
.u-pt40-sp {
padding-top: 40px !important; }
.u-pb40-sp {
padding-bottom: 40px !important; }
.u-pl40-sp {
padding-left: 40px !important; }
.u-pr40-sp {
padding-right: 40px !important; } }
.u-mt35 {
margin-top: 35px !important; }
.u-mb35 {
margin-bottom: 35px !important; }
.u-ml35 {
margin-left: 35px !important; }
.u-mr35 {
margin-right: 35px !important; }
.u-pt35 {
padding-top: 35px !important; }
.u-pb35 {
padding-bottom: 35px !important; }
.u-pl35 {
padding-left: 35px !important; }
.u-pr35 {
padding-right: 35px !important; }
@media screen and (max-width: 1024px) {
.u-mt35-tab {
margin-top: 35px !important; }
.u-mb35-tab {
margin-bottom: 35px !important; }
.u-ml35-tab {
margin-left: 35px !important; }
.u-mr35-tab {
margin-right: 35px !important; }
.u-pt35-tab {
padding-top: 35px !important; }
.u-pb35-tab {
padding-bottom: 35px !important; }
.u-pl35-tab {
padding-left: 35px !important; }
.u-pr35-tab {
padding-right: 35px !important; } }
@media screen and (max-width: 767px) {
.u-mt35-phab {
margin-top: 35px !important; }
.u-mb35-phab {
margin-bottom: 35px !important; }
.u-ml35-phab {
margin-left: 35px !important; }
.u-mr35-phab {
margin-right: 35px !important; }
.u-pt35-phab {
padding-top: 35px !important; }
.u-pb35-phab {
padding-bottom: 35px !important; }
.u-pl35-phab {
padding-left: 35px !important; }
.u-pr35-phab {
padding-right: 35px !important; } }
@media screen and (max-width: 767px) {
.u-mt35-sp {
margin-top: 35px !important; }
.u-mb35-sp {
margin-bottom: 35px !important; }
.u-ml35-sp {
margin-left: 35px !important; }
.u-mr35-sp {
margin-right: 35px !important; }
.u-pt35-sp {
padding-top: 35px !important; }
.u-pb35-sp {
padding-bottom: 35px !important; }
.u-pl35-sp {
padding-left: 35px !important; }
.u-pr35-sp {
padding-right: 35px !important; } }
.u-mt30 {
margin-top: 30px !important; }
.u-mb30 {
margin-bottom: 30px !important; }
.u-ml30 {
margin-left: 30px !important; }
.u-mr30 {
margin-right: 30px !important; }
.u-pt30 {
padding-top: 30px !important; }
.u-pb30 {
padding-bottom: 30px !important; }
.u-pl30 {
padding-left: 30px !important; }
.u-pr30 {
padding-right: 30px !important; }
@media screen and (max-width: 1024px) {
.u-mt30-tab {
margin-top: 30px !important; }
.u-mb30-tab {
margin-bottom: 30px !important; }
.u-ml30-tab {
margin-left: 30px !important; }
.u-mr30-tab {
margin-right: 30px !important; }
.u-pt30-tab {
padding-top: 30px !important; }
.u-pb30-tab {
padding-bottom: 30px !important; }
.u-pl30-tab {
padding-left: 30px !important; }
.u-pr30-tab {
padding-right: 30px !important; } }
@media screen and (max-width: 767px) {
.u-mt30-phab {
margin-top: 30px !important; }
.u-mb30-phab {
margin-bottom: 30px !important; }
.u-ml30-phab {
margin-left: 30px !important; }
.u-mr30-phab {
margin-right: 30px !important; }
.u-pt30-phab {
padding-top: 30px !important; }
.u-pb30-phab {
padding-bottom: 30px !important; }
.u-pl30-phab {
padding-left: 30px !important; }
.u-pr30-phab {
padding-right: 30px !important; } }
@media screen and (max-width: 767px) {
.u-mt30-sp {
margin-top: 30px !important; }
.u-mb30-sp {
margin-bottom: 30px !important; }
.u-ml30-sp {
margin-left: 30px !important; }
.u-mr30-sp {
margin-right: 30px !important; }
.u-pt30-sp {
padding-top: 30px !important; }
.u-pb30-sp {
padding-bottom: 30px !important; }
.u-pl30-sp {
padding-left: 30px !important; }
.u-pr30-sp {
padding-right: 30px !important; } }
.u-mt25 {
margin-top: 25px !important; }
.u-mb25 {
margin-bottom: 25px !important; }
.u-ml25 {
margin-left: 25px !important; }
.u-mr25 {
margin-right: 25px !important; }
.u-pt25 {
padding-top: 25px !important; }
.u-pb25 {
padding-bottom: 25px !important; }
.u-pl25 {
padding-left: 25px !important; }
.u-pr25 {
padding-right: 25px !important; }
@media screen and (max-width: 1024px) {
.u-mt25-tab {
margin-top: 25px !important; }
.u-mb25-tab {
margin-bottom: 25px !important; }
.u-ml25-tab {
margin-left: 25px !important; }
.u-mr25-tab {
margin-right: 25px !important; }
.u-pt25-tab {
padding-top: 25px !important; }
.u-pb25-tab {
padding-bottom: 25px !important; }
.u-pl25-tab {
padding-left: 25px !important; }
.u-pr25-tab {
padding-right: 25px !important; } }
@media screen and (max-width: 767px) {
.u-mt25-phab {
margin-top: 25px !important; }
.u-mb25-phab {
margin-bottom: 25px !important; }
.u-ml25-phab {
margin-left: 25px !important; }
.u-mr25-phab {
margin-right: 25px !important; }
.u-pt25-phab {
padding-top: 25px !important; }
.u-pb25-phab {
padding-bottom: 25px !important; }
.u-pl25-phab {
padding-left: 25px !important; }
.u-pr25-phab {
padding-right: 25px !important; } }
@media screen and (max-width: 767px) {
.u-mt25-sp {
margin-top: 25px !important; }
.u-mb25-sp {
margin-bottom: 25px !important; }
.u-ml25-sp {
margin-left: 25px !important; }
.u-mr25-sp {
margin-right: 25px !important; }
.u-pt25-sp {
padding-top: 25px !important; }
.u-pb25-sp {
padding-bottom: 25px !important; }
.u-pl25-sp {
padding-left: 25px !important; }
.u-pr25-sp {
padding-right: 25px !important; } }
.u-mt20 {
margin-top: 20px !important; }
.u-mb20 {
margin-bottom: 20px !important; }
.u-ml20 {
margin-left: 20px !important; }
.u-mr20 {
margin-right: 20px !important; }
.u-pt20 {
padding-top: 20px !important; }
.u-pb20 {
padding-bottom: 20px !important; }
.u-pl20 {
padding-left: 20px !important; }
.u-pr20 {
padding-right: 20px !important; }
@media screen and (max-width: 1024px) {
.u-mt20-tab {
margin-top: 20px !important; }
.u-mb20-tab {
margin-bottom: 20px !important; }
.u-ml20-tab {
margin-left: 20px !important; }
.u-mr20-tab {
margin-right: 20px !important; }
.u-pt20-tab {
padding-top: 20px !important; }
.u-pb20-tab {
padding-bottom: 20px !important; }
.u-pl20-tab {
padding-left: 20px !important; }
.u-pr20-tab {
padding-right: 20px !important; } }
@media screen and (max-width: 767px) {
.u-mt20-phab {
margin-top: 20px !important; }
.u-mb20-phab {
margin-bottom: 20px !important; }
.u-ml20-phab {
margin-left: 20px !important; }
.u-mr20-phab {
margin-right: 20px !important; }
.u-pt20-phab {
padding-top: 20px !important; }
.u-pb20-phab {
padding-bottom: 20px !important; }
.u-pl20-phab {
padding-left: 20px !important; }
.u-pr20-phab {
padding-right: 20px !important; } }
@media screen and (max-width: 767px) {
.u-mt20-sp {
margin-top: 20px !important; }
.u-mb20-sp {
margin-bottom: 20px !important; }
.u-ml20-sp {
margin-left: 20px !important; }
.u-mr20-sp {
margin-right: 20px !important; }
.u-pt20-sp {
padding-top: 20px !important; }
.u-pb20-sp {
padding-bottom: 20px !important; }
.u-pl20-sp {
padding-left: 20px !important; }
.u-pr20-sp {
padding-right: 20px !important; } }
.u-mt15 {
margin-top: 15px !important; }
.u-mb15 {
margin-bottom: 15px !important; }
.u-ml15 {
margin-left: 15px !important; }
.u-mr15 {
margin-right: 15px !important; }
.u-pt15 {
padding-top: 15px !important; }
.u-pb15 {
padding-bottom: 15px !important; }
.u-pl15 {
padding-left: 15px !important; }
.u-pr15 {
padding-right: 15px !important; }
@media screen and (max-width: 1024px) {
.u-mt15-tab {
margin-top: 15px !important; }
.u-mb15-tab {
margin-bottom: 15px !important; }
.u-ml15-tab {
margin-left: 15px !important; }
.u-mr15-tab {
margin-right: 15px !important; }
.u-pt15-tab {
padding-top: 15px !important; }
.u-pb15-tab {
padding-bottom: 15px !important; }
.u-pl15-tab {
padding-left: 15px !important; }
.u-pr15-tab {
padding-right: 15px !important; } }
@media screen and (max-width: 767px) {
.u-mt15-phab {
margin-top: 15px !important; }
.u-mb15-phab {
margin-bottom: 15px !important; }
.u-ml15-phab {
margin-left: 15px !important; }
.u-mr15-phab {
margin-right: 15px !important; }
.u-pt15-phab {
padding-top: 15px !important; }
.u-pb15-phab {
padding-bottom: 15px !important; }
.u-pl15-phab {
padding-left: 15px !important; }
.u-pr15-phab {
padding-right: 15px !important; } }
@media screen and (max-width: 767px) {
.u-mt15-sp {
margin-top: 15px !important; }
.u-mb15-sp {
margin-bottom: 15px !important; }
.u-ml15-sp {
margin-left: 15px !important; }
.u-mr15-sp {
margin-right: 15px !important; }
.u-pt15-sp {
padding-top: 15px !important; }
.u-pb15-sp {
padding-bottom: 15px !important; }
.u-pl15-sp {
padding-left: 15px !important; }
.u-pr15-sp {
padding-right: 15px !important; } }
.u-mt10 {
margin-top: 10px !important; }
.u-mb10 {
margin-bottom: 10px !important; }
.u-ml10 {
margin-left: 10px !important; }
.u-mr10 {
margin-right: 10px !important; }
.u-pt10 {
padding-top: 10px !important; }
.u-pb10 {
padding-bottom: 10px !important; }
.u-pl10 {
padding-left: 10px !important; }
.u-pr10 {
padding-right: 10px !important; }
@media screen and (max-width: 1024px) {
.u-mt10-tab {
margin-top: 10px !important; }
.u-mb10-tab {
margin-bottom: 10px !important; }
.u-ml10-tab {
margin-left: 10px !important; }
.u-mr10-tab {
margin-right: 10px !important; }
.u-pt10-tab {
padding-top: 10px !important; }
.u-pb10-tab {
padding-bottom: 10px !important; }
.u-pl10-tab {
padding-left: 10px !important; }
.u-pr10-tab {
padding-right: 10px !important; } }
@media screen and (max-width: 767px) {
.u-mt10-phab {
margin-top: 10px !important; }
.u-mb10-phab {
margin-bottom: 10px !important; }
.u-ml10-phab {
margin-left: 10px !important; }
.u-mr10-phab {
margin-right: 10px !important; }
.u-pt10-phab {
padding-top: 10px !important; }
.u-pb10-phab {
padding-bottom: 10px !important; }
.u-pl10-phab {
padding-left: 10px !important; }
.u-pr10-phab {
padding-right: 10px !important; } }
@media screen and (max-width: 767px) {
.u-mt10-sp {
margin-top: 10px !important; }
.u-mb10-sp {
margin-bottom: 10px !important; }
.u-ml10-sp {
margin-left: 10px !important; }
.u-mr10-sp {
margin-right: 10px !important; }
.u-pt10-sp {
padding-top: 10px !important; }
.u-pb10-sp {
padding-bottom: 10px !important; }
.u-pl10-sp {
padding-left: 10px !important; }
.u-pr10-sp {
padding-right: 10px !important; } }
.u-mt5 {
margin-top: 5px !important; }
.u-mb5 {
margin-bottom: 5px !important; }
.u-ml5 {
margin-left: 5px !important; }
.u-mr5 {
margin-right: 5px !important; }
.u-pt5 {
padding-top: 5px !important; }
.u-pb5 {
padding-bottom: 5px !important; }
.u-pl5 {
padding-left: 5px !important; }
.u-pr5 {
padding-right: 5px !important; }
@media screen and (max-width: 1024px) {
.u-mt5-tab {
margin-top: 5px !important; }
.u-mb5-tab {
margin-bottom: 5px !important; }
.u-ml5-tab {
margin-left: 5px !important; }
.u-mr5-tab {
margin-right: 5px !important; }
.u-pt5-tab {
padding-top: 5px !important; }
.u-pb5-tab {
padding-bottom: 5px !important; }
.u-pl5-tab {
padding-left: 5px !important; }
.u-pr5-tab {
padding-right: 5px !important; } }
@media screen and (max-width: 767px) {
.u-mt5-phab {
margin-top: 5px !important; }
.u-mb5-phab {
margin-bottom: 5px !important; }
.u-ml5-phab {
margin-left: 5px !important; }
.u-mr5-phab {
margin-right: 5px !important; }
.u-pt5-phab {
padding-top: 5px !important; }
.u-pb5-phab {
padding-bottom: 5px !important; }
.u-pl5-phab {
padding-left: 5px !important; }
.u-pr5-phab {
padding-right: 5px !important; } }
@media screen and (max-width: 767px) {
.u-mt5-sp {
margin-top: 5px !important; }
.u-mb5-sp {
margin-bottom: 5px !important; }
.u-ml5-sp {
margin-left: 5px !important; }
.u-mr5-sp {
margin-right: 5px !important; }
.u-pt5-sp {
padding-top: 5px !important; }
.u-pb5-sp {
padding-bottom: 5px !important; }
.u-pl5-sp {
padding-left: 5px !important; }
.u-pr5-sp {
padding-right: 5px !important; } }
.u-mt0 {
margin-top: 0px !important; }
.u-mb0 {
margin-bottom: 0px !important; }
.u-ml0 {
margin-left: 0px !important; }
.u-mr0 {
margin-right: 0px !important; }
.u-pt0 {
padding-top: 0px !important; }
.u-pb0 {
padding-bottom: 0px !important; }
.u-pl0 {
padding-left: 0px !important; }
.u-pr0 {
padding-right: 0px !important; }
@media screen and (max-width: 1024px) {
.u-mt0-tab {
margin-top: 0px !important; }
.u-mb0-tab {
margin-bottom: 0px !important; }
.u-ml0-tab {
margin-left: 0px !important; }
.u-mr0-tab {
margin-right: 0px !important; }
.u-pt0-tab {
padding-top: 0px !important; }
.u-pb0-tab {
padding-bottom: 0px !important; }
.u-pl0-tab {
padding-left: 0px !important; }
.u-pr0-tab {
padding-right: 0px !important; } }
@media screen and (max-width: 767px) {
.u-mt0-phab {
margin-top: 0px !important; }
.u-mb0-phab {
margin-bottom: 0px !important; }
.u-ml0-phab {
margin-left: 0px !important; }
.u-mr0-phab {
margin-right: 0px !important; }
.u-pt0-phab {
padding-top: 0px !important; }
.u-pb0-phab {
padding-bottom: 0px !important; }
.u-pl0-phab {
padding-left: 0px !important; }
.u-pr0-phab {
padding-right: 0px !important; } }
@media screen and (max-width: 767px) {
.u-mt0-sp {
margin-top: 0px !important; }
.u-mb0-sp {
margin-bottom: 0px !important; }
.u-ml0-sp {
margin-left: 0px !important; }
.u-mr0-sp {
margin-right: 0px !important; }
.u-pt0-sp {
padding-top: 0px !important; }
.u-pb0-sp {
padding-bottom: 0px !important; }
.u-pl0-sp {
padding-left: 0px !important; }
.u-pr0-sp {
padding-right: 0px !important; } }
/*--------------------------
Base
--------------------------*/
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html, body, div, span, object, iframe, h1, 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, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent; }
body {
line-height: 1; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, 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;
font-size: 100%;
vertical-align: baseline;
background: transparent; }
/* change colours to suit your needs */
ins {
background-color: #ff9;
color: #000;
text-decoration: none; }
/* change colours to suit your needs */
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;
cursor: help; }
table {
border-collapse: collapse;
border-spacing: 0; }
/* change border colour to suit your needs */
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #cccccc;
margin: 1em 0;
padding: 0; }
input, select {
vertical-align: middle; }
/*----------------------------------------------------
リセットCSS調整ファイルです。
リセットCSSを調整、カスタマイズしたい場合に編集します。
----------------------------------------------------*/
/* ====================================================
EXAMPLES FONT-SIZE
------------------
77% = 9px
85% = 10px
93% = 11px
100% = 12px
108% = 13px
116% = 14px
124% = 15px
131% = 16px
139% = 17px
147% = 18px
154% = 19px
162% = 20px
170% = 21px
177% = 22px
185% = 23px
193% = 24px
200% = 25px
---------------
====================================================*/
html {
font-size: 62.5%; }
@media screen and (max-width: 1024px) {
html {
font-size: 52.5%; } }
body {
*font-size: small;
*font: x-small;
_font-size: 14px; }
ul, li {
list-style: none; }
a {
color: inherit;
text-decoration: none; }
/*----------------------------------------------------
初期設定を行うファイルです。
デフォルトの設定を行う時以外、基本的に編集することはありません。
----------------------------------------------------*/
body {
background: #fff;
color: #333;
font-size: 16px;
font-size: 1.6rem;
font-family: "Noto Serif Japanese", "游明朝", "Yu Mincho", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;
line-height: 1.5; }
.wrap {
overflow: hidden;
position: relative; }
img {
max-height: 100%;
max-width: 100%; }
/*--------------------------
Layout
--------------------------*/
/*----------------------------------------------------
レイアウト設定のファイルです。
グリッドレイアウトのスタイルをまとめています。
基本的には編集することはありません。
命名規則として、クラス名の頭に
l-* (Layoutのl)という接頭辞をつけることを推奨します。
----------------------------------------------------*/
/*--------------------------
グリッドシステム
--------------------------*/
.l-grid:after {
clear: both;
content: '';
display: block; }
.l-grid_item {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;
width: 16.667%; }
.l-grid_item-1 {
width: 8.33%; }
.l-grid_item-2 {
width: 16.667%; }
.l-grid_item-3 {
width: 25%; }
.l-grid_item-4 {
width: 33.333%; }
.l-grid_item-5 {
width: 41.666%; }
.l-grid_item-6 {
width: 50%; }
.l-grid_item-7 {
width: 58.333%; }
.l-grid_item-8 {
width: 66.666%; }
.l-grid_item-9 {
width: 75%; }
.l-grid_item-10 {
width: 83.33%; }
.l-grid_item-11 {
width: 91.666%; }
.l-grid_item-12 {
width: 100%; }
@media screen and (max-width: 1024px) {
.l-grid_item-1-tab {
width: 8.33%; } }
@media screen and (max-width: 1024px) {
.l-grid_item-2-tab {
width: 16.667%; } }
@media screen and (max-width: 1024px) {
.l-grid_item-3-tab {
width: 25%; } }
@media screen and (max-width: 1024px) {
.l-grid_item-4-tab {
width: 33.333%; } }
@media screen and (max-width: 1024px) {
.l-grid_item-5-tab {
width: 41.666%; } }
@media screen and (max-width: 1024px) {
.l-grid_item-6-tab {
width: 50%; } }
@media screen and (max-width: 1024px) {
.l-grid_item-7-tab {
width: 58.333%; } }
@media screen and (max-width: 1024px) {
.l-grid_item-8-tab {
width: 66.666%; } }
@media screen and (max-width: 1024px) {
.l-grid_item-9-tab {
width: 75%; } }
@media screen and (max-width: 1024px) {
.l-grid_item-10-tab {
width: 83.33%; } }
@media screen and (max-width: 1024px) {
.l-grid_item-11-tab {
width: 91.666%; } }
@media screen and (max-width: 1024px) {
.l-grid_item-12-tab {
width: 100%; } }
@media screen and (max-width: 767px) {
.l-grid_item-1-phab {
width: 8.33%; } }
@media screen and (max-width: 767px) {
.l-grid_item-2-phab {
width: 16.667%; } }
@media screen and (max-width: 767px) {
.l-grid_item-3-phab {
width: 25%; } }
@media screen and (max-width: 767px) {
.l-grid_item-4-phab {
width: 33.333%; } }
@media screen and (max-width: 767px) {
.l-grid_item-5-phab {
width: 41.666%; } }
@media screen and (max-width: 767px) {
.l-grid_item-6-phab {
width: 50%; } }
@media screen and (max-width: 767px) {
.l-grid_item-7-phab {
width: 58.333%; } }
@media screen and (max-width: 767px) {
.l-grid_item-8-phab {
width: 66.666%; } }
@media screen and (max-width: 767px) {
.l-grid_item-9-phab {
width: 75%; } }
@media screen and (max-width: 767px) {
.l-grid_item-10-phab {
width: 83.33%; } }
@media screen and (max-width: 767px) {
.l-grid_item-11-phab {
width: 91.666%; } }
@media screen and (max-width: 767px) {
.l-grid_item-12-phab {
width: 100%; } }
@media screen and (max-width: 767px) {
.l-grid_item-1-sp {
width: 8.33%; } }
@media screen and (max-width: 767px) {
.l-grid_item-2-sp {
width: 16.667%; } }
@media screen and (max-width: 767px) {
.l-grid_item-3-sp {
width: 25%; } }
@media screen and (max-width: 767px) {
.l-grid_item-4-sp {
width: 33.333%; } }
@media screen and (max-width: 767px) {
.l-grid_item-5-sp {
width: 41.666%; } }
@media screen and (max-width: 767px) {
.l-grid_item-6-sp {
width: 50%; } }
@media screen and (max-width: 767px) {
.l-grid_item-7-sp {
width: 58.333%; } }
@media screen and (max-width: 767px) {
.l-grid_item-8-sp {
width: 66.666%; } }
@media screen and (max-width: 767px) {
.l-grid_item-9-sp {
width: 75%; } }
@media screen and (max-width: 767px) {
.l-grid_item-10-sp {
width: 83.33%; } }
@media screen and (max-width: 767px) {
.l-grid_item-11-sp {
width: 91.666%; } }
@media screen and (max-width: 767px) {
.l-grid_item-12-sp {
width: 100%; } }
.l-grid.l-gutter-s {
margin-left: -5px;
margin-right: -5px; }
.l-grid.l-gutter-s > .l-grid_item {
margin-bottom: 10px;
padding-left: 5px;
padding-right: 5px; }
.l-grid.l-gutter-m {
margin-left: -10px;
margin-right: -10px; }
.l-grid.l-gutter-m > .l-grid_item {
margin-bottom: 20px;
padding-left: 10px;
padding-right: 10px; }
.l-grid.l-gutter-l {
margin-left: -20px;
margin-right: -20px; }
.l-grid.l-gutter-l > .l-grid_item {
margin-bottom: 40px;
padding-left: 20px;
padding-right: 20px; }
@media screen and (max-width: 1024px) {
.l-grid.l-gutter-s-tab {
margin-left: -5px;
margin-right: -5px; }
.l-grid.l-gutter-s-tab > .l-grid_item {
margin-bottom: 10px;
padding-left: 5px;
padding-right: 5px; } }
@media screen and (max-width: 1024px) {
.l-grid.l-gutter-m-tab {
margin-left: -10px;
margin-right: -10px; }
.l-grid.l-gutter-m-tab > .l-grid_item {
margin-bottom: 20px;
padding-left: 10px;
padding-right: 10px; } }
@media screen and (max-width: 1024px) {
.l-grid.l-gutter-l-tab {
margin-left: -20px;
margin-right: -20px; }
.l-grid.l-gutter-l-tab > .l-grid_item {
margin-bottom: 40px;
padding-left: 20px;
padding-right: 20px; } }
@media screen and (max-width: 767px) {
.l-grid.l-gutter-s-phab {
margin-left: -5px;
margin-right: -5px; }
.l-grid.l-gutter-s-phab > .l-grid_item {
margin-bottom: 10px;
padding-left: 5px;
padding-right: 5px; } }
@media screen and (max-width: 767px) {
.l-grid.l-gutter-m-phab {
margin-left: -10px;
margin-right: -10px; }
.l-grid.l-gutter-m-phab > .l-grid_item {
margin-bottom: 20px;
padding-left: 10px;
padding-right: 10px; } }
@media screen and (max-width: 767px) {
.l-grid.l-gutter-l-phab {
margin-left: -20px;
margin-right: -20px; }
.l-grid.l-gutter-l-phab > .l-grid_item {
margin-bottom: 40px;
padding-left: 20px;
padding-right: 20px; } }
@media screen and (max-width: 767px) {
.l-grid.l-gutter-s-sp {
margin-left: -5px;
margin-right: -5px; }
.l-grid.l-gutter-s-sp > .l-grid_item {
margin-bottom: 10px;
padding-left: 5px;
padding-right: 5px; } }
@media screen and (max-width: 767px) {
.l-grid.l-gutter-m-sp {
margin-left: -10px;
margin-right: -10px; }
.l-grid.l-gutter-m-sp > .l-grid_item {
margin-bottom: 20px;
padding-left: 10px;
padding-right: 10px; } }
@media screen and (max-width: 767px) {
.l-grid.l-gutter-l-sp {
margin-left: -20px;
margin-right: -20px; }
.l-grid.l-gutter-l-sp > .l-grid_item {
margin-bottom: 40px;
padding-left: 20px;
padding-right: 20px; } }
@media screen and (max-width: 767px) {
.l-grid.l-gutter-0-sp {
margin-left: 0px;
margin-right: 0px; }
.l-grid.l-gutter-0-sp > .l-grid_item {
margin-bottom: 0px;
padding-left: 0px;
padding-right: 0px; } }
.l-grid.l-grid-mb0 > .l-grid_item {
margin-bottom: 0 !important; }
/*----------------------------------------------------
レイアウト設定のファイルです。
レイアウトに関する汎用性の高いスタイルをまとめています。
基本的には編集することはありません。
命名規則として、クラス名の頭に
l-* (Layoutのl)という接頭辞をつけることを推奨します。
----------------------------------------------------*/
.l-inner {
margin: 0 auto;
width: 1000px; }
@media screen and (max-width: 1024px) {
.l-inner {
width: 95%; } }
@media screen and (max-width: 767px) {
.l-inner {
max-width: 480px; } }
.l-pos-relative {
position: relative; }
.l-pos-center {
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%; }
.l-clearfix:after {
clear: both;
content: "";
display: block; }
.l-left {
float: left; }
.l-right {
float: right; }
/*----------------------------------------------------
レイアウト設定のファイルです。
ヘッダー、フッター、メインコンテンツ、サイドバーなどの構成の大枠や
レイアウトに関するスタイルを設定します。
命名規則として、クラス名の頭に
l-* (Layoutのl)という接頭辞をつけることを推奨します。
----------------------------------------------------*/
/*--------------------------
module
--------------------------*/
/*----------------------------------------------------
全サイト共通の汎用的なモジュールの設定ファイルです。
----------------------------------------------------*/
/* スマートフォンパーツ */
.menuBtn {
border: 2px solid #000;
display: inline-block;
padding: 10px 8px; }
.menuBtn .menuBtn_trigger {
display: block;
transition: all 0.4s;
box-sizing: border-box;
position: relative;
width: 30px;
height: 24px; }
.menuBtn .menuBtn_trigger span {
display: inline-block;
transition: all 0.4s;
box-sizing: border-box;
position: absolute;
left: 0;
width: 100%;
height: 2px;
background-color: #000;
-webkit-border-radius: 2px;
border-radius: 2px; }
.menuBtn .menuBtn_trigger span:nth-of-type(1) {
top: 0; }
.menuBtn .menuBtn_trigger span:nth-of-type(2) {
top: 11px; }
.menuBtn .menuBtn_trigger span:nth-of-type(3) {
bottom: 0; }
.menuBtn .menuBtn_trigger.active span:nth-of-type(1) {
-webkit-transform: translateY(11px) rotate(-45deg);
transform: translateY(11px) rotate(-45deg); }
.menuBtn .menuBtn_trigger.active span:nth-of-type(2) {
left: 50%;
opacity: 0;
-webkit-animation: active-menu-bar02 0.8s forwards;
animation: active-menu-bar02 0.8s forwards; }
.menuBtn .menuBtn_trigger.active span:nth-of-type(3) {
-webkit-transform: translateY(-11px) rotate(45deg);
transform: translateY(-11px) rotate(45deg); }
.menuBtn .menuBtn_txt {
color: #000;
font-size: 10px;
margin-top: 1px; }
@-webkit-keyframes active-menu-bar02 {
100% {
height: 0; } }
@keyframes active-menu-bar02 {
100% {
height: 0; } }
.spMenu {
display: none;
width: 100%;
z-index: 999;
position: fixed;
top: 105px; }
.spMenu .spMenu_inner {
background: #fff;
max-width: 420px;
margin-left: auto;
height: 400px; }
@media screen and (max-width: 767px) {
.spMenu {
top: 80px; } }
/* 汎用パーツ */
.annotationText {
font-size: 14px; }
.imgBox {
margin-bottom: 15px;
width: 420px; }
.imgBox .imgBox_inner {
overflow: hidden;
position: relative;
height: 315px; }
.imgBox .imgBox_caption {
display: block;
margin: 5px 0; }
.imgBox .imgBox_img {
position: absolute;
top: 50%;
left: 50%;
margin-top: -210px;
margin-left: -210px;
max-height: 640px;
width: 100%; }
@media screen and (max-width: 1024px) {
.imgBox .imgBox_inner {
height: auto;
padding-bottom: 75%; }
.imgBox .imgBox_img {
margin-top: 0;
margin-left: 0;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); } }
@media screen and (max-width: 767px) {
.imgBox {
margin-bottom: 30px; }
.imgBox .imgBox_inner {
padding-bottom: 56.25%; } }
.pagetop {
cursor: pointer;
position: fixed;
bottom: 30px;
right: 30px;
z-index: 999;
transition: 0.45s; }
.pagetop:hover {
transition: 0.15s;
opacity: 0.5; }
/*----------------------------------------------------
大枠のモジュール（header, footer）の設定ファイルです。
----------------------------------------------------*/
.footer {
background: url(../../images/footer_bg.png) no-repeat bottom right; }
.footer .footer_inner {
margin: 0 auto;
padding: 40px 0;
width: 90%; }
.footer .footer_logo {
margin-bottom: 5px; }
.footer .footer_copy {
font-size: 13px;
font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; }
@media screen and (max-width: 767px) {
.footer {
background: url(../../images/footer_bg_sp.png) no-repeat bottom center;
background-size: 100%; }
.footer .footer_inner {
text-align: center;
padding-bottom: 35%; }
.footer .footer_copy {
font-size: 11px; } }
.mv {
background: #E9E5DC url("../../images/mv_bg.jpg") no-repeat center center;
background-size: cover;
text-align: center; }
.mv .mv_inner {
padding: 80px 0; }
.mv .mv_tit {
margin-bottom: 80px; }
.mv .mv_scroll {
margin-bottom: 20px; }
.mv .mv_btns {
margin: 0 auto;
max-width: 600px; }
@media screen and (max-width: 1024px) {
.mv {
background: url("../../images/mv_bg.jpg") no-repeat center right;
background-size: cover; } }
@media screen and (max-width: 767px) {
.mv {
background: url("../../images/mv_bg_sp.jpg") no-repeat top right;
background-size: cover; }
.mv .mv_inner {
padding: 80px 0 10px;
margin: 0 auto;
width: 95%; }
.mv .mv_tit {
margin: 0 auto 60px;
width: 85%; } }
/*----------------------------------------------------
アニメーション
----------------------------------------------------*/
.mv .mv_tit {
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
opacity: 0;
transition: 2s; }
.mv .mv_btns {
opacity: 0;
transition: 1s 1s; }
.mv.active .mv_tit {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1; }
.mv.active .mv_btns {
opacity: 1; }
/*----------------------------------------------------
汎用的なモジュールの設定ファイルです。
再利用可能なモジュールはここで設定してください。
----------------------------------------------------*/
.Button {
background: rgba(255, 255, 255, 0);
border: 1px solid #524339;
color: #524339;
display: inline-block;
padding: 15px 0;
position: relative;
width: 100%;
transition: .5s; }
.Button .Button_inner {
display: inline-block;
position: relative; }
.Button .Button_inner:after {
content: url("../../images/btn_arrow01.png");
position: absolute;
top: 0;
left: -12px; }
.Button:hover {
background: rgba(255, 255, 255, 0.5); }
@media screen and (max-width: 767px) {
.Button {
font-size: 13px; } }
@media screen and (max-width: 767px) {
.Button.Button-history {
line-height: 3; } }
.Button.Button-thought {
border: 1px solid #455740;
color: #455740; }
.Button.Button-thought .Button_inner:after {
content: url("../../images/btn_arrow02.png"); }
@media screen and (max-width: 767px) {
.Button.Button-thought .Button_inner span {
display: inline-block;
text-align: left; } }
.HeadingA span {
background: #584234;
color: #fff;
display: inline-block;
font-size: 24px;
font-weight: normal;
padding: 15px 40px; }
.HeadingA.HeadingA-green span {
background: #455740; }
@media screen and (max-width: 767px) {
.HeadingA span {
font-size: 18px;
padding: 5px 20px; } }
.HeadingB {
color: #604c3f;
font-size: 20px; }
@media screen and (max-width: 767px) {
.HeadingB {
font-size: 16px; } }
/*----------------------------------------------------
見出し アニメーション
----------------------------------------------------*/
.a-headingA {
opacity: 0;
transition: 0.65s; }
.a-headingA.active {
opacity: 1; }
/*----------------------------------------------------
anim-Txts
*/
/*----------------------------------------------------
使用方法：
テ
キ
ス
ト
----------------------------------------------------*/
.a-anim-Txts .anim-Txt {
display: inline-block;
opacity: 0;
-webkit-transform: translate(60px, 0) skewX(-30deg) scale(1, 1);
-moz-transform: translate(60px, 0) skewX(-30deg) scale(1, 1);
transform: translate(60px, 0) skewX(-30deg) scale(1, 1); }
.a-anim-Txts .anim-Txt.anim-Txt-0 {
transition: 0.65s 0s; }
.a-anim-Txts .anim-Txt.anim-Txt-1 {
transition: 0.65s 0.0625s; }
.a-anim-Txts .anim-Txt.anim-Txt-2 {
transition: 0.65s 0.125s; }
.a-anim-Txts .anim-Txt.anim-Txt-3 {
transition: 0.65s 0.1875s; }
.a-anim-Txts .anim-Txt.anim-Txt-4 {
transition: 0.65s 0.25s; }
.a-anim-Txts .anim-Txt.anim-Txt-5 {
transition: 0.65s 0.3125s; }
.a-anim-Txts .anim-Txt.anim-Txt-6 {
transition: 0.65s 0.375s; }
.a-anim-Txts .anim-Txt.anim-Txt-7 {
transition: 0.65s 0.4375s; }
.a-anim-Txts .anim-Txt.anim-Txt-8 {
transition: 0.65s 0.5s; }
.a-anim-Txts .anim-Txt.anim-Txt-9 {
transition: 0.65s 0.5625s; }
.a-anim-Txts .anim-Txt.anim-Txt-10 {
transition: 0.65s 0.625s; }
.a-anim-Txts .anim-Txt.anim-Txt-11 {
transition: 0.65s 0.6875s; }
.a-anim-Txts .anim-Txt.anim-Txt-12 {
transition: 0.65s 0.75s; }
.a-anim-Txts .anim-Txt.anim-Txt-13 {
transition: 0.65s 0.8125s; }
.a-anim-Txts .anim-Txt.anim-Txt-14 {
transition: 0.65s 0.875s; }
.a-anim-Txts .anim-Txt.anim-Txt-15 {
transition: 0.65s 0.9375s; }
.a-anim-Txts .anim-Txt.anim-Txt-16 {
transition: 0.65s 1s; }
.a-anim-Txts .anim-Txt.anim-Txt-17 {
transition: 0.65s 1.0625s; }
.a-anim-Txts .anim-Txt.anim-Txt-18 {
transition: 0.65s 1.125s; }
.a-anim-Txts .anim-Txt.anim-Txt-19 {
transition: 0.65s 1.1875s; }
.a-anim-Txts .anim-Txt.anim-Txt-20 {
transition: 0.65s 1.25s; }
.a-anim-Txts .anim-Txt.anim-Txt-21 {
transition: 0.65s 1.3125s; }
.a-anim-Txts .anim-Txt.anim-Txt-22 {
transition: 0.65s 1.375s; }
.a-anim-Txts .anim-Txt.anim-Txt-23 {
transition: 0.65s 1.4375s; }
.a-anim-Txts .anim-Txt.anim-Txt-24 {
transition: 0.65s 1.5s; }
.a-anim-Txts .anim-Txt.anim-Txt-25 {
transition: 0.65s 1.5625s; }
.a-anim-Txts .anim-Txt.anim-Txt-26 {
transition: 0.65s 1.625s; }
.a-anim-Txts .anim-Txt.anim-Txt-27 {
transition: 0.65s 1.6875s; }
.a-anim-Txts .anim-Txt.anim-Txt-28 {
transition: 0.65s 1.75s; }
.a-anim-Txts .anim-Txt.anim-Txt-29 {
transition: 0.65s 1.8125s; }
.a-anim-Txts .anim-Txt.anim-Txt-30 {
transition: 0.65s 1.875s; }
.a-anim-Txts .anim-Txt.anim-Txt-31 {
transition: 0.65s 1.9375s; }
.a-anim-Txts .anim-Txt.anim-Txt-32 {
transition: 0.65s 2s; }
.a-anim-Txts .anim-Txt.anim-Txt-33 {
transition: 0.65s 2.0625s; }
.a-anim-Txts .anim-Txt.anim-Txt-34 {
transition: 0.65s 2.125s; }
.a-anim-Txts .anim-Txt.anim-Txt-35 {
transition: 0.65s 2.1875s; }
.a-anim-Txts .anim-Txt.anim-Txt-36 {
transition: 0.65s 2.25s; }
.a-anim-Txts .anim-Txt.anim-Txt-37 {
transition: 0.65s 2.3125s; }
.a-anim-Txts .anim-Txt.anim-Txt-38 {
transition: 0.65s 2.375s; }
.a-anim-Txts .anim-Txt.anim-Txt-39 {
transition: 0.65s 2.4375s; }
.a-anim-Txts .anim-Txt.anim-Txt-40 {
transition: 0.65s 2.5s; }
.a-anim-Txts .anim-Txt.anim-Txt-41 {
transition: 0.65s 2.5625s; }
.a-anim-Txts .anim-Txt.anim-Txt-42 {
transition: 0.65s 2.625s; }
.a-anim-Txts .anim-Txt.anim-Txt-43 {
transition: 0.65s 2.6875s; }
.a-anim-Txts .anim-Txt.anim-Txt-44 {
transition: 0.65s 2.75s; }
.a-anim-Txts .anim-Txt.anim-Txt-45 {
transition: 0.65s 2.8125s; }
.a-anim-Txts .anim-Txt.anim-Txt-46 {
transition: 0.65s 2.875s; }
.a-anim-Txts .anim-Txt.anim-Txt-47 {
transition: 0.65s 2.9375s; }
.a-anim-Txts .anim-Txt.anim-Txt-48 {
transition: 0.65s 3s; }
.a-anim-Txts .anim-Txt.anim-Txt-49 {
transition: 0.65s 3.0625s; }
.a-anim-Txts .anim-Txt.anim-Txt-50 {
transition: 0.65s 3.125s; }
.a-anim-Txts .anim-Txt.anim-Txt-51 {
transition: 0.65s 3.1875s; }
.a-anim-Txts .anim-Txt.anim-Txt-52 {
transition: 0.65s 3.25s; }
.a-anim-Txts .anim-Txt.anim-Txt-53 {
transition: 0.65s 3.3125s; }
.a-anim-Txts .anim-Txt.anim-Txt-54 {
transition: 0.65s 3.375s; }
.a-anim-Txts .anim-Txt.anim-Txt-55 {
transition: 0.65s 3.4375s; }
.a-anim-Txts .anim-Txt.anim-Txt-56 {
transition: 0.65s 3.5s; }
.a-anim-Txts .anim-Txt.anim-Txt-57 {
transition: 0.65s 3.5625s; }
.a-anim-Txts .anim-Txt.anim-Txt-58 {
transition: 0.65s 3.625s; }
.a-anim-Txts .anim-Txt.anim-Txt-59 {
transition: 0.65s 3.6875s; }
.a-anim-Txts .anim-Txt.anim-Txt-60 {
transition: 0.65s 3.75s; }
.a-anim-Txts.active .anim-Txt {
opacity: 1;
-webkit-transform: translate(0, 0) skewX(0deg) scale(1, 1);
-moz-transform: translate(0, 0) skewX(0deg) scale(1, 1);
transform: translate(0, 0) skewX(0deg) scale(1, 1); }
/*----------------------------------------------------
slideBoxA
*/
/*----------------------------------------------------
使用方法：
----------------------------------------------------*/
.a-slideBoxA {
overflow: hidden;
opacity: 1;
position: relative;
-webkit-transform: scale(1, 0);
-moz-transform: scale(1, 0);
transform: scale(1, 0);
-webkit-transform-origin: top center;
-moz-transform-origin: top center;
transform-origin: top center;
transition: 0.65s; }
.a-slideBoxA:after {
background: #bbb;
/* Old browsers */
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
opacity: 1;
transition: 0.65s 0.65s; }
.a-slideBoxA img {
transition: 0.65s 0.65s;
-webkit-transform: scale(1.5, 1.5);
-moz-transform: scale(1.5, 1.5);
transform: scale(1.5, 1.5);
-webkit-transform-origin: center center;
-moz-transform-origin: center center;
transform-origin: center center; }
.a-slideBoxA.a-slideBoxA-t {
-webkit-transform: scale(1, 0);
-moz-transform: scale(1, 0);
transform: scale(1, 0);
-webkit-transform-origin: top center;
-moz-transform-origin: top center;
transform-origin: top center; }
.a-slideBoxA.a-slideBoxA-b {
-webkit-transform: scale(1, 0);
-moz-transform: scale(1, 0);
transform: scale(1, 0);
-webkit-transform-origin: bottom center;
-moz-transform-origin: bottom center;
transform-origin: bottom center; }
.a-slideBoxA.a-slideBoxA-l {
-webkit-transform: scale(0, 1);
-moz-transform: scale(0, 1);
transform: scale(0, 1);
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
transform-origin: left center; }
.a-slideBoxA.a-slideBoxA-r {
-webkit-transform: scale(0, 1);
-moz-transform: scale(0, 1);
transform: scale(0, 1);
-webkit-transform-origin: right center;
-moz-transform-origin: right center;
transform-origin: right center; }
.a-slideBoxA.active {
-webkit-transform: scale(1, 1);
-moz-transform: scale(1, 1);
transform: scale(1, 1); }
.a-slideBoxA.active:after {
opacity: 0; }
.a-slideBoxA.active img {
-webkit-transform: scale(1, 1);
-moz-transform: scale(1, 1);
transform: scale(1, 1); }
/*----------------------------------------------------
slideBoxB
*/
/*----------------------------------------------------
使用方法：
----------------------------------------------------*/
.a-slideBoxB {
display: block; }
.a-slideBoxB img {
vertical-align: middle; }
.a-slideBoxB .slideBoxB_bg {
background: #fff;
display: inline-block;
position: relative;
-webkit-transform-origin: right center;
-moz-transform-origin: right center;
transform-origin: right center;
overflow: hidden; }
.a-slideBoxB .slideBoxB_bg img {
opacity: 0;
-webkit-transform: scale(1.1, 1.1);
-moz-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
-webkit-transform-origin: right center;
-moz-transform-origin: right center;
transform-origin: right center;
transition: all 0.65s; }
.a-slideBoxB .slideBoxB_bg:after {
background: #fff;
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 99;
margin-left: 100%;
-webkit-transform: translate(-100%, 0);
-moz-transform: translate(-100%, 0);
transform: translate(-100%, 0);
transition: all 0.65s; }
.a-slideBoxB.a-slideBoxB-t .slideBoxB_bg {
-webkit-transform-origin: bottom center;
-moz-transform-origin: bottom center;
transform-origin: bottom center; }
.a-slideBoxB.a-slideBoxB-t .slideBoxB_bg img {
-webkit-transform-origin: bottom center;
-moz-transform-origin: bottom center;
transform-origin: bottom center; }
.a-slideBoxB.a-slideBoxB-t .slideBoxB_bg:after {
margin: 100% 0 0 0;
-webkit-transform: translate(0, -100%);
-moz-transform: translate(0, -100%);
transform: translate(0, -100%); }
.a-slideBoxB.a-slideBoxB-b .slideBoxB_bg {
-webkit-transform-origin: top center;
-moz-transform-origin: top center;
transform-origin: top center; }
.a-slideBoxB.a-slideBoxB-b .slideBoxB_bg img {
-webkit-transform-origin: top center;
-moz-transform-origin: top center;
transform-origin: top center; }
.a-slideBoxB.a-slideBoxB-b .slideBoxB_bg:after {
margin: -100% 0 0 0;
-webkit-transform: translate(0, 100%);
-moz-transform: translate(0, 100%);
transform: translate(0, 100%); }
.a-slideBoxB.a-slideBoxB-l .slideBoxB_bg {
-webkit-transform-origin: right center;
-moz-transform-origin: right center;
transform-origin: right center; }
.a-slideBoxB.a-slideBoxB-l .slideBoxB_bg img {
-webkit-transform-origin: right center;
-moz-transform-origin: right center;
transform-origin: right center; }
.a-slideBoxB.a-slideBoxB-l .slideBoxB_bg:after {
margin: 0 0 0 100%;
-webkit-transform: translate(-100%, 0);
-moz-transform: translate(-100%, 0);
transform: translate(-100%, 0); }
.a-slideBoxB.a-slideBoxB-r .slideBoxB_bg {
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
transform-origin: left center; }
.a-slideBoxB.a-slideBoxB-r .slideBoxB_bg img {
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
transform-origin: left center; }
.a-slideBoxB.a-slideBoxB-r .slideBoxB_bg:after {
margin: 0 0 0 -100%;
-webkit-transform: translate(100%, 0);
-moz-transform: translate(100%, 0);
transform: translate(100%, 0); }
.a-slideBoxB.active .slideBoxB_bg img {
opacity: 1;
-webkit-transform: scale(1, 1);
-moz-transform: scale(1, 1);
transform: scale(1, 1); }
.a-slideBoxB.active .slideBoxB_bg:after {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
transform: translate(0, 0); }
/*----------------------------------------------------
スライダー
----------------------------------------------------*/
.slideGallery {
overflow: hidden; }
.slideGallery .slideGallery_inner {
height: 220px;
width: 3840px;
-webkit-animation: slide 60s linear infinite;
-moz-animation: slide 60s linear infinite;
animation: slide 60s linear infinite;
position: relative; }
@keyframes slide {
0% {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
100% {
-webkit-transform: translate3d(-1920px, 0, 0);
-moz-transform: translate3d(-1920px, 0, 0);
transform: translate3d(-1920px, 0, 0); } }
/*----------------------------------------------------
トップページのモジュールの設定ファイルです。
----------------------------------------------------*/
.thoughtContent {
padding-left: 20px; }
.thoughtContent img {
vertical-align: middle; }
.thoughtContent .thoughtContent_inner {
background: rgba(255, 255, 255, 0.8);
padding: 60px 10% 40px;
position: relative; }
.thoughtContent .thoughtContent_tit {
position: absolute;
top: -25px;
left: -20px; }
.thoughtContent .thoughtContent_desc {
font-size: 20px; }
.thoughtContent .thoughtContent_list li {
position: relative; }
.thoughtContent .thoughtContent_btn {
transition: 0.5s; }
.thoughtContent .thoughtContent_btn:hover {
opacity: 0.5; }
@media screen and (max-width: 1024px) {
.thoughtContent .thoughtContent_inner {
padding: 60px 5% 40px; }
.thoughtContent .thoughtContent_desc {
font-size: 18px; } }
@media screen and (max-width: 767px) {
.thoughtContent .thoughtContent_inner {
background: white;
padding: 40px 5% 20px; }
.thoughtContent .thoughtContent_tit img {
max-height: 52px; }
.thoughtContent .thoughtContent_desc {
font-size: 16px; } }
@media screen and (max-width: 374px) {
.thoughtContent .thoughtContent_tit img {
max-height: 45px; } }
.thoughtContent.thoughtContent-01 .thoughtContent_year {
font-size: 20px;
margin-bottom: 10px; }
.thoughtContent.thoughtContent-01 .thoughtContent_year span {
font-size: 16px; }
@media screen and (max-width: 1024px) {
.thoughtContent.thoughtContent-01 .thoughtContent_year {
font-size: 18px; }
.thoughtContent.thoughtContent-01 .thoughtContent_year span {
font-size: 14px; } }
@media screen and (max-width: 767px) {
.thoughtContent.thoughtContent-01 .thoughtContent_list {
max-width: 480px;
margin: 0 auto; }
.thoughtContent.thoughtContent-01 .thoughtContent_list li {
border-bottom: 1px solid #bbb; }
.thoughtContent.thoughtContent-01 .thoughtContent_year {
text-align: left; }
.thoughtContent.thoughtContent-01 .thoughtContent_year span {
display: block; }
.thoughtContent.thoughtContent-01 .thoughtContent_btn {
position: absolute;
top: 8px;
right: 0;
width: 50%; } }
@media screen and (max-width: 375px) {
.thoughtContent.thoughtContent-01 .thoughtContent_year {
font-size: 16px; }
.thoughtContent.thoughtContent-01 .thoughtContent_btn {
width: 47.5%; } }
.thoughtContent.thoughtContent-04 .thoughtContent_desc {
text-align: left; }
.thoughtContent.thoughtContent-04 .thoughtContent_btn {
position: absolute;
right: 0;
top: 50%;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%); }
@media screen and (max-width: 767px) {
.thoughtContent.thoughtContent-04 .thoughtContent_desc {
text-align: center; }
.thoughtContent.thoughtContent-04 .thoughtContent_btn {
position: static;
-webkit-transform: none;
-ms-transform: none;
transform: none; } }
.topSec .ts_inner {
text-align: center;
padding: 80px 0;
margin: 0 auto; }
.topSec.topSec-history {
background: #E9E5DC url("../../images/history_bg.jpg") center top no-repeat;
background-size: cover; }
.topSec.topSec-history img {
vertical-align: middle; }
.topSec.topSec-history .ts_tit {
margin-bottom: 20px; }
.topSec.topSec-history .ts_txt {
margin-bottom: 60px; }
.topSec.topSec-history .ts_list {
max-width: 1140px;
margin: 0 auto; }
.topSec.topSec-history .ts_list li a {
transition: 0.5s; }
.topSec.topSec-history .ts_list li a:hover {
opacity: 0.7; }
.topSec.topSec-history .ts_list02 {
max-width: 860px;
margin: 0 auto; }
.topSec.topSec-history .ts_list02 li {
transition: 0.5s; }
.topSec.topSec-history .ts_list02 li:hover {
opacity: 0.7; }
@media screen and (max-width: 1140px) {
.topSec.topSec-history .ts_list02 {
max-width: 75%; } }
@media screen and (max-width: 767px) {
.topSec.topSec-history {
background: #E9E5DC url("../../images/history_bg_sp.png") center top no-repeat;
background-size: 100%; }
.topSec.topSec-history .ts_inner {
padding: 60px 0 0; }
.topSec.topSec-history .ts_txt {
margin-bottom: 40px; }
.topSec.topSec-history .ts_list02 {
max-width: 100%; } }
@media screen and (max-width: 374px) {
.topSec.topSec-history .ts_inner {
padding: 50px 0 0; }
.topSec.topSec-history .ts_txt {
margin-bottom: 30px; } }
.topSec.topSec-thought {
background: #e9eee8 url("../../images/thought_bg.jpg") center top no-repeat;
background-size: cover; }
.topSec.topSec-thought .ts_tit {
margin-bottom: 100px; }
.topSec.topSec-thought .ts_list {
max-width: 1040px;
margin: 0 auto; }
@media screen and (max-width: 767px) {
.topSec.topSec-thought {
background: #e9eee8 url("../../images/thought_bg_sp.jpg") center top no-repeat;
background-size: 100%; }
.topSec.topSec-thought .ts_inner {
padding: 60px 0 60px; }
.topSec.topSec-thought .ts_tit {
margin-bottom: 100px; } }
/*----------------------------------------------------
アニメーション
----------------------------------------------------*/
.topSec.topSec-history .ts_body .a-list {
opacity: 0;
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
transform-origin: top center;
transition: 1.5s; }
.topSec.topSec-history .ts_body .a-list.a-list-01 {
transition: 1.5s 0s; }
.topSec.topSec-history .ts_body .a-list.a-list-02 {
transition: 1.5s 0.2s; }
.topSec.topSec-history .ts_body .a-list.a-list-03 {
transition: 1.5s 0.4s; }
.topSec.topSec-history .ts_body .a-list.a-list-04 {
transition: 1.5s 0.6s; }
.topSec.topSec-history .ts_body .a-list.a-list-05 {
transition: 1.5s 0.8s; }
.topSec.topSec-history .ts_body .a-list.a-list-06 {
transition: 1.5s 1s; }
.topSec.topSec-history .ts_body .a-list.a-list-07 {
transition: 1.5s 1.2s; }
.topSec.topSec-history .ts_body.active .a-list {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1; }
.topSec.topSec-thought .a-list {
opacity: 0;
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
transform-origin: top center;
transition: 1.5s; }
.topSec.topSec-thought .a-list.a-list-03 {
transition: 1.5s 0.25s; }
@media screen and (max-width: 767px) {
.topSec.topSec-thought .a-list.a-list-03 {
transition: 1.5s; } }
.topSec.topSec-thought .a-list.active {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1; }
/*--------------------------
state
--------------------------*/
/*----------------------------------------------------
JavaScriptなどの制御による状態の変化を表すスタイルの設定ファイルです。
汎用的なstateのスタイルをまとめています。
基本的には編集することはありません。
命名規則として、クラス名の頭に
is-* という接頭辞をつけることを推奨します。
----------------------------------------------------*/
/*--------------------------
レスポンシブ関係 ファブレットはなし
--------------------------*/
@media screen and (max-width: 1024px) {
.is-Pc {
display: none; } }
@media screen and (max-width: 767px) {
.is-Tab {
display: none; } }
@media screen and (min-width: 1025px) {
.is-Tab {
display: none; } }
@media screen and (max-width: 767px) {
.is-Phab {
display: none; } }
@media screen and (min-width: 768px) {
.is-Phab {
display: none; } }
@media screen and (min-width: 768px) {
.is-Sp {
display: none; } }
@media screen and (max-width: 767px) {
.is-Pc_Tab {
display: none; } }
@media screen and (min-width: 1025px) {
.is-Tab_Sp {
display: none; } }
/*----------------------------------------------------
JavaScriptなどの制御による状態の変化を表すスタイルの設定ファイルです。
命名規則として、クラス名の頭に
is-* という接頭辞をつけることを推奨します。
----------------------------------------------------*/
/*--------------------------
theme
--------------------------*/
/*----------------------------------------------------
テーマをまとめたファイルです。
サイト全体のテーマに関するスタイルを設定します。
命名規則として、クラス名の頭に
theme-* という接頭辞をつけることを推奨します。
----------------------------------------------------*/
/*--------------------------
wordpress
--------------------------*/
/* Scss Document */
/*------------------------------
ナビゲーション
------------------------------*/
/*------------------------------
パンくずナビ
------------------------------*/
.wp-breadcrumb {
font-size: 13px;
margin: 15px auto; }
.wp-breadcrumb li {
float: left;
margin-right: 1em; }
.wp-breadcrumb li:before {
content: '>';
padding-right: 1em; }
.wp-breadcrumb li:first-child {
background: none;
text-indent: 0em; }
.wp-breadcrumb li:first-child:before {
content: none;
padding: 0; }
.wp-breadcrumb.isHome li:last-child {
display: none; }
/*------------------------------
ページネーション
------------------------------*/
.wp-pagenavi {
text-align: center;
clear: both;
margin: 60px 0; }
.wp-pagenavi a, .wp-pagenavi span {
color: #eb5c02;
background-color: #FFF;
border: solid 1px #eb5c02;
padding: 8px 15px;
margin: 0 2px;
white-space: nowrap;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: 0.2s ease-in-out;
-moz-transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
text-align: center;
text-decoration: none; }
.wp-pagenavi a:hover {
color: #FFF;
background-color: #f49a62;
border-color: #fff; }
.wp-pagenavi span.current {
color: #FFF;
background-color: #f49a62;
border-color: #eb5c02;
font-weight: bold; }
/*------------------------------
Search
------------------------------*/
.screen-reader-text {
display: none; }
#s {
border: 1px solid #ddd;
font-size: 16px;
line-height: 1.8;
width: 160px; }
#searchsubmit {
background: #999;
border: 1px solid #ddd;
color: #fff;
cursor: pointer;
padding: 5px 10px; }
/*------------------------------
ネイティブCSS
------------------------------*/
/*------------------------------
Content( 記事の本文 )
------------------------------*/
.wp-content {
line-height: 1.8;
margin-bottom: 60px;
/* img */ }
.wp-content:after {
content: "";
clear: both;
display: block; }
.wp-content strong {
font-weight: bold; }
.wp-content em {
font-style: italic; }
.wp-content blockquote {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 40px;
-webkit-margin-end: 40px; }
.wp-content .aligncenter {
display: block;
margin: 0 auto; }
.wp-content .alignright {
float: right;
margin-left: 15px !important; }
.wp-content .alignleft {
float: left;
margin-right: 15px !important; }
.wp-content img[class*="wp-image-"], .wp-content img[class*="attachment-"] {
height: auto;
max-width: 100%;
margin: 15px 0; }
.wp-content .wp-caption {
max-width: 100%; }
.wp-content p {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px; }
.wp-content ul {
margin: 1em 0;
padding-left: 40px;
list-style-type: disc; }
.wp-content ol {
margin: 1em 0;
padding-left: 40px;
list-style-type: decimal; }
.wp-content blockquote {
margin: 0 0 1em 0;
padding: 50px 50px 40px;
background: #f2f2f2;
background: -moz-linear-gradient(top, white 0%, #f8f8f8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, #f8f8f8));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f8f8f8',GradientType=0 );
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
position: relative;
border: 1px solid #c1c1c1; }
.wp-content blockquote:before {
content: '"';
font-style: italic;
font-size: 40px;
font-weight: bold;
line-height: 40px;
width: 30px;
height: 30px;
position: absolute;
top: 20px;
left: 20px;
color: #999; }
.wp-content blockquote:after {
content: '"';
font-style: italic;
font-size: 40px;
font-weight: bold;
text-align: left;
line-height: 60px;
width: 30px;
height: 30px;
position: absolute;
bottom: 20px;
right: 20px;
color: #999; }
.wp-content pre {
margin: 1em 0;
padding: 1em;
color: #000000;
white-space: pre-wrap;
/* css-3 */
white-space: -moz-pre-wrap;
/* Mozilla, since 1999 */
white-space: -pre-wrap;
/* Opera 4-6 */
white-space: -o-pre-wrap;
/* Opera 7 */
word-wrap: break-word;
/* Internet Explorer 5.5+ */ }
.wp-content h2 {
border-bottom: solid 1px #333;
color: #333;
font-size: 24px;
font-weight: 700;
padding: 5px 0;
margin: 30px 0; }
.wp-content h3 {
font-size: 21px;
line-height: 120%;
margin: 30px 0;
font-weight: 700;
line-height: 120%;
padding: 10px 14px;
background: #f3f3f3;
border-bottom: solid 1px #333; }
.wp-content h4 {
border-left: solid 4px #333;
border-bottom: solid 1px #333;
font-size: 18px;
padding: 5px 10px;
margin: 30px 0; }
@media screen and (max-width: 767px) {
.wp-content h2 {
font-size: 18px; }
.wp-content h3 {
font-size: 16px; }
.wp-content h4 {
font-size: 14px; } }
/*# sourceMappingURL=style.css.map */
