@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
   #single_page / #page への依存を外し、.post_content 基準に変更
   - RED:   #E8453C
   - MID:   #F25C54
   - RDMID: #F7928C
   ============================================================= */

/* SANGOのショートコードの補完 */
.center{ text-align: center; }

/* -------------------------------------------------------------
   コンバージョンボタン（.btn.blue-bc / .accent-bc）
   ------------------------------------------------------------- */
.post_content .btn.blue-bc{
	display: block;
	position: relative;
	width: auto;
	margin: 0 auto 1em;
	padding: .5em .5em .5em 0;
	color: #fff;
	text-align: center;
	text-decoration: none;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
	border-radius: 80px;
	background: linear-gradient(to right, #E8453C 0%, #F25C54 50%, #F7928C 100%);
}

.post_content .accent-bc{
	display: block;
	position: relative;
	width: auto;
	margin: 0;
	padding: .75em 1.5em .75em 0;
	color: #fff;
	text-align: center;
	text-decoration: none;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
	border-radius: 80px;
	background: linear-gradient(to right, #E8453C 0%, #F25C54 50%, #F7928C 100%);
}

/* リンク色がテーマ側で上書きされる場合の保険 */
.post_content a.btn.blue-bc,
.post_content a.btn.blue-bc:visited,
.post_content a.btn.blue-bc:hover,
.post_content a.accent-bc,
.post_content a.accent-bc:visited,
.post_content a.accent-bc:hover{
	color: #fff;
	text-decoration: none;
}

/* 右向き矢印 */
.post_content .btn.blue-bc::after,
.post_content .accent-bc::after{
	content: '';
	width: 8px;
	height: 8px;
	border-top: solid 2px #fff;
	border-right: solid 2px #fff;
	position: absolute;
	right: 1em;
	top: calc((1.5em + (1em * 1.6)) / 2 - 4px);
	transform: rotate(45deg);
}
.post_content .accent-bc::after{
	top: calc((1.5em + (1em * 1.6)) / 2 - 5px);
	transform: rotate(135deg);
}

/* 影とホバー */
.post_content a.btn,
.post_content a.accent-bc{
	box-shadow: 0 2px 2px rgba(0, 0, 0, .1), 0 4px 8px -4px rgba(0, 0, 0, .2);
	font-weight: 700;
	transition: box-shadow .25s;
}
.post_content a.btn:hover,
.post_content a.accent-bc:hover{
	box-shadow: 0 4px 12px rgba(0, 0, 0, .1), 0 12px 24px -12px rgba(0, 0, 0, .2);
}

@media (min-width: 600px){
	.post_content .btn.blue-bc,
	.post_content .accent-bc{
		max-width: max(80%, 100px);
		margin: 0 auto;
		padding: .75em 2em .75em 1.5em;
	}
}

/* -------------------------------------------------------------
   アプリレビュー0004ボタン
   ------------------------------------------------------------- */
.theme-swell .original_block_0004_button_group a:not(.btn),
.theme-swell .original_block_0004_button_group a:not(.btn):visited{
	position: relative;
	width: 100%;
	max-width: 420px;
	padding: .75em 1.85em .75em .75em !important;
	background: linear-gradient(to right, #E8453C 0%, #F25C54 50%, #F7928C 100%);
	color: #fff;
	border: none;
	border-radius: 30px;
	font-size: 16px;
	font-weight: 700;
	box-shadow: 0 2px 2px rgba(0, 0, 0, .1), 0 4px 8px -4px rgba(0, 0, 0, .2);
	cursor: pointer;
	transition: box-shadow .25s;
}
.theme-swell .original_block_0004_button_group a.btn{
	width: 100% !important;
}
.theme-swell .original_block_0004_button_group a:not(.btn)::before{
	content: '';
	width: 8px;
	height: 8px;
	border-top: solid 2px #fff;
	border-right: solid 2px #fff;
	position: absolute;
	right: 1em;
	top: calc(50% - 4px);
	transform: rotate(45deg);
}
.theme-swell .original_block_0004_button_group a:not(.btn):hover{
	box-shadow: 0 4px 12px rgba(0, 0, 0, .1), 0 12px 24px -12px rgba(0, 0, 0, .2);
}

/* -------------------------------------------------------------
   CTAボタン ショートコード用（.yari-cta-btn）
   ------------------------------------------------------------- */
.post_content .yari-cta-btn{
	display: inline-block;
	position: relative;
	max-width: 280px;
	margin: 0.4em 0 0;
	padding: 0.6em 1.4em;
	color: #fff !important;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none !important;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.12);
	border-radius: 80px;
	background: linear-gradient(to right, #E8453C 0%, #F25C54 50%, #F7928C 100%);
	box-shadow: 0 2px 2px rgba(0, 0, 0, .1), 0 4px 8px -4px rgba(0, 0, 0, .2);
	transition: box-shadow .25s, transform .15s;
}
.post_content .yari-cta-btn:hover{
	box-shadow: 0 4px 12px rgba(0, 0, 0, .1), 0 12px 24px -12px rgba(0, 0, 0, .2);
	transform: translateY(-1px);
}
@media (max-width: 599px){
	.post_content .yari-cta-btn{
		display: block;
		width: 100%;
		max-width: none;
		padding: 0.7em 1em;
	}
}