@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/


/* カスタム CSS をここに入力してください */


ul.is-style-index li {
    font-size: 12px;
    padding-bottom: 5px;
}


.c-postTitle__ttl {
    font-size: 18px!important;
}

.responsive-unit{
  max-width: 336px;
	  margin-left: auto;
  margin-right: auto;
}


.p-articleMetas {
    font-size: 10px!important;
}

.midasi01 {
	margin: 0px;
	padding: 10px 18px;
	    background-color: #0675c4;
	color: #fff;
	font-size: 0.8em;
	line-height: 1.5;
}

.midasi02{
	margin: 0;
	padding: 10px 18px;
	background: #369d70;
	color: #fff;
	font-size: 1em;
}

/****************************************
 
          moreタグ関連記事（Relation）
 
*****************************************/
#more_related-entries {
	height: 300px !important;
	overflow: auto !important;
	border: 1px solid #ccc;
}

.more_related-entries h3 {
	margin-bottom: 0 !important;
	font-size: 16px;
}

#more_related-entries .more_related-entry {
	line-height: 110%;
	margin-bottom: 5px;
	clear: both;
}

#more_related-entries .more_related-entry-thumb {
	float: left;
	margin-bottom: 5px;
	padding-bottom: 5px;
	width: 100px !important;
	height: 100px !important;
}

#more_related-entries .more_related-entry-content {
	margin-left: 105px;
}

.more_related-entry-title {
	line-height: 110%;
	font-size: 16px;
	margin-bottom: 5px;
}

.more_related-entry-snippet {
	line-height: 115%;
	margin: 0 0 5px;
	font-size: 14px;
}

.more_related-entry-read {
	margin: 0;
	font-size: 16px;
}




.cps-post-main p {
    padding: 10px 0px 30px 0px;
}


.h3-style01 h3 {
}
  @media (max-width: 767px) {
    .h3-style01 h3 {
      margin-top: 2.4rem!important;} }

.h2-style01 h2 {
}
  @media (max-width: 767px) {
    .h2-style01 h2 {
      margin-top: 2.4rem!important;} }



.cps-post-main div ul, .cps-post-main div ol {
    margin-bottom: 15px!important;
}

.cps-post-main ul {
    margin-top: 15px!important;
}

.cps-post-main ol {
    margin-top: 10px!important;
}

.box26 {
    position: relative;
    margin: 2em 0;
    padding: 20px 20px 0px 20px ;
    border: solid 3px #2f89d0;
    border-radius: 8px;
}
.box26 .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #2f89d0;
    font-weight: bold;
}
.box26 p {
    margin: 0; 
    padding: 0px 0px 20px 0px;
}
.box26 a {
text-decoration: underline;
	font-size: 20px;
	font-weight: bold;
}

.cap_box_content a{
	text-decoration: underline;
	font-size: 20px;
	font-weight: bold;
}

.btn-square {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  background: #27af52;/*ボタン色*/
  color: #FFF;
  border-bottom: solid 4px #62956e;
  border-radius: 3px;
}
.btn-square a {
  color: #FFF;
}
.btn-square:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  border-bottom: none;/*線を消す*/
}


.box0022 {
    padding: 20px 20px;
    margin: 2em 0;
    font-weight: bold;
    background: #FFF;
    border: solid 3px #6091d3;/*線*/
    border-radius: 10px;/*角の丸み*/
}
.box0022 p {
    margin: 0; 
    padding: 0;
}



.box27 {
    position: relative;
    margin: 2em 0;
    padding: 20px 20px 0px 20px ;
    border: solid 3px #ff6600bd;
    border-radius: 8px;
}
.box27 .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #ff6600bd;
    font-weight: bold;
}
.box27 p {
    margin: 0; 
    padding: 0px 0px 20px 0px;
}



/*緑の光るボタン*/
.shinybutton {
 display: block;
 width: 100%;
 margin-bottom: 1em;
}
.shinybutton a {
 display: block;
 position: relative;
 z-index: 2;
 overflow: hidden;
 width: 100%;
 font-weight: bold ;
 border-bottom: solid 5px #00CC99;
border-radius: 5px;
 background-color: #66CC99;
 color: #ffffff !important;
 padding: 12px 0;
	margin-top: 0px;
 text-align: center;
 text-decoration: none;
 transition: .25s linear;
 -webkit-transition: .25s linear;
 -moz-transition: .25s linear;
}
.shinybutton a:hover {
 -ms-transform: translateY(4px);
 -webkit-transform: translateY(4px);
 transform: translateY(4px);/*下に動く*/
 border-bottom: none;/*線を消す*/
}
.shinybutton a:before {
 display: block;
 position: absolute;
 z-index: -1;
 left: -30%;
 top: -50%;
 content: "";
 width: 30px;
 height: 100px;
 transform: rotate(30deg);
 -webkit-transform: rotate(30deg);
 -moz-transform: rotate(30deg);
 background-image: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
 background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,1)),color-stop(100%,rgba(255,255,255,0)));
 background-image: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, #ffffff rgba(255,255,255,1),rgba(255,255,255,0) 100%);
 animation: shiny 2s infinite linear;
 -webkit-animation: shiny 2s infinite linear;
 -moz-animation: shiny 2s infinite linear;
}
@keyframes shiny {
 0% { left: -30%; }
 20% { left: 120%; }
 100% { left: 120%; }
}
@-webkit-keyframes shiny {
 0% { left: -30%; }
 20% { left: 120%; }
 100% { left: 120%; }
}
@-moz-keyframes shiny {
 0% { left: -30%; }
 20% { left: 120%; }
 100% { left: 120%;}
}





/*--------------------------------------
Rinkerのデザイン変更
--------------------------------------*/
/*-----全体-----*/
div.yyi-rinker-contents {
	border: none;/*枠線を消す*/
	border-radius: 5px;/*枠線の丸み*/
	background-color: #f5f5f5/*背景色*/
}
/*-----タイトル文字を少し小さく-----*/
div.yyi-rinker-info div.yyi-rinker-title a {
	font-size: 1em!important;
}
/*-----タイトル文字を左寄せ-----*/
.yyi-rinker-info {
	text-align: left!important; 
}
/*-----スマホ表示でタイトル幅を広く-----*/	
@media screen and (max-width: 500px){
div.yyi-rinker-contents div.yyi-rinker-box div.yyi-rinker-info {
	width: 100%!important;
}}
/*-----メーカー名の余白削除-----*/
div.yyi-rinker-detail div:not(:last-child) {
	padding-bottom: 1px!important;
}
/*-----内部の余白調整-----*/
div.yyi-rinker-contents div.yyi-rinker-box {
	padding: 15px 15px 0!important;
}
@media (min-width: 768px){
div.yyi-rinker-box div.yyi-rinker-info {
    padding-left: 0px;
}
div.yyi-rinker-contents div.yyi-rinker-box {
	padding: 15px 5px 0 15px!important;
}}
/*-----画像位置調整-----*/
.yyi-rinker-img-m .yyi-rinker-main-img{
	width:auto!important;
}
@media (min-width: 768px){
.yyi-rinker-img-m .yyi-rinker-main-img{
	width:auto!important;
	max-width:200px!important;
}}
div.yyi-rinker-contents div.yyi-rinker-image{
	align-items: center!important;
}
/*-----ボタンのデザイン-----*/
@media (min-width: 768px){
div.yyi-rinker-contents ul.yyi-rinker-links li{
    width: 47%;/*幅（2列になるように）*/
}}
ul.yyi-rinker-links a.yyi-rinker-link{
	box-shadow: none!important;/*ボタンの影を消す*/ 
}
@media (min-width: 768px){/*スマホのボタン縦幅*/
ul.yyi-rinker-links a.yyi-rinker-link {
	min-height: 44px!important;
}}
/*-----ボタン間の余白調整-----*/
@media (min-width: 768px){
div.yyi-rinker-info ul.yyi-rinker-links li:not(:last-child) {
    margin-right: 12px!important;
}}
/*-----ボタンの色-----*/
.amazonlink a {/*Amazon*/
	color: #3A4D66!important;/*文字色*/
	background: #FFC266!important;/*背景色*/
}
.rakutenlink a {/*-----楽天-----*/
	background: #ff7c74!important;/*背景色*/
}
.yahoolink a {/*-----Yahoo!-----*/
	background: #95cad7!important;/*背景色*/
}
/*-----キャンペーン-----*/
.yyi-rinker-link:before {
	border-radius: 10px;/*角丸にする*/
}
.rakutenlink:before, .rakutenlink .yyi-rinker-link:before {
	color: #FF4D4A!important;/*キャンペーンの楽天の文字色*/
}
@media (min-width: 768px){/*PCのキャンペーン表示を左寄せ*/
ul.yyi-rinker-links li.amazonkindlelink:before, ul.yyi-rinker-links li.amazonlink:before, ul.yyi-rinker-links li.rakutenlink:before, ul.yyi-rinker-links li.yahoolink:before {
    text-align: left;
}}