@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を記入していきましょう。*/

/*---青チェックボックス---*/
.box14{
    padding: 0.2em 0.5em;
    margin: 2em 0;
    background: #d6ebff;
    box-shadow: 0px 0px 0px 10px #d6ebff;
    border: dashed 2px white;
}
.box14 p {
    margin: 0; 
    padding: 0;
}

.entry-content h2 {
  position: relative;
  padding: 0.6em;
  background: #4169e1;
  color:#fff;
}

/*---h2タグ青シンプル---*/
.entry-content h2:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 30px;
  border: 15px solid transparent;
  border-top: 15px solid #4169e1;
  width: 0;
  height: 0;
}

/*--------------------------------------
関連記事カード２を変更
--------------------------------------*/
.longc_linkto{/*カード全体の設定*/
    position: relative;/*疑似要素の基準に設定*/
    padding: 5px 5px 36px 5px;/*内側の余白（上左右5px 下36px）*/
}
.longc_linkto img {/*アイキャッチ画像が入っている部分の大きさ*/
    max-width: 40%;/*画像部分の横幅最大*/
    vertical-align: top;/*上揃え*/
}
.longc_img img {/*アイキャッチ画像*/
    padding: 0px;/*内側の余白10pxから0pxに*/
}
.longc_linkto .c_linkto_text {/*テキスト部分*/
    padding: 0 2%;/*内側の余白（上下0 左右2%）*/
    display: inline-block;/*横並びになるように*/
    max-width: 55%;/*テキスト部分の横幅最大*/
    font-size: .8em;/*フォントサイズを小さく*/
}
.longc_time {/*投稿日*/
    display: none;/*削除*/
}
.longc_linkto .c_linkto_text:before {/*疑似要素（前）*/
    position: absolute;/*基準に対して動けるように*/
    content: "関連";/*表示する文字*/
    top: 5px;/*上からの位置*/
    left: 5px;/*左からの位置*/
    display: inline-block;/*自由に横幅や高さを設定できるように*/
    width: 47px;/*横幅*/
    height: 27px;/*高さ*/
    text-align: center;/*中央揃え*/
    background: #999999;/*背景色*/
    font-size: 14px;/*フォントサイズ*/
    line-height: 28px;/*行の高さ（縦方向中央揃え用）*/
    color: white;/*文字の色*/
    letter-spacing: 3px;/*文字の間隔*/
    padding-left: 3px;/*内側の余白（左）*/
    border-radius: 2px;/*角丸*/
}
.longc_linkto .c_linkto_text:after {/*疑似要素（後）*/
    position: absolute;
    content: "つづきを読む";
    bottom: 5px;
    right: 0px;
    display: inline-block;
    width: 100%;
    height: 27px;
    text-align: center;
    background: #EBEDF0;
    font-size: 14px;
    line-height: 28px;
    color: #599EFF;
    letter-spacing: 3px;
}

/*****   PCでの画像表示   *****/
@media only screen and (min-width: 481px){/*横幅481px以上での表示*/
.longc_img {/*アイキャッチ画像が入っている部分の大きさ*/
    width: 30%;/*横幅*/
}
.longc_linkto img {/*アイキャッチ画像の大きさ*/
    max-width: 100%;/*横幅*/
}
.c_linkto.longc_linkto .longc_content {/*テキスト部分*/
    vertical-align: top;/*上揃え*/
}
.longc_linkto .c_linkto_text {/*テキスト部分*/
    padding: 0 2%;/*内側の余白（上下0　左右2%）*/
    font-size: 1em;/*フォントサイズ*/
}}

/*****   h4タグ装飾   *****/
.entry-content h4 {
  color: #6594e0;/*文字色*/
  /*線の種類（点線）2px 線色*/
  border-bottom: dashed 2px #6594e0;
}

/*---Rinkerのデザイン変更---*/
div.yyi-rinker-contents {
    border: solid 2px #42424230;
    border-radius: 5px;
    box-shadow: none;
}
div.yyi-rinker-contents div.yyi-rinker-box {
    padding: .25em 0;
}
div.yyi-rinker-contents div.yyi-rinker-image {
    margin: 2%;
    width: 30%;
}
div.yyi-rinker-info {
    padding: 0 2%;
    width: 100%;
    margin: auto;
}
.yyi-rinker-title {
    font-size: 1em;
    margin-left: .5em;
}
div.yyi-rinker-contents div.yyi-rinker-title p {
    margin: 0;
}
div.yyi-rinker-contents div.yyi-rinker-detail {
    font-size: .8em;
    color: #42424280;
    padding-left: 0;
    margin-top: 0;
    margin-left: .5em;
}
div.yyi-rinker-contents div.yyi-rinker-detail .price-box {
    margin: .5em 0;
    margin-left: .5em;
}
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{
    display: inline-block;
}
div.yyi-rinker-contents ul.yyi-rinker-links li{
    width: 46%;
    padding: 0 .7em;
    margin: .5em .5em .4em .5em;
    font-size: .85em;
    display: inline-block;
    height: 40px;
    border-radius: 3px;
    box-shadow: 0 8px 10px -5px rgba(0,0,0,.25);
    font-weight: bold;
    vertical-align: middle;
    line-height: 40px;
    transition: .3s ease-in-out;
    text-align: center;
}

div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink {
    background: #FFC266;/*Amazonボタンの色*/
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a {
    color: #3A4D66;/*Amazonボタン文字色*/
}
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink{
    background: #ff7c74;/*楽天ボタンの色*/
}
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink {
    background: #95cad7;/*Yahoo!ショッピングボタンの色*/
}
div.yyi-rinker-contents ul.yyi-rinker-links li a{
    height: 40px;
    line-height: 40px;
    font-size: 0.95em;
    padding-left: 0px;
    padding-right: 0;
}
div.yyi-rinker-contents ul.yyi-rinker-links li a:after{
    padding-left: 5px;
    font-family: "Font Awesome 5 Free";
    content: "\f138"!important; 
    right: auto;
}
@media screen and (max-width: 500px){/*スマホ表示用（ブレイクポイント500px）*/
div.yyi-rinker-contents div.yyi-rinker-box {
    padding: 0;
    display: block;
}
div.yyi-rinker-contents div.yyi-rinker-image {
    width: auto;
    max-width:50%;
    margin:2% auto;
}
div.yyi-rinker-contents div.yyi-rinker-box div.yyi-rinker-info {
    padding: 0;
    margin: auto;
    width: 87%;
    text-align: center;
}
.yyi-rinker-title {
    font-size: .95em;
　　text-align:left
} 
div.yyi-rinker-contents div.yyi-rinker-detail .price-box .price {
    display: block;
}
div.yyi-rinker-contents ul.yyi-rinker-links li {
  width: 85%;
  font-size: .9em;
        margin-top:2px;
}
body div.yyi-rinker-contents ul.yyi-rinker-links li a {
    padding: 0;
}
div.yyi-rinker-contents ul.yyi-rinker-links li a:after{
}}
@media screen and (min-width: 501px) and (max-width: 1239px){/*スマホとPCの中間くらい（ブレイクポイント501～1239px）*/
div.yyi-rinker-contents ul.yyi-rinker-links li{
    width:80%;
}}

div.yyi-rinker-contents ul.yyi-rinker-links li.freelink1 {
  background: #ffbc7a;
}

div.yyi-rinker-contents ul.yyi-rinker-links li.freelink2 {
  background: #ff7a7a;
}

div.yyi-rinker-contents ul.yyi-rinker-links li.freelink3 {
  background: #7a7aff;
}

/*Rinkerここまで*/

/*--------------------------------------
  スマホヘッダーメニュー固定
--------------------------------------*/
@media only screen and (max-width: 767px) {
.header {
  position: fixed;
  top: 0;
  left: 0;
  width:100%;
}
/*ヘッダーを固定して詰まった分だけコンテンツを下げる*/
#container{
  padding-top:62px;/*高さは必要に応じて調整してください*/
}
/*見出しへのリンクを見やすいように修正*/
h2 span, h3 span {
  padding-top: 62px;/*高さは必要に応じて調整してください*/
  margin-top: -62px;/*高さは必要に応じて調整してください*/
}
}

/*--------------------------------------
  スクロールでヘッダーを小さくする
--------------------------------------*/
@media only screen and (max-width: 767px){
	.is-animation #drawer__open, 
	.is-animation .header-search {
		font-size: .8em;
		height: 40px;
		line-height: 40px;
	}
	.is-animation #drawer+#inner-header {
		height: 40px;
	}
	.is-animation #logo:before {
		height: 0;
	}
	.is-animation #logo a {
		padding: 0!important;
		transition: none;
	}
	.is-animation #logo {
		height: 40px;
		line-height: 1.5;
		font-size: initial;
	}
	.is-animation #logo img {
		height: 30px;
		padding: 0;
	}
	.is-animation .mobile-nav {
		display: none;
	}
}