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

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

/****************************** 
全体
********************************/
p{
	line-height:2;
}
#content{
	margin-bottom:1em;
}
.wpcf7 input,.wpcf7 textarea{
	width:100%;
}
/****************************** 
 ヘッダー
********************************/
.c-gnav>li>a{
	font-weight:600;
	letter-spacing:2px;
}
.c-gnav li:hover a::after,.c-gnav a::after {
    background: #fff !important;
}
.c-gnav .menu-download a{
	background: #00BABD;
    height: 30px;
    margin: 17px 0;
    border-radius: 30px;
}
.c-gnav .menu-download a .ttl{
	font-size:0.82em;
}
.c-gnav .menu-download a:hover{
	opacity:0.75;
}
.c-gnav .menu-download a:after{
	content:unset;
}
/****************************** 
 ヘッダー画像
********************************/
.top-img{
	background-image: url(https://useful-blocks.com/wp-content/uploads/2020/06/top-illust.png);
    content: "";
    display: inline-block;
	width:100%;
    height: 430px;
    background-repeat: no-repeat;
    background-size: contain;
}
.top-copy-title{
	background-image: url(https://useful-blocks.com/wp-content/uploads/2020/06/copy-title.png);
    content: "";
    display: inline-block;
	width:100%;
    height: 80px;
    margin: 0 0 10px -6px;
    background-repeat: no-repeat;
    background-size: contain;
}
.top-copy{
	margin:0 0 15px 0;
}
.top-copy p{
	color: #45446C;
    letter-spacing: 6px;
    font-weight: 600;
	margin:0 0 7px;
}
.creator-wrap{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
.creator-wrap figure{
	max-width:120px;
	margin:0;
}
.creator-wrap i{
	margin:0 10px;
}
.top-column:not(.has-2-columns) {
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
}
.top-hosoku{
	font-size: 0.85em;
    color: #45446C;
    letter-spacing: 2px;
}
@media (max-width: 960px){
	.top-column .wp-block-column{
		max-width:430px;
		margin:0 auto 2em;
	}
	.top-column .wp-block-column:last-child{
		margin:0 auto;
	}
	.top-img{
		height:500px;
	}
}
@media (max-width: 560px){
	.top-copy-title{
		width: 90%;
    	margin: 0 10px;
		height:65px;
	}
	.top-copy {
    	margin: 0 14px 15px;
	}
	.creator-wrap{
		margin:0 15px;
	}
	.top-img {
    	display: block;
    	width: 80%;
    	height: 300px;
    	margin: 0 auto;
	}
	.top-copy p{
		font-size:0.85em;
		margin:0;
	}
	.top-hosoku{
		font-size:0.8em;
	padding: 0.5em 1.2em;
	}
}
/****************************** 
見出し
********************************/
.home .post_content h2.is-style-section_ttl{
	font-size:2em;
	letter-spacing:2px;
	margin:0;
}
.h-sub{
	font-weight:600;
	letter-spacing:4px;
}
.home .about-section h3.is-style-section_ttl{
	font-size:1.3em;
	letter-spacing:1px;
	padding-bottom: 7px;
    margin-bottom: 13px;
    border-bottom: 1px dashed #FDD02C;
}
.home .post_content h3.about-heading-pro:after{
    content: 'PRO';
    display: inline-block;
    padding: 0px 15px;
    font-weight: 600;
    color: #fff;
    background: #FDD02C;
    font-size: 0.8em;
    border-radius: 30px;
    margin-left: 3px;
}
.h2-free,.h2-pro{
	padding: .75em 1em .75em 4.5em !important;
}
.h2-free:after,.h2-pro:after{
    position: absolute;
    left: 17px;
    top: 31%;
    display: block;
    background: #fff;
    color: #ffd22d;
    padding: 0.1em 1em;
    border-radius: 30px;
    font-size: 0.8em;	
}
.h3-free,.h3-pro{
	padding: .75em 1em .75em 4.5em !important;
}
.h3-free:after,.h3-pro:after{
    position: absolute;
    left: 17px;
    top: 31%;
    display: block;
    background: #ffd22d;
    color: #fff;
    padding: 0.1em 1em;
    border-radius: 30px;
    font-size: 0.8em;	
}
.h2-free:after,.h3-free:after{
    content: "無料";
}
.h2-pro:after,.h3-pro:after{
    content: "PRO";
}

/****************************** 
 トップAbout
********************************/
.about-section{
	padding-bottom:6em !important;
}
.about-box-wrap{
	margin:1.5em !important;
}
.about-box-wrap > div {
	box-shadow: 5px 5px 30px #D9B327CC;
	border-radius: 20px;
	background:#fff;
	padding:3em 3.5em;
}
.about-illust-pc,.about-illust-code{
	position:relative;
}
.about-illust-pc:after{
    position: absolute;
    right: -130px;
    top: -60px;
    background-image: url(https://useful-blocks.com/wp-content/uploads/2020/06/pc_illust.png);
    content: "";
    display: inline-block;
    width: 181px;
    height: 166px;
    background-repeat: no-repeat;
    background-size: contain;
}
.about-illust-code:after{
    position: absolute;
    left: -130px;
    bottom: -40px;
    background-image: url(https://useful-blocks.com/wp-content/uploads/2020/06/code_illust.png);
    content: "";
    display: inline-block;
    width: 170px;
    height: 110px;
    background-repeat: no-repeat;
    background-size: contain;
}
@media screen and (max-width:560px) {
	.about-illust-pc:after,.about-illust-code:after{
		content:unset;
	}
	.about-box-wrap{
		margin:0 0 2em !important;
	}
	.about-box-wrap > div{
		padding:2.5em;
	}
	.about-box-wrap .u-mb-0{
		font-size:0.85em;
	}
}
/****************************** 
 トップBlock Style
********************************/
.block-style-box{
	padding: 4em !important;
	margin:0 4em;
	box-shadow: 10px 10px 50px #E5E1D6;
}
.block-style-section .c-tabBody__item{
	padding:2em 0 1em;
}
.p-add-style{
border: 3px solid #FFD22D;
    border-radius: 60px;
    color: #45446C;
    max-width: 650px;
    font-size: 1.3em;
    letter-spacing: 2px;
    font-weight: 600;
    padding: 0.5em 0;
    margin: 4em auto;
}
@media (max-width: 960px){
	.block-style-box{
		padding: 3em !important;
		margin:0 0 2em !important;
	}
}
@media (min-width: 600px){
.c-tabList__button {
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 2px;
}
}
@media (max-width: 560px){
	.block-style-box{
		padding:2em 1em !important;
	}
	.block-style-section .c-tabBody__item{
		padding:1em 0;
	}
	.p-add-style{
		font-size:0.9em;
	}
}
/****************************** 
 トップQ&A
********************************/
.-icon-circle .faq_a::before{
	content:none;
}
.faq_a{
	padding:0 0 0 3.5em !important;
}
.swell-block-faq .faq_q{
	font-size:1.2em;
}
.home .swell-block-faq{
    margin: 0 auto 5em;
	max-width: 650px;
	position:relative;
}
.home .swell-block-faq:after{
    position: absolute;
    right: -250px;
    top: 200px;
    background-image: url(https://useful-blocks.com/wp-content/uploads/2020/06/qa-illust.png);
    content: "";
    display: inline-block;
    width: 170px;
    height: 160px;
    background-repeat: no-repeat;
    background-size: contain;
}
@media screen and (max-width:560px) {
	.home .swell-block-faq:after{
		content:unset;
	}
}
/****************************** 
 PRO比較
********************************/
.pro-section{
	position:relative;
}
.pro-section:after{
    position: absolute;
     left: 12vw;
    bottom: 50px;
    background-image: url(https://useful-blocks.com/wp-content/uploads/2020/06/pro-illust.png);
    content: "";
    display: inline-block;
    width: 170px;
    height: 160px;
    background-repeat: no-repeat;
    background-size: contain;
}
.compare-table{
	background:#fff;
    box-shadow: 10px 10px 50px #E5E1D6;
	max-width:650px;
	margin:0 auto;
	position:relative;
}
.compare-table thead th{
	text-align:center;
	letter-spacing:2px;
}
.compare-table tbody th{
	text-align:center;
	letter-spacing:2px;
	background:#fff;
	font-size:0.9em;
	height: 60px;
    vertical-align: middle;
}
.compare-table tbody td{
	font-size:1.2em;
	height: 60px;
    vertical-align: middle;
	text-align:center;
}
@media screen and (max-width:960px) {
	.pro-section:after{
		content:unset
	}
}
@media screen and (max-width:960px) {
	.compare-table tbody th,.compare-table tbody td{
		height:40px;
	}
}
/****************************** 
 トップ：開発者
********************************/
.developer-wrap img{
    box-shadow: 0 2px 4px rgba(0,0,0,.12);
    border-radius: 50%;
	display:inline-block;
}
.developer-name{
	margin:0;
	font-weight:600;
}
.developer-task{
	color: #bbb;
    font-size: 0.9em;
    font-weight: 600;
}
.developer-content{
    max-width: 330px;
    margin: 0 auto;
}
@media screen and (max-width:560px) {
	.developer-wrap img{
		max-width:130px;
	}
}
/****************************** 
 トップ：ダウンロード
********************************/
.download-block{
    box-shadow: 5px 5px 30px #D9B327CC;
    border-radius: 20px;
    background: #fff;
    padding: 3em;
}
.download-part{
	letter-spacing:2px;
	font-size:1.1em;
	border-top:1px dashed #D6D6D6;
	border-bottom:1px dashed #D6D6D6;
	padding:0.7em 0;
	margin-bottom:1em;
}
.download-price{
	text-align:center;
	font-size: 2em;
	font-weight: 600;
	line-height:1;
	margin: 0 0 1em 0;
}
.download-price-money{
	font-size: 2em;
	color:#ffd22d;
	margin-right:10px;
}
.download-add{
	padding:0.5em;
	max-width: 400px;
    text-align: center;
    margin: auto;
}
.how-to-install{
	background:#fff;
	padding:3em;
	box-shadow: 5px 5px 30px #D9B327CC;
    border-radius: 20px;
}
.how-to-install h3 span{
	letter-spacing:2px;
}
.how-to-install .swell-block-step{
	padding: 1em 2em 0;
}
.how-to-install .wp-block-column{
	margin:0 !important;
}
.how-to-1{
	border-bottom: 1px dashed #ccc;
    border-right: 1px dashed #ccc;
}
.how-to-2{
	border-bottom: 1px dashed #ccc;
}
.how-to-install .border-none{
	border-bottom: none !important;
}
.how-to-install .swell-block-step:not(.is-style-big):not(.is-style-small) .swell-block-step__title{
	min-height:60px;
}
.how-to-link{
	margin-top:-3em;
	text-decoration:underline;
}
@media screen and (max-width:960px) {
.how-to-1,.how-to-2,.how-to-3{
	border:none;
}
	.how-to-install{
		padding:3em 0;
	}
	.swell-block-step:not(.is-style-big):not(.is-style-small) .swell-block-step__title{
		font-size:0.9em;
	}
	.how-to-install .swell-block-step:not(.is-style-big):not(.is-style-small) .swell-block-step__title {
    	min-height:48px;
	}
}
@media screen and (max-width:560px) {
	.download-block{
		padding:2em;
	}
	.download-block .pb-cv-box__inner{
        padding: 0 !important;
        margin: 1em 0 !important;
    }
	.download-add {
       padding: 0.3em;
       margin-bottom: 1em !important;
	}
	.how-to-link{
		margin-top:-1em;
	}
	.how-to-install .swell-block-step__item{
		padding: 0 0 21px 64px;
	}
}
/****************************** 
 フッター
********************************/
.l-footer__foot{
	padding-top:0;
}
.w-footer__box{
	padding:1em 0 0;
}
.l-footer__widgetArea{
	padding-bottom:0;
}
.l-container .w-footer__box:first-child{
	padding:1em 0;
}
.l-footer .copyright{
	text-align:right;
}
.l-footer__inner .w-footer__box img{
	max-width:200px !important;
}
.w-footer__box .widget_nav_menu>div>ul{
	display:flex;
	justify-content:flex-end;
}
.w-footer__box .widget_nav_menu>div>ul li a{
	border:none;
	font-size:0.85em;
}
@media screen and (max-width:560px) {
	.w-footer__box{
		padding:0;
	}
.l-container .w-footer__box:first-child{
	text-align:center;
}
	.w-footer__box .widget_nav_menu>div>ul{
		flex-direction:column;
	}
	.l-footer .copyright{
		text-align:center;
	}
}
/****************************** 
 決済ページ
********************************/
.asp-thank-you-page-msg-wrap{
	background:none !important;
	padding:3em !important;
	border: 1px solid #ccc !important;
}
/****************************** 
 タブ切り替え　カラー
********************************/
.c-tabList__button {
    font-size: 0.8rem;
    font-weight: 500;
}
.tab-color-compare li:nth-of-type(1) button[aria-selected=true],
.tab-color-compare li:nth-of-type(1) button:hover{
	background: linear-gradient(90deg, #6fc7e1 0%, #6fc7e1 50%, #ffa883 50%, #ffa883 100%);
}
.tab-color-compare li:nth-of-type(1) button:before {
	border-top-color: #6fc7e1;
}
.tab-color li:nth-of-type(1) button[aria-selected=true],
.tab-color li:nth-of-type(1) button:hover{
	background: #aaa;
}
.tab-color li:nth-of-type(1) button:before{
	border-top-color: #aaa;
}
.tab-color li:nth-of-type(2) button[aria-selected=true],
.tab-color li:nth-of-type(2) button:hover,
.tab-color-compare li:nth-of-type(2) button[aria-selected=true],
.tab-color-compare li:nth-of-type(2) button:hover{
	background: #fdc44f;
}
.tab-color li:nth-of-type(2) button:before,
.tab-color-compare li:nth-of-type(2) button:before {
	border-top-color: #fdc44f;
}
.tab-color li:nth-of-type(3) button[aria-selected=true],
.tab-color-compare li:nth-of-type(3) button[aria-selected=true],
.tab-color li:nth-of-type(3) button:hover,
.tab-color-compare li:nth-of-type(3) button:hover{
	background: #fd9392;
}
.tab-color li:nth-of-type(3) button:before,
.tab-color-compare li:nth-of-type(3) button:before {
	border-top-color: #fd9392;
}
.tab-color li:nth-of-type(4) button[aria-selected=true],
.tab-color-compare li:nth-of-type(4) button[aria-selected=true],
.tab-color li:nth-of-type(4) button:hover,
.tab-color-compare li:nth-of-type(4) button:hover{
	background: #91c13f;
}
.tab-color li:nth-of-type(4) button:before,
.tab-color-compare li:nth-of-type(4) button:before {
	border-top-color: #91c13f;
}
.tab-color li:nth-of-type(5) button[aria-selected=true],
.tab-color-compare li:nth-of-type(5) button[aria-selected=true],
.tab-color li:nth-of-type(5) button:hover,
.tab-color-compare li:nth-of-type(5) button:hover{
	background: #6fc7e1;
}
.tab-color li:nth-of-type(5) button:before,
.tab-color-compare li:nth-of-type(5) button:before {
	border-top-color: #6fc7e1;
}
/****************************** 
 コメント
********************************/
.comment-form-email,.comment-form-url,.comment-notes{ display:none; }
.-body-solid .p-commentArea{box-shadow:none;}
.form-submit{
	margin-top:2em;
}
@media (max-width: 599px){
.l-articleBottom__section {
    width: 100%;
}
button, input, select, textarea {
    width: 100%;
}
}