@charset "utf-8";
@media screen and (min-width:768px){
/*pc・タブレットcss*/
/*pc_defaultset*/
.pc { display: block !important; }/*pcのみ表示ブロック*/
.pc2 { display: inline-block !important; }/*pcのみ表示ブロック*/
.sp,.sp2 { display: none !important; }/*スマホのみ表示ブロック*/
.h_menu {display: none;}/*スマホ用ニュー*/
#sp_global_nav{display: none;}/*スマホ用ニュー*/
/* Antialiasing ※任意*/
html{
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: none;
overflow-x: hidden;
font-family: Helvetica,sans-serif;
}
/* WEB FONTs 游ゴシックかすれ予防*/
@font-face {
font-family: "Yu Gothic";
src: local("Yu Gothic Medium");
font-weight: 100;
}
@font-face {
font-family: "Yu Gothic";
src: local("Yu Gothic Medium");
font-weight: 200;
}
@font-face {
font-family: "Yu Gothic";
src: local("Yu Gothic Medium");
font-weight: 300;
}
@font-face {
font-family: "Yu Gothic";
src: local("Yu Gothic Medium");
font-weight: 400;
}
@font-face {
font-family: "Yu Gothic";
src: local("Yu Gothic Bold");
font-weight: bold;
}
@font-face {
font-family: "Helvetica Neue";
src: local("Helvetica Neue Regular");
font-weight: 100;
}
@font-face {
font-family: "Helvetica Neue";
src: local("Helvetica Neue Regular");
font-weight: 200;
}
.f-min {
font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}
.f-min-02 {
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3","Sawarabi Mincho","Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.f-gothic{
font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック","Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", Verdana, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;font-weight: 500;
}
body {
font-size: 14px;
line-height: 1.7;
word-wrap: break-word;
-webkit-text-size-adjust: 100%;
}
/* ヘッダー店舗からのお知らせ */
.header-store-news-wrap {
display: none;
background-color: #fff;
width: 480px;
overflow: scroll;
overflow-x: hidden;
position: absolute;
right: 0;
top: 0;
padding: 36px 38px;
z-index: 999;
}
.header-store-news-wrap .btn-close-wrap {
border: none;
background-color: transparent;
}
.header-store-news-wrap .btn-close-wrap img {
width: 27px;
}
.header-store-news-wrap .btn-close-wrap:focus {
outline: none;
}
.header-store-news-wrap h4 {
font-size: 22px;
text-align: center;
font-weight: bold;
margin-bottom: 32px;
}
.header-store-news-wrap .news-box {
text-decoration: none;
position: relative;
padding: 1.3em 1em;
display: block;
border-bottom: 1px dashed #707070;
}
.header-store-news-wrap .news-box::after {
content: "";
width: 30px;
height: 30px;
display: inline-block;
background-image: url(../../img/front/common/arrow.png);
background-repeat: no-repeat;
position: absolute;
right: 0;
top: 43%;
bottom: 50%;
}
.header-store-news-wrap .news-box:first-of-type {
border-top: 1px dashed #707070;
}
.header-store-news-wrap .news-box .store {
background-color: #ECECEC;
display: inline-block;
margin: 5px auto;
padding: 2px 13px;
}
.header-store-news-wrap .news-box .title {
width: 95%;
}
.header-store-news-wrap .not-login-msg {
border-top: 1px dashed #707070;
text-align: center;
line-height: 2em;
}
.header-store-news-wrap .not-login-msg p {
margin: 3em auto;
}
.header-store-news-wrap .not-login-msg a {
color: #fff;
background: #222222;
text-decoration: none;
width: 180px;
display: inline-block;
padding: 10px 0;
margin: 0 5px;
border: none;
}
.header-store-news-wrap .not-login-msg a:hover {
background-color: #C72A2A;
}
img {
vertical-align: bottom;
}
a { color: #090909; }
a:hover { text-decoration: none; }
.nobd a:hover { text-decoration: none !important; }
/*-----float-----*/
.fl-l {
float: left;
}
.fl-r {
float: right;
}
.cl-both {
clear: both;
}
/*-----font-----*/
.fw-b {
font-weight: bold;
}
.ta-r {
text-align: right;
}
.ta-c {
text-align: center;
}
.ta-l {
text-align: left;
}
/* IE10以上 不要なら削除 */
@media all and (-ms-high-contrast: none) {
body {
font-family: Helvetica,sans-serif;
}
}
/* Margin-Top & Padding-Top */
.mt00 { margin-top: 0px; } .pt00 { padding-top: 0px; }
.mt05 { margin-top: 5px; } .pt05 { padding-top: 5px; }
.mt10 { margin-top: 10px; } .pt10 { padding-top: 10px; }
.mt15 { margin-top: 15px; } .pt15 { padding-top: 15px; }
.mt20 { margin-top: 20px; } .pt20 { padding-top: 20px; }
.mt25 { margin-top: 25px; } .pt25 { padding-top: 25px; }
.mt30 { margin-top: 30px; } .pt30 { padding-top: 30px; }
.mt35 { margin-top: 35px; } .pt35 { padding-top: 35px; }
.mt40 { margin-top: 40px; } .pt40 { padding-top: 40px; }
.mt45 { margin-top: 45px; } .pt45 { padding-top: 45px; }
.mt50 { margin-top: 50px; } .pt50 { padding-top: 50px; }
.mt55 { margin-top: 55px; } .pt55 { padding-top: 55px; }
.mt60 { margin-top: 60px; } .pt60 { padding-top: 60px; }
.mt65 { margin-top: 65px; } .pt65 { padding-top: 65px; }
.mt70 { margin-top: 70px; } .pt70 { padding-top: 70px; }
.mt75 { margin-top: 75px; } .pt75 { padding-top: 75px; }
.mt80 { margin-top: 80px; } .pt80 { padding-top: 80px; }
.mt85 { margin-top: 85px; } .pt85 { padding-top: 85px; }
.mt90 { margin-top: 90px; } .pt90 { padding-top: 90px; }
.mt95 { margin-top: 95px; } .pt95 { padding-top: 95px; }
.mt100{ margin-top:100px; } .pt100{ padding-top:100px; }
/* Margin-Right & Padding-Right */
.mr00 { margin-right: 0px; } .pr00 { padding-right: 0px; }
.mr05 { margin-right: 5px; } .pr05 { padding-right: 5px; }
.mr10 { margin-right: 10px; } .pr10 { padding-right: 10px; }
.mr15 { margin-right: 15px; } .pr15 { padding-right: 15px; }
.mr20 { margin-right: 20px; } .pr20 { padding-right: 20px; }
.mr25 { margin-right: 25px; } .pr25 { padding-right: 25px; }
.mr30 { margin-right: 30px; } .pr30 { padding-right: 30px; }
.mr35 { margin-right: 35px; } .pr35 { padding-right: 35px; }
.mr40 { margin-right: 40px; } .pr40 { padding-right: 40px; }
.mr45 { margin-right: 45px; } .pr45 { padding-right: 45px; }
.mr50 { margin-right: 50px; } .pr50 { padding-right: 50px; }
.mr55 { margin-right: 55px; } .pr55 { padding-right: 55px; }
.mr60 { margin-right: 60px; } .pr60 { padding-right: 60px; }
.mr65 { margin-right: 65px; } .pr65 { padding-right: 65px; }
.mr70 { margin-right: 70px; } .pr70 { padding-right: 70px; }
.mr75 { margin-right: 75px; } .pr75 { padding-right: 75px; }
.mr80 { margin-right: 80px; } .pr80 { padding-right: 80px; }
.mr85 { margin-right: 85px; } .pr85 { padding-right: 85px; }
.mr90 { margin-right: 90px; } .pr90 { padding-right: 90px; }
.mr95 { margin-right: 95px; } .pr95 { padding-right: 95px; }
.mr100{ margin-right:100px; } .pr100{ padding-right:100px; }
/* Margin-Bottom & Padding-Bottom */
.mb00 { margin-bottom: 0px; } .pb00 { padding-bottom: 0px; }
.mb05 { margin-bottom: 5px; } .pb05 { padding-bottom: 5px; }
.mb10 { margin-bottom: 10px; } .pb10 { padding-bottom: 10px; }
.mb15 { margin-bottom: 15px; } .pb15 { padding-bottom: 15px; }
.mb20 { margin-bottom: 20px; } .pb20 { padding-bottom: 20px; }
.mb25 { margin-bottom: 25px; } .pb25 { padding-bottom: 25px; }
.mb30 { margin-bottom: 30px; } .pb30 { padding-bottom: 30px; }
.mb35 { margin-bottom: 35px; } .pb35 { padding-bottom: 35px; }
.mb40 { margin-bottom: 40px; } .pb40 { padding-bottom: 40px; }
.mb45 { margin-bottom: 45px; } .pb45 { padding-bottom: 45px; }
.mb50 { margin-bottom: 50px; } .pb50 { padding-bottom: 50px; }
.mb55 { margin-bottom: 55px; } .pb55 { padding-bottom: 55px; }
.mb60 { margin-bottom: 60px; } .pb60 { padding-bottom: 60px; }
.mb65 { margin-bottom: 65px; } .pb65 { padding-bottom: 65px; }
.mb70 { margin-bottom: 70px; } .pb70 { padding-bottom: 70px; }
.mb75 { margin-bottom: 75px; } .pb75 { padding-bottom: 75px; }
.mb80 { margin-bottom: 80px; } .pb80 { padding-bottom: 80px; }
.mb85 { margin-bottom: 85px; } .pb85 { padding-bottom: 85px; }
.mb90 { margin-bottom: 90px; } .pb90 { padding-bottom: 90px; }
.mb95 { margin-bottom: 95px; } .pb95 { padding-bottom: 95px; }
.mb100{ margin-bottom:100px; } .pb100{ padding-bottom:100px; }
/* Margin-Left & Padding-Left */
.ml00 { margin-left: 0px; } .pl00 { padding-left: 0px; }
.ml05 { margin-left: 5px; } .pl05 { padding-left: 5px; }
.ml10 { margin-left: 10px; } .pl10 { padding-left: 10px; }
.ml15 { margin-left: 15px; } .pl15 { padding-left: 15px; }
.ml20 { margin-left: 20px; } .pl20 { padding-left: 20px; }
.ml25 { margin-left: 25px; } .pl25 { padding-left: 25px; }
.ml30 { margin-left: 30px; } .pl30 { padding-left: 30px; }
.ml35 { margin-left: 35px; } .pl35 { padding-left: 35px; }
.ml40 { margin-left: 40px; } .pl40 { padding-left: 40px; }
.ml45 { margin-left: 45px; } .pl45 { padding-left: 45px; }
.ml50 { margin-left: 50px; } .pl50 { padding-left: 50px; }
.ml55 { margin-left: 55px; } .pl55 { padding-left: 55px; }
.ml60 { margin-left: 60px; } .pl60 { padding-left: 60px; }
.ml65 { margin-left: 65px; } .pl65 { padding-left: 65px; }
.ml70 { margin-left: 70px; } .pl70 { padding-left: 70px; }
.ml75 { margin-left: 75px; } .pl75 { padding-left: 75px; }
.ml80 { margin-left: 80px; } .pl80 { padding-left: 80px; }
.ml85 { margin-left: 85px; } .pl85 { padding-left: 85px; }
.ml90 { margin-left: 90px; } .pl90 { padding-left: 90px; }
.ml95 { margin-left: 95px; } .pl95 { padding-left: 95px; }
.ml100{ margin-left:100px; } .pl100{ padding-left:100px; }
/* clearfix */
.clearfix {zoom: 1;}
.clearfix:after {
display: block;
clear: both;
height: 0;
visibility: hidden;
line-height: 0;
content: ".";
}
/* Margin-Center */
.ma-ce{margin-right: auto; margin-left: auto;}
/* TextAlign */
.al { text-align: left; }
.ar { text-align: right; }
.ac { text-align: center; }
/* Float */
.fl { float: left; }
.fr { float: right; }
.clear { clear:both; }
/* position */
.poa{ position:absolute;}
.rel{ position:relative;}
/* wysiwyg */
.wysiwyg strong{font-weight: bolder}
.wysiwyg em{font-family: "ＭＳ ゴシック",sans-serif; font-style: italic;}
.wysiwyg img{max-width:100% !important;height: auto !important;}
.wysiwyg h1 { font-size: 20px; font-weight: bold; padding: 0.6em 1.2em; background: whitesmoke;}
.wysiwyg h2 { font-size: 18px; font-weight: bold; border-left: 5px solid #9e9e9e; padding: 0.25em 0.9em;}
.wysiwyg h3 { font-size: 16px; font-weight: bold; border-bottom: 1px dotted gray; padding: 0.25em 0.1em;}
.wysiwyg h4 { font-size: 14px; color: #fff; position: relative; padding: 0.1em 0.5em; background: #272727;}
.wysiwyg h5 { font-size: 14px; padding: 0.4em 2em 2em; line-height: 1.5em; }
.wysiwyg h6 { font-size: 14px; padding: 0.1em; line-height: 1.3em;}
.wysiwyg {word-wrap: break-word;}
/* img-block */
.img-b img{display:block;}
/* ※なので、2行目の1文字目を空ける時 */
.indent{padding-left:1em;text-indent:-1em;}
.indent-list li{padding-left:1em;text-indent:-1em;}
/*----------------------------------------
外部サービス
----------------------------------------*/
/* ggmap */
/* iframeのコピーしたコード
*/
.ggmap {position: relative;padding-bottom: 56.25%;padding-top: 30px;height: 0;overflow: hidden;}
.ggmap iframe,
.ggmap object,
.ggmap embed {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
/* */
.youtube {position: relative; width: 100%; padding-top: 56.25%;}
.youtube iframe {position: absolute;top: 0;right: 0;width: 100% !important;height: 100% !important;}
/*----------------------------------------
webフォント（サーバー置き）
----------------------------------------*/
@font-face {
font-family: 'jp-sttl01'; /* お好きな名前にしましょう */
src: url('../font/.eot'); /* IE9以上用 */
src: url('../font/bokutachi.eot?#iefix') format('embedded-opentype'), /* IE8以前用 */ url('../font/NotoSansCJKjp-Medium.woff') format('woff'), /* モダンブラウザ用 */ url('../font/NotoSansCJKjp-Medium.woff') format('woff'); /* iOS, Android用 *//* 念の為指定しておきます */
font-weight: normal; /* 念の為指定しておきます */
font-style: normal;
vertical-align: top;
margin: 0px;
padding: 0px;
}
.myWebFontClass {
font-family: 'jp-sttl01';
}
/*------------------------------------
header
------------------------------------*/
header {
z-index: 99999;
width: 100%;
top: 0px;
font-family: Helvetica, sans-serif;
}
header .inner {
position: relative;
width: 100%;
margin: 0 auto;
background: #fff;
border-top: 5px solid #181919;
padding: 15px 0;
height: 100px;
}
.header-contents h1,
.header-contents .header-img {
float: left;
}
.header-contents button {
border: none;
background-color:transparent;
}
.header-contents button:focus {
outline: none;
}
.header-contents {
width: 1100px;
margin: 0 auto;
}
header .login {
float: right;
margin: 0 41px;
}
header .pc-menu {
cursor: pointer;
}
header .list {
float: right;
display: flex;
justify-content: flex-end;
padding-top: 20px;
}
header .list li {
width: 60px;
text-align: center;
}
header .list li.news {
position: relative;
}
header .list li.news button[type="button"] span.number {
position: absolute;
display: inline-block;
position: absolute;
top: -12px;
color: #fff;
background: #C72A2A;
border-radius: 10px;
padding: 0 0.5em;
right: -1px;
}
header .list li.contact img {
height: 25px;
width: auto;
}
header .list li.contact a {
vertical-align: middle;
}
.h-login-btn a {
display: block;
width: 160px;
background: #222222;
padding: 10px 30px;
margin-top: 10px;
text-decoration: none;
}
.header-contents .list img {
width: 30px;
}
.h-login-btn a:hover,
.menu-list-pc li a:hover,
.menu-list-pc li.menu-list-child a:hover {
background: #C72A2A;
}
.h-login-btn img{
float: left;
padding: 6px 10px 0 0;
}
.h-login-btn p {
color: #fff;
font-weight: bold;
font-size: 18px;
}
.menu-list-pc {
display: none;
background: #222222;
width: 30%;
float: right;
overflow: scroll;
overflow-x: hidden;
position: absolute;
top: 0;
right: 0;
z-index: 999;
-ms-overflow-style: none;
scrollbar-width: none;
}
.menu-list-pc::-webkit-scrollbar {
display: none;
}
.menu-list-pc ul {
padding-bottom: 100px;
}
.menu-list-pc li {
font-size: 14px;
display: flex;
}
.menu-list-pc li.menu-list-title,
.menu-list-pc li a {
width: 100%;
color: #fff;
}
.menu-list-pc li.menu-list-title {
padding: 25px 25px;
}
.menu-list-pc li.menu-list-link a {
padding: 25px 25px;
text-decoration: none;
border-bottom: 1px solid #707070;
}
.menu-list-pc li.menu-list-child a {
background: #3E3E3E;
padding: 22px 46px;
text-decoration: none;
border-bottom: 1px solid #707070;
}
.menu-close {
cursor: pointer;
}
/*------------------------------------
footer
------------------------------------*/
footer#footer {
position: relative;
color: #fff;
background: #000;
}
footer#footer a {
color: #fff;
text-decoration: none;
}
.sp-pagetop {
display: none;
}
footer#footer .pagetop {
position: absolute;
left: 50%;
top: -50px;
margin: 0 0 0 600px;
}
footer#footer .inner {
position: relative;
width: 100%;
margin: 0 auto;
padding: 30px 0;
}
footer#footer ul {
display: inline-flex;
}
footer#footer ul li {
padding: 20px 10px;
}
footer#footer ul li::before {
content: "＞";
}
footer#footer #copy {
font-size: 12px;
text-align: center;
margin-bottom: 40px;
}
/*------------------------------------
common
------------------------------------*/
/*-- h2 --*/
h2.pagetitle {
font-size: 26px;
font-weight: bold;
text-align: center;
margin: 0 0 40px;
padding: 0 0 10px;
font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック","Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", Verdana, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
border-bottom: 1px dotted #000;
}
/*-- bread --*/
.seo_bread_list {
color: #a0a0a0;
width: 1000px;
margin: 20px auto 50px;
}
.seo_bread_list li {
float: left;
margin: 0 6px 0 0;
}
.seo_bread_list li a {
color: #a0a0a0;
}
/*-- bk-btn --*/
.bk-btn {
position: relative;
width: 900px;
margin: 0 auto;
text-align: center;
padding: 8px 50px 8px 30px;
background: #181919;
}
.bk-btn:after {
position: absolute;
top: 10px;
right: 280px;
content: '▶';
color: #fff;
}
.bk-btn a {
color: #fff;
font-size: 16px;
font-weight: bold;
letter-spacing: 1.0px;
font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック","Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", Verdana, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}
}
@media screen and (max-width:767px){
/*pc・タブレット用cssを丸々コピーしたものを編集していく（スマホ用css）*/
/*sp_defaultset*/
html{font-size: 62.5%; overflow-x: hidden;}
body {font-size: 1.6rem;-webkit-text-size-adjust: 100%;
font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック","Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", Verdana, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;font-weight: 500;}
.pc,.pc2 { display: none !important; }/*pcのみ表示ブロック*/
.sp { display: block !important; }/*スマホのみ表示ブロック*/
.sp2 { display: inline-block !important; }/*スマホのみ表示ブロック*/
.no-br{display: none;}/*スマホでbrを解除したい場合に使用*/
.sp_display_block { display: block !important;}/*スマホでflexboxを解除したい場合等に使用*/
.h_tel_fix {background: #000;position: fixed;bottom: 0;left: 0;width: 100%;z-index: 9999;overflow: hidden;}/*ページ下部固定電話・メール*/
p.h_mail { position: absolute; top: 15px; right: 94px; width: 35px; z-index: 99996; }
p.h_tel { position: absolute; top: 15px; right: 52px; width: 35px; z-index: 99997; }
p.h_menu { position: fixed; top: 15px; right: 10px; width: 35px; z-index: 99998; }
p.h_mail img, p.h_tel img, p.h_menu img { width: 35px;}
nav#sp_global_nav { z-index: 99999;overflow: scroll;position: fixed;top: 0;width: 100vw;height: 100vh;display: none;background: rgba(49,49,49,0.98);padding: 5% 5% 30%;box-sizing: border-box;color: #fff;}
nav#sp_global_nav li a {color: #fff;font-size: 1.6rem;line-height: 1.4;text-decoration: none;padding: 5% 0;display: block;border-bottom: 1px solid #313131;}
nav#sp_global_nav .list { margin-bottom: 20px;}
nav#sp_global_nav .list li { color: #fff; border-bottom: 1px solid #E0DAD1; line-height: 1.2; }
nav#sp_global_nav .sns-list { display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: center; justify-content: center; background: #ffffff;}
nav#sp_global_nav .sns-list li a {border: none;}
nav#sp_global_nav .top { text-align: right; }
nav#sp_global_nav .top .closebtn { display: inline-block; color: #fff; font-size: 24px; margin-bottom: 5px; }
nav#sp_global_nav .bottom { color: #000; text-align: center; background: #fff; font-size: 1.6rem; font-weight: bold; padding: 1rem; margin: 2rem 0 0 0; }
.wysiwyg img{width:auto !important;height:auto !important;}/*ウィジウィグ内画像の縦横比調整*/
.wysiwyg iframe { width:100%; max-width: 100%; max-height: 100%; }/*ウィジウィグ内iframeタグの縦横比調整*/
/* Antialiasing ※任意*/
html{-webkit-font-smoothing: subpixel-antialiased;-moz-osx-font-smoothing: none; overflow-x: hidden;}
/* WEB FONTs 游ゴシックかすれ予防*/
@font-face {
font-family: "Yu Gothic";
src: local("Yu Gothic Medium");
font-weight: 100;
}
@font-face {
font-family: "Yu Gothic";
src: local("Yu Gothic Medium");
font-weight: 200;
}
@font-face {
font-family: "Yu Gothic";
src: local("Yu Gothic Medium");
font-weight: 300;
}
@font-face {
font-family: "Yu Gothic";
src: local("Yu Gothic Medium");
font-weight: 400;
}
@font-face {
font-family: "Yu Gothic";
src: local("Yu Gothic Bold");
font-weight: bold;
}
@font-face {
font-family: "Helvetica Neue";
src: local("Helvetica Neue Regular");
font-weight: 100;
}
@font-face {
font-family: "Helvetica Neue";
src: local("Helvetica Neue Regular");
font-weight: 200;
}
.f-min {
font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}
.f-min-02 {
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3","Sawarabi Mincho","Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.f-gothic{
font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック","Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", Verdana, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;font-weight: 500;
}
body {
-webkit-text-size-adjust: 100%;
word-wrap: break-word;
}
img {
max-width: 100%;
vertical-align: bottom;
}
a { text-decoration: none; color: #090909; }
a:hover { text-decoration: underline; }
.nobd a:hover { text-decoration: none !important; }
/*-----float-----*/
.fl-l {
float: left;
}
.fl-r {
float: right;
}
.cl-both {
clear: both;
}
/*-----font-----*/
.fw-b {
font-weight: bold;
}
.ta-r {
text-align: right;
}
.ta-c {
text-align: center;
}
.ta-l {
text-align: left;
}
/* IE10以上 不要なら削除 */
@media all and (-ms-high-contrast: none) {
body {
font-family: Verdana, Meiryo, sans-serif;
}
}
/* Margin-Top & Padding-Top */
.mt00 { margin-top: 0px; } .pt00 { padding-top: 0px; }
.mt05 { margin-top: 5px; } .pt05 { padding-top: 5px; }
.mt10 { margin-top: 10px; } .pt10 { padding-top: 10px; }
.mt15 { margin-top: 15px; } .pt15 { padding-top: 15px; }
.mt20 { margin-top: 20px; } .pt20 { padding-top: 20px; }
.mt25 { margin-top: 25px; } .pt25 { padding-top: 25px; }
.mt30 { margin-top: 30px; } .pt30 { padding-top: 30px; }
.mt35 { margin-top: 35px; } .pt35 { padding-top: 35px; }
.mt40 { margin-top: 40px; } .pt40 { padding-top: 40px; }
.mt45 { margin-top: 45px; } .pt45 { padding-top: 45px; }
.mt50 { margin-top: 50px; } .pt50 { padding-top: 50px; }
.mt55 { margin-top: 55px; } .pt55 { padding-top: 55px; }
.mt60 { margin-top: 60px; } .pt60 { padding-top: 60px; }
.mt65 { margin-top: 65px; } .pt65 { padding-top: 65px; }
.mt70 { margin-top: 70px; } .pt70 { padding-top: 70px; }
.mt75 { margin-top: 75px; } .pt75 { padding-top: 75px; }
.mt80 { margin-top: 80px; } .pt80 { padding-top: 80px; }
.mt85 { margin-top: 85px; } .pt85 { padding-top: 85px; }
.mt90 { margin-top: 90px; } .pt90 { padding-top: 90px; }
.mt95 { margin-top: 95px; } .pt95 { padding-top: 95px; }
.mt100{ margin-top:100px; } .pt100{ padding-top:100px; }
/* Margin-Right & Padding-Right */
.mr00 { margin-right: 0px; } .pr00 { padding-right: 0px; }
.mr05 { margin-right: 5px; } .pr05 { padding-right: 5px; }
.mr10 { margin-right: 10px; } .pr10 { padding-right: 10px; }
.mr15 { margin-right: 15px; } .pr15 { padding-right: 15px; }
.mr20 { margin-right: 20px; } .pr20 { padding-right: 20px; }
.mr25 { margin-right: 25px; } .pr25 { padding-right: 25px; }
.mr30 { margin-right: 30px; } .pr30 { padding-right: 30px; }
.mr35 { margin-right: 35px; } .pr35 { padding-right: 35px; }
.mr40 { margin-right: 40px; } .pr40 { padding-right: 40px; }
.mr45 { margin-right: 45px; } .pr45 { padding-right: 45px; }
.mr50 { margin-right: 50px; } .pr50 { padding-right: 50px; }
.mr55 { margin-right: 55px; } .pr55 { padding-right: 55px; }
.mr60 { margin-right: 60px; } .pr60 { padding-right: 60px; }
.mr65 { margin-right: 65px; } .pr65 { padding-right: 65px; }
.mr70 { margin-right: 70px; } .pr70 { padding-right: 70px; }
.mr75 { margin-right: 75px; } .pr75 { padding-right: 75px; }
.mr80 { margin-right: 80px; } .pr80 { padding-right: 80px; }
.mr85 { margin-right: 85px; } .pr85 { padding-right: 85px; }
.mr90 { margin-right: 90px; } .pr90 { padding-right: 90px; }
.mr95 { margin-right: 95px; } .pr95 { padding-right: 95px; }
.mr100{ margin-right:100px; } .pr100{ padding-right:100px; }
/* Margin-Bottom & Padding-Bottom */
.mb00 { margin-bottom: 0px; } .pb00 { padding-bottom: 0px; }
.mb05 { margin-bottom: 5px; } .pb05 { padding-bottom: 5px; }
.mb10 { margin-bottom: 10px; } .pb10 { padding-bottom: 10px; }
.mb15 { margin-bottom: 15px; } .pb15 { padding-bottom: 15px; }
.mb20 { margin-bottom: 20px; } .pb20 { padding-bottom: 20px; }
.mb25 { margin-bottom: 25px; } .pb25 { padding-bottom: 25px; }
.mb30 { margin-bottom: 30px; } .pb30 { padding-bottom: 30px; }
.mb35 { margin-bottom: 35px; } .pb35 { padding-bottom: 35px; }
.mb40 { margin-bottom: 40px; } .pb40 { padding-bottom: 40px; }
.mb45 { margin-bottom: 45px; } .pb45 { padding-bottom: 45px; }
.mb50 { margin-bottom: 50px; } .pb50 { padding-bottom: 50px; }
.mb55 { margin-bottom: 55px; } .pb55 { padding-bottom: 55px; }
.mb60 { margin-bottom: 60px; } .pb60 { padding-bottom: 60px; }
.mb65 { margin-bottom: 65px; } .pb65 { padding-bottom: 65px; }
.mb70 { margin-bottom: 70px; } .pb70 { padding-bottom: 70px; }
.mb75 { margin-bottom: 75px; } .pb75 { padding-bottom: 75px; }
.mb80 { margin-bottom: 80px; } .pb80 { padding-bottom: 80px; }
.mb85 { margin-bottom: 85px; } .pb85 { padding-bottom: 85px; }
.mb90 { margin-bottom: 90px; } .pb90 { padding-bottom: 90px; }
.mb95 { margin-bottom: 95px; } .pb95 { padding-bottom: 95px; }
.mb100{ margin-bottom:100px; } .pb100{ padding-bottom:100px; }
/* Margin-Left & Padding-Left */
.ml00 { margin-left: 0px; } .pl00 { padding-left: 0px; }
.ml05 { margin-left: 5px; } .pl05 { padding-left: 5px; }
.ml10 { margin-left: 10px; } .pl10 { padding-left: 10px; }
.ml15 { margin-left: 15px; } .pl15 { padding-left: 15px; }
.ml20 { margin-left: 20px; } .pl20 { padding-left: 20px; }
.ml25 { margin-left: 25px; } .pl25 { padding-left: 25px; }
.ml30 { margin-left: 30px; } .pl30 { padding-left: 30px; }
.ml35 { margin-left: 35px; } .pl35 { padding-left: 35px; }
.ml40 { margin-left: 40px; } .pl40 { padding-left: 40px; }
.ml45 { margin-left: 45px; } .pl45 { padding-left: 45px; }
.ml50 { margin-left: 50px; } .pl50 { padding-left: 50px; }
.ml55 { margin-left: 55px; } .pl55 { padding-left: 55px; }
.ml60 { margin-left: 60px; } .pl60 { padding-left: 60px; }
.ml65 { margin-left: 65px; } .pl65 { padding-left: 65px; }
.ml70 { margin-left: 70px; } .pl70 { padding-left: 70px; }
.ml75 { margin-left: 75px; } .pl75 { padding-left: 75px; }
.ml80 { margin-left: 80px; } .pl80 { padding-left: 80px; }
.ml85 { margin-left: 85px; } .pl85 { padding-left: 85px; }
.ml90 { margin-left: 90px; } .pl90 { padding-left: 90px; }
.ml95 { margin-left: 95px; } .pl95 { padding-left: 95px; }
.ml100{ margin-left:100px; } .pl100{ padding-left:100px; }
/* clearfix */
.clearfix {zoom: 1;}
.clearfix:after {
display: block;
clear: both;
height: 0;
visibility: hidden;
line-height: 0;
content: ".";
}
/* Margin-Center */
.ma-ce{margin-right: auto; margin-left: auto;}
/* TextAlign */
.al { text-align: left; }
.ar { text-align: right; }
.ac { text-align: center; }
/* Float */
.fl { float: left; }
.fr { float: right; }
.clear { clear:both; }
/* position */
.poa{ position:absolute;}
.rel{ position:relative;}
/* wysiwyg */
.wysiwyg strong{font-weight: bolder}
.wysiwyg em{font-family: "ＭＳ ゴシック",sans-serif; font-style: italic;}
.wysiwyg img{max-width:100% !important;height: auto !important;}
.wysiwyg h1 { font-size: 20px; font-weight: bold; padding: 0.6em 1.2em; background: whitesmoke;}
.wysiwyg h2 { font-size: 18px; font-weight: bold; border-left: 5px solid #9e9e9e; padding: 0.25em 0.9em;}
.wysiwyg h3 { font-size: 16px; font-weight: bold; border-bottom: 1px dotted gray; padding: 0.25em 0.1em;}
.wysiwyg h4 { font-size: 14px; color: #fff; position: relative; padding: 0.1em 0.5em; background: #272727;}
.wysiwyg h5 { font-size: 14px; padding: 0.4em 2em 2em; line-height: 1.5em; }
.wysiwyg h6 { font-size: 14px; padding: 0.1em; line-height: 1.3em;}
.wysiwyg {word-wrap: break-word;}
/* img-block */
.img-b img{display:block;}
/* ※なので、2行目の1文字目を空ける時 */
.indent{padding-left:1em;text-indent:-1em;}
.indent-list li{padding-left:1em;text-indent:-1em;}
/*----------------------------------------
外部サービス
----------------------------------------*/
/* ggmap */
/* iframeのコピーしたコード
*/
.ggmap {position: relative;padding-bottom: 56.25%;padding-top: 30px;height: 0;overflow: hidden;}
.ggmap iframe,
.ggmap object,
.ggmap embed {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
/* */
.youtube {position: relative; width: 100%; padding-top: 56.25%;}
.youtube iframe {position: absolute;top: 0;right: 0;width: 100% !important;height: 100% !important;}
/*----------------------------------------
webフォント（サーバー置き）
----------------------------------------*/
@font-face {
font-family: 'jp-sttl01'; /* お好きな名前にしましょう */
src: url('../font/.eot'); /* IE9以上用 */
src: url('../font/bokutachi.eot?#iefix') format('embedded-opentype'), /* IE8以前用 */ url('../font/NotoSansCJKjp-Medium.woff') format('woff'), /* モダンブラウザ用 */ url('../font/NotoSansCJKjp-Medium.woff') format('woff'); /* iOS, Android用 *//* 念の為指定しておきます */
font-weight: normal; /* 念の為指定しておきます */
font-style: normal;
}
.myWebFontClass {
font-family: 'jp-sttl01';
}
/*------------------------------------
header
------------------------------------*/
header{}
header .inner{ width: 100%; border-bottom: 1px solid #000; background: #fff; z-index: 1000; position: fixed; }
header .inner h1,
header .header-img {
float: left;
}
header .inner h1 img,
header .inner .header-img img {
height: 38px;
object-fit: contain;
}
header .list{ float: right; }
header .list li{ float: right; padding: 10px; margin-top: 10px; width: 20%; }
header .list li.news button { padding: 0; }
header .list li.contact {
height: 20%;
width: auto;
}
header .list li.contact img {
width: 25px;
}
header .list li.news span { display: block; position: absolute; top: -3px; right: 3px; background: #d52620; color: #fff; width: 45%; height: 45%; font-size: 12px; font-weight: bold; border-radius: 15px; padding: 5px 0px 4px 3px; font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック","Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", Verdana, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; }
#sp-global-nav { z-index: 99999; overflow: scroll; position: fixed; top: 0; width: 100%; height: 100vh; background: #4cb855; padding: 5%; box-sizing: border-box; color: #fff; margin-top: 100px; display: none; }
#sp-global-nav .list { color: #231815; padding-top: 1%; background: #fff; border-radius: 5px; padding: 5% 0 0; }
#sp-global-nav .list li { color: #000; line-height: 1.2; margin: 0% auto 7%; border-bottom: 1px solid #000; width: 95%; text-align: left; padding-bottom: 3%; }
#sp-global-nav .list li:last-child{text-align: center; border-bottom: none; }
#sp-global-nav .top { text-align: right; }
#sp-global-nav .top .closebtn { display: inline-block; color: #fff; font-size: 24px; margin-bottom: 5px; }
#sp-global-nav .bottom { color: #000; text-align: center; background: #fff; font-size: 1.6rem; font-weight: bold; }
.sp-header {
position: relative;
width: 100%;
}
.sp-header h1,
.sp-header .header-img {
padding: 10px;
}
#head-open {
z-index: 100;
position: absolute;
left: 0;
right: 0;
bottom: 0;
background: #000;
opacity: 0.7;
height: 100%;
width: 100%;
}
.sp-header .list img {
width: 30px;
}
.sp-header .news button[type="button"] {
border: none;
background-color: transparent;
position: relative;
}
.sp-header .news button[type="button"] span.number{
display: inline-block;
position: absolute;
color: #fff;
background: #C72A2A;
width: 2em;
height: 2em;
border-radius: 50%;
top: -6px;
right: -1px;
font-size: 12px;
}
.sp-header .news button[type="button"]:focus {
outline: none;
}
.sp-header .header-store-news-wrap {
display: none;
position: absolute;
background: #fff;
width: 90%;
overflow: scroll;
margin: auto;
left: 0;
right: 0;
top: 0px;
padding: 10px;
z-index: 999;
bottom: 0;
}
.sp-header .header-store-news-wrap:not(.small-modal) {
height: 80vh;
}
.sp-header .header-store-news-wrap.small-modal {
height: 40vh;
}
.sp-header .header-store-news-wrap.small-modal .not-login-msg {
padding: 0 15px;
}
.sp-header .header-store-news-wrap.small-modal .not-login-msg p {
line-height: 1.5em;
font-size: 12px;
margin-bottom: 30px;
}
.sp-header .header-store-news-wrap.small-modal .not-login-msg a {
width: 44%;
font-size: 12px;
display: inline-block;
text-align: center;
color: #fff;
background: #222222;
padding: 10px;
margin: 0 5px;
}
.sp-header .header-store-news-wrap .btn-close-wrap {
border: none;
text-align: right;
background: transparent;
float: right;
margin: 0;
width: 100px;
}
.sp-header .header-store-news-wrap .btn-close-wrap img {
width: 20px;
}
.sp-header .header-store-news-wrap h4 {
clear: both;
text-align: center;
font-size: 20px;
font-weight: bold;
margin-bottom: 20px;
}
.sp-header .header-store-news-wrap h4 img {
width: 25px;
margin-right: 10px;
}
.sp-header .header-store-news-wrap a.news-box {
display: block;
border-bottom: 1px dashed #707070;
position: relative;
padding: 20px 1em;
}
.sp-header .header-store-news-wrap .news-box::after {
content: "";
width: 30px;
height: 30px;
display: inline-block;
background-image: url(../../img/front/common/arrow.png);
background-repeat: no-repeat;
position: absolute;
right: 0;
top: 43%;
bottom: 50%;
}
.sp-header .header-store-news-wrap a.news-box:first-of-type {
border-top: 1px dashed #707070;
}
.sp-header .header-store-news-wrap a.news-box .store {
display: inline-block;
background-color: #ECECEC;
margin: 10px 0;
padding: 3px 13px;
}
.sp-header .header-store-news-wrap a.news-box .title {
width: 90%;
}
.sp-menu-close {
display: none;
width: 10%;
}
.menu-list-sp {
display: none;
background: #222222;
width: 100%;
overflow: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
}
.menu-list-sp::-webkit-scrollbar {
display: none;
}
.menu-list-sp ul {
padding-bottom: 100px;
}
.menu-list-sp li {
font-size: 12px;
display: flex;
}
.menu-list-sp li.menu-list-title,
.menu-list-sp li a {
width: 100%;
color: #fff;
}
.menu-list-sp li.menu-list-title {
padding: 20px 21px;
}
.menu-list-sp li.menu-list-link a {
padding: 20px 21px;
text-decoration: none;
border-bottom: 1px solid #707070;
}
.menu-list-sp li.menu-list-child a {
background: #3E3E3E;
padding: 20px 36px;
text-decoration: none;
border-bottom: 1px solid #707070;
}
.menu-close {
cursor: pointer;
}
/*------------------------------------
dl-bnr
------------------------------------*/
.dl-bnr {
background: #ECECEC;
padding: 10px;
font-size: 10px;
white-space: nowrap;
margin: 0 auto;
height: 6em;
}
.dl-bnr img {
width: 40px;
float: left;
}
.dl-bnr p {
font-weight: bold;
float: left;
margin: 0 20px;
}
.dl-bnr a {
display: inline-block;
background: #242424;
color: #fff;
padding: 7px;
}
.dl-bnr-text {
padding: 10px 5px;
}
.dl-bnr-items {
margin: 0 auto;
max-width: 320px;
}
.bnr-close-btn {
float: right;
padding: 20px 15px 0 20px;
text-align: end;
display: block;
}
.dl-bnr .bnr-close-btn {
right: 0;
top: 5px;
font-size: 24px;
}
.dl-bnr-br {
display: none;
}
@media screen and (max-width: 414px) {
.dl-bnr p {
margin: 0 10px;
}
}
@media screen and (max-width: 360px) {
.dl-bnr-br {
display: inline;
}
.dl-bnr p {
margin: 0 20px;
}
.dl-bnr-text {
padding-top: 6px;
}
}
/*------------------------------------
footer
------------------------------------*/
footer#footer {
position: relative;
color: #fff;
background: #000;
}
footer#footer a {
color: #fff;
width: 100%;
}
footer#footer .pagetop {
display: none;
}
footer#footer ul li {
font-size: 12px;
border-bottom: 1px solid #919191;
text-align: left;
}
footer#footer ul li a {
padding: 20px 30px;
display: inline-block;
}
footer#footer #copy {
font-size: 12px;
line-height: 1.4;
text-align: center;
padding: 20px;
}
}
/*------------------------------------
common
------------------------------------*/
h2.pagetitle {
font-size: 1.3em;
font-weight: bold;
text-align: center;
margin: 0 0 6%;
padding: 0 0 2%;
font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック","Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", Verdana, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
border-bottom: 1px dotted #000;
}
/*-- bread --*/
.seo_bread_list {
color: #a0a0a0;
padding:5%;
}
.seo_bread_list li {
float: left;
margin: 0 2% 0 0;
}
.seo_bread_list li a {
color: #a0a0a0;
}
/*-- bk-btn --*/
.bk-btn {
position: relative;
width: 900px;
margin: 0 auto;
text-align: center;
padding: 8px 50px 8px 30px;
background: #181919;
}
.bk-btn:after {
position: absolute;
top: 10px;
right: 280px;
content: '▶';
color: #fff;
}
.bk-btn a {
color: #fff;
font-size: 16px;
font-weight: bold;
letter-spacing: 1.0px;
font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック","Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", Verdana, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}
/*-- pager --*/
.pager {
margin: 0 5% 4%;
}
.pager .back {
color: #fff;
float: right;
background: #21242b;
text-align: center;
padding: 0 20px 0 25px;
font-weight: bold;
font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック","Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", Verdana, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}
.pager .back a {
color: #fff;
font-size: 12px;
}
.ic_favorite img {
width: 25px !important;
}
#link-block {
width: 100%;
margin: 90px auto;
text-align: center;
}
#link-block .site-link {
width: 100%;
margin: 0 auto;
}
#link-block p {
font-size: 16px;
font-weight: bold;
padding: 56px 0 36px 0;
}
#link-block ul {
display: inline-flex;
}
#link-block li {
padding: 0 15px;
}
#link-block .sns-dl {
padding-top: 89px;
}
#link-block .sns-icon img,
#link-block-sp .sns-icon img {
width: 40px;
}
#link-block .sns-icon .yt-icon,
#link-block-sp .sns-icon .yt-icon {
padding-top: 5px;
}
#link-block-sp {
display: none;
}
@media screen and (max-width: 767px) {
#link-block {
display: none;
}
#link-block-sp {
margin: 70px auto;
text-align: center;
display: block;
}
#link-block-sp p {
font-size: 16px;
font-weight: bold;
padding: 56px 0 36px 0;
}
#link-block-sp ul {
display: inline-flex;
}
#link-block-sp li {
padding: 0 10px;
}
#link-block-sp .sns-dl {
padding-top: 50px;
}
#link-block-sp ul:first-child li {
padding: 0;
}
}
/*-- pager --*/
.pager {
margin: 0 0 15px;
}
ul.pagination {
margin-top: 100px;
text-align: center;
}
ul.pagination li {
display: inline-block;
}