DineOut Kasai CSS
@charset "utf-8";
/*
Theme Name: lightning-child
Theme URI:
Template: lightning
Description:
Author: le-mina-rie with MarkleDesign
Tags:
Version: 0.1.2
*/
/*【注意!!】 上↑のコメントアウト部分は、削除しないでください。 CSS が読み込めなくなります。*/
/*
body,
p {
font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
letter-spacing: 0.06em;
line-height: 1.5;
}
*/
/* ウェブフォントの読み込み*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;600&display=swap');
*{
font-family: 'Noto Sans JP', sans-serif;
}
/* 【注意】 'Noto Sans JP', sans-serif; は、他言語が表示できます。
* 複数のウェブフォントのimportは、表示の遅延が生じるためお勧めいたしません。 */
/*各店舗ページで、トップペニュー（Language）を非表示*/
.single-post #vk-mobile-nav-menu-btn{
display:none !important;
}
.single-post #gMenu_outer{
display:none !important;
}
/**************************************
Hタグの装飾を変更
**************************************/
/*.entry-title--post-type--page, h2 {*/
h2 {
padding: 0.5em 0;
/* border-top: 2px solid var(--vk-color-primary);*/
border-top: none;
border-bottom: none;
margin-bottom: 0;
}
.site-footer-title, h3 {
position: static;
border-bottom:none;
background: 0 0;
padding: 0 0 0.5em;
}
.title_font{
font-weight:200 !important;
font-size:1.3em;
}
/**********************************************
common
**********************************************/
/*スマホ・タブレットで表示する*/
@media (max-width: 820px) {.only_pc {display:none}} /*スマホでのみ表示する （only_pc クラスを非表示）*/
/*PCで表示する*/
@media (min-width: 821px) {.only_mb {display:none}} /*PCでのみ表示する （only_mb クラスを非表示）*/
/*非表示にする*/
.ov{display:none;}
/*画像オンマウスで半透明化*/
.gazou:hover {
opacity: 0.7;
}
/*左寄せ*/
.left{
text-align:left;
}
/*右寄せ*/
.right {
text-align:right;
}
/*センタリング*/
.center{
text-align:center;
}
/* 文字サイズ */
.large{
font-size:20px;
}
.mid{
font-size:18px;
}
.small{
font-size:15px;
}
.ss{
font-size:12px;
}
/*文字の太さ*/
.bold{
font-weight:bold;
}
/* 文字色 */
.red{
color:red;
}
.blue{
color:blue;
}
.deep-gray{
color:gray;
}
/*アンダーライン 黄色蛍光ペン風 */
.yellow-under{
background: linear-gradient(transparent 50%, yellow 50%);
}
/*上部余白を詰める*/
.space-top{
margin-top: 50px;
}
/*pタグ内 両端揃え*/
p{
text-align: justify;
}
/**********************************************
ヘッダー
***********************************************/
/*トップメニューの下線を消す*/
.gMenu > li:before {
border-bottom:none;
}
/*パンくず非表示*/
.breadcrumb{
display:none;
}
/**************************************
スクロール時のヘッダーロゴを表示
**************************************/
.header_scrolled .gMenu {
background-image: url(/wp-content/uploads/2023/09/Cultemo-Restaurant-Guide_logo.jpg);
background-repeat: no-repeat;
background-size: 200px;
background-position: 0 50%;
}
.header_scrolled .navbar-brand .siteHeader_logo img {
float:left;
max-height: 40px;
}
.header_scrolled .gMenu {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
/**************************************
ヘッダーロゴのリンクを外す
**************************************/
.siteHeader_logo {
pointer-events: none;
}
/**********************************************
画面幅
***********************************************/
.full-cont {
width: 100%;
}
.full-width {
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
}
/*基本コンテンツの幅 左右*/
.content-width{
margin-left: 10%;
margin-right: 10%;
}
.mb-width{
margin-left: 5%;
margin-right: 5%;
}
/*レストランページのコンテンツの幅 左右*
.restaurant-width{
margin-left: 15%;
margin-right: 15%;
}*/
/* レストランページのコンテンツの幅 ノートPC。タブレット */
@media (max-width: 1600px) and (min-width: 768px) {
.restaurant-width{
margin-left: 15%;
margin-right: 15%;
}
}
/*レストランページのコンテンツの幅 デスクトップPC*/
@media (min-width: 1601px) {
.restaurant-width{
margin-left: 25%;
margin-right: 25%;
}
}
/*レストランページのコンテンツの幅 スマホ・ミニタブレット*/
@media (max-width: 767px) {
.restaurant-width{
margin-left: 5%;
margin-right: 5%;
}
}
/**********************************************
各言語のトップページ
/**********************************************/
/*h3 文字サイズ変更*/
h3{
font-size:25px;
}
/* 一覧リストの店舗名の文字サイズ*/
.wp-show-posts-entry-title{
width:90% !important;
font-size:20px;
}
/*レストラン紹介綱目の背景色*/
.bg-gray{
background-color:#fafafa;
padding: 2em 0 1.5em;
}
.wp-show-posts-entry-summary p{
line-height:1.5em !important;
font-size:15px;
text-align: justify;
color:#404040;
}
/**********************************************
店舗ページ
/**********************************************/
/*上部のカテゴリーと、最下部に他のページを表示しない*/
.postNextPrev,.entry-meta_items,.page-header{
display:none !important;
}
/* 店舗名（タイトル）の上部余白と位置調整 */
.single .header .entry-header{
margin-top:-100px !important;
}
.single .container{
margin-top:-1em !important;
}
.single .navbar-header{
margin-top:1em;
}
/*予約ボタン を設置する場合の、ページヘッダーの幅を変更 */
/*【注意!!】 SNSボタン、予約ボタンの設置のため、ページタイトル幅を60％にしている。 このエリアとリンクアイコン・ボタンが重なると、
* 表示はされても、リンクを押せなくなるので、幅変更時は注意してください。*/
@media (min-width: 750px) {.entry-header{
margin-right:60%;
}}
/*予約ボタン、TEL 、SNS の位置*/
@media (min-width: 992px) {.rb-position{
margin-top:-80px;
margin-left:40%;
text-align:right;
}}
/*予約ボタン、TEL 、SNS ブレイクポイントの改行用*/
@media (min-width: 507px){.sns-br {display:none}}
/*TEL */
.rb-position .tel{
font-size:18px;
color: #191970;
font-weight:bold;
line-height:1.7em;
}
/*snsアイコン 改行ポイント*/
@media (min-width: 992px) {.sns {display:none}}
/*ボタン（共通）*/
.button{
padding: 5px 15px;
display: inline-flex;
font-weight:bold;
text-align:center;
color: #fff !important;
border-radius: 8px;
/* margin-bottom:100px;*/
}
a.button{
text-decoration: none !important;
line-height :1em;
}
/*WEB予約の赤いボタン*/
.red-button{
background-color: #b41d23;
border: 2px solid #b41d23;
margin-bottom:100px;
}
.red-button:hover {
background-color:#fff !important;
color:#b41d23 !important;
}
/*レストラン一覧・グランドメニュー のオレンジ色のボタン*/
.org-button{
background-color: #ff931e;
border: 2px solid #ff931e;
margin-bottom:50px;
}
.org-button:hover {
background-color:#fff !important;
color:#ff931e !important;
}
/*トップ画像*/
.top-img{
margin-top:-95px;
}
/*レストラン一覧とlanguage の配置、位置*/
.float-right{
float:right;
margin-left:1.5em;
}
.cb{
clear:both}
}
/*ページ内メニュー 位置調整*/
#p-menu{
margin-top:-5em;
}
a: hove{
color:#b41d23;
}
/*ページ内メニュー スマホの調整*/
.l-space{
line-height : 2em;
}
/*
table.menu-table{
width:100%;
box-sizing: content-box!important;
border: none!important;
}
td.menu-table {
box-sizing: content-box!important;
width: 33%;
border: none!important;
}
tr.menu-table {
box-sizing: content-box!important;
border: none!important;
padding:0 !important;
margin:0 !important;
}
*/
.mb-menu-wrap{
width:100%;
}
.mb-menu-1{
display:inline-block;
width:40%;
line-height:1.2em;
}
.mb-menu-2{
display:inline-block;
width:28%;
line-height:1.2em;
}
/* 各項目 h2 の上下空白*/
.single h2{
margin:1em 0;
}
#menu h2{
margin:1em 0 -0.5em !important;
}
/* アクセスのキャプション*/
.cap-txt{
font-size:15px;
line-height:1.5em;
}
/* 食事メニュー タイトルの位置*/
#menu h2{
margin-bottom:1em;
}
/* 食事メニュー タイトルの文字*/
.m-title{
font-size:25px;
}
/* 食事メニュー 内容の文字*/
p.m-txt{
font-size:16px;
line-height:1.5em;
}
/* 食事メニュー 罫線の間隔*/
.part{
margin: 3.5em 0 0.5em;
}
/*メニューの続きを見る*/
/*summary {
display: block;
list-style: none;
}*/
.open{
color:#4f96f6;
}
.open:hover{
color:#b41d23;
}
/* 表 */
.restaurant-table{
/*border-collapse: collapse; */
margin-bottom:3.5em;
}
.restaurant-table th{
background-color:#fff4d6;
border:solid 1px #d3d3d3;
border-width: 1px 0px;
width:25%;
padding:0.5em;
vertical-align:center;
text-align:center;
font-weight:normal;
}
.restaurant-table td{
word-break : break-all;
border:solid 1px #d3d3d3;
border-width: 1px 0px;
width:75% !important;
padding:1em;
line-height:1.6em;
}
/*googlemap リンク色の変更*/
#info a:link{
color:#4f96f6 !important;
}
#info a:hover{
color:#b41d23 !important;
text-decoration:none !important;
}
/*カルーセル*/
.slider1 {
display: flex;
margin: 0 calc(50% - 50vw);
width: 100vw;
height:200px;
overflow: hidden;
}
.slider1 ul{
display:flex;
padding: 0;
margin:0;
}
.slider1 li{
width:300px;
list-style: none;
}
.slider1 ul:first-child {
animation: slide1 80s -40s linear infinite;
/* animation: slide1 150s -75s linear infinite;*/
}
.slider1 ul:last-child {
animation: slide2 80s linear infinite;
/* animation: slide2 150s linear infinite;*/
}
@keyframes slide1 {
0% {
transform: translateX(100%);
}
to {
transform: translateX(-100%);
}
}
@keyframes slide2 {
0% {
transform: translateX(0);
}
to {
transform: translateX(-200%);
}
}
/*口コミボックス*/
.review-box{
position: relative;
width: 100%;
background-color: #fcfcfc;
border-radius: 20px;
box-shadow: 5px 5px 5px rgba(0,0,0,.2);
padding:2em;
}
.review-box img{
margin:0.8em;
}
.review-box p{
font-size:16px;
letter-spacing :0.2em;
line-height:1.5em;
text-align:right;
text-align: justify;
}
/*ページ下部のメタ情報を非表示*/
.entry-meta-dataList{
display:none;
}
/**********************************************
フッター
***********************************************/
/*コピーライト 非表示 */
footer .copySection p:nth-child(2) {
display:none !important;
}
/*footer 余白・位置・配置の調整*/
.single .footerWidget{
padding-top:3em !important;
margin-bottom:-1em !important;
height:1.5em !important;
vertical-align: middle !important;
}
.copySection {
margin-top:-5.5em!important;
}
.single .copySection {
margin-top:-2.5em!important;
}
footer .copySection p:nth-child(1) {
text-align:center !important;
}
.under{
text-decoration:underline;
text-decoration-color:blue;
text-underline-offset:8px;
}