@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/
@font-face {
font-family: 'verticalbar';
src: url(/font/verticalbar.woff);
unicode-range: U+007C;
}
@font-face {
font-family: 'gelatio';
src: url(/font/Gelasio-Medium.woff2);
}
@font-face {
font-family: 'sea-lanterns';
src: url(/font/sea-lanterns.woff);
}
* {
font-family: verticalbar;
}
body {
background-color: #111111;
}
.breadcrumb, .article-header {
max-width: 750px;
margin-left:auto;
margin-right:auto;
}
.header-container, .main, .sidebar, .footer {
background-color: transparent;
}
main.main {
padding: 20px 16px;
}
p:empty {
display: none;
}
.blogcard-thumbnailimg, .card-thumb img {
object-fit:contain;
background-color:#24221f;
}
.ect-vertical-card .a-wrap .entry-card-content {
padding:0.4em;
text-align:center;
}
.ect-vertical-card .a-wrap .entry-card-content h2 {
font-size:0.8em;
}
.article a[href]:not([href*="#"]){
color:#f8f1dc;
text-decoration:none;
}
.article h1 {
color: #f8f8f8;
margin-bottom: 10px;
border-bottom: 2px solid #f8f8f8;
padding-bottom: 0.2em;
text-align:center;
}
.article h1 span {
font-size: 0.74em;
}
.article h2 {
color: #f8f8f8;
margin-top: 60px;
border-bottom: 2px solid #f8f8f8;
margin-bottom: 0px;
text-align:center;
}
.article h2::before {
display: none;
}
.article h2::after {
display: none;
}
.article h2 > span::after {
width: 0%;
}
.article h3 {
position: relative;
color: #f8f8f8;
margin-top: 50px;
font-size: 1.3em;
border-left: none;
margin-bottom: 0px;
padding-bottom: 6px;
text-align:center;
}
.article h3::after {
content: '';
width: 80%;
height: 6px;
display: inline-block;
border-bottom: 2px solid #222222;
position: absolute;
bottom: 0px;
left : 50%;
transform: translateX(-50%);
}
.engtitle {
font-size: 1.2em;
margin-bottom: 12px;
font-family: Georgia;
text-align: center;
}
.children .current-cat {
font-size: 17px;
}
.twitter-tweet {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.menu-content {
color: #312522;
}
.mobile-menu-buttons {
width: 18%;
margin-top: 0;
margin-left: 82%;
margin-right: auto;
margin-bottom: 0;
box-shadow: none;
background-color: rgb(0 0 0 / 0);
border-radius: 0 0 0 8px;
}
.mobile-menu-buttons .menu-button {
width: 100%;
}
.sidebar-menu-button{
height:48px;
color: #ffffff;
background-color: #291A0B;
border-radius: 0 0 0 8px;
}
.cat-label {
display:none;
}
.entry-categories-tags {
text-align:center;
}
.column-wrap.column-3 > div {
width: 49.5%;
}
/* サイドバー */
.widget_categories > ul > li  {
margin-top: 12px;
}
.widget_categories > ul > li > a {
font-size: 0.9em;
font-weight: 420;
padding-top: 6px;
padding-left: 0.9em;
padding-right: 4px;
padding-bottom: 6px;
}
.widget_categories .children li a  {
font-size: 0.9em;
font-weight: 420;
padding-top: 6px;
padding-bottom: 6px;
}
/*大型ヘッダー*/
.vlemo-header {
width: 100%;
position: relative;
margin-left: auto;
margin-right: auto;
background: transparent;
text-align: center;
}
.vlemo-hd-bg {
width: 100%;
height:fit-content;
padding-bottom:20px;
margin-left: auto;
margin-right: auto;
background-image: url("https://sealanterns.com/img/lan_top.webp");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.vlemo-hd-bg a {
display:block;
width:100%;
margin-left: auto;
margin-right: auto;
-webkit-tap-highlight-color: transparent;
}
.vlemo-hd-bg a:active {
opacity:0.6;
}
.vlemo-hd-bg img {
width:22%;
max-height:260px;
filter: drop-shadow(0 0 14px #ffffff);
margin: 0;
margin-top:-10px;
padding: 0;
vertical-align: bottom;
pointer-events: none;
}
.vlemo-header nav {
margin-top: -7px;
}
.vlemo-header > a img {
width: 750px;
margin: 0; padding: 0;
vertical-align: bottom;
pointer-events: none;
}
.vlemo-header ul {
width: 750px;
padding: 0px;
overflow: hidden;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
background: transparent;
}
.vlemo-header ul li {
float: left;
list-style: none;
width: 125px;
position: relative;
}
.vlemo-header ul li img {
pointer-events: none;
width: 100%;
}
.vlemo-header ul li a {
position: absolute;
width: 100%; height: 100%;
top: 0; left: 0;
text-decoration: none;
text-align: center;
}
.vlemo-header ul li a p {
margin-top: revert;
line-height: 120%;
color: #ffefbc;
font-family: gelatio;
font-size: 20px;
}
/*フッター*/
.go-to-top-button, .go-to-top-button:hover{
background: #312522;
color: #e2d9d1;
width: 50px;
height: 50px;
border-radius: 25px;
font-size: 16px;
}
.lemoft {
width: 100%;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
background: transparent;
text-align: center;
}
.lemoft ul {
width: 100%;
margin-left: 0;
padding-left: 0 !important;
display: flex;
justify-content: center;
font-size: 16px;
}
.lemoft ul li {
list-style: none;
margin: 0 12px;
}
.lemoft a {
color: #ffefbc;
text-decoration: none;
}
.lemoft span {
width: 100%;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
font-size: 14px;
color: #f8f8f8;
display: block;
}
/*TIMELINE*/
.timeline-filter-box {
margin-top:30px;
padding-top:20px;
border: 1px solid #9d8c88;
}
#sea-timeline h3 {
padding-left:1px;
text-align:left;
}
#sea-timeline h3::after {
content: '';
width: 98%;
height: 6px;
display: inline-block;
border-bottom: 1px solid #9d8c88;
position: absolute;
bottom: 0px;
left : 50%;
transform: translateX(-50%);
}
#sea-timeline > ul {
padding-left:2px;
}
#sea-timeline >  ul > li {
font-weight:bold;
margin-top:8px;
margin-bottom:16px;
margin-left:8px;
list-style: none;
}
#sea-timeline ul li ul {
padding-left:8px;
}
#sea-timeline .date1 {
font-weight:bold;
}
#sea-timeline .date2 {
text-decoration:underline;
}
.date1::after, .date2::after {
content: " : ";
text-decoration:none;
}
#sea-timeline ul li ul li {
font-weight:normal;
margin-top:6px;
margin-bottom:16px;
margin-left:14px;
font-size:0.94em;
list-style: circle;
}
.orgTOT {
position: relative;
list-style: none !important;
}
.orgTOT::before {
content: "\e600";
font-family: sea-lanterns;
position: absolute;
left:0; top:0.2em;
transform: translateX(-16px);
font-size: 0.8em;
}
.orgIMG {
margin-top:20px;
margin-bottom:20px;
}
.orgIMG img {
display:block;
width:100%;
max-width:400px;
margin:8px auto 8px 0;
}
@media screen and (max-width: 480px) {
.page-numbers {
line-height: 34px !important;
}
}
/*スマホ 767*/
@media screen and (max-width: 1023px) {
body {
width: 100%;
margin-top: 0px;
touch-action: pan-y;
}
/*スマホヘッダー*/
.vlemo-header > a img {
width: 100%;
}
.vlemo-header ul {
width: 100%;
}
.vlemo-header ul li {
width: 25%;
}
.vlemo-header ul li a p {
font-size: 3.7vw;
}
.invisible {
display: none;
}
}