@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

#navi .navi-in a, #navi .navi-in a:hover {
    transform: rotate(0.03deg);
}

.index-tab-buttons .index-tab-button {
    font-weight: normal;
    transform: rotate(0.03deg);
}

.cat-label {
    font-size: 11px;
    transform: rotate(0.03deg);
}

.entry-card-snippet, .related-entry-card-snippet {
    transform: rotate(0.03deg);
}

.article ul.toc-list li, .article ol.toc-list li {
    transform: rotate(0.03deg);
}

.carousel-entry-card-title {
    FONT-WEIGHT: 300;
    padding: .5em;
}

.carousel-entry-card-title {
    font-size: 12px;
}

.slick-track {
	margin-top: 20px;
}

.navi-in>ul .sub-menu, .appeal-button, .carousel .a-wrap, .recommended .navi-entry-cards a, .index-tab-buttons .index-tab-button, .entry-card-wrap.a-wrap, .ect-entry-card .a-wrap img, .ect-big-card-first .a-wrap:not(:first-of-type) img, .eye-catch, .sns-buttons a, .blogcard-wrap, .is-style-text a .blogcard-label, .btn, .btn-wrap>a, .ranking-item-image-tag img, .ranking-item-link-buttons a, .toggle-button, table tfoot td>a, .rect-entry-card .a-wrap .related-entry-card-thumb img, .rect-mini-card .a-wrap .related-entry-card-thumb img, .rect-vertical-card .a-wrap, .pager-post-navi.post-navi-default a img, .pager-post-navi.post-navi-square a, .go-to-top-button, figure.is-style-shadow img, .is-style-shadow figure, .is-style-toggle-accordion, .keyboard-key, .author-box, .cta-thumb img, a.rsswidget img, .fb-like-box, .widget_media_image a img, .widget-entry-cards:not(.card-large-image) a img, .widget-entry-cards.card-large-image a, .page-numbers:not(.current):not(.dots):hover, div.search-form:hover, input[type=submit], .kaerebalink-link1 a, .booklink-link2 a, .tomarebalink-link1 a, .product-item-buttons a, .iwe-shadow-paper img, .iconlist-box.is-style-no-icon li a {
    box-shadow: rgb(0 0 0 / 16%) 0px 1px 4px;
    transition: all .3s ease-out;
}

/* タイムライン
-------------------------------------------------- */
.ptimeline-wrap{
    margin:0 auto 2rem;
}
.ptimeline-wrap .ptimeline{
    padding:0 !important;
    list-style:none !important;
}
.ptimeline-wrap .ptimeline-label {
    padding: 3px 0 0 2px;
    color: #aaa;
    font-size: 12px;
    font-weight: 500;
}
.ptimeline-wrap .ptimeline-title {
    font-size: 1.1em;
    font-weight: bold;
    line-height: 1.5;
    color:$main-color;
}
.ptimeline-wrap .ptimeline-main {
    margin-top: 0.5em;
    padding: 0 0 1.5em;
    font-size: 0.9em;
    line-height: 1.8;
    border-bottom: dashed 1px #ddd;
    color:#555;
}
.ptimeline-wrap .ptimeline-main img{
  display:block;
  margin:1em auto;
}
.ptimeline-wrap .ptimeline-item {
    position: relative;
    padding: 0 0 1em 1.5em !important;
    margin-bottom:0 !important;
    border:none;
}
.ptimeline-wrap .ptimeline .ptimeline-item:before {
    content: "";
    width: 3px;
    background: #eee !important;
    display: block;
    position: absolute;
    top: 25px;
    bottom: -3px;
    left: 5px;
}
.ptimeline-wrap .ptimeline-item:last-child:before{
    content:none;
}
/*********************************
* タイムライン マーカー
*********************************/
.ptimeline-wrap .ptimeline-marker{
    display: block;
    position: absolute;
    content: "";
    top: 6px;
    left: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: solid 3px $main-color;
}
.ptimeline-wrap .ptimeline-item:first-child .ptimeline-marker,.ptimeline-wrap .ptimeline-item:last-child .ptimeline-marker{
    background:$main-color;
}
/*四角 */
.ptimeline-wrap .square .ptimeline-marker{
    border-radius: 0;
}
/* アイコン*/
.ptimeline-wrap .icon .ptimeline-item .ptimeline-marker{
    content:unset;
    border:none !important;
    background:none !important;
}
.ptimeline-wrap .icon .ptimeline-item .ptimeline-marker:before{
    font-family: "Font Awesome 5 Free";
    top: -1px;
    left: 0;
    position:absolute;
    font-weight:bold;
    font-size:16px;
    line-height:1;
    color:$main-color;
}
.ptimeline-wrap .icon .ptimeline-item:first-child .ptimeline-marker,.ptimeline-wrap .icon .ptimeline-item:last-child .ptimeline-marker{
    background:none !important;
}




/* タイムライン */
.timeline-box {
margin:0 auto 2rem;
padding:0 !important;
 border: none;
}
.timeline-item-label {
width:auto; 
float: none;
padding: 3px 0 0 2px;
color: #aaa;
font-size: 12px;
font-weight: 500;
	text-align: left;
}

.timeline-item-title {
font-weight: bold;
font-size: 1.2em;
line-height: 1.5;
color:#dd5b9c;
}

.timeline-item-content {
width:auto; 
float: none;
margin-top: 0.5em;
padding: 0 0 0.5em;
font-size: 0.9em;
line-height: 1.8;
border: none;
color:#555;
}

.timeline-item-content img{
display:block;
margin:1em auto;
}


.timeline-box .timeline .timeline-item-content:before {
content: "";
width: 3px;
background: #eee !important;
display: block;
position: absolute;
top: 30px;
bottom: -3px;
left: 5px;
height: auto;
border-radius: 0%;
}

.timeline>li:not(:last-child) .timeline-item-snippet {
padding-bottom: 1.6em;
	margin-top: .5em;
border-bottom: dashed 1px #ddd;
}

.timeline-box .timeline .timeline-item {
position: relative;
padding: 0 0 1em 1.5em !important;
margin-bottom:0 !important;
content:unset;
border:none !important;
border-radius: 0;
}

.timeline-item:before {
	content: "\f00c";
font-family: "Font Awesome 5 Free";
top: 7px;
left: 0;
position:absolute;
font-weight:bold;
font-size:16px;
line-height:1;
color: #f3abc0;
background:none !important;
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
	

}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/




/*ヘッダーの色と高さ、アイコンの位置を調整*/
.search-menu-button.menu-button,
.navi-menu-button.menu-button{
	height: 50px;
	padding-top: 5px;
}

.logo-menu-button.menu-button{
	height: 50px;
	padding-top: 0px;
}

.mobile-header-menu-buttons, .mobile-footer-menu-buttons {
	box-shadow: rgb(0 0 0 / 16%) 0px 0px 4px;
}
}
/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/

	
	
	
	
}