#baguetteBox-overlay{display:none;opacity:0;position:fixed;overflow:hidden;top:0;left:0;width:100%;height:100%;z-index:1000000;background-color:#222;background-color:rgba(0,0,0,.8);-webkit-transition:opacity .5s ease;transition:opacity .5s ease}#baguetteBox-overlay.visible{opacity:1}#baguetteBox-overlay .full-image{display:inline-block;position:relative;width:100%;height:100%;text-align:center}#baguetteBox-overlay .full-image figure{display:inline;margin:0;height:100%}#baguetteBox-overlay .full-image img{display:inline-block;width:auto;height:auto;max-height:100%;max-width:100%;vertical-align:middle;-webkit-box-shadow:0 0 8px rgba(0,0,0,.6);-moz-box-shadow:0 0 8px rgba(0,0,0,.6);box-shadow:0 0 8px rgba(0,0,0,.6)}#baguetteBox-overlay .full-image figcaption{display:block;position:absolute;bottom:0;width:100%;text-align:center;line-height:1.8;white-space:normal;color:#ccc;background-color:#000;background-color:rgba(0,0,0,.6);font-family:sans-serif}#baguetteBox-overlay .full-image:before{content:"";display:inline-block;height:50%;width:1px;margin-right:-1px}#baguetteBox-slider{position:absolute;left:0;top:0;height:100%;width:100%;white-space:nowrap;-webkit-transition:left .4s ease,-webkit-transform .4s ease;transition:left .4s ease,-webkit-transform .4s ease;transition:left .4s ease,transform .4s ease;transition:left .4s ease,transform .4s ease,-webkit-transform .4s ease,-moz-transform .4s ease}#baguetteBox-slider.bounce-from-right{-webkit-animation:bounceFromRight .4s ease-out;animation:bounceFromRight .4s ease-out}#baguetteBox-slider.bounce-from-left{-webkit-animation:bounceFromLeft .4s ease-out;animation:bounceFromLeft .4s ease-out}@-webkit-keyframes bounceFromRight{0%,100%{margin-left:0}50%{margin-left:-30px}}@keyframes bounceFromRight{0%,100%{margin-left:0}50%{margin-left:-30px}}@-webkit-keyframes bounceFromLeft{0%,100%{margin-left:0}50%{margin-left:30px}}@keyframes bounceFromLeft{0%,100%{margin-left:0}50%{margin-left:30px}}.baguetteBox-button#next-button,.baguetteBox-button#previous-button{top:50%;top:calc(50% - 30px);width:44px;height:60px}.baguetteBox-button{position:absolute;cursor:pointer;outline:0;padding:0;margin:0;border:0;-moz-border-radius:15%;border-radius:15%;background-color:#323232;background-color:rgba(50,50,50,.5);color:#ddd;font:1.6em sans-serif;-webkit-transition:background-color .4s ease;transition:background-color .4s ease}.baguetteBox-button:focus,.baguetteBox-button:hover{background-color:rgba(50,50,50,.9)}.baguetteBox-button#next-button{right:2%}.baguetteBox-button#previous-button{left:2%}.baguetteBox-button#close-button{top:20px;right:2%;right:calc(2% + 6px);width:30px;height:30px}.baguetteBox-button svg{position:absolute;left:0;top:0}.baguetteBox-spinner{width:40px;height:40px;display:inline-block;position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-20px}.baguetteBox-double-bounce1,.baguetteBox-double-bounce2{width:100%;height:100%;-moz-border-radius:50%;border-radius:50%;background-color:#fff;opacity:.6;position:absolute;top:0;left:0;-webkit-animation:bounce 2s infinite ease-in-out;animation:bounce 2s infinite ease-in-out}.baguetteBox-double-bounce2{-webkit-animation-delay:-1s;animation-delay:-1s}@-webkit-keyframes bounce{0%,100%{-webkit-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes bounce{0%,100%{-webkit-transform:scale(0);-moz-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1)}}.header-container .navi {
background: linear-gradient(
#282d48 0%,
#3f4a8c 100%
);
border-top:2px solid #ea3535;
border-bottom:2px solid #ea3535;
}
.navi{
border: 0;
background-color: transparent;
}
#navi .navi-in>.menu-header .sub-menu {
background: linear-gradient(
#282d48 0%,
#3f4a8c 100%
);
}
#navi .navi-in a{
color: #fbfcfe;
transition: background-color 0.7s;
}
#navi .navi-in a:hover {
color: black;
background-color:rgba(206, 208, 214, 0.7);
}
.hlt-top-menu-wrap .header-container{
background: linear-gradient(
#282d48 0%,
#3f4a8c 100%
);
border-top:2px solid #ea3535;
border-bottom:2px solid #ea3535;
color: #fff;
}
.header-container{
color: #fff;
}
.hlt-top-menu-wrap .header-container .navi{
border: 0;
}
.header{
background-image: url(//suginagomi.com/wp-content/themes/cocoon-master/skins/skin-samuraiblue/images/samuraiblue_header.jpg);
}
.site-name-text-link,
.site-name-text-link:hover{
color: #fff;
}
body{
background: url(//suginagomi.com/wp-content/themes/cocoon-master/skins/skin-samuraiblue/images/samuraiblue_background.jpg) repeat;
}  .a-wrap { -webkit-transition: all .5s;
transition: all .5s;
}
.a-wrap:not(.prev-post, .next-post, .prev-next-home) {
border-radius: 4px;
} .a-wrap .blogcard {
border-color: #7086aa;
} .a-wrap:hover {
background-color: #dee5f3;
-webkit-transform: translateY(-2px);
-ms-transform: translateY(-2px);
transform: translateY(-2px);
box-shadow: 0 0 8px rgba(0, 0, 0, 0.24); }
.ecb-entry-border .entry-card-wrap,
.recb-entry-border .related-entry-card-wrap,
.tagcloud a,
.author-box,
.comment-reply-link,
.ranking-item{
border-color: #7086aa;
}  .article .toc{
margin: 15px auto;
border:none;
} .toc-title {
padding: .1em 3em;
border-top:1px solid #d3d6db;
border-bottom:1px solid #d3d6db;
border-radius: 4px;
font-size: 130%;
background-image: linear-gradient(
45deg,
#19295a 0%,
#19295a 15%,
#d3d6db 15%,
#d3d6db 70%,
transparent 0
),
linear-gradient(
-45deg,
#19295a 0%,
#19295a 15%,
#d3d6db 15%,
#d3d6db 70%,
transparent 0
);
} .article .toc .toc-content{
margin:2px 0px;
padding: .2em 1em 1em;
border:1px solid #d3d6db;
border-radius: 4px;
background-image: linear-gradient(45deg, #d3d6db 5%, transparent 0),
linear-gradient(-45deg, #d3d6db 5%, transparent 0);
} .article h2 {
padding: .6em 1em;
background-color:#19295a;
border-right: 10px solid #d3d6db;
border-left: 30px double #d3d6db;
border-radius: 7px;
color: #f5f3f3;
position: relative;
}
.article h2:after {
position: absolute;
left: -10px;
bottom: 0;
content: '';
height: 100%;
border-left: 10px solid #fbfcfe;
} .article h3 {
padding: .4em 3em;
border:1px solid #d3d6db;
border-radius: 4px;
background-image: repeating-linear-gradient(
45deg,
#19295a 0%,
#19295a 7%,
#fbfcfe 7%,
#fbfcfe 8%,
#19295a 8%,
#19295a 9%,
#d3d6db 9%,
#d3d6db 91%,
#19295a 91%,
#19295a 92%,
#fbfcfe 92%,
#fbfcfe 93%,
#19295a 93%,
#19295a
);
} .article h4 {
position: relative;
padding: 0 0 2px 32px;
border:none;
border-bottom: 2px solid #19295a;
} .article h4:before, .article h4:after {
content: "";
position: absolute;
bottom: 0;
width: 12px;
height: 12px;
border: 2px solid #19295a;
margin: auto;
}
.article h4:before {
top: -20px;
left: 0px;
}
.article h4:after {
top: -8px;
left: 6px;
} .article h5 {
border-top: none;
border-bottom: solid 2px #d3d6db;
position: relative;
} .article h5:after {
position: absolute;
content: " ";
display: block;
border-bottom: solid 2px #19295a;
bottom: -3px;
left: -3px;
width: 15%;
} .article h6 {
position: relative;
padding: 0 0 2px 32px;
border-bottom: 1px solid #19295a;
} .article h6:after {
position: absolute;
top: 5px;
left: 4px;
z-index: 2;
content: '';
width: 12px;
height: 12px;
background-color: #19295a;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
} .sidebar h2,
.sidebar h3 {
color: #282d48;
background:none;
position: relative;
padding: 10px 0 2px 28px;
border-bottom: 6px double #282d48;
}
.sidebar h2:before, .sidebar h2:after,
.sidebar h3:before, .sidebar h3:after {
content: "";
position: absolute;
margin: auto;
}
.sidebar h2::before,
.sidebar h3:before {
width: 12px;
height: 12px;
top: 0;
left: 14px;
background: #282d48;
transform: rotate(50deg);
}
.sidebar h2::after,
.sidebar h3:after {
width: 8px;
height: 8px;
top: 18px;
left: 6px;
background: #19295a;
transform: rotate(20deg);
}  .search-edit,
input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
textarea, select {
border-radius: 5px;
} input[type='submit'] {
background: linear-gradient(#19295a 0% , #3f4a8c  100%);
color: #fff;
font-size: 22px;
border:none;
border-radius: 5px;
} .pager-post-navi:not(.post-navi-square) a.prev-post {
margin-bottom: 8px;
}  @-webkit-keyframes criss-cross-left {
0% {
left: -20px;
}
50% {
left: 50%;
width: 20px;
height: 20px;
}
100% {
left: 50%;
width: 110%;
height: 375px;
}
}
@keyframes criss-cross-left {
0% {
left: -20px;
}
50% {
left: 50%;
width: 20px;
height: 20px;
}
100% {
left: 50%;
width: 110%;
height: 375px;
}
}
@-webkit-keyframes criss-cross-right {
0% {
right: -20px;
}
50% {
right: 50%;
width: 20px;
height: 20px;
}
100% {
right: 50%;
width: 110%;
height: 375px;
}
}
@keyframes criss-cross-right {
0% {
right: -20px;
}
50% {
right: 50%;
width: 20px;
height: 20px;
}
100% {
right: 50%;
width: 110%;
height: 375px;
}
} .pagination-next-link {
color: #fbfcfe;
background-color: #19295a;
border-top: 1px solid #d3d6db;
border-right: 8px solid #d3d6db;
border-bottom: 1px solid #d3d6db;
border-left: 8px solid #d3d6db;
border-radius: 7px;
} .pagination-next a{
position: relative;
display: block;
overflow: hidden;
width: 100%;
}
.pagination-next a:before, .pagination-next a:after {
position: absolute;
top: 50%;
content: '';
width: 20px;
height: 20px;
background-color: #d3d6db;
border-radius: 50%;
box-sizing: border-box;
transition: 0.5s ease-in-out;
z-index: -1;
}
.pagination-next a:before {
left: -20px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.pagination-next a:after {
right: -20px;
-webkit-transform: translate(50%, -50%);
transform: translate(50%, -50%);
}
.pagination-next a:hover {
position: relative;
background-color: #19295a;
z-index:100;
color: #19295a;
}
.pagination-next a:hover:before {
-webkit-animation: criss-cross-left 0.8s both;
animation: criss-cross-left 0.8s both;
-webkit-animation-direction: alternate;
animation-direction: alternate;
}
.pagination-next a:hover:after {
-webkit-animation: criss-cross-right 0.8s both;
animation: criss-cross-right 0.8s both;
-webkit-animation-direction: alternate;
animation-direction: alternate;
} .page-numbers {
background-color: #d3d6db;
border-radius: 99px;
border: 2px solid #19295a;
}
.page-prev-next{
border-radius: 5px;
} .pagination .current{
color: #fbfcfe;
background-color: #19295a;
border: 2px solid #d3d6db;
border-radius: 50%;
} #container .sns-buttons a{
background-color: #19295a;
color: #fff;
border: 0;
} .boxwt-red,
.boxwt-green,
.boxwt-blue,
.boxwt-brown,
.boxwt-purple {
position: relative;
margin: 2em 0;
border-radius: 8px;
}
.boxwt-title {
position: absolute;
display: inline-block;
top: -13px;
left: 10px;
padding: 0 9px;
line-height: 1;
font-size: 19px;
background: #FFF;
font-weight: bold;
}
.boxwt-red ul,
.boxwt-green ul,
.boxwt-blue ul,
.boxwt-brown ul,
.boxwt-purple ul {
margin: 1.5em 0 1em 0;
}
.boxwt-red ul li,
.boxwt-green ul li,
.boxwt-blue ul li,
.boxwt-brown ul li,
.boxwt-purple ul li {
line-height: 1.2;
padding: 0.5em;
list-style-type: none!important;
}
.boxwt-red ul li:before,
.boxwt-green ul li:before,
.boxwt-blue ul li:before,
.boxwt-brown ul li:before,
.boxwt-purple ul li:before {
font-family: FontAwesome;
content: "\f00c";
position: absolute;
left : 1em;
}
.boxwt-red p,
.boxwt-green p,
.boxwt-blue p,
.boxwt-brown p,
.boxwt-purple p {
margin: 1em;
} .boxwt-red {
border: solid 3px #BF1E56;
}
.boxwt-red .boxwt-title {
color: #BF1E56;
}
.boxwt-red ul li:before {
color: #BF1E56;
} .boxwt-green {
border: solid 3px #009C7F;
}
.boxwt-green .boxwt-title {
color: #009C7F;
}
.boxwt-green ul li:before {
color: #009C7F;
} .boxwt-blue {
border: solid 3px #2962AD;
}
.boxwt-blue .boxwt-title {
color: #2962AD;
}
.boxwt-blue ul li:before {
color: #2962AD;
} .boxwt-brown {
border: solid 3px #D6431B;
}
.boxwt-brown .boxwt-title {
color: #D6431B;
}
.boxwt-brown ul li:before {
color: #D6431B;
} .boxwt-purple {
border: solid 3px #9A2475;
}
.boxwt-purple .boxwt-title {
color: #9A2475;
}
.boxwt-purple ul li:before {
color: #9A2475;
} table th, .scrollable-table th {
color:#f5f3f3;
background: linear-gradient(#282d48 0% , #4d5aa2 100%);
} table tr:nth-of-type(2n) {
background-color:#d3d6db;
} table tr:nth-of-type(2n+1) {
background-color:#fbfcfe;
}  @media screen and (max-width: 480px){
.article h2{
padding: .6em 0.2em;
}
.article h3{
padding: .4em 1em;
}
} .font-awesome-5 .boxwt-red ul li:before,
.font-awesome-5 .boxwt-green ul li:before,
.font-awesome-5 .boxwt-blue ul li:before,
.font-awesome-5 .boxwt-brown ul li:before,
.font-awesome-5 .boxwt-purple ul li:before{
font-family: "Font Awesome 5 Free";
font-weight: 900;
}