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

/************************************
** 記事下部シェアボタンのスラッシュ削除
************************************/
.c-shareBtns__message>span.__text::before,.c-shareBtns__message>span.__text::after{
	display: none;
}

/************************************
** 何でも追従機能
************************************/
/* PC(タブレット) */
.fixed-wrap{
  position:fixed;
  z-index:100;
  max-width:100px; /* 最大横幅 */
  display:none;
  bottom:50px; /* 配置場所(画面下からの距離) */
  left:50px; /* 配置場所(画面右からの距離) */
  right:unset;
  }	
}
.fixed-wrap img{
  width:100%;
  height:auto;
}
/* スマホ */
@media screen and (max-width: 559px) {
  .fixed-wrap{
    max-width:75px; /* 最大横幅 */
    bottom:80px; /* 配置場所(画面下からの距離) */
    left:15px; /* 配置場所(画面左からの距離) */
    right:unset;
  }
}

/* 投稿リストブロックのカード型とサムネイル型を4列表示にする */
@media (min-width: 960px) {
  .-col4 .-type-card.-pc-col3 .p-postList__item, .-col4 .-type-thumb.-pc-col3 .p-postList__item{
    width: calc(100% / 4);
  }
}

/************************************
Rinkerのデザイン変更
************************************/
/*-----タイトル文字を少し小さく-----*/
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;
}}
/*-----ボタンの色-----*/
ul.yyi-rinker-links li.freelink1 a {/*-----G-PARTSの色-----*/
    background-color: #5db49f!important;/*背景色*/
}
.amazonlink a {/*Amazon*/
	background: #F5D220!important;/*背景色*/
}
.freelink3 a {/*自由*/
    background: #FF0211!important;/*背景色*/
}
.rakutenlink a {/*-----楽天-----*/
	background: #BF1516!important;/*背景色*/
}
.yahoolink a {/*-----Yahoo!-----*/
	background: #0265B0!important;/*背景色*/
}
.freelink4 a {/*-----G-PARTSの色-----*/
    background: #5db49f!important;/*背景色*/
}
/*-----キャンペーン-----*/
.yyi-rinker-link:before {
	border-radius: 10px;/*角丸にする*/
}
@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;
}}
/*-----created by Rinker削除-----*/
.credit-box {
  display: none;
}

/************************************
コンタクトフォームの装飾
************************************/
table.CF7_table{
	width:100%;
	margin:0 auto;
	border: 3px solid #e5e5e5;
	box-sizing: border-box; /* 追加 */
}

table.CF7_table tr{
	border-top: 1px solid #e5e5e5;
}

.single .entry-content table.CF7_table,
.page .entry-content table.CF7_table{
	display:table;
}

/*入力欄*/
.CF7_table input, .CF7_table textarea {
	border: 1px solid #d8d8d8;
	width: 100%; /* 追加 */
	box-sizing: border-box; /* 追加 */
}

.CF7_table ::placeholder {
	color:#797979;
}

/*「必須」文字*/
.CF7_req{
	font-size:.9em;
	padding: 5px;
	background: #F92931;/*レッド*/
	color: #fff;
	border-radius: 3px;
	margin-right:1em;
}

/*「任意」文字*/
.CF7_unreq{
	font-size:.9em;
	padding: 5px;
	background: #bdbdbd;/*グレー*/
	color: #fff;
	border-radius: 3px;
	margin-right:1em;
}

/* タイトル列 */
@media screen and (min-width: 768px){
	.CF7_table th{
	width:30%;/*横幅*/
	background-color:#fff;/*ホワイト*/
	}
}

/* レスポンシブ */
@media screen and (max-width: 768px){
	table.CF7_table{
	width:100%;
	}
	.CF7_table tr, .CF7_table td, .CF7_table th{
	display: block;
	width: 100%;
	line-height:2.5em;
	}
	.CF7_table th{
	background-color:#fff;
	}
}

/* 「送信する」ボタン */
.wpcf7 input.wpcf7-submit {
	background-color:#63a84d;/* グリーン*/
	border:0;
	color:#fff;
	font-size:.9em;
	font-weight:bold;
	margin:0 auto;
	width: 50%; /* 追加 */
	box-sizing: border-box; /* 追加 */
}

.CF7_btn{
	text-align:center;
	margin-top:20px;
}

.wpcf7-spinner{
	width:0;
	margin:0;
}

/************************************
** モバイル用の固定ボタンを追加
************************************/
#mobileFootNav { display:none; }
@media only screen and (max-width: 767px) {
	#mobileFootNav { display:block; z-index:1030; width:100%; height:60px; position:fixed; bottom:0; }
	#mobileFootNav { background:rgba(255,255,255,0.7); border-top:1px solid #e1e1e1; }
	#mobileFootNav .ftNavBtn { float:left; width:46%; height:46px; margin:7px 1%; }
	#wrap_all { padding-bottom:60px; } // 60px上げる
}

/* ボタンデザイン（メール） */
.greenButton .webfontIcon { font-size:18px; line-height:24px; font-weight:bold; }
.greenButton {
	box-shadow:inset 0px 0px 0px 0px #D3D3D3;
	background:linear-gradient(to bottom, #72c259 5%, #63A84D 100%);
	background-color:#63A84D;
	border-radius:3px;
	border:1px solid #63A84D;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	text-decoration:none;
	text-shadow:0px 1px 0px #63A84D;
	font-size:13px;
	line-height:16px;
	font-weight:bold;
	width:100%;
	height:100%;
	text-align:center;
	vertical-align:middle;
}
.greenButton:hover {
	background:linear-gradient(to bottom, #79cf5f 5%, #72c259 100%);
	background-color:#63A84D;
	text-decoration:none;
}
.greenButton:active { position:relative; top:1px; }

/* ボタンデザイン（ブルー） */
.blueButton .webfontIcon { font-size:18px; line-height:24px; font-weight:bold; }
.blueButton {
	box-shadow:inset 0px 0px 0px 0px #D3D3D3;
	background:linear-gradient(to bottom, #2CC7C5 5%, #2CC7C5 100%);
	background-color:#2CC7C5;
	border-radius:3px;
	border:1px solid #2CC7C5;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	text-decoration:none;
	text-shadow:0px 1px 0px #2CC7C5;
	font-size:13px;
	line-height:16px;
	font-weight:bold;
	width:100%;
	height:100%;
	text-align:center;
	vertical-align:middle;
}
.blueButton:hover {
	background:linear-gradient(to bottom, #2CC7C5 5%, #2CC7C5 100%);
	background-color:#2CC7C5;
	text-decoration:none;
}
.blueButton:active { position:relative; top:1px; }

/* ボタンデザイン（電話） */
.pinkButton .webfontIcon { font-size:18px; line-height:24px; font-weight:bold; }
.pinkButton {
	box-shadow:inset 0px 0px 0px 0px #0265B0;
	background:linear-gradient(to bottom, #026fc2 5%, #0265B0 100%);
	background-color:#0265B0;
	border-radius:3px;
	border:1px solid #0265B0;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	text-decoration:none;
	text-shadow:0px 1px 0px #0265B0;
	font-size:13px;
	line-height:16px;
	font-weight:bold;
	width:100%;
	height:100%;
	text-align:center;
	vertical-align:middle;
}
.pinkButton:hover {
	background:linear-gradient(to bottom, #027bd6 5%, #026fc2 100%);
	background-color:#026fc2;
	text-decoration:none;
}
.pinkButton:active { position:relative; top:1px; }

/************************************
** 「目次ボタン」「トップへ戻るボタン」の位置調整
************************************/
@media only screen and (max-width: 767px) {
.p-fixBtnWrap { bottom: 70px; }/* 下から70px */
}

/************************************
** タグクラウドのボタンカラー
************************************/
.tag-cloud-link {
    background: #0265B0;
    color: #fff!important;
}
