@charset "utf-8";

/*
style.css
各LPごとのスタイル設定
*/

/* /lp/phone-transfer
------------------------------------------------------------------------ */

.slug-phone-transfer #kv {
    background: #18C468 url(/wp2/wp-content/themes/miyabi-pm_tt1/assets/lp/images/bg_kv.jpg) no-repeat 0 0;
    background-size: cover;

    overflow: hidden;
}

.slug-phone-transfer #kv .img_wrap {
	width: 45%;
}

.slug-phone-transfer #kv .right {
	width: 55%;
    margin: 40px 0 0 -3%;
}

.slug-phone-transfer .option {
	margin: 30px 0 0 0;
	padding: 30px 0 0 0;
	border-top: 1px dotted #ccc;
}

.slug-phone-transfer .btn_wrap .txt {
    display: block;
    margin: 0 0 -10px 0;
    padding: 0;

    font-weight: 700;
    color: #386BB2;
}

.slug-phone-transfer tr:nth-child(3) .wpcf7-list-item {
	display: block;
}

@media screen and (max-width: 768px), screen and (max-width: 820px) {
	.slug-phone-transfer #kv .img_wrap {
		width: inherit;
	}
	.slug-phone-transfer #kv .right {
		width: 65%;
		margin: 10px 10px 0 -50px;		
	}
	.slug-phone-transfer .btn_wrap .txt {
        font-size: .8em;
        margin: 0;
        padding: 0;
    }

}

@media (min-width: 768px) and (max-width: 1024px) {
	.slug-phone-transfer #kv .img_wrap {
		width: 40%;
	}
	.slug-phone-transfer #kv .right {
		width: 55%;
		margin: 10px 10px 0 0;		
	}
}

/* thanks_page */

#comp {
	background: url(/wp2/wp-content/themes/miyabi-pm_tt1/assets/lp/images/bg_thx.jpg) no-repeat 0 0;
	padding: 0 0 20px 0;
}

#comp header .inner {
	padding: 40px 0 0 0;
}

#comp .ttl {
	font-size: 1.6em;
	padding: 40px 0;
}

#comp .img_wrap {
	display: block;
	width: 1200px;
	margin: 0 auto;
}

#comp .pay {
	text-align: center;
}

#comp .pay .pay_box {
	position: relative;

	width: fit-content;
	background: #fff;
	box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.05);

	margin: 40px auto;
	padding: 40px 100px;

	border-radius: 10px;

	text-align: center;
}

#comp .pay .pay_box::before {
    position: absolute;
    top: -30px;
    left: 160px;
    content: "";
    box-sizing: border-box;
    border-right: 20px solid transparent;
    border-left: 20px solid transparent;
    border-bottom: 30px solid #fff;
}

#comp .pay .pay_box .txt {
	font-size: 1.2em;
	font-weight: 700;
}

#comp .pay .pay_box .out_link {
	margin: 20px 0;

	font-size: 1.2em;
	font-weight: 700;
}

#comp .pay .pay_box .out_link a {
	color: #9B0000;
}

#comp .pay .pay_box .out_link a:hover {
	text-decoration: underline;
}

#comp .comment p {
	text-align: center;

	font-size: 1.4em;
	font-weight: 700;
}

#comp .comment .point {
	line-height: 1.4;
}

#comp .pay_box .btn {
    background: transparent linear-gradient(180deg, #FFA700 0%, #FF7600 100%) 0% 0% no-repeat padding-box;
    border: none;
    border-radius: 6px;

    box-shadow: 0 5px 0 #6E4800;

    text-align: center;
    font-weight: 700;
    font-size: 1.2em;
    color: #fff;
}

#comp .pay_box .btn:hover {
    cursor: pointer;

    box-shadow: none;
    transform: translateY(5px);
}

#comp .btn {
	background: #222;
	padding: 20px;
	border: none;

	color: #fff;
	transition: all .2s ease-in;
}

#comp .btn::after {
    border-color: #fff #fff transparent transparent;
    transform: rotate(225deg);
    left: 30px;
	transition: all .2s ease-in;
}

#comp .btn:hover {
	box-shadow: none;
	transform: translateY(0);
	opacity: .9;
}

#comp .btn:hover::after {
    left: 25px;
}

#comp .point_static {
	background:linear-gradient(transparent 60%, #FFDE26 60%);
	margin: 10px 0 0 0;

	color: #C92F37;
}

@media screen and (max-width: 768px), screen and (max-width: 820px) {
	#comp header .inner {
		padding: 0;
		text-align: center;
	}

	#comp header .inner .logo {
		width: fit-content;
		margin: 0 auto;
		padding: 40px 0 30px 0;
	}

	#comp .ttl {
		font-size: 1em;
		padding: 0 20px 10px 20px;
	}

	#comp .ttl h1 {
		font-size: 1.4em;
		margin: 0 0 10px 0;
	}

	#comp .img_wrap {
		width: fit-content;
		display: block;
	}

	#comp .pay .pay_box {
		padding: 20px;
	}

	#comp .pay .pay_box::before {
		left: 45%;
	}

	#comp .pay .pay_box .txt {
		font-size: .9em;
		line-height: 1.6;
	}

	#comp .pay .pay_box .out_link {
		margin: 10px 0;
	}

	#comp .pay .pay_box .caution {
		font-size: .7em;
	}

	#comp .comment {
		font-size: .7em;
		padding: 0 20px;
	}

	#comp .comment p {
		font-size: 1.4em;
		line-height: 1.6;
	}

	#comp .btn_wrap {
		margin: 40px 20px 20px 20px;
	}
}

/* /lp/virtual-office
------------------------------------------------------------------------ */

.slug-virtual-office #kv {
    background: #1980C4 url(/wp2/wp-content/themes/miyabi-pm_tt1/assets/lp/images/virtual_office/bg_kv.png) no-repeat 0 0;
    background-size: cover;

	height: 100vh;
	height: calc(var(--vh, 1vh) * 100);
	overflow: inherit;
}

.slug-virtual-office #kv .logo {
	width: fit-content;
	margin: 0 auto;
}

.slug-virtual-office #kv .ttl span {
	position: relative;
	margin: 0 20px 0 0;
	padding: 10px 20px;

	font-size: 1.6em;
	color: #177BC4;
}

.slug-virtual-office #kv .ttl h1 {
	font-size: 1.8em;
}

.slug-virtual-office #kv .ttl span:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 100%;
	margin-top: -5px;
	border: 5px solid transparent;
	border-left: 8px solid #fff;
}

.slug-virtual-office #kv .parallel {
	width: 75%;
	margin: 30px auto;

	align-items: center;
}


@media screen and (max-width: 1440px) {

	.slug-virtual-office #kv {
		height: inherit;
		overflow: inherit;

		padding: 30px 0;
	}

	.slug-virtual-office #kv .logo {
		width: 200px;
	}

	.slug-virtual-office #kv .ttl span,
	.slug-virtual-office #kv .ttl h1 {
		font-size: 1.2em;
	}
	
	.slug-virtual-office #kv .parallel {
		width: 70%;
	}

	.slug-virtual-office #kv .ttl {
		margin: 20px 0 0 0;
	}

	.slug-virtual-office #kv .btn_wrap {
		margin: 40px 0 30px 0;
	}

}

.slug-virtual-office #kv .parallel._pt02 ul {
	display: flex;
}

.slug-virtual-office #kv .parallel .img_wrap {
	width: 600px;
	margin: 0 20px 0 0;
}

.slug-virtual-office #kv .right {
	width: 400px;
}

.slug-virtual-office #header .btn_wrap .btn,
.slug-virtual-office #kv .btn,
.slug-virtual-office #contact .btn {
    display: block;
    padding: 15px;

	background: transparent linear-gradient(180deg, #5DB248 0%, #74CB5F 100%) 0% 0% no-repeat padding-box;
	border: none;
	border-radius: 10px;

    box-shadow: 0 5px 0 rgb(13,65,0,1);

    text-align: center;
    font-weight: 700;
    font-size: 1.2em;
    color: #fff;
    text-shadow: 0px 0px 10px rgb(21,60,0,.4);
}

.slug-virtual-office #header .btn_wrap .btn:hover,
.slug-virtual-office #kv .btn:hover,
.slug-virtual-office #contact .btn:hover {
    box-shadow: none;
    transform: translateY(5px);
}

.slug-virtual-office #suggestion .img_wrap {
	width: 75%;
	margin: 0 auto 110px auto;
}

.slug-virtual-office #worries .inner {
    background: #FAF6F2 url(/wp2/wp-content/themes/miyabi-pm_tt1/assets/lp/images/virtual_office/img_model.png) no-repeat right bottom;
    background-size: 340px;
    padding: 50px 0;	
}

.slug-virtual-office #worries .ttl {
	width: 500px;
	margin: 0 auto 60px auto;
}

.slug-virtual-office #reason .inner {
	border: 3px dotted #177BC4;
}

.slug-virtual-office #reason .ttl._blue {
	width: fit-content;
	margin: -40px auto 40px auto;
	padding: 10px 30px 10px 25px;
	background: url(/wp2/wp-content/themes/miyabi-pm_tt1/assets/lp/images/virtual_office/bg_ttl_blue.svg) no-repeat 0 0;
	background-size: contain;
	line-height: 1.2;
	font-size: 1.5em;
	color: #fff;
}

.slug-virtual-office #reason .img_wrap {
	width: 85%;
	margin: 0 auto;
}

.slug-virtual-office #price .price .tbl {
	border-bottom: 1px solid #D0E5F3;	
}

.slug-virtual-office #price .price .tbl tr {
	border-top: 1px solid #D0E5F3;
}

.slug-virtual-office #price .price .tbl th {
    background: #E7F2F9;
}

.slug-virtual-office #price .price .tbl td ul li {
	position: relative;
	padding: 0 0 0 20px;
}

.slug-virtual-office #price .price .tbl td ul li::before {
    position: absolute;
    display: inline-block;
    content: '・';
    top: 0;
    left: 0;
}

.slug-virtual-office #price .price .tbl td ul .caution::before {
	content: '※';
}

.slug-virtual-office tr:nth-child(3) .wpcf7-list-item {
	display: block;
}

@media screen and (max-width: 768px), screen and (max-width: 820px) {

	.slug-virtual-office #kv .logo {
		width: 50%;
		margin: 10px auto;
	}

	.slug-virtual-office #kv .ttl span {
		font-size: 1em;
		margin: 0 0 10px 0;
		padding: 5px 10px;
	}

	.slug-virtual-office #kv .ttl span:before {
		top: 100%;
		left: 55%;
		margin-left: -20px;
		border: 12px solid transparent;
		border-top: 12px solid #fff;
	}

	.slug-virtual-office #kv .ttl h1 {
		font-size: 1.1em;
	}

	.slug-virtual-office #kv .parallel {
		width: 90%;
		margin: 0 auto;
	}

	.slug-virtual-office #kv .parallel .img_wrap {
		width: 50%;
		margin: 0;
		flex-grow: 1;
	}

	.slug-virtual-office #kv .parallel .right {
		width: 40%;
		flex-grow: 1;
	}

	.slug-virtual-office #kv .parallel._pt02,
	.slug-virtual-office #kv .parallel ul {
		display: block;
	}

	.slug-virtual-office #kv .parallel._pt02 ul {
		display: block;

		width: 75%;
		margin: 0 auto;
	}

	.slug-virtual-office #kv .btn_wrap {
		margin: 0 15px;
	}

	.slug-virtual-office #worries .ttl {
		width: 75%;
		margin: 0;
		padding: 20px 0 30px 0;
	}

	.slug-virtual-office #worries .inner {
		background: #FAF6F2 url(/wp2/wp-content/themes/miyabi-pm_tt1/assets/lp/images/virtual_office/img_model.png) no-repeat 95% 10px;
		background-size: 80px;
		padding: 0 20px 20px 20px;		
	}

	.slug-virtual-office #header .btn_wrap .btn,
	.slug-virtual-office #kv .btn {
		font-size: .9em;
		padding: 10px 15px;
	}

	.slug-virtual-office #reason .ttl._blue {
		margin: -40px auto 0 auto;
		padding: 8px 40px 40px 30px;

		font-size: 1em;
	}

	.slug-virtual-office #suggestion .img_wrap {
		width: 100%;
		margin: 0 0 70px -5px;
	}

	.slug-virtual-office .annotation._ctr {
		line-height: 1.4;
		margin: 0 0 30px 0;
	}

	.slug-virtual-office #price .price .tbl {
		border: none;
	}

	.slug-virtual-office #price .price .tbl td {
		padding: 10px 10px 15px 10px;
	}

	.slug-virtual-office #price .price .tbl tr:last-child td {
		padding: 10px 10px 0 10px;
	}

	.slug-virtual-office #price .price .tbl tr:nth-child(3) td,
	.slug-virtual-office #price .price .tbl tr:nth-child(4) td {
		text-align: left;
	}

	.slug-virtual-office #price .price .tbl td ul {
		margin: 20px 0 0 0;
	}

	.slug-virtual-office #price .price .tbl td ul li {
		margin: 0 0 10px 0;
	}

	/* contact_tbl */
	.slug-virtual-office #contact .tbl tr {
		border-top: 1px solid #eee;
	}

	.slug-virtual-office #contact .tbl th {
		padding: 15px 0;
	}
	
}


/* address_box */
.faq_box p {
	margin: 0 0 30px 0;
}

.address_box {
	display: block;

	width: fit-content;
	margin: 0 0 20px 0;
	padding: 10px 20px;
	border: 1px dotted #ccc;
}

a.touki {
	text-decoration: underline;
}

a.touki:hover {
	color: #cc0000;
}


/* blog_card */
.blog_card {
	position: relative;
	display: block;

	width: fit-content;

	margin: 30px auto;
	border: 1px solid #222;
	border-radius: 6px;

	box-shadow: 0 5px 0 #222;
}

.blog_card:before {
	background: url("/images/icon_popup.svg") no-repeat 0 0;
	position: absolute;
	bottom: 2px;
	right: 2px;
}

.blog_card:hover {
	box-shadow: none;
	transform: translateY(5px);
}

.blog_card .thumb {
	display: inline-block;
	vertical-align: middle;
}

.blog_card .info {
	display: inline-block;
	vertical-align: middle;
	padding: 15px;
}

.blog_card .card_ttl {
	display: block;
	width: fit-content;

	background: #222;
	margin: 0 0 -15px 0;
	padding: 5px 10px;

	font-size: .9em;
	color: #fff;
}

.blog_card .card_cap {
	display: block;
	font-size: .9em;
}

.blog_card .card_popup {
	position: absolute;
	right: 5px;
	bottom: 0;

	background: url("/images/icon_popup.svg") no-repeat 100% 40%;
	background-size: 14px;

	margin: 0;
	padding: 0 20px 0 0;

	font-size: .8em;
	font-weight: bold;
	color: #16B053;
}

@media screen and (max-width: 768px), screen and (max-width: 820px) {
	.blog_card .thumb {
		width: 100%;
		border-radius: none;
	}
	.blog_card .info {
		padding: 15px 15px 40px 15px;
	}
}