@charset "UTF-8";
/*
 Theme Name: SANGO Child
 Theme URI: https://saruwakakun.design
 Author: SARUWAKA
 Author URI: https://saruwakakun.com
 Template: sango-theme
*/
/*こちらはSANGOの子テーマ用CSSです。以下にCSSを記入していきましょう。*/

/* --- 赤い吹き出し --- */
.hukidashi.red .hc{
background-color: #FD6173;
border-color: #FD6173;
}
.hukidashi.left.red .hc:before{
border-right-color: #FD6173;
}
.hukidashi.left.red .hc:after{
content:none;
}
.hukidashi.right.red .hc:before{
border-left-color: #FD6173;
}
.hukidashi.right.red .hc:after{
content:none;
}
.hukidashi.red .hc{
color: #ffffff;
}
.hukidashi.red .icon img {
background-color: #FD6173;
border-color: #FD6173;
}
/* --- ピンクの吹き出し --- */
.hukidashi.pink .hc{
background-color: #ffccd5;
border-color: #ffccd5;
}
.hukidashi.left.pink .hc:before{
border-right-color: #ffccd5;
}
.hukidashi.left.pink .hc:after{
content:none;
}
.hukidashi.right.pink .hc:before{
border-left-color: #ffccd5;
}
.hukidashi.right.pink .hc:after{
content:none;
}
.hukidashi.pink .hc{
color: #555555;
}
.hukidashi.pink .icon img {
background-color: #ffccd5;
border-color: #ffccd5;
}
/* --- 薄いピンクの吹き出し --- */
.hukidashi.lp .hc{
background-color: #FDDFE6;
border-color: #FDDFE6;
}
.hukidashi.left.lp .hc:before{
border-right-color: #FDDFE6;
}
.hukidashi.left.lp .hc:after{
content:none;
}
.hukidashi.right.lp .hc:before{
border-left-color: #FDDFE6;
}
.hukidashi.right.lp .hc:after{
content:none;
}
.hukidashi.lp .hc{
color: #555555;
}
.hukidashi.lp .icon img {
background-color: #FDDFE6;
border-color: #FDDFE6;
}
/* --- オレンジの吹き出し --- */
.hukidashi.orange .hc{
background-color: #FED999;
border-color: #FED999;
}
.hukidashi.left.orange .hc:before{
border-right-color: #FED999;
}
.hukidashi.left.orange .hc:after{
content:none;
}
.hukidashi.right.orange .hc:before{
border-left-color: #FED999;
}
.hukidashi.right.orange .hc:after{
content:none;
}
.hukidashi.orange .hc{
color: #555555;
}
.hukidashi.orange .icon img {
background-color: #FED999;
border-color: #FED999;
}
/* --- 黄色の吹き出し --- */
.hukidashi.yellow .hc{
background-color: #FEF3BB;
border-color: #FEF3BB;
}
.hukidashi.left.yellow .hc:before{
border-right-color: #FEF3BB;
}
.hukidashi.left.yellow .hc:after{
content:none;
}
.hukidashi.right.yellow .hc:before{
border-left-color: #FEF3BB;
}
.hukidashi.right.yellow .hc:after{
content:none;
}
.hukidashi.yellow .hc{
color: #555555;
}
.hukidashi.yellow .icon img {
background-color: #FEF3BB;
border-color: #FEF3BB;
}
/* --- 青い吹き出し --- */
.hukidashi.blue .hc{
background-color: #9CC2F7;
border-color: #9CC2F7;
}
.hukidashi.left.blue .hc:before{
border-right-color: #9CC2F7;
}
.hukidashi.left.blue .hc:after{
content:none;
}
.hukidashi.right.blue .hc:before{
border-left-color: #9CC2F7;
}
.hukidashi.right.blue .hc:after{
content:none;
}
.hukidashi.blue .hc{
color: #555;
}
.hukidashi.blue .icon img {
background-color: #9CC2F7;
border-color: #9CC2F7;
}
/* --- 水色の吹き出し --- */
.hukidashi.sky .hc{
background-color: #AFE6FE;
border-color: #AFE6FE;
}
.hukidashi.left.sky .hc:before{
border-right-color: #AFE6FE;
}
.hukidashi.left.sky .hc:after{
content:none;
}
.hukidashi.right.sky .hc:before{
border-left-color: #AFE6FE;
}
.hukidashi.right.sky .hc:after{
content:none;
}
.hukidashi.sky .hc{
color: #555555;
}
.hukidashi.sky .icon img {
background-color: #AFE6FE;
border-color: #AFE6FE;
}
/* --- 緑の吹き出し --- */
.hukidashi.green .hc{
background-color: #B2EDA7;
border-color: #B2EDA7;
}
.hukidashi.left.green .hc:before{
border-right-color: #B2EDA7;
}
.hukidashi.left.green .hc:after{
content:none;
}
.hukidashi.right.green .hc:before{
border-left-color: #B2EDA7;
}
.hukidashi.right.green .hc:after{
content:none;
}
.hukidashi.green .hc{
color: #555555;
}
.hukidashi.green .icon img {
background-color: #B2EDA7;
border-color: #B2EDA7;
}
/* --- 黄緑の吹き出し --- */
.hukidashi.lg .hc{
background-color: #CFFFCA;
border-color: #CFFFCA;
}
.hukidashi.left.lg .hc:before{
border-right-color: #CFFFCA;
}
.hukidashi.left.lg .hc:after{
content:none;
}
.hukidashi.right.lg .hc:before{
border-left-color: #CFFFCA;
}
.hukidashi.right.lg .hc:after{
content:none;
}
.hukidashi.lg .hc{
color: #555555;
}
.hukidashi.lg .icon img {
background-color: #CFFFCA;
border-color: #CFFFCA;
}
/* --- 紫の吹き出し --- */
.hukidashi.purple .hc{
background-color: #E6E6FA;
border-color: #E6E6FA;
}
.hukidashi.left.purple .hc:before{
border-right-color: #E6E6FA;
}
.hukidashi.left.purple .hc:after{
content:none;
}
.hukidashi.right.purple .hc:before{
border-left-color: #E6E6FA;
}
.hukidashi.right.purple .hc:after{
content:none;
}
.hukidashi.purple .hc{
color: #555555;
}
.hukidashi.purple .icon img {
background-color: #E6E6FA;
border-color: #E6E6FA;
}
/* --- グレーの吹き出し --- */
.hukidashi.gray .hc{
background-color: #CFCDCD;
border-color: #CFCDCD;
}
.hukidashi.left.gray .hc:before{
border-right-color: #CFCDCD;
}
.hukidashi.left.gray .hc:after{
content:none;
}
.hukidashi.right.gray .hc:before{
border-left-color: #CFCDCD;
}
.hukidashi.right.gray .hc:after{
content:none;
}
.hukidashi.gray .hc{
color: #555555;
}
.hukidashi.gray .icon img {
background-color: #CFCDCD;
border-color: #CFCDCD;
}
/* --- 黒っぽい吹き出し --- */
.hukidashi.black .hc{
background-color: #4D4C4C;
border-color: #4D4C4C;
}
.hukidashi.left.black .hc:before{
border-right-color: #4D4C4C;
}
.hukidashi.left.black .hc:after{
content:none;
}
.hukidashi.right.black .hc:before{
border-left-color: #4D4C4C;
}
.hukidashi.right.black .hc:after{
content:none;
}
.hukidashi.black .hc{
color: #ffffff;
}
.hukidashi.black .icon img {
background-color: #4D4C4C;
border-color: #4D4C4C;
}

/* Newpost Catch */
 
#npcatch li{
         overflow:hidden;
         clear:both;
         vertical-align:top;
         border-bottom: 1px dotted #666666;
}
#npcatch img{
         float:left;
         padding:5px 10px 0 0;
}
#npcatch .title a{
         font-weight: 700;
         text-decoration: none;
}
#npcatch .date {
         font-size: small;
         font-weight: 600;
         display:block;
         color: #adb5bf;
         margin-bottom: 5px;
}
#npcatch li:hover{}
#npcatch li:hover .title{}
#npcatch li:hover .title a{}
#npcatch li:hover .date{}

//内部リンクをシャレオツにするためのコード//
function postlink($atts) {
	extract(shortcode_atts(array(
		'mode' => null,'type' => null,'id' => null,
		'y' => null,'m' => null,'d' => null,
		'numberposts' => 5,'offset' => null,'order' => 'DESC','orderby' => 'post_date','meta_key' => null,
		'id' => null,'exclude' => null,
		'head' => null,'tail' => null,
	),$atts));

	if($mode != null) $mode = '&'.$mode.'='.$id;
	$post = get_posts('post_status=publish&numberposts='.$numberposts.'&offset='.$offset.'&order='.$order.'&orderby='.$orderby.'&include='.$id.'&year='.$y.'&monthnum='.$m.'&day='.$d.'&exclude='.get_the_ID().','.$exclude.'&meta_key='.$meta_key.$mode);
 	$echo ="";
	foreach ($post as $item){
		$im = wp_get_attachment_image_src(get_post_thumbnail_id($item->ID),'home-thum',false);
		$date = date('Y.m.d',strtotime(get_post($item->ID)->post_date));
		$update = date('Y.m.d',strtotime(get_post($item->ID)->post_modified));
		$echo .= '<div class="post_link cf"><a href="'.get_permalink($item->ID).'" class="cf"><figure class="thum"><img src="'.$im[0].'" /></figure><div class="meta inbox"><p class="title">'.$item->post_title.'</p><span class="date gf">'.$date.'</span></div></a></div>';
	}
 
	return $echo;
}
add_shortcode('post','postlink');

/* 角の丸い内部リンクボックス(影あり)基本 */
.post_link{
margin: 1em 0;
text-align: left;
}
.post_link .inbox{
padding-left:25%;
}
.post_link p.title{
margin: 0 0 0.1em;
font-size:1em;
font-weight: bold;
}
.post_link .date{
font-size:0.8em;
}
.post_link .thum{
width: 22%;
float:left;
}
.post_link .thum img{
width:100%;
margin-bottom: 0;
border-radius:20px;
}
.post_link a{
display:block;
padding:0.5em;
font-size: 14px;
box-shadow: 0 2px 2px rgba(0, 0, 0, .25);
border-radius:20px;
}
.post_link .title:before{
font-size:14px;
font-weight:bold;
width:5em;
display:inline-block;
padding:1px 0px 1px 0px;
position:relative;
top:-2px;
text-align:center;
margin-right:0.5em;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
border-radius:20px;
}

/* ピンクの内部リンクボックス */
.post_link a{
border: 3px solid #FFE4E1;
background: #FFE4E1;
color: #555;
}
.post_link .title:before{
color:#fff;
background:#FF97C2;
content:'check';
}	
.post_link a:hover{
color:#ffffff;
background:#FFBEDA;
}