/* colorbox */
/*
    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;}

/* 
    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:#fff; opacity: 0.9; filter: alpha(opacity = 90);}
#colorbox{outline:0;}
    #cboxContent{margin-top:32px; overflow:visible; background:#000;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{background:#000; padding:1px;}
        #cboxLoadingGraphic{background:url(https://blog-imgs-99.fc2.com/f/i/l/filipinadating/colorbox_loading.gif) no-repeat center center;}
        #cboxLoadingOverlay{background:#000;}
        #cboxTitle{position:absolute; top:-22px; left:0; color:#000;}
        #cboxCurrent{position:absolute; top:-22px; 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:20px; height:20px; position:absolute; top:-20px; background:url(https://blog-imgs-99.fc2.com/f/i/l/filipinadating/colorbox_controls_1.png) no-repeat 0 0;}
        
        /* 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:44px;}
        #cboxPrevious:hover{background-position:0px -25px;}
        #cboxNext{background-position:-25px 0px; right:22px;}
        #cboxNext:hover{background-position:-25px -25px;}
        #cboxClose{background-position:-50px 0px; right:0;}
        #cboxClose:hover{background-position:-50px -25px;}
        .cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious{right:66px;}
        .cboxSlideshow_on #cboxSlideshow{background-position:-75px -25px; right:44px;}
        .cboxSlideshow_on #cboxSlideshow:hover{background-position:-100px -25px;}
        .cboxSlideshow_off #cboxSlideshow{background-position:-100px 0px; right:44px;}
        .cboxSlideshow_off #cboxSlideshow:hover{background-position:-75px -25px;}
#cboxOverlay {
    background: #000;
}
#cboxLoadedContent {
    background: #fff;
}
#cboxLoadedContent {
  padding: 0;
  overflow: auto;
    -moz-box-shadow: 0px 1px 10px #000000;
    -webkit-box-shadow: 0px 1px 10px #000000;
    box-shadow: 0px 1px 10px #000000;
}
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose , #cboxTitle {
  top: -30px;
}
#colorbox, #cboxOverlay, #cboxWrapper {
  overflow: visible ;
}
#cboxTitle {
  color: #fff;
}
#ajax-wrap {/* ajaxを使用する時のみ */
  margin: 20px;
}

/* ブログカード */
/* カード全体像 */
.blogcard {
  margin-bottom: 30px;
  max-width: 100%;
  background-color: white;
  border: 1px solid rgb(211,211,211);
  border-radius: 2px;
  box-shadow: 0 10px 6px -6px rgba(0,0,0,.1);
  padding: 10px;
}

/* float親要素 */
.blogcard-content {
  margin-bottom: 5px;
  overflow: hidden;
}

/* 画像 */
.blogcard-image {
  display: inline-block;
  float: right; /* 画像を左に配置したい場合は left に変更 1/2 */
  margin: 0 0 5px 5px; /* 画像を左に配置したい場合は 0 10px 5px 0 に変更 2/2 */
  width: 100px; /* 画像の表示サイズ変更は数値をpxで変更 1/6 */
  height: 100px; /* 画像の表示サイズ変更は数値をpxで変更 2/6 */
  border-radius: 20px;
}

.blogcard-image-wrapper {
  display: inline-block;
  width: 100px; /* 画像の表示サイズ変更は数値をpxで変更 3/6 */
  height: 100px; /* 画像の表示サイズ変更は数値をpxで変更 4/6 */
}

.blogcard-image-wrapper img {
  width: 100px; /* 画像の表示サイズ変更は数値をpxで変更 5/6 */
  height: 100px; /* 画像の表示サイズ変更は数値をpxで変更 6/6 */
  border-radius: 20px;
  object-fit: cover;
  object-position: center center;
}

/* タイトル */
.blogcard-title {
  margin-bottom: 5px;
  line-height: 1.4;
  font-size: 15px;
  font-weight: bold;
}

.blogcard-title a {
  color: rgb(61,63,68);
  word-break: break-all;
  text-decoration: none;
}

.blogcard-title a:hover {
  text-decoration: underline;
}

/* 引用 */
.blogcard blockquote {
  margin: 0;
  border: 0;
  padding: 0;
  position: static;
}

.blogcard blockquote:before,
.blogcard blockquote:after {
  content: none;
}

/* 記事概要 */
.blogcard-description {
  line-height: 1.5;
  font-size: 13px;
}

/* フッター(元記事サイト名とリンク) */
.blogcard-footer {
  font-size: 12px;
}

.blogcard-footer a {
  color: rgb(154,165,171);
  text-decoration: underline;
}

.blogcard-footer a img {
  margin-right: 5px;
  vertical-align: top;
}

/* toc */
.inner-contents ol.chapter {
  margin: 0;
}

#toc {
  margin: 30px auto;
  width: 100%;
  background-color: rgb(249,255,255);
  border: 1px solid rgb(209,215,215);
  line-height: 1.5;
  padding: 3em 40px 0 0;
  position: relative;
}

#toc a {
  color: #6c6868;
}
 
#toc a:hover {
  color: rgb(51,51,51);
  text-decoration: underline;
  text-decoration-color: rgb(51,51,51);
}

.no-toc {
  display: none;
}

#toc:before {
  content: "\f03a";
  display:none;
  font-family:'Font Awesome 5 Solid'
}

#toc .svg-inline--fa {
  margin-left:-7px;
  position:absolute;
  top:1em;
  left:50%
}

.chapter li a {
  display: block;
  width: 100%;
  border-top: 1px solid rgb(229,235,235);
  color: rgb(51,51,51);
  padding: 5px 0;
  word-break: break-all;
}

.back-toc {
  margin: 1em 0;
  text-align: right;  
}

.back-toc a {
  color: #6c6868;
}
 
.back-toc a:hover {
  color: rgb(51,51,51);
  text-decoration: underline;
  text-decoration-color: rgb(51,51,51);
}

/* チャット風会話 */
/* 左右 */
.b-left-wrapper,
.b-right-wrapper {
  margin: 0 auto 10px; /* 後続要素との距離は10px */
  width: 100%;
  min-height: 80px; /* アイコン画像の高さと同じ数値を入れます */
}

/* 左 */
.b-left-wrapper {
  padding-left: 100px; /* アイコン画像の横幅+吹き出しまでの距離 注意1 */
}

/* 右 */
.b-right-wrapper {
  padding-right: 100px; /* アイコン画像の横幅+吹き出しまでの距離 注意2 */
  text-align: right;
}

/* 左右吹き出し共通 */
.b-left,
.b-right {
  display: inline-block;
  width: 100%;
  max-width: 500px; /* 吹き出しの横幅最大値指定 */
  border-radius: 6px;
  padding: 10px 15px;
  position: relative;
}

/* 文字色 */
.b-left {
  background-color: rgb(255,105,180); /* 吹き出し背景色 */
  color: white;
  border: 2px solid rgb(255,105,180); /* 吹き出しボーダー色 */
}

.b-right {
  background-color: rgb(240,240,240); /* 吹き出し背景色 */
  color: rgb(51,51,51);
  border: 2px solid rgb(160,160,160); /* 吹き出しボーダー色 */
}

/* 左右吹き出し角部分共通 */
.b-left:before,
.b-right:before {
  content: "";
  width: 10px;
  height: 10px;
  position: absolute;
  top: 15px; /* 角の位置 吹き出し上辺から15px下 */
}

.b-left:before {
  background-color: rgb(255,105,180); /* 吹き出し背景色と同じ色を指定 */
  border-bottom: 2px solid rgb(255,105,180); /* 吹き出しボーダー色と同じ色を指定 */
}

.b-right:before {
  background-color: rgb(240,240,240); /* 吹き出し背景色と同じ色を指定 */
  border-bottom: 2px solid rgb(160,160,160); /* 吹き出しボーダー色と同じ色を指定 */
}

/* 左吹き出し角部分 */
.b-left:before {
  border-left: 2px solid rgb(255,105,180); /* 吹き出しボーダー色と同じ色を指定 */
  background-color: rgb(255,105,180); /* 吹き出し背景色 */
  left: -8px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* 右吹き出し角部分 */
.b-right:before {
  border-right: 2px solid rgb(160,160,160); /* 吹き出しボーダー色と同じ色を指定 */
  background-color: rgb(240,240,240); /* 吹き出し背景色 */
  right: -8px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/* 左右アイコン共通 */
.b-left:after,
.b-right:after {
  content: "";
  width: 80px; /* アイコン横幅 */
  height: 80px; /* アイコン縦幅 */
  border-radius: 50%; /* アイコン円形指定 */
  position: absolute;
  top: 0;
}

.b-left:after {
  background: url(https://blog-imgs-103.fc2.com/f/i/l/filipinadating/canstock22819752-1.jpg) center center /cover no-repeat;
  left: -100px; /* 注意1と同じ数値をマイナスで指定 */
}

.b-right:after {
  background: url(https://blog-imgs-83.fc2.com/f/i/l/filipinadating/victoria-court_5.jpg) center center /cover no-repeat;
  right: -100px; /* 注意2と同じ数値をマイナスで指定 */
}

/* swiper */
.swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  text-align: center;
  background: #fff;
  position: relative;
}
.simple .swiper-container,
.simple-white .swiper-container,
.simple-black .swiper-container,
.simple-gray .swiper-container {
  width: 150%;
  margin: 0 -25%;
}
.simple .swiper-slide,
.simple-white .swiper-slide,
.simple-black .swiper-slide,
.simple-gray .swiper-slide,
.auto-fraction .swiper-slide {
  background: #000;
}
.simple .swiper-button-prev,
.simple-white .swiper-button-prev,
.simple-black .swiper-button-prev,
.simple-gray .swiper-button-prev {
  left: calc(25% - 25px);
}
.simple .swiper-button-next,
.simple-white .swiper-button-next,
.simple-black .swiper-button-next,
.simple-gray .swiper-button-next {
  right: calc(25% - 25px);
}
.swiper-slide .caption {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: calc(100%);
  padding: 3px;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  font-size: 12px;
  opacity: 0;
  transition: .3s ease;
}
.swiper-slide-active .caption {
  opacity: 1;
  transition-delay: .5s;
}
.swiper-button-prev.swiper-button-gray,
.swiper-container-rtl .swiper-button-next.swiper-button-gray {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23666666'%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-next.swiper-button-gray,
.swiper-container-rtl .swiper-button-prev.swiper-button-gray {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23666666'%2F%3E%3C%2Fsvg%3E");
}
.simple .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.auto .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 9px;
  position: relative;
  width: 12px;
  height: 12px;
  background-color: #007aff;
  opacity: .4;
}
.simple .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet::before,
.auto .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  border: 0px solid #007aff;
  border-radius: 50%;
}
.simple-white .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.auto-white .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 9px;
  position: relative;
  width: 12px;
  height: 12px;
  background-color: #fff;
  opacity: .4;
}
.simple-white .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet::before,
.auto-white .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  border: 0px solid #fff;
  border-radius: 50%;
}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet:hover, .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
  opacity: 1;
}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
  border-width: 1px;
}
.swiper-pagination-fraction {
  height: 10px;
  color: white;
}

/* table */
table {
  *border-collapse: collapse; /* IE7 and lower */
  width: 100%;   
}

.bordered {
  border: solid #ccc 1px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  border-spacing: 0;
  -webkit-box-shadow: 0 1px 1px #ccc; 
  -moz-box-shadow: 0 1px 1px #ccc; 
  box-shadow: 0 1px 1px #ccc;         
}

.bordered tr:hover {
  background: #fbf8e9;
  -o-transition: all 0.1s ease-in-out;
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -ms-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;     
}    
    
.bordered td, .bordered th {
  border-left: 1px solid #ccc;
  border-top: 1px solid #ccc;
  padding: 5px;
  text-align: center;
  white-space:nowrap;    
}

.bordered th {
  background-color: #dce9f9;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
  background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
  background-image:    -moz-linear-gradient(top, #ebf3fc, #dce9f9);
  background-image:     -ms-linear-gradient(top, #ebf3fc, #dce9f9);
  background-image:      -o-linear-gradient(top, #ebf3fc, #dce9f9);
  background-image:         linear-gradient(top, #ebf3fc, #dce9f9);
  -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; 
  -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;  
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;        
  border-top: none;
  text-shadow: 0 1px 0 rgba(255,255,255,.5); 
}

.bordered td:first-child, .bordered th:first-child {
  border-left: none;
}

.bordered th:first-child {
  -moz-border-radius: 6px 0 0 0;
  -webkit-border-radius: 6px 0 0 0;
  border-radius: 6px 0 0 0;
}

.bordered th:last-child {
  -moz-border-radius: 0 6px 0 0;
  -webkit-border-radius: 0 6px 0 0;
  border-radius: 0 6px 0 0;
}

.bordered th:only-child{
  -moz-border-radius: 6px 6px 0 0;
  -webkit-border-radius: 6px 6px 0 0;
  border-radius: 6px 6px 0 0;
}

.bordered tr:last-child td:first-child {
  -moz-border-radius: 0 0 0 6px;
  -webkit-border-radius: 0 0 0 6px;
  border-radius: 0 0 0 6px;
}

.bordered tr:last-child td:last-child {
  -moz-border-radius: 0 0 6px 0;
  -webkit-border-radius: 0 0 6px 0;
  border-radius: 0 0 6px 0;
}

.zebra {
  border: solid #ccc 1px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  border-spacing: 0;
  -webkit-box-shadow: 0 1px 1px #ccc; 
  -moz-box-shadow: 0 1px 1px #ccc; 
  box-shadow: 0 1px 1px #ccc;
}

.zebra thead th {
  -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; 
  -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;  
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;        
  border-top: none;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

.zebra tbody tr:nth-child(odd) {
  background: #f5f5f5;
  -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; 
  -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;  
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;        
}

.zebra thead th:first-child {
  -moz-border-radius: 6px 0 0 0;
  -webkit-border-radius: 6px 0 0 0;
  border-radius: 6px 0 0 0;
}

.zebra thead th:last-child {
  -moz-border-radius: 0 6px 0 0;
  -webkit-border-radius: 0 6px 0 0;
  border-radius: 0 6px 0 0;
}

.zebra td, .zebra th {
  border-left: 1px solid #ccc;
  border-top: 1px solid #ccc;
  padding: 5px;
  text-align: center;
  white-space:nowrap;     
}

.zebra th {
  background-color: #dce9f9;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
  background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
  background-image:    -moz-linear-gradient(top, #ebf3fc, #dce9f9);
  background-image:     -ms-linear-gradient(top, #ebf3fc, #dce9f9);
  background-image:      -o-linear-gradient(top, #ebf3fc, #dce9f9);
  background-image:         linear-gradient(top, #ebf3fc, #dce9f9);
}

.zebra td:first-child, .zebra th:first-child {
  border-left: none;
}

.zebra tbody tr td:first-child {
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

.zebra th:only-child{
  -moz-border-radius: 6px 6px 0 0;
  -webkit-border-radius: 6px 6px 0 0;
  border-radius: 6px 6px 0 0;
}

.zebra tr:last-child td:first-child {
  -moz-border-radius: 0 0 0 6px;
  -webkit-border-radius: 0 0 0 6px;
  border-radius: 0 0 0 6px;
}
.zebra tbody tr:last-child th {
  -moz-border-radius: 0 0 6px 0;
  -webkit-border-radius: 0 0 6px 0;
  border-radius: 0 0 6px 0;
}
 
@media screen and (max-width: 640px) {
.zebra thead {
	display:none;
}
.zebra tbody th {
	display:block;
}
.zebra tbody td {
	display:block;
        text-align: right;
}
.zebra tbody td::before {
	content: attr(label);
	float: left;
	clear:both;
	font-weight:bold;
}
}