@charset "UTF-8";
* { box-sizing: border-box; color:#767d88; }
html, body { 
  margin:0; padding:0; 
  overflow-x: hidden;
  font-family: "Helvetica Neue",
  Arial,
  "Hiragino Kaku Gothic ProN",
  "Hiragino Sans",
  sans-serif;
}
.red {
  color: #c12835;
}
.font18 {
  font-size: 18px;
}
.b {
  font-weight: 700;
}

  /* PC */
@media screen and (min-width: 769px) {
    .sp_only { display:none!important; }
    .pc_only { display:block; }
    header { position: fixed; top:0; left:0; width:100%; display: flex; justify-content: center; height: 70px; background-color: #ffffff; padding:10px 20px; z-index: 1000; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
    .header_container { display: flex; justify-content: space-between; align-items: center; width: 100%; }
    .header_logo { display: block; position: initial; transform: initial; max-width: 250px; }
    .header_logo img { width:250px; height:auto; display: block; }
    .header_menu { display: block; }
    .header_menu ul { display: flex; margin:0 auto; }
    .header_menu li { list-style: none; margin:0 30px; }
    .header_menu li a { text-decoration: none; color:#474a4d; }
    .header_reserve { max-width: 400px; margin:0 30px 0 0;}
    .reserve_bg a { background:#6c727c; display:block; color:#ffffff; margin:10px; padding:10px 40px; font-size:15px; text-align:center; border-radius: 30px; text-decoration: none; white-space: nowrap;}
    .header_menu p  { float:right; }

    body { margin:70px 0 0 0;}
    section {  margin:0 auto; padding:50px 20px; }
    #slideblk1 { margin:0!important; padding: 0!important; }
    #slideblk1 img {	display: block; height: auto; margin: auto; max-height: 100%; max-width: 100%; object-fit: cover; width: 100%; }
    #slideblk1 .slick-box1 {	margin:0 auto; width: 100%; overflow: hidden;}
    #slideblk1 .slick-track { display: flex !important;}
    #slideblk1 figure { margin:0; }
    #slideblk1 .slick-dots { bottom:0!important;}
    #slideblk1 .slick-dots li.slick-active button { color: #FFFFFF!important; }
    #slideblk1 .slick-dots li.slick-active button:before { color: #FFFFFF!important; }


    #importantns { background-color:#f5f6fb; margin:0 auto; padding:20px; }
    #importantns div { width: 80%; margin:0 auto; }
    #importantns div a { text-decoration: none; }
    #importantns .imtitle { font-size:13px; padding:0 30px 0 0; }
    #importantns .imdate { font-size:13px; padding:0 30px 0 0;}
    #importantns .imtxt { font-size:13px; padding:0 ; }

    #leadsec { margin:50px 0;}
    #leadsec p { text-align: center; font-size: large; line-height: 2.0; margin: 0 auto 50px; }
    #leadsec dl, #news dl { border-top:1px dashed #cccccc; width:40%; margin:0 auto;  }
    #leadsec .newsitm, #news .newsitm { display: flex; margin:20px auto; border-bottom:1px dashed #cccccc; padding:0 0 10px; }
    #leadsec .newsitm dt, #news .newsitm dt { width:30%; text-align: right; font-size: 13px;}
    #leadsec .newsitm dd, #news .newsitm dd { width: 70%; text-align: left; font-size: 13px;}

    #photomenu, #campaign { background-color: #f5f6fb;}
    #leadsec h2, #photomenu h2, #gallery h2, #campaign h2, #news h2 { text-align: center; font-size:45px; margin:0 auto; line-height:1; font-family: "Red Rose", "Georgia", "Times New Roman", serif;}
    #leadsec h2 span, #photomenu h2 span, #gallery h2 span, #campaign h2 span, #news h2 span {display: block; font-size: 14px; margin: 5px 0 30px; font-weight: 200;}
    #photomenu h3 { text-align: center; font-size: 20px; margin: 30px auto 0; font-weight: 400; position: relative; }
    #photomenu h3:before { background-color: #6c727c;  bottom: -5px; content: "";height: 1px; left: 50%; position: absolute; transform: translateX(-50%); width: 50px; }
    #photomenu p , #campaign p{ font-size:14px; text-align: center; margin:0 auto 20px; padding:20px 0; letter-spacing: 1.5px; line-height: 1.7;}
    #photomenu ul , #campaign ul{ display: flex; flex-wrap: wrap; margin:0 auto; list-style: none; padding:0; width: 70%; justify-content: center; }
    #photomenu li { margin:0 30px 30px; width:calc(100% / 4 - 60px); box-sizing: border-box; text-align:center; font-size: 13px; }
    .w40per { width:40%;}
    #photomenu ul li a { text-decoration: none!important; }
    #photomenu .linkbn_menu a, #campaign .linkbn_menu a { border:1px solid #6c727c; display:block; color:#474a4d; margin:10px auto; padding:10px 20px; font-size:1.0em; text-align:center; border-radius:5px; text-decoration:none; background-color: #ffffff;}
    #photomenu img { width:100%; height:auto; max-width:250px; border-radius: 15px; margin: 0 auto 5px;}
    .link2clm { display: flex; width:60%; margin:0 auto;}
    .linklt { width:50%; padding: 10px;}
    
    #gallery, #news { background-color: #ffffff; }
    #gallery ul{ display: flex; flex-wrap: wrap; margin:0 auto; list-style: none; padding:0; width: 70%; justify-content: center; }
    #gallery li { margin:0 20px 30px; width:calc(100% / 4 - 40px); box-sizing: border-box; text-align:center; font-size: 13px; }
    #gallery .imgphoto { display: flex; justify-content: center; align-items: center; margin:30px auto 10px; }
    .imgphoto img { width: 220px; height: 220px; object-fit: cover; } 
    #gallery div .linkbn_menu { margin:0 auto; }
    #gallery .linkbn_menu a { border:1px solid #6c727c; display:block; color:#474a4d; margin:10px auto; padding:10px 20px; font-size:1.0em; text-align:center; border-radius:5px; text-decoration:none; background-color: #ffffff;}
    
    #campaign h3 { text-align: left; font-size: 16px; margin: 0 auto ; font-weight: 700; }
    #campaign .cpitem { display: flex; width:70%; flex-wrap: wrap; margin:0 auto; }
    #campaign .box { width: calc( 100% / 3 - 20px); margin:0 20px 10px 0; }
    #campaign .box:nth-child(3n) { margin-right: auto; }
    #campaign .box p { text-align:left; padding:10px 0 0; font-size: 13px; line-height: 1.5;}
    #campaign .box img { width:100%; height:auto; max-width:350px; margin: 0 auto 5px; border-radius: 5px; }

    footer .ftinner { background-color: #474a4d; padding:20px 0 0;}
    footer ul.corp { display: flex; flex-wrap: wrap; margin:0 auto; width:60%; list-style: none; padding:0; justify-content: center; }
    footer ul.corp li { margin:20px auto 10px; width:calc(100% / 3); box-sizing: border-box; text-align:center; font-size: 13px; border-left:1px solid #989da4; }
    footer ul.corp li:last-child { border-right:1px solid #989da4; }
    footer ul.corp li a { color: #ffffff; text-decoration: none;}
    footer #copyright { color: #474a4d; font-size: 12px; padding:0 0 20px 0;text-align: center;}
    footer .fmenu { display: flex; width: 80%; margin:10px auto;  }
    footer .snsinf { width:30%; margin:0 20px; }
    footer .ftlogo { text-align: center;}
    footer .img100 { width:100%; max-width:40px; height: auto; }
    footer .snslogo { text-align: center;}
    footer .snslogo a { padding:0 5px;}
    footer .fmenulist { width:40%; margin:10px; }
    footer .fmenulist .mlist { display: flex; flex-wrap: wrap; }
    footer .fmenulist .mlist .listin { width:calc(100%/3); }
    footer  .listh { color: #ffffff; padding: 0 0 0 10px!important; margin:0 0 5px!important; border-bottom: none!important; font-size: 15px; font-weight:600 ; }
    footer .fmenulist p { color: #ffffff; border-bottom:1px solid #a1a2a4; padding: 0 0 5px 5px; }
    footer .fmenulist ul, footer .reserve ul, footer .ftothermenu ul { display: flex; flex-wrap: wrap; margin:0 auto; list-style: none; padding:0; width: 100%;  }
    footer .fmenulist li { margin:0 20px 5px; width:100%; box-sizing: border-box;font-size: 13px; text-align: left; }
    footer .fmenulist li a , footer .reserve li a{ color: #ffffff; text-decoration: none;}
    footer .reserve { width:30%; margin:20px 0 10px 20px; }
    footer .reserve p { color: #ffffff; border-bottom:1px solid #a1a2a4; padding: 0 0 5px 5px; }
    footer .reservetxt { font-size:12px; border-bottom:none!important; padding: 0 0 0 15px !important;margin-bottom: 0; }
    footer .tel { font-size:12px; padding: 0 0 0 15px!important; text-align: left; margin: 0 auto !important; border-bottom:none!important; }
    footer .tel a { color: #FFFFFF!important; text-decoration: none; }
    footer .reserve li { margin:0 25px 5px; width:100%; box-sizing: border-box; font-size: 13px; text-align: left; }
    footer .ftothermenu li { margin:0 20px 5px; width:100%; box-sizing: border-box; font-size: 13px; text-align: left; }
    footer .reserve_bg { border-bottom:none!important; padding:0 0 5px!important; text-align: center;}

.menu_overlay_pc {
  position: fixed;
  top: 70px;
  left: 0;
  width: 100%;
  background-color: #d5dfef;
  display: none; /* 初期状態で非表示 */
  justify-content: center;
  align-items: center;
  transition: height 0.4s ease;
  z-index: 999;
}

/* open状態で上書 */
.menu_overlay_pc.open {
  display: flex !important;
  height: 70vh;
  overflow-y: auto;
}
    .menu_content {
  max-width: 1200px;
  margin: 80px auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  padding: 20px;
  background: transparent; 
  width: auto;
    }

    .menu_item {
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        padding: 10px;
    }

    .menu_item img {
        width: 200px;
        height: 100px;
        object-fit: cover;
        border-radius: 8px;
    }

    .menu_item p {
        margin-top: 10px;
        font-size: 14px;
        text-align: center;
    }

    .menu_close {
        position: absolute;
        top: 10px;
        right: 30px;
        font-size: 28px;
        color: #333;
        cursor: pointer;
    }
    
}

/* SP */

@media screen and (max-width: 769px) {
    .pc_only { display:none!important; }
    .sp_only { display:flex; }
    header { background-color: #ffffff; padding:0 5px; margin:0 auto; text-align: center; }
    h1 { margin:10px auto; text-align: center;}
    .header_logo { display: block; position: initial; transform: initial; max-width: 250px; }
    .header_logo img { width:250px; height:auto; display: block; margin: 0 auto; }
        
    .header_menu { display: block; }
    .header_reserve { max-width: 400px; margin:0 30px 0 0;}
    .header_menu p  { float:right; }

    #slideblk1 { margin:0; }
    #slideblk1 img {	display: block; height: auto; margin: auto; max-height: 100%; max-width: 100%; object-fit: cover; width: 100%; }
    #slideblk1 .slick-box1 {	margin:0 auto; width: 100%; overflow: hidden;}
    #slideblk1 .slick-track { display: flex !important;}
    #slideblk1 figure { margin:0; }
    #slideblk1 .slick-dots { bottom:0!important;}
    #slideblk1 .slick-dots li.slick-active button { color: #FFFFFF!important; }
    #slideblk1 .slick-dots li.slick-active button:before { color: #FFFFFF!important; }
    
    #importantns { background-color:#f5f6fb; margin:20px auto 0; padding: 10px 0 10px 10px; }
    #importantns div { width: 100%; margin:0 auto; }
    #importantns div a { text-decoration: none; }
    #importantns .imtitle { font-size:13px; padding:0 10px 0 0; font-weight: 500;}
    #importantns .imdate { font-size:13px; padding:0 10px 0 0;}
    #importantns .imtxt { font-size:13px; padding:0 ; }

    #leadsec { margin:50px 0;}
    #leadsec p { text-align: center; font-size: 16px; line-height: 2.0; margin: 0 auto 50px; }
    #leadsec dl, #news dl { border-top:1px dashed #cccccc; width:100%; margin:0 auto;  }
    #leadsec .newsitm, #news .newsitm { display: flex; margin:20px auto; border-bottom:1px dashed #cccccc; padding:0 0 10px; }
    #leadsec .newsitm dt, #news .newsitm dt { width:20%; text-align: right; font-size: 13px;}
    #leadsec .newsitm dd, #news .newsitm dd { width: 80%; text-align: left; font-size: 13px;}

    #photomenu, #campaign { background-color: #f5f6fb; margin:0 auto; padding:50px 20px;}
    #leadsec h2, #photomenu h2, #gallery h2, #campaign h2, #news h2 { text-align: center; font-size:45px; margin:0 auto; line-height:1; font-family: "Red Rose", serif;}
    #leadsec h2 span, #photomenu h2 span, #gallery h2 span, #campaign h2 span, #news h2 span {display: block; font-size: 14px; margin: 5px 0 15px; font-weight: 200;}
    #photomenu h3 { text-align: center; font-size: 20px; margin: 30px auto 20px; font-weight: 400; position: relative; }
    #photomenu h3:before { background-color: #6c727c;  bottom: -5px; content: "";height: 1px; left: 50%; position: absolute; transform: translateX(-50%); width: 50px; }
    #photomenu p , #campaign p{ font-size:14px; text-align: center; margin:10px auto; letter-spacing: 1.5px; line-height: 1.7; padding:0;}
    #photomenu ul , #campaign ul{ display: flex; flex-wrap: wrap; margin:0 auto; list-style: none; padding:0; width: 100%; justify-content: center; }
    #photomenu li { margin:0 5px 30px; width:calc(100% / 2 - 20px); box-sizing: border-box; text-align:center; font-size: 13px; font-weight: 600; }
    #photomenu ul li a { text-decoration: none!important; }
    .w40per { width:100%;}
    #photomenu .linkbn_menu a, #campaign .linkbn_menu a { border:1px solid #6c727c; display:block; color:#474a4d; margin:10px auto; padding:10px 20px; font-size:1.0em; text-align:center; border-radius:5px; text-decoration:none; background-color: #ffffff;}
    #photomenu img { width:100%; height:auto; max-width:250px; border-radius: 8px; margin: 0 auto 5px;}
    .link2clm { width:100%; margin:0 auto;}
    .linklt { width:100%; padding: 10px;}
    
    #gallery, #news { background-color: #ffffff; margin:0 auto; padding:50px 20px;}
    #gallery ul{ display: flex; flex-wrap: wrap; margin:0 auto; list-style: none; padding:0; width: 100%; justify-content: center; }
    #gallery li { margin:0 10px 30px; width:calc(100% / 2 - 20px); box-sizing: border-box; text-align:center; font-size: 13px; position: relative; }
    #gallery .imgphoto { display: flex; justify-content: center; align-items: center; margin:30px auto 10px; }
    .imgphoto img { width: 100%; object-fit: cover; aspect-ratio: 1/1; } 
    #gallery div .linkbn_menu { margin:0 auto; }
    #gallery .linkbn_menu a { border:1px solid #6c727c; display:block; color:#474a4d; margin:10px auto; padding: 10px 20px; font-size:1.0em; text-align:center; border-radius:5px; text-decoration:none; background-color: #ffffff;}
    
    #campaign h3 { text-align: left; font-size: 16px; margin: 0 auto ; font-weight: 700; }
    #campaign .cpitem { display: flex; width:100%; flex-wrap: wrap; margin:20px auto 0; }
    #campaign .box { width: 100%; margin:10px 0 20px; }
    #campaign .box:nth-child(3n) { margin-right: auto; }
    #campaign .box p { text-align:left; padding: 0 0 10px 0; font-size: 13px; line-height: 1.5;}
    #campaign .box img { width:100%; height:auto; margin: 0 auto 5px; border-radius: 5px; }

    footer .ftinner { background-color: #474a4d; padding:20px 0 0;}
    footer ul.corp { display: flex; flex-wrap: wrap; margin:0 auto; width:100%; list-style: none; padding:0; justify-content: center; }
    footer ul.corp li { margin:20px auto 10px; width:calc(100% / 3); box-sizing: border-box; text-align:center; font-size: 10px; border-left:1px solid #989da4; }
    footer ul.corp li:last-child { border-right:1px solid #989da4; }
    footer ul.corp li a { color: #ffffff; text-decoration: none;}
    footer #copyright { color: #474a4d; font-size: 12px; text-align: center;}
    footer .fmenu { width: 100%; margin:10px auto 30px; }
    footer .snsinf { width:100%; margin:20px 0; }
    footer .ftlogo { text-align: center;}
    footer .img100 { width:100%; max-width:40px; height: auto; }
    footer .snslogo { text-align: center;}
    footer .snslogo a { padding:0 5px;}
    footer .fmenulist { width:100%; margin:10px auto; padding:10px; }
    footer .listm { color: #ffffff; margin: 0 0 5px 0; padding:0 0 0 15px; font-weight:700; }
    footer .listh { color: #ffffff; margin: 5px 20px; padding:0; font-weight:600; font-size: 14px; border-bottom:1px dotted #f5f6fb; }
    footer .fmenulist ul, footer .reserve ul, footer .ftothermenu ul { display: flex; flex-wrap: wrap; margin:0 auto; list-style: none; padding:0; width: 100%;  }
    footer .fmenulist ul { margin:0 auto 15px!important;}
    footer .fmenulist li { margin:0 20px 5px; width:calc(100%/2 - 40px); box-sizing: border-box;font-size: 13px; text-align: left; }
    footer .fmenulist li a , footer .reserve li a{ color: #ffffff; text-decoration: none;}
    footer .reserve { width:100%; margin:20px 0 10px 0; }
    footer .reserve p { color: #ffffff; margin:10px auto 0;padding:30px 0 0 20px; }
    footer .reserve p.reserve_bg { color: #ffffff; border-bottom:1px solid #a1a2a4; margin:10px auto 0; }
    footer .reservetxt { font-size:12px; padding: 0 0 0 20px!important; text-align: center; margin: 0 auto !important; }
    footer .tel { font-size:12px; padding: 0 0 0 20px!important; text-align: center; margin: 0 auto !important; }
    footer .tel a { color: #FFFFFF!important; text-decoration: none; }
    footer .reserve li { margin:0 20px 5px; width:100%; box-sizing: border-box; font-size: 13px; text-align: left; }
    footer .ftothermenu li { margin:0 20px 5px; width:calc(100%/2 - 40px); box-sizing: border-box; font-size: 13px; text-align: left; }
    footer .reserve_bg { border-bottom:none!important; padding:0 0 5px!important; text-align: center;}
    footer .reserve_bg a { background:#879bbd; display:block; width:80%; color:#ffffff; margin:40px auto 10px; padding:10px 40px; font-size:15px; text-align:center; border-radius: 30px; text-decoration: none; white-space: nowrap;}

    /* ▼ ナビのリス�? */
    .bottom_nav ul { display: flex; justify-content: space-around; align-items: center; margin: 0; padding: 5px 0; list-style: none;}
    .bottom_nav li { width:calc(100% / 6); }
    .label { font-size:10px;}
    /* ▼ アイコン */
    .bottom_nav li a { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: #555; font-size: 12px;}
    /* ▼ アイコン */
    .bottom_nav .icon { font-size: 20px; line-height: 1.2;}
    body.menu-open .bottom_nav { display: none;}
    .bottom_nav { position: fixed; bottom: 0; left: 0; width: 100%; background: #ffffff; border-top: 1px solid #ddd; display: flex; justify-content: space-around; align-items: center; height: 60px; z-index: 10001;}
    .bottom_nav li { list-style: none; flex: 1; }
    .bottom_nav li a { display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; color: #666; font-size: 12px; padding: 6px 0; transition: all 0.3s ease; }
    .bottom_nav li .icon img { width: 24px; height: 24px; display: block; object-fit: contain; margin-bottom: 3px; }

    /* ▼ 選択中 */
    .bottom_nav li.active a { background-color: #c4d8e7; color: #405876; font-weight: 600; border-radius: 10px 10px 0 0; }
    .bottom_nav li.active .icon img { filter: brightness(1.1); }
    
  .sp_menu_inner { margin: auto; width: 80%; }
  .sp_menu_inner ul { list-style: none; padding: 0;  }
  .sp_menu_inner li { border-bottom: 1px solid #ddd; margin: 10px 0; }
  .sp_menu_inner a { display: block; padding: 10px; font-size: 16px; color: #333; text-decoration: none;}
body.menu-open {
  overflow: hidden;
  touch-action: none;
}
  .menu_overlay_sp {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  padding: 20px 0 50px;
  background: #d5dfef;
  display: none;
  justify-content: center;
  align-items: flex-start;
  z-index: 9999;
  overflow: hidden;
}

.menu_overlay_sp.open {
  display: flex;
}

.menu_inner {
  background: #ffffff;
  border-radius: 12px;
  width: 90%;
  padding: 10px;
  max-height: calc(100vh - 80px); 
  overflow-y: auto; 
  -webkit-overflow-scrolling: touch; /* iOS慣性スクロール */
  position: relative;
}

    .menu_content {
  max-width: 100%;
  margin: 10px auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
  padding: 5px;
  background: transparent; 
  width: auto;
    }
    .menu_item {
        border-radius: 10px;
        padding: 10px 0 0;
    }

    .menu_item img {
        width: 150px;
        height: 80px;
        object-fit: cover;
        border-radius: 8px;
    }

    .menu_item p {
        margin: 0;
        font-size: 12px;
        text-align: center;
    }
    .menu_item a {
      text-decoration: none;
    }
.close_btn {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 24px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 999;
}
    }