/*
      Colorbox Core Style:
      The following CSS is consistent between example themes and should not be altered.
  */
 #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden; -webkit-transform: translate3d(0,0,0);}
 #cboxWrapper {max-width:none;}
 #cboxOverlay{position:fixed; width:100%; height:100%;}
 #cboxMiddleLeft, #cboxBottomLeft{clear:left;}
 #cboxContent{position:relative;}
 #cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
 #cboxTitle{margin:0;}
 #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
 #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
 .cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
 .cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
 #colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;border-radius: 20px; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);}

 /*
      User Style:
      Change the following styles to modify the appearance of Colorbox.  They are
      ordered & tabbed in a way that represents the nesting of the generated HTML.
  */
 #cboxOverlay{background:#ffe8f0; opacity: 0.8; filter: alpha(opacity = 80);} /* 薄いピンク色のオーバーレイ */
 #colorbox{outline:0;}
      #cboxContent{margin-top:40px; overflow:visible; background:#fff0f5; border-radius: 30px; padding: 10px;} /* コンテンツ領域を白に近いピンクに、角を丸く、少しpaddingを追加 */
          .cboxIframe{background:#fff;}
          #cboxError{padding:30px; border:2px solid #ffb6c1; border-radius: 10px; background-color: #fff;} /* エラーメッセージを少し可愛らしく */
          #cboxLoadedContent{background:#fff; padding:10px; border-radius: 20px;} /* ローディング後のコンテンツ領域も白に、paddingと角丸を調整 */
          #cboxLoadingGraphic{background:url(images/loading_cute.gif) no-repeat center center;} /* ローディングアニメーションを可愛いものに変更 (images/loading_cute.gif に変更を想定) */
          #cboxLoadingOverlay{background:#fff0f5; opacity: 0.8; filter: alpha(opacity = 80); border-radius: 30px;} /* ローディングオーバーレイも薄いピンクに */
          #cboxTitle{position:absolute; top:-30px; left:0; color:#ff69b4; font-size: 14px;} /* タイトルを濃いめのピンクに、少し小さく */
          #cboxCurrent{position:absolute; top:-30px; right:205px; text-indent:-9999px;}

          /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
          #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {
 			border:0; padding:0; margin:0; overflow:visible; text-indent:-9999px; width:24px; height:24px; position:absolute; top:-30px;
 			background-image: url(images/controls_cute.png); /* ボタンの画像を可愛いものに変更 (images/controls_cute.png に変更を想定) */
 			background-repeat: no-repeat;
 		}

          /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
          #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

          #cboxPrevious{background-position:0px 0px; right:50px;}
          #cboxPrevious:hover{background-position:0px -30px;}
          #cboxNext{background-position:-30px 0px; right:25px;}
          #cboxNext:hover{background-position:-30px -30px;}
          #cboxClose{background-position:-60px 0px; right:0;}
          #cboxClose:hover{background-position:-60px -30px;}
          .cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious{right:75px;}
          .cboxSlideshow_on #cboxSlideshow{background-position:-90px -30px; right:50px;}
          .cboxSlideshow_on #cboxSlideshow:hover{background-position:-120px -30px;}
          .cboxSlideshow_off #cboxSlideshow{background-position:-120px 0px; right:50px;}
          .cboxSlideshow_off #cboxSlideshow:hover{background-position:-90px -30px;}

 #cboxOverlay {
  background: #ffe8f0; /* オーバーレイの色を薄いピンクに */
 }
 #cboxLoadedContent {
  background: #fff; /* LoadedContentの背景を白に */
 }
 #cboxLoadedContent {
  padding: 10px; /* LoadedContentのpaddingを調整 */
  overflow: auto;
  -moz-box-shadow: 0px 3px 15px #ffb6c1; /* ボックスシャドウをピンク色に、少し強めに */
  -webkit-box-shadow: 0px 3px 15px #ffb6c1;
  box-shadow: 0px 3px 15px #ffb6c1;
  border-radius: 20px; /* 角を丸く */
 }
 #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose , #cboxTitle {
  top: -35px; /* ボタンとタイトルの位置を少し下に */
 }
 #colorbox, #cboxOverlay, #cboxWrapper {
  overflow: visible ;
 }
 #cboxTitle {
  color: #ff69b4; /* タイトルの色を濃いめのピンクに */
  font-weight: bold; /* タイトルを太字に */
  font-size: 16px; /* タイトルのフォントサイズを少し大きく */
 }
 #inline-content {/* インラインを使用する時のみ */
  margin: 20px;
  font-size: 16px; /* ← 文字サイズを大きくするスタイルを追加 (例: 16px) */
 }
 #ajax-wrap {/* ajaxを使用する時のみ */
  margin: 20px;
 }