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

/* ------------------------------
 * 	Common Layout
 * ------------------------------ */
/* 文字色 */
.entry-content {
	color:#333;
}

/* 広告通知 */
.ads-notify {
    text-align: center;
    font-size: 14px;
    color:#A5AAAF;
}

/* ボタン */
.btn a {
    margin-left: 10px;
    width: 250px;
    display: inline-block;
    padding: 0.2em 0;
    text-decoration: none !important;
    font-weight:bold;
    color: white;
    background: var(--sgb-accent-color);
    border: solid 2px var(--sgb-accent-color);
    border-radius: 3px;
    transition: .3s;
}
.btn a:hover {
    background: white;
    color: var(--sgb-accent-color);
}
.btn a::after {
    font-size: 15px;
	font-family: FontAwesome;
	content: "\f138";
	color: #FFF;
	margin: 0 0 0 10px;
    transition: .3s;
}
.btn a:hover::after {
    background: white;
    color: var(--sgb-accent-color);
}



/* ------------------------------
 * 	Tag Layout
 * ------------------------------ */
/* headline */
.entry-content h2 {
    color:#FFF;
    background: var(--sgb-main-color);
    padding: 0.5em 1em;	
    border-radius: 4px;
}
.entry-content h3 {
    border-bottom: solid 3px var(--sgb-main-color);
    background: var(--sgb-pastel-color);
    border-left: none;
    padding: 0.5em 1em;
}
.entry-content h4 {
    border-bottom: solid 3px  var(--wp--preset--color--sango-gray);
    background: var(--wp--preset--color--sango-silver);
    padding: 0.5em 1em;
}

/* a */
.entry-content a:not(#toc_container a) {
    font-weight: bold;
    text-decoration: underline;
}

/* table */
.entry-content table {
	text-align: center;
    font-size: 14px;
    border: none !important;
}
.entry-content table th {
	color: #7B7B7B;
    background-color: var(--sgb-pastel-color) !important;
    border: 1px solid #AAA !important;
}
.entry-content table tr, table td {
    border: 1px solid #AAA !important;
}
.entry-content table a {
    text-decoration: underline;
}



/* ------------------------------
 * 	Top Page Layout
 * ------------------------------ */
.top-items {
    text-align: center;
	margin: 0 auto;
	padding: 50px 0;
	width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
}
.top-items h2 {
    margin: 0;
    color : #7B7B7B;
    background-color: transparent;
    border-bottom: 3px solid var(--sgb-main-color);
}
.top-items h3 {
	text-align: center;
	font-size: 16px;
	letter-spacing: 1px;
	margin: 0;
	padding: .5em 0;
	background-color: transparent;
	border-color: transparent;
}
.top-item {
	display: inline-block;
    width: 280px;
	padding: 50px 0px 20px 0px;
    vertical-align: top;
}
.top-item .icon {
	margin: 0 auto 15px auto;
	padding: 2px 0 0 0;
	background-color: #EAEAEA;
	border-radius: 50%;
	width: 70px;
	height: 70px;
}
.top-item .icon img {
	width: 48px;
	height: 48px;
    margin: 9px 0 0 0;
}
.top-item .icon:hover {
	transform: translateY(-5px);
	transition-duration: .5s;
}
.top-item ul {
	border:none;
	background-color: transparent;
	list-style: none;
	padding: 0;
    width: 230px;
    height: 230px;
    margin: 5px auto;
    text-align: left;
}
.top-item li {
	position: relative;
	padding: 0;
}
.top-item li+li {      
    border-top : 1px solid #ccc;
}
.top-item li::before {
    font-size: 12px;
	font-family: FontAwesome;
	content: "\f138";
	color: var(--sgb-main-color);
	margin: 0 10px 0 0;
}
.top-item li a {
	font-size: 14px;
    font-weight: normal !important;;
	text-decoration: none !important;
	color: #7B7B7B;
}
.top-item li a:hover {
	text-decoration: underline !important;
	text-decoration-color: #7B7B7B;
}

/* 2列用 */
.two-rows {
    width: 560px;
}
.top-item div.two-rows {
    display: table;
    table-layout: fixed;
    margin: 5px 0 0 0;
}
.top-item div.two-rows ul {
    display:table-cell;
    padding: 0 25px;
}


/* プロフィール */
.top-items .profile {
    font-size: 12px;
}
.top-items .profile .icon img {
    border-radius: 50%;
    width: 68px;
    height: 68px;
    margin: 0;
}
.top-items .profile .summary {
    padding: 0 15px;
    text-align: left;
}
.top-items .profile .links {
    margin: 10px 0 0 0;
    display: flex;
	gap: 8px;
}
.top-items .profile .links div {
    background-color: #EAEAEA;
	border-radius: 50%;
    width: 65px;
    height: 65px;
    float: left;    
}
.top-items .profile .links div:hover {
    transform: translateY(-5px);
	transition-duration: .5s;
}
.top-items .profile .links div a {    
    font-size: 10px;
    font-weight: normal;
	text-decoration: none !important;
	color: #7B7B7B;    
}
.top-items .profile .links div i {
    font-size: 26px;
    display: block;
    padding:10px 0 0 0;
}
/* スマホ表示用 */
@media screen and (max-width: 767px){
    /* 2列を1列に表示 */
    .top-item, .top-item div.two-rows {
        width: 280px;
    }
    .top-item div.two-rows ul {
        display: inline-block;        
        padding: 0;
        margin: 0;
    }
    .top-item div.two-rows ul + ul {
        border-top : 1px solid #ccc;
    }
    /* 縦空白の削除 */
    .top-item ul {
        height: auto;
    }
}



/* ------------------------------
 * 	Profile Layout
 * ------------------------------ */
.follow_btn a {
	width: 70px;
	margin: 15px 0 0 0;
}
.fa5 .follow_btn .プロフィール:before {
	background: #90D581;
	font-family: 'Font Awesome 5 Free' !important;
	content: "\f007";
	font-weight: 900;	/* solid */
}
.fa5 .follow_btn .お問い合わせ:before {
	background: #90D581;
	font-family: 'Font Awesome 5 Free' !important;
	content: "\f0e0";
	font-weight: 900
}
.fa5 .follow_btn .パソログ:before {
	background: #6bb6ff;
	font-family: 'Font Awesome 5 Free' !important;
	content: "\f390";
	font-weight: 900;
}
.fa5 .follow_btn .ジサログ:before {
	background: #f2b157;
	font-family: 'Font Awesome 5 Free' !important;
	content: "\f2db";
	font-weight: 900;
}

/* Widget Profile */
.my_profile .follow_btn {	
	padding: 10px 15px 15px 15px;
}
.my_profile .follow_btn a {
	width: 75px;
	margin: 5px 0 0 0;
}



/* ------------------------------
 * 	ShortCode Layout
 * ------------------------------ */
/* notes box */
div.box_notes {
	background-color:#EFEFEF;
    color: #232323;
    border: 1px solid #CCCCCC;
	font-size:small;
	padding: 15px;
	margin-bottom: 30px;
}

/* Blog Card */
.blog_card {
    padding: 30px 30px 20px 30px;
    border: 1px solid #04384C;
    border-radius: 3px;
    position: relative;
    cursor: pointer;
    transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
    background-color: #F2F8FF;
}
.blog_card:hover {
    transform: translateY(-4px);  
    opacity: 0.6;
}
.blog_card p {
    margin: 0;
    padding: 0;
}
.blog_card .box_title {
    padding: 0 .8em;
    position: absolute;
    left: 20px;
    top: -15px;
    color: #fff;
    background-color: #04384C;
    font-weight: bold;
    border-radius: 5px;
}
.blog_card .box_title:before {
    font-family: 'Font Awesome 5 Free' !important;
	content: "\f00c";
	font-weight: 900;
    margin: 0 8px 0 0;
}
.blog_card a {    
    text-decoration: none !important;
    display: flex;
}
.blog_card .img {
    flex: 0 0 auto;     /* イメージの幅を固定します */
    margin: 0 20px 0 0;
}
.blog_card .img img {
    width: 128px;
    height: auto; /* 比率に合わせて調整 */
}
.blog_card .content {
    flex: 1;    /* 残りスペースを埋める */
}
.blog_card .content .title {
    color:#333;
    font-size: 1em;
    font-weight: bold;
}
.blog_card .content .description {
    color: #666;
    font-size: 0.8em;
    font-weight: normal;
}

/* Ad Card */
.ad_card:hover {
  transform: translateY(-4px);
  opacity: 0.6;
}

/* Article Point */
.article_point .box-title:before,
.article_point .box-title:after,
.article_point li:before {
    font-family: "FontAwesome";
    font-weight: 900;
    content: "\f1b0";
}
.article_point .box-title:before {
    margin: 0 10px 0 0;
}
.article_point .box-title:after {
    margin: 0 0 0 10px;
}
.article_point li {
    list-style-type: none;
}
.article_point li:before {
    margin: 0 10px 0 0;
    color: #f5a15f;
}

/* Headlines summary */
.headlines_summary .sng-box {
    border-color: var(--sgb-accent-color);
}
.headlines_summary .box-title {    
    background-color: var(--sgb-accent-color);
}
.headlines_summary li {
    list-style-type: none;
}
.headlines_summary li:before {
    font-family: "FontAwesome";
    font-weight: 900;
    content: "\f1b0";
    margin: 0 10px 0 0;
    color: var(--sgb-accent-color);
}
.headlines_summary li a {
    font-weight: normal !important;
}

/* Summary Box */
.summary_box {
    margin: 0 0 20px 0;
}
.summary_box .title {
	text-align: center;
	color: #fff;
	font-size: larger;
    font-weight: bold;
}
.summary_box .title i {
    margin-right: 8px;
}
.summary_box .content {
	color: #000;
    font-size: smaller;
}
.summary_box ul {
    margin: 0;
    width: 100%;
    height: 100%;    
    border: none;
}
.summary_box.blue .title {
    background-color: #5FC2F5;
}
.summary_box.blue .content {
    background-color: #EDF6FF;
}
.summary_box.red .title {
    background-color: #F88080;
}
.summary_box.red .content {
	background-color: #FFEDED;
}
.summary_box.gray .title {
    background-color: #A5A5A5;
}
.summary_box.gray .content {
	background-color: #EAEAEA;
}
.summary_box.orange .title {
    background-color: #F5A15F;
}
.summary_box.orange .content {
	background-color: #FFF9EB;
}
div.cell:has(> .summary_box) {
    padding: 0 !important;
}
/* Summary Box - 高さを揃える */
.shtb2.tbrsp:has(.summary_box) {
    display: flex;
    margin: 0;
}
div.cell:has(> .summary_box) {
    display: flex !important;
    flex-direction: column;
    margin: 0 !important;
}
div.cell:has(> .summary_box) .summary_box {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;    
}
div.cell:has(> .summary_box) .content {
   flex-grow: 1; 
}
/* スマホ表示用 */
@media screen and (max-width: 767px){
    .shtb2.tbrsp:has(.summary_box) {
        display: table;
    }
}



/* ------------------------------
 * 	Library Layout
 * ------------------------------ */
/* Contact Form 7 */
.wpcf7 label {
    font-weight: bold;
}
.wpcf7 select {
    background-color: #EFF1F5;
}
.wpcf7 textarea {
    background-color: #EFF1F5;
}
.wpcf7 .wpcf7-submit {
    float: right;
}

/* Scroll-Hint */
.js-scrollable {
    white-space: nowrap;
}

/* TOC+ */
#toc_container ul {
    list-style: none;
}

/* Rinker */
div.yyi-rinker-contents {
    border: solid 1px #42424230;
    border-radius: 10px;
    box-shadow: 0 0px 3px rgba(0, 0, 0, 0.1);
}
div.yyi-rinker-contents div.yyi-rinker-box {
    padding: 1em;
}
div.yyi-rinker-contents div.yyi-rinker-image {
    margin: 0 20px 0 0;
    padding: 10px;
    width: 30%;
}
div.yyi-rinker-info {
    width: 100%;
}
div.yyi-rinker-title {
    font-size: .9em;
}
div.yyi-rinker-contents div.yyi-rinker-title p {
    margin: 0;
}
div.yyi-rinker-contents div.yyi-rinker-title a {
    color: #42424290;
    text-decoration: none !important;
}
div.yyi-rinker-contents div.yyi-rinker-detail {
    font-size: .8em;
    color: #42424280;
    padding: 0;
    margin: 5px 0 0 0;
}
div.yyi-rinker-contents div.yyi-rinker-detail .price-box {
    margin: .5em 0;
}
div.yyi-rinker-contents div.yyi-rinker-detail .price-box .price {
    letter-spacing: 0.1em;
    font-size: 1.2em;
    margin-right: .5em;
}
div.yyi-rinker-contents ul.yyi-rinker-links li {
    width: 45%;
    padding: .3em 0;
    margin: .5em 1.5em .4em 0;
    box-shadow: 0 2px 3px rgba(0,0,0,.2);
    font-size: .8em;
	text-align: center;    
}
div.yyi-rinker-contents ul.yyi-rinker-links li a { 
    text-decoration:none !important;
}
div.yyi-rinker-contents ul.yyi-rinker-links li a::after{
    font-family: "Font Awesome 5 Free";
    content: " \f0da";
    color: #FFF;
    font-size: 14px;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a:before, div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a:before, div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink a:before {
    display: none;
}
/*-----ボタンの色-----*/
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink {
    background: #FFB36B;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink {
    background: #EA7373;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink {
    background: #51A7E8;
}
/*-----マウスホバー（ボタン）-----*/
div.yyi-rinker-contents ul.yyi-rinker-links li:hover {
    box-shadow: 0 3px 14px rgba(0, 0, 0, .25);
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a:hover, div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a:hover, div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink a:hover {
    box-shadow: none;
}
div.yyi-rinker-contents ul.yyi-rinker-links li a:hover {
    opacity: 1;/*ホバー時に薄くなるのをオフ*/
}
/*-----マイクロコピー-----*/
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a:before, div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a:before, div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink a:before {
    position: absolute;
    display: inline-block;
    font-size: 1em;
}
/*-----Amazonマイクロコピー-----*/
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a:before {
    top: -30px;
    color: #F6A307;
    content: "";
	/*content: "＼ビッグセール実施中！／";*/
	/*content: "＼タイムセール実施中！／";*/
	/*content: "＼ブラックフライデー！12/1まで／";*/
	/*content: "＼季節先取りSALE 9/4まで／";*/
}
/*-----楽天マイクロコピー-----*/
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a:before {
    top: -30px;
    color: #C44540;
    content: "";
	/*content: "＼タイムセール実施中！／";*/
}
/*-----Yahooマイクロコピー-----*/
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink a:before {
    top: 30px;
    color: #51A7E8;
    content: "";
	/*content: "／タイムセール実施中！＼";*/
}

/*スマホとPCの中間くらい（ブレイクポイント501～1239px）*/
@media screen and (min-width: 501px) and (max-width: 1239px) {
    div.yyi-rinker-contents ul.yyi-rinker-links li {
        width: 95%;
    }
    div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink,
    div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink {
        margin-bottom: 30px;
    }
    div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink a:before {
        top: -30px;
        content: "";
        /*content: "＼タイムセール実施中！／";*/
    }
}

/* Mobile Layouts (0-767px) */
@media screen and (max-width: 767px) {
    div.yyi-rinker-contents ul.yyi-rinker-links li {
        width: 100%;
    }
}