@charset "UTF-8";
/*!
Theme Name: Cocoon Child
Template:cocoon-master
Version: 1.0.6

NAVY		#1E3341	30,51,65
Navy(t)	#26363f		38,54,63
Red			#824d57	130,77,87
Yellow		#e6cd94		230,205,148
Blue			#658195	101,129,149
Beige2		#FAF9F6		250,249,246
Beige		#e8e4d8		232,228,216
Brown		#a38b7a		163,139,122
*/

/*// FONT AWERSOME for OLD STYLE //*/
span.success-bold { position: relative; }
span.success-bold::before,
.article .info ul li::before,
.main p.alert::before,
p.mapinfo::before,
.article ul.point li::before,
.article ul.food li::before,
.article .info ul li::before {
 font-family: "Font Awesome 5 Free";
 font-weight: 900;
 position: absolute;
 line-height: 1;
}


/*////////////////////////////////////
 TEMPLATE HACK */
.header-container, .main, .sidebar, .footer { background: none; }
img { border-radius: 4px; }
a:hover { color: #824d57; }

/*////////////////////////////////////
 BASE & HEADER & NAVIGATION*/
body { border-top: 5px solid #26363f; }
.header-container {
 background: url(https://crawl.tokyo/afternoontea/wp-content/uploads/bg2.png) repeat-x;
 background-color: rgb(250,249,246,0.5);
}
#header-container.fixed-header {
 background: url(https://crawl.tokyo/afternoontea/wp-content/uploads/bg.png) repeat-x;
 background-color: rgb(38,54,63,1);
}
.header-container {
 margin-top: 2px;
 border-top: 2px solid #26363f;
 }
.wrap { width: 100%; }
.content,
.header-container-in,
.header,
.header-in {
 max-width: 1300px !important;
 margin: 0 auto !important;
}

.header-container {

 }

@media screen and (max-width: 768px){
/*///*/
main.main { padding: 0; }
/*///*/}

/*/// HEADER ///*/
#header-container {
 border-top: 1px solid #26363f;
 border-bottom: 2px solid #26363f;
 padding-bottom: 5px;
 }
.logo-header.logo-image {
 width: 140px;
 height: 140px;
 border-radius: 70px;
 margin: 20px auto 0;
 padding: 0;
 vertical-align: middle;
 }
.logo-header img { width: 120px; }

.header-in { position: relative; }
h1.tagline,
div.gtflags {
 position: absolute;
 display: inline;
 top: 10px;
 margin: 0;
 background: rgb(250,249,246,.5);
}
h1.tagline {
 left: 0;
 max-width: 368px;
 margin-left: 10px;
 text-align: left;
 font-size: 16px;
 font-weight: normal;
 color: #26363f;
 }
div.gtflags {
 right: 0;
 max-width: 350px;
 margin-right: 10px;
 text-align: right;
 }

/* IN NARROW HEADER */
.header-container-in.hlt-top-menu .header { margin: 0 10px; }
.header-container-in.hlt-top-menu .tagline { display: inline; }
.header-container-in.hlt-top-menu { display: inline; }


/*/// NAVIGATION ///*/

.navi-in > ul li {
 height: 50px;
 line-height: 50px;
}
.navi-in > ul .sub-menu li {
 border: 1px solid #26363f; 
 border-bottom: none;
}
#navi .navi-in a:hover { background: rgb(255,255,255,1); }
.navi-in > ul .sub-menu li:last-child { border-bottom: 1px solid #26363f; }

.navi-in .has-icon { top: 3px; }
.fa-angle-down:before { font-size: 16px; }

/* FIXed HEADER */
.header-container.fixed-header {
 margin-top: 0;
 padding-top: 5px;
 }
.fixed-header .menu-header {
 margin-top: 10px;
 padding-top: 4px;
 }
.header-container-in.hlt-top-menu .logo-header {
 background-image: url("https://crawl.tokyo/afternoontea/wp-content/uploads/at_logo_w.png");
 background-repeat: no-repeat;
 background-size: 56px;
 background-position-x: 10px;
}
.header-container-in.hlt-top-menu .logo-header img { display: none; }
.fixed-header .header-container-in.hlt-top-menu .tagline {
 font-size: 14px;
 line-height: 1.5;
 width: 12em;
 color: #FAF9F6;
 background: none; 
 }
.fixed-header h1.tagline {
 display: inline;
 position: absolute;
 top: 5px !important;
 left: 70px !important;
 fotn-size: 14px !important;
}
#header-container.fixed-header .navi {
 margin-top: -71px;
 background: none;
 }
.fixed-header .navi-in { max-width: 690px; }
.header-container-in.hlt-top-menu .logo-header {
 height: 60px;
 width: 70px;
 }
.fixed-header .header-container { height: 25px !important; }
.fixed-header .gtflags {
 top: 10px;
 background: none;
}
.fixed-header #navi .navi-in a { color: #fff; }
.fixed-header #navi .navi-in a:hover { background: rgb(255,255,255,.2); }

/*/// FOOTER NAVI ON SP ///*/
.mobile-menu-buttons { background: #26363f; }
.mobile-menu-buttons,
.navi-menu-icon,
.home-menu-icon,
search-menu-icon,
.top-menu-icon,
.home-menu-caption { color: #fff; }
.sidebar-menu-close-button { display: none; }
.menu-drawer ul {
 margin: 0;
 padding: 0;
}
.menu-drawer li {
 padding: 8px;
 margin: 0;
 }

@media screen and (max-width: 1023px) {/**/
.no-mobile-sidebar .sidebar,
.mobile-button-fmb .go-to-top-button,
.no-mobile-header-logo .logo-header {
 display: inline;
}
/**/}
@media screen and (max-width: 768px){
/*///*/
.header div.header-in { height: 140px; }
div.gtflags {
 top: 0;
 background: none;
}
h1.tagline  {
 width: 100%;
 text-align: center;
 font-size: 15px;
 top: 25px;
 }
.logo-header img {
 width: 100px;
 margin-top: 25px;
 }
#header .site-name-text {
 font-size: 1px;
 line-height: .8;
}
/*///*/}
@media screen and (max-width: 480px){
/*///*/
li.sidebar-menu-button { margin-right: 30px; }
li.top-menu-button { display: none; }
/*///*/}

/*////////////////////////////////////
 TOP & INDEX */
.cat-label {
 top: 0;
 left: 0;
 border: 0;
 font-size: 14px !important;
 color: #fff;
 padding: 1px 4px 0;
}

h1.archive-title .fas { display: none; }

/*/// ENTRY-CARD & RELATED ///*/
.related-entry-heading { margin: 22px 0 0; }
.entry-card-title, .related-entry-card-title { line-height: 1.4; }
.entry-card-snippet, .related-entry-card-snippet {
 font-size: 1em;
 line-height: 1.4;
}
a.a-wrap {
 margin-bottom: 0;
 position: relative;
  }
a.a-wrap:hover::after {
 display: block;
 position: absolute;
 border-bottom: 2px solid #26363f;
 height: 2em;
 width: 100％ !important;
 text-align: center;
 bottom: 0;
 right: 0;
 padding: 2px 12px 1px 20px;
 color: #d82f2d;
 font-size: 14px;
 font-weight: 600;
 background: rgb(255,255,255,.8);
 content: "続きを読む >";
 }
a.a-wrap:hover .card-thumb img,
a.a-wrap:hover.entry-card-wrap { opacity: 0.9 ; }

.related-entry-card-title,
.pager-post-navi a.prev-post .prev-post-title,
.pager-post-navi a.next-post .next-post-title {
 font-size: 14px !important;
 font-weight: normal;
 line-height: 1.4;
}

/*/// ONLY TOP ///*/
.header-container, .main, .sidebar, .footer {  }
.home .sns-share.ss-top { display: none; }


@media screen and (max-width: 480px){
/*///*/
.related-entry-heading,
.comment-title {
 margin: 22px 5px 0;
 }
.cat-label { padding: 5px; }
/*///*/}


/*////////////////////////////////////
 ENTRY & CONTENTS */
.entry-content { margin-bottom: 0; }

/* BREAD CRUMBLE */
.breadcrumb.pbp-main-before { background: none; }
.breadcrumb a:hover { color: #263670; }
.breadcrumb-item .fa-folder { display: none; }

/*/// EYECATCH & H1 ///*/
figure.eye-catch {
 border: 4px double #26363F;
 position: relative;
 }
h1.eye-catch  {
 position: absolute;
 color: #fff;
 font-size: 2em;
 line-height: 1.4;
 top: 0;
 padding: 8px;
 background: linear-gradient(0deg, transparent, #26363F);
 text-shadow: 1px 1px 8px #000;
}
.eye-catch-caption { padding: 2em .8em 0.4em; }
.eye-catch img {
 max-height: 500px;
 object-fit: cover;
 }


.article h2 {
 background: none;
 margin-bottom: 8px;
 padding: 8px 0;
 border-bottom: 3px double #5D6970;
 position: relative;
 line-height: 1.2;
}
.article h2:after {
 position: absolute;
 content: " ";
 display: block;
 border-bottom: 5px solid #824d57;
 bottom: -5px;
 width: 10em;
}

.article h3 {
 background: none;
 margin-bottom: 8px;
 padding: 8px 0;
 border: none;
 border-bottom: solid 1px #CACED0;
 position: relative;
 line-height: 1.2;
}
.article h3:after {
 position: absolute;
 content: " ";
 display: block;
 border-bottom: solid 2px #5D6970;
 bottom: -2px;
 width: 4.2em;
}


@media screen and (max-width: 480px){
/*///*/
figure.eye-catch { border: none; }
/*///*/}

/*/// INFO ///*/
.post-template-default .main .info h2,
.page-template-default .main .info h2 {
 color: #161410;
 padding: .7em .5em .5em;
 margin-top: 0;
 font-weight: lighter;
 text-align: center;
 font-size: 20px;
}
.post-template-default .main .info h2::before,
.page-template-default .main .info h2::before { border-top: none; }
.post-template-default .main .info h2::after,
.page-template-default .main .info h2::after {
 height: 1px;
 border-bottom: none;
}

.post-template-defaultt .main .info h2.relation,
.post-template-default .main .info h3,
.post-template-default .main .info .relation,
.page-template-defaultt .main .info h2.relation,
.page-template-default .main .info h3,
.page-template-default .main .info .relation {
 position: relative;
 padding-top: .7em;
 border: none;
 font-size: 20px;
 font-weight: normal;
 text-align: left;
 margin-bottom: .5em;
}
.post-template-default .main .info .relation,
.page-template-default .main .info .relation {
 border-top: 4px dotted #ccc;
 margin-top: 40px;
}

.info-box, .sp-info, .info {
 color: #161410;
 background-color: #f3f4f5;
 border: none;
 margin-top: 30px;
 margin-bottom: 10px;
}
.info-box { padding: 5px 15px; }
.info-box h3 { margin-top: 20px; }

/*/// INDEX(TOC) ///*/
.toc {
 background: #fff;
 border: none;
 border-radius: 10px;
 width: 66%;
 padding-bottom: 0;
 }
.toc-title {
 text-align: left;
 padding: 4px;
 line-height: 1em; 
 margin-left: 5px;
 }
.toc-checkbox:checked~.toc-content { padding-top: 0; }
.toc .toc-list ol ol li { list-style: disc; }

/*/// SNS ///*/
.sns-share, .sns-follow { margin: 0 0 10px; }
.sns-buttons a {
 background-color: #26363F;
 height: 1.5em;
 line-height: 1.5em;
}
.sns-share-buttons a .button-caption { display: none; }

/*/// IMAGE ///*/
.wp-caption-text, .gallery-caption { text-align: left; }
.wp-caption {
 padding: 2px;
 border: 1px solid #ddd;
 }

/*/// TAG ///*/
.entry-categories-tags { margin-bottom: 10px; }
.cat-link { color: #FAF9F6; }


/*/// BLOG CARD ///*/
.a-wrap .blogcard {
 padding: 10px 13px;
 border: 1px solid #ddd;
 }
.blogcard-wrap { width: auto; }
.blogcard-snippet { font-size: 14px; }
.blogcard-footer {
 font-size: 12px;
 padding: 5px 0 0;
 }

/*/// TEXT PARTS ///*/
.article strong {
 background:linear-gradient(transparent 60%, #E4CB90 60%);
}
.article ul li, .article ol li {
 line-height: 1.4;
 margin: 0 0 0.5em;
 }

.main p.alert::before, p.mapinfo::before {
 color: #c00;
 font-size: 16px;
 content: "\f06a";
 left: 30px;
 margin-top: 1px;
 }
.main p.alert, .main .info p.mapinfo {
 font-size: 14px;
 line-height: 1.4;
 padding-left: 24px;
}
.main .info p.mapinfo { margin-top: 6px; }


/*/// DESIGN BOX ///*/
.article ul.bnrList {
 list-style: none;
 padding-left: 0;
 margin: 1em 0 0.5em;
 }
.article ul.bnrList li { margin: 0; }
.article ul.bnrList li .information-box,
.article ul.bnrList li .question-box,
.article ul.bnrList li .alert-box,
.article ul.bnrList li .primary-box,
.article ul.bnrList li .success-box,
.article ul.bnrList li .ifno-box,
.article ul.bnrList li .warning-box,
.article ul.bnrList li .danger-box { margin: 0 0 0.5em ; }

.article ul.point,
.article ul.food
.article .info ul {
 margin: 0 0 20px;
 padding-left: 0;
}
.article ul.point li {
 list-style-type: none;
 font-weight: 600;
 padding-left: 2.5em;
}
.article .info ul li,
.article ul.food li {
 list-style-type: none;
 font-weight: normal;
}
.article ul.point li::before,
.article ul.food li::before,
.article .info ul li::before {
 font-size: 20px;
 color: #EAB700;
 content: '\f521';
 left: 20px;
}
.article ul.food li::before { content: '\f445'; }
.article .info ul li::before {
 color: #26363F;
 content: '\f441';
 left: 40px;
}
 
 
/* INTEGRATE&RECEIPE */
.main dl.ingredients,
.main ol.receipe {
 width: 90%;
 background: #fff;
 border: 1px solid #ccc;
 border-radius: 4px;
 margin: 0 auto 0 0;
 paddding: 15px;
}
.main ol.receipe { padding-top: 20px; }
.main dl.ingredients dt,
.main dl.ingredients dd,
.main ol.receipe li {
 border-bottom: 1px dotted #ccc;
 padding: .5em 1em;
 }
.main ol.receipe li:last-child,
.main dl.ingredients dt:last-child,
.main dl.ingredients dd:last-child { border: none; }
.main dl.ingredients dt {
 float: left;
 width: 13em;
 }
.main dl.ingredients dd { margin-left: 13em; }


/* BASIC BOX */
.information-box, .information,
.question-box, .question,
.alert-box, .alert,
.primary-box,
.success-box,
.ifno-box,
.warning-box,
.danger-box { line-height: 1.5; }
.information-box h3, .information h3,
.question-box h3, .question h3,
.alert-box h3, .alert h3,
.primary-box h3,
.success-box h3,
.ifno-box h3,
.warning-box h3,
.danger-box h3 { margin-top: 0; }
.information-box p, .information p,
.question-box p, .question p,
.alert-box p, .alert p,
.primary-box p,
.success-box p,
.ifno-box p,
.warning-box p,
.danger-box p {
 margin-bottom: 0;
 line-height: 1.5;
 }
.information-box::before, .information::before,
.question-box::before, .question::before,
.alert-box::before, .alert::before,
.primary-box::before,
.success-box::before,
.ifno-box::before,
.warning-box::before,
.danger-box::before { border-right: none; }
.information-box::after, .information::after,
.question-box::after, .question::after,
.alert-box::after, .alert::after,
.primary-box::after,
.success-box::after,
.ifno-box::after,
.warning-box::after,
.danger-box::after {
 content: "";
 clear: both;
 display: block;
}
.information-box a, .information a,
.question-box a, .question a,
.alert-box a, .alert a,
.primary-box a,
.success-box a,
.ifno-box a,
.warning-box a,
.danger-box a { text-decoration: none; }

/* INFORMATION BOX */
.information-box, .information { border: 1px solid #5a9bc0; }
.information-box::before, .information::before { color: #5a9bc0; }

/* QUESTION BOX */
.question-box, .question {
 border: 1px solid #ccc;
 background: #ededed;
}
.question-box::before, .question::before { color: #ccc; }

/* ALERT BOX */
.alert-box::before, .alert::before { color: #c00; }


.star::before { display: none; }

.main .info dt, .main .info dd {
 font-size: 16px;
 padding: 8px 4px;
 }
.main .info dt {
 width: 10em;
 float: left;
 clear: both;
 font-weight: 600;
}
.main .info dd {
 width: calc(100% - 10em);
 margin-left: 10em;
}
.main dl.star dd span {
 color: #a5874a;
 font-size: larger;
 white-space: nowrap;
 margin-right: .8em;
}
.star::before { content: none; }


@media screen and (max-width: 834px){
/*///*/
.blogcard-title {
 font-size: 14px;
 margin-bottom: 10px;
 }
.blogcard-snippet { height: 2em; }
/*///*/}
@media screen and (max-width: 768px){
/*///*/
.breadcrumb { line-height: 1.3; }
h1.eye-catch { font-size: 24px; }
.eye-catch img, .eye-catch amp-img { border: none; }
.entry-content >*,
.entry-content h2,
.entry-content h3 { margin: 1.2em 10px; }
.entry-content .wp-caption {
 margin-left: 0;
 margin-right: 0;
 border: none;
 }
.information-box::before,
.question-box::before,
.alert-box::before,
.information::before,
.question::before,
.alert::before,
.memo-box::before,
.comment-box::before,
.common-icon-box::before {
 top: 2px;
 left: 7px;
 font-size: 26px;
}
.information-box,
.question-box,
.alert-box,
.information,
.question,
.alert,
.memo-box,
.comment-box,
.common-icon-box { padding: 12px 6px; }
.information-box h3, .information h3,
.question-box h3, .question h3,
.alert-box h3, .alert h3,
.primary-box h3,
.success-box h3,
.ifno-box h3,
.warning-box h3,
.danger-box h3 { margin-top: 0; }
.information-box p::first-child,
.question-box::first-child,
.alert-box::first-child,
.information::first-child,
.question::first-child,
.alert::first-child,
.memo-box::first-child { text-indent: -1em; }

/*///*/}
@media screen and (max-width: 480px){
/*///*/
.toc {
 margin: 1.2em auto 0;
 width: 90%;
 line-height: 1.4;
 padding: 1em 1em 0;
 }
.a-wrap .blogcard { padding: 5px 8px 0; }
/* INTEGRATE&RECEIPE */
.main dl.ingredients,
.main ol.receipe {
 width: auto;
 margin: 0 15px;
 font-size: 14px;
 }
.main dl.ingredients dt {
 float: none;
 width: auto;
 font-weight: 600;

 }
.main dl.ingredients dd { margin-left: 0; }

.main .info { padding: 5px 0; }
.post-template-default .main .info h2,
.page-template-default .main .info h2 {
 padding: .7em 0 .5em;
 margin: 1.2em 15px .5em;
 }
.main .info dl dt,
.main .info dl dd {
 width: auto;
 float: none;
 margin: 0 15px;
 }
.main .info dl dt { padding-bottom: 0; }
.main .info dl dd {
 padding-top: 0;
 line-height: 1.4;
 }
.main p.alert::before, p.mapinfo::before { left: 15px; }
.article .info ul li::before { left: 18px; }
/*///*/}


/*////////////////////////////////////
FOOTER */
#footer {
 background: url(https://crawl.tokyo/afternoontea/wp-content/uploads/bg.png) repeat-x;
 background-color: rgb(232,228,216,0.5);
}
@media screen and (max-width: 480px){
/*///*/
footer.article-footer,
footer.entry-footer { padding: 0 5px; }
.footer-bottom { margin-top: 0; }
.footer-bottom-logo img { height: 70px; }
/*///*/}


/*////////////////////////////////////
SIDEBAR */
.widget-sidebar { margin-bottom: 20px; }
.sidebar h3 {
 background: none;
 margin-bottom: 8px;
 padding: 8px 0;
 border-bottom: solid 1px #CACED0;
 position: relative;
 line-height: 1.2;
}
.sidebar h3:after {
 position: absolute;
 content: " ";
 display: block;
 border-bottom: solid 2px #5D6970;
 bottom: -2px;
 width: 4.2em;
}



@media screen and (max-width: 480px){
/*///*/
.menu-content { overflow: auto; }
/*///*/}

/*////////////////////////////////////
PLUGIN & WIDGED */
/*/// GTTranslator ///*/
a.glink { margin-left: 4px; }
#gtranslate-2 { display: none; }

/*/// DASHIWAKE ///*/
#popular_entries-2 { display: none; }
.home #popular_entries-2 { display: inline; }
.home #new_entries-2 { display: none; }

/*// DETAIL //*/
.widget-entry-card { font-size: 14px; }
.widget-entry-card-title {
 display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 4;
 overflow: hidden; 
}
.card-thumb img { border: 1px solid #ccc; }
.widget-entry-card-thumb { margin-top: 0; }
a.a-wrap:hover {
 background: rgb(255,255,255,0.5);
 border-radius: 2px;
 }
 
/*// NEW&POPULAR ARTICLE //*/
.widget-entry-cards .a-wrap { margin-bottom: 0; }
.card-thumb img { border: 1px solid #26363f; }
.widget-entry-cards figure { line-height: 0; }


/*// INSTAGRAM FEED //*/
#wdi_feed_0 .wdi_feed_container { background-color: none !important; }


/* POPULAR POST */
.widget-entry-cards.ranking-visible .card-thumb::before {
 padding: 2px 0;
 width: 20px;
 height: 20px;
 font-family: Verdana,sans-serif;
}

/*/// AD ///*/
.ad-area { margin-bottom: 20px; }
.widget-entry-cards.ranking-visible { margin-bottom: 20px; }

/* BUGFIX */
.toc .google-auto-placed,
.pagenation .google-auto-placed,
.pagenation .pedestal_container,
.widget-sidebar .google-a-placed { display: none !important; }

@media screen and (max-width: 768px){
/*///*/
/*// NEW&POPULAR ARTICLE //*/
.widget-entry-cards { margin: 0; }
.widget-entry-cards .a-wrap { margin: 0 0 2px; }
.widget-entry-cards figure { margin-left: 0; }
/*///*/}
@media screen and (max-width: 480px){
/*///*/
@media screen and (max-width: 480px){
/*///*/
aside.widget-sidebar { padding: 0 5px !important; }
/*///*/}