@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ - 加工
Theme URI: https://wp-cocoon.com/
Author URI: https://nelog.jp/
Template:   cocoon-master
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/

/* 基本設定 */
html {
    scroll-behavior: smooth !important;
}
body {
    word-break: break-all !important;
    font-family: "Poppins", "Helvetica", "Noto Sans JP", "ヒラギノ角ゴシック", "游ゴシック", "游ゴシック体", sans-serif !important;
}

/* 各セクションごとのレイアウト調整 */
/* header */
.header {
    background-image: url(https://smapockefun.tokyo/wp-content/uploads/sitefiles/parts/header_bg-min.png), linear-gradient(180deg,#FFAB00 0%, #FF4B00 82%) !important;
    background-position: 50% 50%, top !important;
    background-size: 1100px , 100%!important;
}
.header-in {
    display: block !important;
    justify-content: normal !important;
}
.tagline {
    margin: 0 0 0 0 !important;
    text-align: left !important;
    color: #ffffff !important;
    font-weight: bold !important;
    padding-top: 8px !important;
}
.header-in h1, .header-container-in .site-name-text {
    display: none !important;
}
#navi-in #menu-nav_header .item-label, #navi-in #menu-nav_header-1 .item-label {
    font-weight: bold !important;
}
@media screen and (max-width: 480px){
    .home .header {
        height: 250px;
        background-image: url(https://smapockefun.tokyo/wp-content/uploads/sitefiles/parts/header-sp_bg-min.png), linear-gradient(180deg,#FFAB00 0%, #FF4B00 82%) !important;
        background-position: bottom !important;
        background-size: contain , 100%!important;
    }
    .category .header, .single-post .header {
        height: 150px;
        background-image: url(https://smapockefun.tokyo/wp-content/uploads/sitefiles/parts/header-sp_bg-single-min.png), linear-gradient(180deg,#FFAB00 0%, #FF4B00 82%) !important;
        background-position: bottom !important;
        background-size: contain , 100%!important;
    }
    .tagline {
        text-align: center !important;
        font-size: 80% !important;
    }
}

/* footer */
#footer {
    background: linear-gradient(180deg,#FFAB00 0%, #FF4B00 82%) !important;
    background-position: top !important;
    background-size: 100% !important;
    color: #ffffff !important;
}
.footer {
    padding: 20px 0 70px 0 !important;
}
.footer-bottom-logo img {
    height: 75px !important;
    margin-bottom: -10px !important;
}
@media screen and (max-width: 480px){
  .footer {
      padding: 15px 0 35px 0 !important;
  }
  .footer-bottom-logo img {
      height: 65px !important;
      margin-bottom: 10px !important;
  }
}

/* sidebar */
#sidebar-scroll h2 {
    font-size: 18px !important;
}
@media screen and (max-width: 480px){

}
.smpk_sidebar-scroll_link-img01 {
    width: 100% !important;
    transition: 0.5s !important;
}
.smpk_sidebar-scroll_link-img01:hover {
    opacity: 0.5 !important;
    transform: scale(1.015,1.015) !important;
    transition: 0.5s !important;
}

/* drawbar */
@media screen and (max-width: 480px){
  .menu-drawer li {
      padding: 10px 10px !important;
      font-size: 18px !important;
      font-weight: bold !important;
  }
}

/* entry-card */
.entry-card-content {
    margin-left: 355px !important;
}
.ecb-entry-border .entry-card-wrap {
    border-radius: 20px !important;
}
.related-entry-card-snippet, .entry-card-snippet {
    margin: 0px 20px 0 0;
    line-height: 1.7 !important;
    text-align: justify !important;
	text-justify: inter-ideograph !important;
}
.entry-card-title {
    font-size: 20px !important;
    padding-top: 30px !important;
}
.related-entry-card-title {
    font-size: 20px !important;
}
.related-entry-card-content, .entry-card-content {
    padding-bottom: 0 !important;
}
@media screen and (max-width: 480px){
    .entry-card-content {
        margin-left: 0px !important;
    }
    .entry-card {
        display: flex !important;
        flex-wrap: wrap !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        padding: 15px 15px 15px 15px !important;
    }
    .entry-card-thumb {
        width: 100% !important;
        margin-right: 0 !important;
    }
    .entry-card-thumb img {
        width: 100% !important;
        /*margin-top: 110px !important;*/
    }
    .entry-card-content {
        width: 100% !important;
    }
    .ecb-entry-border .entry-card-wrap {
        border-radius: 15px !important;
    }
    .cat-label {
        font-size: 12px !important;
        padding: 2px 5px !important;
        /*top: 1em  !important;
        left: 1em !important;*/
    }
    .related-entry-card-snippet, .entry-card-snippet {
        margin: 0 0 0 0;
    }
    .related-entry-card-title, .entry-card-title {
        font-size: 22px !important;
        padding-top: 0px !important;
        /*margin-top: -303px !important;*/
    }
    .related-entry-card-content, .entry-card-content {
        padding-bottom: 0 !important;
    }
}

/* content */
#content {
    margin-bottom: 80px !important;
    margin-top: 30px !important;
}
#content #main .article h2, #content #main .article h3, #content #main .article h4, #content #main .article h5, #content #main .article h6 {
    color: #FF4B00 !important;
}
.entry-title{
    font-size: 36px !important;
    margin: 41px 0 45px 0 !important;
}
.entry-content p {
    line-height: 2rem !important;
    margin-bottom: 1.5rem !important;
}
.entry-content blockquote {
    padding-top: 3rem !important;
}
.content article h3 {
    border-left: 10px solid #FFAB00 !important;
}
.under-entry-content .related-entry-card-content h3 {
    margin-top: 0 !important;
    border-left: none !important;
}
.date-tags {
    margin-bottom: 3em !important;
}
@media screen and (max-width: 480px){
    .under-entry-content .related-entry-card-content h3 {
        margin-top: 0 !important;
        border-left: none !important;
    }
    .entry-title {
        margin: 15px 0 15px 0 !important;
        padding: 15px 0 15px 0 !important;
        font-size: 28px !important;
        line-height: 1.5 !important;
        text-align: justify !important;
	    text-justify: inter-ideograph !important;
    }
    .entry-content p {
        line-height: 1.7rem !important;
        margin-bottom: 2rem !important;
    }
    .entry-categories-tags {
        margin-bottom: 50px !important;
    }
    .date-tags {
        margin-bottom: 3em !important;
    }
    .content article h3, .content article h4, .content article h5, .content article h6 {
        margin-top: 3em !important;
    }
    .content .toc {
      border-radius: 15px !important;
    }
}

/* 個別ページごとの調整用CSS */
.div_toppage-nav01 {
    width: 100% !important;
}
.div_toppage-nav01 img {
    width: 100% !important;
    border-radius: 20px !important;
    transition: 0.5s !important;
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
}
.div_toppage-nav01 img:hover {
    transition: 0.5s !important;
    box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.2);
    transform: scale(1.015,1.015) !important;
}
.div_toppage-nav01 a {
    transition: 0.5s !important;
}
.div_toppage-nav01 a:hover {
    opacity: 0.5 !important;
    transition: 0.5s !important;
}
.div_screenshot-center img {
    max-width: 35% !important;
    margin: auto !important;
    display: block !important;
    border: 1px solid #888888 !important;
    border-radius: 10px !important;
}
@media screen and (max-width: 480px){
    .div_toppage-nav01 img {
        border-radius: 15px !important;
    }
    .div_screenshot-center img {
        max-width: 55% !important;
    }
}


/* top button */
#go-to-top .go-to-top-button {
    width: 50px !important;
    height: 50px !important;
    font-size: 25px !important;
}
/* noticer */
.div_notice {
    font-size: 65% !important;
    line-height: 1rem !important;
    color: #888888 !important;
    margin: 2rem 0 3rem 0 !important;
}

/* 共通CSS */
/* 表示・非表示 */
.pc-display-block {
    display: block !important;
}
.sp-display-block {
    display: none !important;
}
.pc-display-inline {
    display: inline !important;
}
.sp-display-inline {
    display: none !important;
}
@media screen and (max-width: 480px){
    .pc-display-block {
        display: none !important;
    }
    .sp-display-block {
        display: block !important;
    }
    .pc-display-inline {
        display: none !important;
    }
    .sp-display-inline {
        display: inline !important;
    }
}
/* 中央揃え */
.div_center {
    margin: 0 auto !important;
}
.text_center {
    text-align: center !important;
}
/* フォントカラー */
.font-color01 {
    color: #FF4B00 !important;
}
/* フォントサイズ */
.font-size75pc {
    font-size: 75% !important;
}
.font-size115pc {
    font-size: 115% !important;
}
.font-size125pc {
    font-size: 125% !important;
}
.font-size150pc {
    font-size: 150% !important;
}
/* フォントウェイト */
.font-weight-bold {
    font-weight: bold !important;
}
/* ol（リスト）共通style */
.ol-style01 {
    background-color: #fffbf1 !important;
    padding: 2rem 2rem 2rem 1rem !important;
    border-radius: 20px !important;
}
.ol-style01 .ol-style01-title {
    font-size: 20px !important;
    font-weight: bold !important;
    text-align: center !important;
    text-decoration: underline !important;
    text-underline-offset: 8px !important;
    margin-bottom: 2rem !important;
    line-height: 2.5rem !important;
}
.ol-style01 ol li {
    padding-left: 5px !important;
}
.ol-style01 ol li::marker {
    font-weight: bold !important;
    margin-right: 5px !important;
}
.ol-style01 a {
    text-decoration: none !important;
    color: inherit !important;
    transition: 0.5s !important;
}
.ol-style01 a:hover {
    opacity: 0.5 !important;
    transition: 0.5s !important;
}
@media screen and (max-width: 480px){
    .ol-style01 {
        padding: 2.5rem 1rem 1rem 1rem !important;
    }
    .ol-style01 ol li {
        margin-bottom: 1.5rem !important;
    }
}
/* ul（リスト）共通style */
.ul-style01 {
    background-color: #fffbf1 !important;
    padding: 2rem 2rem 1rem 2rem !important;
    border-radius: 20px !important;
}
.ul-style01 .ul-style01-title {
    font-size: 20px !important;
    font-weight: bold !important;
    text-align: center !important;
    text-decoration: underline !important;
    text-underline-offset: 8px !important;
    margin-bottom: 2rem !important;
    line-height: 2.5rem !important;
}
.ul-style01 ul {
    padding-left: 5px !important;
    line-height: 3rem !important;
}
.ul-style01 ul li {
    font-size: 125% !important;;
    list-style: none !important;
}
.ul-style01 a {
    text-decoration: none !important;
    color: inherit !important;
    transition: 0.5s !important;
}
.ul-style01 a:hover {
    opacity: 0.5 !important;
    transition: 0.5s !important;
}
.ul-style02 {
    background-color: #ebfffd !important;
    padding: 2rem 2rem 1rem 2rem !important;
    border-radius: 20px !important;
}
.ul-style02 .ul-style02-title {
    font-size: 20px !important;
    font-weight: bold !important;
    text-align: center !important;
    text-decoration: underline !important;
    text-underline-offset: 8px !important;
    margin-bottom: 2rem !important;
    line-height: 2.5rem !important;
}
.ul-style02 ul {
    padding-left: 5px !important;
    line-height: 3rem !important;
}
.ul-style02 ul li {
    font-size: 125% !important;;
    list-style: none !important;
}
.ul-style02 a {
    text-decoration: none !important;
    color: inherit !important;
    transition: 0.5s !important;
}
.ul-style02 a:hover {
    opacity: 0.5 !important;
    transition: 0.5s !important;
}
@media screen and (max-width: 480px){
    .ul-style01, .ul-style02 {
        padding: 2rem 1rem 1rem 1rem !important;
    }
    .ul-style01 ul, .ul-style02 ul {
        padding-left: 3px !important;
        line-height: 1.75rem !important;
    }
    .ul-style01 ul li, .ul-style02 ul li {
        margin-bottom: 1.5rem !important;
    }
}

/* 記事内ボタン */
.kiji-nai-button01 {
    text-decoration: none !important;
    font-size: 150% !important;
    font-weight: bold !important;
    background: linear-gradient(60deg,#FF4B00, #FFAB00) !important;
    padding: 2rem 6rem 2rem 6rem !important;
    border: 1px solid #FFAB00 !important;
    border-radius: 3rem !important;
    color: #ffffff !important;
    transition: 0.5s !important;
    cursor: pointer;
}
.kiji-nai-button01:hover {
    background: #ffffff !important;
    color: #FFAB00 !important;
    transition: 0.5s !important;
}
.kiji-nai-button02 {
    text-decoration: none !important;
    font-size: 150% !important;
    font-weight: bold !important;
    background: linear-gradient(60deg,#28818e, #49d1c1) !important;
    padding: 2rem 6rem 2rem 6rem !important;
    border: 1px solid #49d1c1 !important;
    border-radius: 3rem !important;
    color: #ffffff !important;
    transition: 0.5s !important;
    cursor: pointer;
}
.kiji-nai-button02:hover {
    background: #ffffff !important;
    color: #49d1c1 !important;
    transition: 0.5s !important;
}
.kiji-nai-button03 {
    text-decoration: none !important;
    font-size: 150% !important;
    font-weight: bold !important;
    background: linear-gradient(60deg,#ffab00, #ff5c9a) !important;
    padding: 2rem 6rem 2rem 6rem !important;
    border: 1px solid #ff5c9a !important;
    border-radius: 3rem !important;
    color: #ffffff !important;
    transition: 0.5s !important;
    cursor: pointer;
}
.kiji-nai-button03:hover {
    background: #ffffff !important;
    color: #ff5c9a !important;
    transition: 0.5s !important;
}
.kiji-nai-button04 {
    text-decoration: none !important;
    font-size: 150% !important;
    font-weight: bold !important;
    background: linear-gradient(60deg,#fa8ddf, #76ddff) !important;
    padding: 2rem 6rem 2rem 6rem !important;
    border: 1px solid #fa8ddf !important;
    border-radius: 3rem !important;
    color: #ffffff !important;
    transition: 0.5s !important;
    cursor: pointer;
}
.kiji-nai-button04:hover {
    background: #ffffff !important;
    color: #fa8ddf !important;
    transition: 0.5s !important;
}
.kiji-nai-button05 {
    text-decoration: none !important;
    font-size: 150% !important;
    font-weight: bold !important;
    background: linear-gradient(60deg,#da3a79, #ff5c9a) !important;
    padding: 2rem 6rem 2rem 6rem !important;
    border: 1px solid #da3a79 !important;
    border-radius: 3rem !important;
    color: #ffffff !important;
    transition: 0.5s !important;
    cursor: pointer;
}
.kiji-nai-button05:hover {
    background: #ffffff !important;
    color: #da3a79 !important;
    transition: 0.5s !important;
}
.kiji-nai-button06 {
    text-decoration: none !important;
    font-size: 150% !important;
    font-weight: bold !important;
    background: linear-gradient(60deg,#948efb, #ff5c9a, #ffab00) !important;
    padding: 2rem 6rem 2rem 6rem !important;
    border: 1px solid #ff5c9a !important;
    border-radius: 3rem !important;
    color: #ffffff !important;
    transition: 0.5s !important;
    cursor: pointer;
}
.kiji-nai-button06:hover {
    background: #ffffff !important;
    color: #ff5c9a !important;
    transition: 0.5s !important;
}
@media screen and (max-width: 480px){
    .kiji-nai-button_width_sponly a {
        display: block;
        width: 98% !important;
        margin: 0 auto !important;
    }
    .kiji-nai-button01, .kiji-nai-button02, .kiji-nai-button03, .kiji-nai-button04, .kiji-nai-button05, .kiji-nai-button06 {
        font-size: 130% !important;
        padding: 2rem 0 2rem 0 !important;
    }
}

.smpk_add-wrap {
    width: 100% !important;
}
.smpk_add-wrap a img {
    width: 100% !important;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

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

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