食べログコース詳細の表示

１）食べログ連携時のjsを変更する

<script src="https://static.ccmphp.com/menu/1.0.0/embed.js"></script>
↓
<script src="https://static.ccmphp.com/menu/1.2.0/tabelog.js"></script>

２）下記cssをtabelog.cssに入れる

/* 以下コース詳細用CSS */
#cms_menu__modal {
width: auto !important;
}

.cms_menu__modal--content {
width: 80% !important;
margin: auto;
z-index: 10001;
overscroll-behavior: none;
}

.course-dtl {
width: 90%;
margin: auto;
}

.course-dtl__headline span {
font-size: 0.8rem;
}

.course-dtl__heading h3 {
font-size: 1.2rem !important;
padding-bottom: 10px;
padding-left: 20px;
border-bottom: solid 1px;
position: relative;
}

.course-dtl__heading h3::before {
content: "";
display: block;
width: 8px;
height: 8px;
border-radius: 50%;
border: solid 3px #e52b1b;
position: absolute;
left: 0px;
top: 40%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}

.course-dtl__contents {
margin: 50px auto;
padding: 0 0px;
display: flex;
flex-wrap: wrap;
}

.course-dtl__img {
flex: 0 0 33%;
}

@media screen and (max-width: 1144px){
.course-dtl__img img {
width: 100%;
height: 100%;
}
}

.course-dtl__info {
flex: 0 0 66%;
}

.course-dtl__desc {
padding-left: 2vw;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

.course-dtl__contents table {
flex: 0 0 100%;
margin-top: 50px;
}

.course-dtl__contents table tr {
border-bottom: solid 1px #797979;
margin: 20px 0 0 0;
height: 50px;
}

.course-dtl__contents table tr th {
width: 25%;
padding: 10px 15px;
}

.course-dtl__contents table tr td {
padding: 10px 15px;
}

#close_btn {
display: flex;
text-align: center;
margin-right: auto;
margin-left: auto;
padding: 4px 12px;
background-color: #eee;
border-radius: 8px;
cursor: pointer;
}

@media screen and (max-width: 768px){
.course-dtl__contents {
flex-direction: column;
}

.course-dtl {
width: 100%;
}

.course-dtl__heading h3 {
font-size: 1rem !important;
line-height: 1.5;
}

.course-dtl__img {
width: 100%;
}

.course-dtl__desc {
padding-left: 0 !important;
}

.cms_menu__modal--content {
width: 100% !important;
}

.course-dtl__contents table tr th {
display: block;
width: 100%;
text-align: left;
}

.course-dtl__contents table tr td {
display: block;
padding: 0 15px;
}
}
/* 以下コース詳細用CSS */

３）コースタイトルをクリックできるようにする

pointer-events: none;

によってクリックイベントが発火しないようになっているので、この記述を削除する

４）cssの微調整する
・クリックできるものだと分かるかどうか
など