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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
// 鉄コン筋クリート関連記事ボックス用ショートコード
// 例: [tekkon_related title="この物語とつながる静かな記事たち" 
//      link1_url="/tekkon-kuroshiro-after/" link1_text="クロとシロのその後を読む"
//      link2_url="/tekkon-itachi/" link2_text="イタチという影を静かに覗く"
//      link3_url="/tekkon-apple-tree/" link3_text="リンゴの木に宿る祈り"]

function tekkon_related_shortcode( $atts ) {
    $atts = shortcode_atts( array(
        'title'      => 'この物語とつながる静かな記事たち',
        'intro'      => '',
        'link1_url'  => '',
        'link1_text' => '',
        'link2_url'  => '',
        'link2_text' => '',
        'link3_url'  => '',
        'link3_text' => '',
    ), $atts, 'tekkon_related' );

    // 何もリンクがなければ出力しない
    if ( empty( $atts['link1_url'] ) && empty( $atts['link2_url'] ) && empty( $atts['link3_url'] ) ) {
        return '';
    }

    ob_start();
    ?>
    <div class="tekkon-related-box">
        <p class="tekkon-related-title"><?php echo esc_html( $atts['title'] ); ?></p>
        <?php if ( ! empty( $atts['intro'] ) ) : ?>
            <p class="tekkon-related-intro"><?php echo esc_html( $atts['intro'] ); ?></p>
        <?php endif; ?>
        <ul class="tekkon-related-list">
            <?php if ( ! empty( $atts['link1_url'] ) && ! empty( $atts['link1_text'] ) ) : ?>
                <li><a href="<?php echo esc_url( $atts['link1_url'] ); ?>"><?php echo esc_html( $atts['link1_text'] ); ?></a></li>
            <?php endif; ?>
            <?php if ( ! empty( $atts['link2_url'] ) && ! empty( $atts['link2_text'] ) ) : ?>
                <li><a href="<?php echo esc_url( $atts['link2_url'] ); ?>"><?php echo esc_html( $atts['link2_text'] ); ?></a></li>
            <?php endif; ?>
            <?php if ( ! empty( $atts['link3_url'] ) && ! empty( $atts['link3_text'] ) ) : ?>
                <li><a href="<?php echo esc_url( $atts['link3_url'] ); ?>"><?php echo esc_html( $atts['link3_text'] ); ?></a></li>
            <?php endif; ?>
        </ul>
    </div>
    <?php
    return ob_get_clean();
}
add_shortcode( 'tekkon_related', 'tekkon_related_shortcode' );

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

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

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