/*-----------
ナビメニュー
------------*/
#ttl {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  background-color: #f7f0d4;
}

#ttl .box_inner ul {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  padding: 20px 0;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  box-sizing: border-box;
	min-width: 0;
}

#ttl .box_inner ul li {
  width: calc(100% / 2 - 5px);
  position: relative;
  list-style-type: none;
}

#ttl .box_inner ul li a {
  display: flex;
  justify-content: center;
  padding: 13px 0;
  background-color: #f9bf3d;
  color: #333333;
  line-height: 1.4;
  border: 3px solid #ffffff;
  box-shadow: 5px 5px 5px rgba(0,0,0,0.2);
  font-weight: bold;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
  font-size: 18px;
}

#ttl .box_inner ul li::after {
  position: absolute;
  bottom: 35%;
  right: 20px;
  left: auto;
  transform: rotate(90deg);
  
  font-family: "font Awesome 5 Free";
    font-weight: bold;
    content: "\f054";
    color: #333333;
    font-size: 18px;
}


/*------------------------
コンテンツ共通スタイリング
--------------------------*/
#contents-main {
/*  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  background-color: #ffffff;*/
}

#contents-main .section {
  width: 100%;
  max-width: 800px;
  margin: 0 auto 20px;
}

#contents-main .box_inner {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  box-sizing: border-box;
}

#contents-main .content_box {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  box-sizing: border-box;
}

#contents-main .section h3 {
  width: 100%;
  max-width: 800px;
  margin: 0 auto 18px;
  padding: 5px 0;
  border-bottom: 2px solid #dddddd;
  color: #666666;
  font-size: 12px;
  font-weight: bold;
  font-family: "Quicksand", sans-serif;
  text-align: left;
}

.img_box {
  margin: 0 auto;
  padding: 0;
}

.img_box img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

.w100img img {
  width: 100%;
}

.flex-contents {
  display: flex;
}

.caution {
  padding: 10px 20px 30px;
  box-sizing: border-box;
}

.caution p {
  color: #333333;
  font-size: 11px;
  line-height: 1.6;
  text-align: left;
}


/*------------------------------
アイテム説明テキスト共通スタイル
--------------------------------*/
.item-desc {
  margin: 0;
  color: #18a6d1;
  font-size: 22px;
  line-height: 1.4;
  font-weight: bold;
  text-align: left;
}

.item-desc.lightblue {
  color: #18a6d1;
}

.item_logo {
  height: 50px;
  margin: 12px 0 0;
  text-align: left;
}

#tressa-yokohama .item_logo img {
  width: auto;
  height: 100%;
}

.item_logo.h33 {
  height: 33px;
}

.item_logo.h65 {
  height: 65px;
}


/*----------------------------
TRESALE
------------------------------*/
#tresale {
  background-color: #e60012;
}

.tresale-box {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  background-color: #e60012;
  box-sizing: border-box;
}

.tresale-ttl img {
  width: 100%;
}

.movie_box {
  width: 88%;
  max-width: 700px;
  margin: 0 auto;
  padding: 0 0 24px;
  box-sizing: border-box;
}

.movie-lead {
  margin: 0;
  padding: 0 0 10px;
  color: #ffffff;
  font-size: 22px;
  line-height: 1.4;
  font-weight: bold;
}

.movie_box iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background-color: #000000;
  border: 4px solid #ffffff;
  box-sizing: border-box;
}

.sale-btn {
  width: 70%;
  max-width: 520px;
  margin: 0 auto;
  padding-bottom: 34px;
  font-size: 22px;
}

.sale-btn a {
  display: block;
  padding: 18px 0;
  background-color: #ffffff;
  color: #e60012;
  border-radius: 50px;
  font-weight: bold;
  text-align: center;
  position: relative;
}

.sale-btn a::after {
    font-family: "font Awesome 5 Free";
    font-weight: bold;
    content: "\f054";
    position: absolute;
    top: calc(50% - 11px);
    right: 24px;
    display: block;
    color: #e60012;
    font-size: 18px;
}

/*----------------------------
ポイントバナー
------------------------------*/
.campaign-section {
  background-color: #f9f1cc;
}

.campaign-section .content_box {
  padding: 0;
}

.campaign-section img {
  width: 100%;
}


/*------------------------------------------
アイテム紹介（contents-item継承）
--------------------------------------------*/
.contents-item.summer-item {
	box-sizing: border-box;
}
.contents-item.summer-item .box_inner {
  background-color: #e6fbff;
  background-image: url("./bk_summer.png");
  background-size: contain;
  background-repeat: repeat-y;
  border: 3px solid #17a9cf;
}

.summer-item .content_box {
  padding: 0px 80px 30px;
}

.summer-title {
  margin-bottom: 28px;
  padding: 8px 0;
  text-align: left;
}

.summer-title-sub {
  display: inline-block;
  margin: 0 0 4px;
  padding: 4px 10px;
  background-color: #ffeb41;
  color: #18a6d1;
  font-size: 16px;
  line-height: 1.2;
  font-weight: bold;
  transform: rotate(-5deg);
}

.summer-title-main {
  margin: 0;
  color: #18a6d1;
  font-size: 58px;
  line-height: 1;
  font-weight: bold;
  letter-spacing: 2px;
  text-shadow: 2px 2px 0 #ffffff;
}

.contents-item .item-list {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.contents-item .item-list .item-card {
  width: 100%;
  margin: 0;
  padding: 0 0 34px;
  border-bottom: 3px dotted #7bd5e5;
  box-sizing: border-box;
  position: relative;
}

.contents-item .item-list .item-card::after{
    content: "";
    position: absolute;
    right: 0px;
    bottom: 30px;
    width: 0;
    height: 0;
    border-top: 30px solid transparent;
    border-right: 30px solid #18a6d1;
    border-bottom: 0;
    border-left: 0;
}
.contents-item .item-list .item-card + .item-card {
  padding-top: 38px;
}

.contents-item .item-list .item-card:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.item-image {
  margin-bottom: 18px;
}

.item-text {
  width: 100%;
  margin: 0 auto;
}

.item-name {
  margin: 10px 0 0;
  color: #333333;
  font-size: 16px;
  line-height: 1.35;
  text-align: left;
}

.item-price {
  margin: 3px 0 0;
  color: #333333;
  font-size: 16px;
  line-height: 1.35;
  text-align: left;
}

.shop_name {
  font-weight: bold;
}


/*----------------------------
イベント＆インフォメーション
------------------------------*/
.event-section {
  background-color: #ffffff;
}


.event-list {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.event-card {
  width: 100%;
  margin: 0 auto 26px;
  padding: 30px 80px 50px;
  background-color: #ffffd9;
  border: 3px solid #71bd32;
  box-sizing: border-box;
}

.event-card a {
  position: relative;
  display: block;
  color: #333333;
  text-decoration: none;
}

.event-card a::after {
  content: "";
  position: absolute;
  right: 0px;
  bottom: 0px;
  width: 0;
  height: 0;
  border-top: 30px solid transparent;
  border-right: 30px solid #71bd32;
  border-bottom: 0;
  border-left: 0;
}

.event-card p.item_logo{
  text-align: center;
}

.event-date {
  width: 86%;
  margin: 0 auto 18px;
  padding: 8px 0;
  background-color: #71bd32;
  color: #ffffff;
  border-radius: 50px;
  font-size: 28px;
  line-height: 1.2;
  font-weight: bold;
  text-align: center;
}

.event-card h4 {
  margin: 0 0 22px;
  color: #71bd32;
  font-size: 24px;
  line-height: 1.4;
  font-weight: bold;
  text-align: center;
}

.event-image {
  margin-bottom: 20px;
}

.event-image img {
  width: 100%;
  border-radius: 6px;
}

.event-image.narrow img {
  width: 72%;
}

.event-text {
  margin: 0 0 20px;
  padding-bottom: 18px;
  border-bottom: 4px dotted #b8d97d;
  color: #333333;
  font-size: 16px;
  line-height: 1.55;
  text-align: left;
	line-break: anywhere;
}

.event-text strong{
    color:#6fba2c;
}

.event-info {
  margin: 0;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
}

.event-card:first-of-type .event-info:first-of-type::after {
  content: "";
  position: absolute;
  right: 0px;
  bottom: 0px;
  width: 0;
  height: 0;
  border-top: 30px solid transparent;
  border-right: 30px solid #71bd32;
  border-bottom: 0;
  border-left: 0;
}
.event-info dt {
  width: 58px;
  padding: 6px 0;
  background-color: #71bd32;
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  box-sizing: border-box;
}

.event-info dd {
  width: calc(100% - 70px);
  margin: 0;
  color: #333333;
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
  box-sizing: border-box;
}

hr.two-event{
    margin: 30px 0;
    border: 1px solid #6fba2c;
}


/*----------------------------
ごはんのお供フェス
------------------------------*/
.gohan-section {
  background-color: #ffffff;
}

.gohan-box {
  padding: 30px 80px 50px;
  background-color: #ffffd9;
  border: 3px solid #71bd32;
}

.gohan-box a {
  display: block;
  color: #333333;
  text-decoration: none;
  position: relative;
}

.gohan-box a::after {
  content: "";
  position: absolute;
  right: 0px;
  bottom: 0px;
  width: 0;
  height: 0;
  border-top: 30px solid transparent;
  border-right: 30px solid #71bd32;
  border-bottom: 0;
  border-left: 0;
}

.gohan-title {
  width: 100%;
  margin-bottom: 10px;
}

.gohan-lead {
  margin: 0 0 20px;
  color: #333333;
  font-size: 19px;
  line-height: 1.5;
  font-weight: bold;
}

.gohan-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.gohan-item {
  margin-bottom: 18px;
}

.gohan-date {
  width: 86%;
  margin: 0 auto 18px;
  padding: 7px 0;
  background-color: #71bd32;
  color: #ffffff;
  border-radius: 50px;
  font-size: 24px;
  line-height: 1.2;
  font-weight: bold;
}

.gohan-item img {
  width: 100%;
}

.gohan-info {
  margin: 10px 0 0;
  gap: 8px;
  flex-wrap: wrap;
	align-items: center;
}

.gohan-info dt {
  width: 58px;
  padding: 6px 0;
  background-color: #b65332;
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}

.gohan-info dd {
  width: calc(100% - 70px);
  margin: 0;
  color: #333333;
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
}

.gohan-info dd span {
  font-size: 14px;
}


/*----------------------------
OPEN情報
------------------------------*/

.open-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.open-card {
  margin-bottom: 26px;
  padding: 30px;
  background-color: #ffffff;
  border: 3px solid #f08300;
  box-sizing: border-box;
}


.open-card a {
  display: block;
  color: #333333;
  text-decoration: none;
  width: 100%;
  max-width: 550px;
  margin: auto;
  position: relative;
}
.open-card a::after {
    content: "";
    position: absolute;
    right: 0px;
    bottom: 0px;
    width: 0;
    height: 0;
    border-top: 30px solid transparent;
    border-right: 30px solid #f08300;
    border-bottom: 0;
    border-left: 0;
}

.open-status {
  width: 82%;
  margin: 0 auto 20px;
  padding: 10px 0;
  background-color: #ed6c00;
  color: #ffffff;
  border-radius: 50px;
  font-size: 22px;
  line-height: 1.25;
  font-weight: bold;
}

.open-logo {
  margin-bottom: 18px;
}

.open-logo img {
  width: 86%;
}

.open-logo.odashimon img {
  width: 60%;
}

.open-category {
  margin: 0 0 18px;
  color: #333333;
  font-size: 17px;
  font-weight: bold;
}

.open-title {
  margin: 0 0 12px;
  color: #ed6c00;
  font-size: 22px;
  line-height: 1.45;
  font-weight: bold;
  border-top: dashed 1px #ed6c00;
  padding-top: 15px;
}

.open-text {
  margin: 20px 0 0;
  color: #333333;
  font-size: 16px;
  line-height: 1.55;
  text-align: left;
  padding-right: 40px;
}


/*----------------------------
最下部バナー
------------------------------*/


.bottom-banner-section img {
  width: 100%;
}


/*************************************************/
/******************スマホスタイル*****************/
/*************************************************/


.sp #mitsuipoint {
	width: calc(100% - 36px);
}
.sp .contents-item.summer-item {
	padding: 0 18px;
}
.sp #ttl .box_inner ul {
  width: 94%;
  margin: 0 auto;
  padding: 20px 0;
  justify-content: space-evenly;
  align-items: stretch;
  gap:10px;
}

.sp #ttl .box_inner ul li {
  width: calc(100% / 2 - 8px);
  display: flex;
  justify-content: center;
  align-items: center;
}


.sp #ttl .box_inner ul li a {
  width: 100%;
  height: 100%;
  padding: 12px 0px 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3.5vw;
}

.sp #ttl .box_inner ul li::after {
  bottom: 7%;
  left: 50%;
}

.sp .movie_box {
  width: 90%;
  padding-bottom: 20px;
}

.sp .movie_box iframe {
  aspect-ratio: 1 / 1;
}

.sp .movie-lead {
  font-size: 4.4vw;
}

.sp .sale-btn {
  width: 74%;
}

.sp .sale-btn a {
  padding: 14px 0;
  font-size: 4.5vw;
}

.sp #contents-main .section h3 {
  width: 100%;
  margin-bottom: 14px;
  padding: 0 0 5px;
  font-size: 90%;
}

.sp .summer-item .content_box {
  padding: 0px 20px 10px;
}

.sp .summer-title {
  margin-bottom: 0px;
  padding: 0;
}

.sp .summer-title-sub {
  font-size: 3.2vw;
}

.sp .summer-title-main {
  font-size: 11vw;
}

.sp .contents-item .item-list .item-card {
  padding-bottom: 28px;
}

.sp .contents-item .item-list .item-card + .item-card {
  padding-top: 30px;
}
.sp .contents-item .item-list .item-card:last-child{
    padding-bottom: 0;
}

.sp .contents-item .item-list .item-card:last-child::after{    
    bottom: 20px;
}

.sp .item-text {
  width: 100%;
}

.sp .item-desc {
  font-size: 4.6vw;
}

.sp .item-name {
  font-size: 3.5vw;
}

.sp .item-price {
  font-size: 3.5vw;
}

.sp .event-section .content_box {
  padding: 0 18px;
}

.sp .event-card {
  margin-bottom: 22px;
  padding: 18px 16px 16px;
}

.sp .event-card::after {
  border-top-width: 16px;
  border-right-width: 16px;
}

.sp .event-date {
  width: 88%;
  margin-bottom: 14px;
  padding: 7px 0;
  font-size: 5.5vw;
}

.sp .event-card h4 {
  margin-bottom: 16px;
  font-size: 4.7vw;
}

.sp .event-image {
  margin-bottom: 16px;
}

.sp .event-image.narrow img {
  width: 84%;
}

.sp .event-text {
  margin-bottom: 14px;
  padding-bottom: 14px;
  font-size: 3.5vw;
}

.sp .event-info {
  gap: 6px 10px;
}

.sp .event-info dt {
  width: 55px;
  font-size: 4vw;
}

.sp .event-info dd {
  width: calc(100% - 65px);
  font-size: 4vw;
}
.sp .event-info dd span{
    font-size: 3vw;
}

.sp .gohan-box {
  padding: 20px 16px 16px;
}

.sp .gohan-box::after {
  border-top-width: 16px;
  border-right-width: 16px;
}

.sp .gohan-title {
  width: 100%;
}

.sp .gohan-lead {
  font-size: 4vw;
}

.sp .gohan-date {
  width: 88%;
  font-size: 5vw;
}

.sp .gohan-info dt {
  width: 55px;
  font-size: 4vw;
}

.sp .gohan-info dd {
  width: calc(100% - 65px);
  font-size: 4vw;
}

.sp .gohan-info dd span {
  font-size: 3vw;
}

.sp .open-section .content_box {
  padding: 0 18px;
}

.sp .open-card {
  margin-bottom: 22px;
  padding: 20px 16px 22px;
}

.sp .open-status {
  width: 84%;
  font-size: 5vw;
}

.sp .open-category {
  font-size: 3.7vw;
}

.sp .open-title {
  font-size: 4vw;
}

.sp .open-text {
  font-size: 3.2vw;
}

.sp .bottom-banner-section .content_box {
  padding: 0 18px;
}

.sp .caution {
  padding: 0 18px;
}