@charset "utf-8";
/* CSS Document */

:root {
	--clr-prim: #C7A93F;
	--clr-sec: #EF856D;
	--clr-bg: #F9F6EB;
}

@media screen and (min-width: 768px) {

	/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/
	#wrapper {
		width: 100%;
		min-width: 1280px;
		margin: 0px auto;
		position: relative;
		overflow: hidden;
		padding-bottom: 128.5px;
	}

	/* promo
----------------------------------------------------*/
	#promo {
		width: 100%;
		padding-bottom: 50%;
		background: url("../../images/promo_bg_03.webp") no-repeat center center;
		background-size: 100%;
		position: relative;
		z-index: 1;
	}

	#promo:before {
		content: "";
		width: 100%;
		height: 100%;
		background: url("../../images/promo_comic.webp") no-repeat left bottom;
		background-size: 100%;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 1;
	}

	#promo .inner {
		width: 80%;
		position: absolute;
		top: 35%;
		left: 73%;
		transform: translate(-50%, -50%);
		z-index: 10;
	}

	#promo .inner h1.pcLogo {
		width: 56%;
		margin: 0 auto;
	}

	#promo .inner h1.spLogo {
		display: none;
	}

	#promo .inner h1 img {
		width: 100%;
		height: auto;
	}

	#promo.index02 {
		background: url("../../images/promo_bg_02.webp") no-repeat center center;
		background-size: 100%;
	}

	/* main
----------------------------------------------------*/
	article.contents {
		width: 100%;
		padding: 10.0rem 0;
		position: relative;
	}

	article.contents section {
		width: 1200px;
		margin: 0px auto;
	}

	h2.head {
		font-size: 4.8rem;
		line-height: 1.2em;
		text-align: center;
		font-weight: 700;
		letter-spacing: 0.2em;
		margin-bottom: 0.75em;
		color: #333;
	}

	h2.head span {
		font-size: 3.6rem;
		line-height: 1.2em;
		color: #333;
		font-weight: 700;
	}

	h2.imgHead {
		width: 640px;
		margin: 0px auto 1.0em;
		font-size: 4.8rem;
		line-height: 1.2em;
	}

	h2.imgHead img {
		width: 100%;
		height: auto;
	}

	.fadeIn_up {
		opacity: 0;
		transform: translate(0, 10%);
		transition: 1s;
	}

	.fadeIn_up.is-show {
		transform: translate(0, 0);
		opacity: 1;
	}

	.flexslider {
		background: none !important;
		border: none !important;
		border-radius: 0 !important;
	}

	/* 漫画で読む万有引力の法則（業者会編） */
	#comic {
		background: #F6F6F6;
		position: relative;
	}

	#comic:before {
		content: "";
		width: 50%;
		height: 40px;
		border-radius: 40px 0 0 0;
		background: #F6F6F6;
		position: absolute;
		bottom: 100%;
		left: 50%;
		z-index: 10;
	}

	#comic:after {
		content: "";
		width: 50%;
		height: 40px;
		border-radius: 0 40px 0 0;
		background: #F6F6F6;
		position: absolute;
		bottom: 100%;
		right: 50%;
		z-index: 10;
	}

	#comic ul {
		width: 80%;
		margin: 0px auto;
	}

	#comic ul li {
		border: solid 10px #FFF;
		border-radius: 16px;
	}
	#comic ul li.interval{ border: none; border-radius: 0; padding-bottom: 16%;}

	#comic ul li:nth-child(n+2) {
		margin-top: 6.0rem;
	}

	#comic ul li img {
		width: 100%;
		height: auto;
	}

	#comic p {
		width: 80%;
		margin: 2.4em auto 0;
		text-align: center;
	}

	#comic p a {
		display: block;
		position: relative;
	}

	#comic p a:hover {}

	#comic p a:before {
		content: "";
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0);
		position: absolute;
		top: 0;
		left: 0;
		transition: all 0.3s ease 0s;
	}

	#comic p a:hover:before {
		background: rgba(0, 0, 0, 0.32);
	}

	#comic p a img {
		width: 100%;
		height: auto;
	}

	/* BANYUに聞いてみる */
	#faq {
		position: relative;
	}

	#faq:before {
		content: "";
		width: 50%;
		height: 40px;
		border-radius: 40px 0 0 0;
		background: #FFF;
		position: absolute;
		bottom: 100%;
		left: 50%;
		z-index: 10;
	}

	#faq:after {
		content: "";
		width: 50%;
		height: 40px;
		border-radius: 0 40px 0 0;
		background: #FFF;
		position: absolute;
		bottom: 100%;
		right: 50%;
		z-index: 10;
	}

	.faq {
		padding-bottom: 1.5em;
	}

	.faq dl {
		padding: 0 4%;
	}

	.faq dl dt {
		width: 75%;
		padding: 3.0em 25% 1.0em 0;
		margin-left: auto;
		position: relative;
	}

	.faq dl dt:before {
		content: "";
		width: 220px;
		height: 220px;
		background: url("../../images/question.webp") no-repeat;
		background-size: contain;
		position: absolute;
		top: 70%;
		transform: translateY(-50%);
		right: 0;
	}

	.faq.illust05 dl dt:before {
		background: url("../../images/question_02.webp") no-repeat;
		width: 220px;
		height: 220px;
		background-size: contain;
	}

	.faq.illust06 dl dt:before {
		background: url("../../images/question_03.webp") no-repeat;
		width: 220px;
		height: 220px;
		background-size: contain;
	}

	.faq.illust07 dl dt:before {
		background: url("../../images/question_04.webp") no-repeat;
		width: 220px;
		height: 220px;
		background-size: contain;
	}

	.faq.illust08 dl dt:before {
		background: url("../../images/question_05.webp") no-repeat;
		width: 220px;
		height: 220px;
		background-size: contain;
	}

	.faq dl dt span {
		display: block;
		background: #FFF;
		border: solid 2px #CCC;
		font-size: 1.6rem;
		line-height: 1.8em;
		border-radius: 24px;
		padding: 1.5em;
		position: relative;
	}

	.faq dl dt span:after {
		border: solid transparent;
		content: '';
		height: 0;
		width: 0;
		pointer-events: none;
		position: absolute;
		border-top-width: 12px;
		border-bottom-width: 12px;
		border-left-width: 12px;
		border-right-width: 12px;
		border-left-color: #CCC;
		left: 100%;
		top: 50%;
		transform: translateY(-50%);
		z-index: 1;
	}

	.faq dl dt span:before {
		border: solid transparent;
		content: '';
		height: 0;
		width: 0;
		pointer-events: none;
		position: absolute;
		border-top-width: 9px;
		border-bottom-width: 9px;
		border-left-width: 9px;
		border-right-width: 9px;
		border-left-color: #FFF;
		left: 100%;
		top: 50%;
		transform: translateY(-50%);
		z-index: 2;
	}

	.faq dl dd {
		width: 85%;
		padding: 1.0em 0 1.0em 30%;
		margin-right: auto;
		position: relative;
		margin-top: 2.0em;
	}

	.faq dl dd:before {
		content: "";
		width: 282px;
		height: 282px;
		background: url("../../images/answer_01.webp") no-repeat;
		background-size: contain;
		position: absolute;
		top: 40%;
		transform: translateY(-50%);
		left: 0;
	}

	.faq.illust01 dl dd:before {
		background: url("../../images/answer_01.webp") no-repeat;
		background-size: contain;
	}

	.faq.illust02 dl dd:before {
		background: url("../../images/answer_02.webp") no-repeat;
		background-size: contain;
	}

	.faq.illust03 dl dd:before {
		background: url("../../images/answer_03.webp") no-repeat;
		background-size: contain;
	}

	.faq.illust04 dl dd:before {
		background: url("../../images/answer_04.webp") no-repeat;
		background-size: contain;
	}

	.faq.illust05 dl dd:before {
		background: url("../../images/answer_05.webp") no-repeat;
		background-size: contain;
	}

	.faq.illust06 dl dd:before {
		background: url("../../images/answer_06.webp") no-repeat;
		background-size: contain;
	}

	.faq.illust07 dl dd:before {
		background: url("../../images/answer_07.webp") no-repeat;
		background-size: contain;
	}

	.faq.illust08 dl dd:before {
		background: url("../../images/answer_08.webp") no-repeat;
		background-size: contain;
	}

	.faq.illust04 dl dd span {
		font-weight: 700;
		letter-spacing: 0.1em;
		padding: 1.5em 1.0em;
	}

	.faq.illust04 dl dd span em {
		font-style: normal;
	}

	.faq dl dd span {
		display: block;
		background: #C7A93F;
		color: #FFF;
		font-size: 1.6rem;
		line-height: 1.2em;
		border-radius: 16px;
		padding: 1.5em;
		position: relative;
	}

	.faq dl dd span:after {
		border: solid transparent;
		content: '';
		height: 0;
		width: 0;
		pointer-events: none;
		position: absolute;
		border-top-width: 12px;
		border-bottom-width: 12px;
		border-left-width: 12px;
		border-right-width: 12px;
		border-right-color: var(--clr-prim);
		right: 100%;
		top: 50%;
		transform: translateY(-50%);
	}

	/* 万有引力の法則とは */
	#about {
		position: relative;
	}

	#about:before {
		content: "";
		width: 70%;
		height: 1px;
		background: #DDD;
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
	}

	#about h2 {
		color: var(--clr-prim);
	}

	#about h3 {
		width: 25%;
		margin: 0px auto;
	}

	#about h3 img {
		width: 100%;
		height: auto;
	}

	#about h4 {
		font-size: 4.4rem;
		line-height: 1.2em;
		text-align: center;
		font-weight: 700;
		margin: 1.0em 0;
	}

	#about ul {
		margin: 1.5em 0;
	}

	#about ul li {
		text-align: center;
	}

	#about ul li:nth-child(n+2) {
		margin-top: 0.5em;
	}

	#about ul li span {
		display: inline-block;
		font-size: 3.2rem;
		line-height: 1.0em;
		color: #FFF;
		font-weight: 700;
		background: var(--clr-prim);
		padding: 0.5em;
	}

	body#ep-02 #about:before {
		top: 100%;
	}

	/* 販売実績 */
	#sales {
		background: var(--clr-bg);
		border-radius: 0 0 40px 40px;
		position: relative;
		overflow: hidden;
	}

	#sales:before {
		content: "";
		width: 80px;
		height: 40px;
		background: url("../../images/curve.webp") no-repeat;
		background-size: contain;
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		z-index: 10;
	}

	#sales h3.belt {
		background: #E83828;
		font-size: 2.4rem;
		color: #FFF;
		line-height: 1.0em;
		font-weight: 700;
		padding: 0.5em 5.0em;
		text-align: center;
		position: absolute;
		top: 90px;
		left: -110px;
		transform: rotate(-45deg);
		z-index: 11;
	}

	#sales h3.belt strong {
		font-size: 3.2rem;
		color: #FFFB00;
		line-height: 1.0em;
		font-weight: 700;
	}

	#sales .flex02 {
		margin-top: 2.0em;
		padding-bottom: 1.0em;
	}

	#sales .box {
		width: calc(100% - 20px);
		margin: 0px auto;
		background: #FFF;
		border-radius: 16px;
		overflow: hidden;
		padding-bottom: 2.0rem;
	}

	#sales .box p.image {
		width: 100%;
		padding: 0 0 56.25% 0;
		position: relative;
		overflow: hidden;
	}

	#sales .box p.image img {
		width: 100%;
		height: auto;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	#sales .box h4 {
		min-height: 4.4em;
		font-size: 2.0rem;
		line-height: 1.2em;
		font-weight: 500;
		padding: 2.0rem;
	}

	#sales .box p {
		font-size: 1.4rem;
		line-height: 1.4em;
		padding: 0 2.0rem;
	}

	#sales .box ul {
		padding: 2.0rem;
		padding-top: 0;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	#sales .box ul li {
		font-weight: 700;
		color: #E83828;
		font-size: 1.6rem;
		line-height: 1.4em;
	}

	#sales .box ul li:nth-child(n+2) {
		margin-left: 2.0em;
	}

	#sales .box ul li:nth-child(1):before {
		content: "価格";
		color: #333;
		font-size: 1.4rem;
		line-height: 1.4em;
		padding-right: 1.0em;
	}

	#sales .box ul li:nth-child(2):before {
		content: "利回り";
		color: #333;
		font-size: 1.4rem;
		line-height: 1.4em;
		padding-right: 1.0em;
	}

	/* 資産家の会員様限定収益不動産検索サイト */
	#intro {
		background: url("../../images/intro_bg.webp") no-repeat left bottom;
	}

	#intro section {
		position: relative;
	}

	#intro section:before {
		content: "";
		width: 400px;
		height: 533px;
		background: url("../../images/intro_illust_01.webp") no-repeat;
		background-size: contain;
		position: absolute;
		left: 95%;
		bottom: 0;
		z-index: 11;
	}

	#intro section:after {
		content: "";
		width: 350px;
		height: 476px;
		background: url("../../images/intro_illust_02.webp") no-repeat;
		background-size: contain;
		position: absolute;
		right: 95%;
		top: 10%;
		z-index: 11;
	}

	#intro h2 {
		width: 800px;
		margin: 0px auto;
	}

	#intro h2 img {
		width: 100%;
		height: auto;
	}

	#intro h3 {
		font-size: 4.8rem;
		line-height: 1.4em;
		text-align: center;
		font-weight: 700;
		margin: 1.0em 0;
	}

	#intro .linkBnr {
		margin: 1.5em auto 5.0em;
		display: inline-block;
		position: relative;
		left: 50%;
		transform: translateX(-50%);
	}

	#intro .linkBnr a {
		display: inline-block;
		opacity: 1.0;
	}

	#intro .linkBnr a:hover {
		opacity: 0.6;
	}

	#intro .frame {
		border: solid 3px #CCC;
		background: #FFF;
		border-radius: 16px;
		padding: 2.0em 1.0em;
		padding-top: 1.5em;
		position: relative;
	}

	#intro .frame h4 {
		font-size: 2.4rem;
		line-height: 1.2em;
		font-weight: 700;
		text-align: center;
		position: absolute;
		top: -0.6em;
		left: 50%;
		transform: translateX(-50%);
		z-index: 11;
		min-width: 80%;
	}

	#intro .frame h4 span {
		background: #FFF;
		display: inline-block;
		padding: 0 0.5em;
		word-break: keep-all;
		color: #c7a93f;
	}

	#intro .frame dl {}

	#intro .frame dl dt {
		font-size: 2.0rem;
		line-height: 1.3em;
		text-align: center;
		font-weight: 700;
	}

	#intro .frame dl dt strong {
		font-weight: 700;
		color: #D41F1F;
	}

	#intro .frame dl dd {
		font-size: 1.4rem;
		line-height: 1.2em;
		text-align: center;
		margin-top: 1.0em;
	}

	#intro .largeBtn {
		width: 31%;
		margin: 3.0em auto 0;
	}

	#intro .largeBtn a {
		display: block;
		font-size: 2.4rem;
		line-height: 1.0em;
		text-decoration: none;
		font-weight: 700;
		color: #FFF;
		background: var(--clr-prim);
		border-radius: 100px;
		padding: 1.0em 0;
		text-align: center;
	}

	#intro .largeBtn a:hover {
		color: #FFF;
		background: #555;
	}

	#intro .largeBtn a span {
		display: inline-block;
		padding-left: 1.2em;
		position: relative;
	}

	#intro .largeBtn a span:before {
		content: "\f044";
		font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands";
		font-weight: 600;
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
	}

	/* footer
----------------------------------------------------*/
	footer {
		width: 100%;
		background: #777;
		padding: 4.0rem 0;
	}

	footer h1 {
		width: 320px;
		margin: 0px auto;
	}

	footer h1 img {
		width: 100%;
		height: auto;
	}

	footer .copyright {
		font-size: 1.4rem;
		line-height: 1.0em;
		color: #FFF;
		font-weight: 500;
		text-align: center;
		margin-top: 2.0em;
	}

	.topBtn {
		cursor: pointer;
		position: fixed;
		bottom: 150px;
		right: 3%;
		z-index: 101;
	}

	.topBtn a {
		display: inline-block;
		color: rgba(51, 51, 51, 0.4);
		font-size: 4.0rem;
		line-height: 1.0em;
		text-decoration: none;
	}

	.topBtn a:hover {
		color: rgba(51, 51, 51, 0.9);
	}

	/* fixed bar
----------------------------------------------------*/
	#fixBar {
		width: 100%;
		min-width: 1280px;
		background: #FFF;
		box-shadow: 0 0 16px rgba(0, 0, 0, 0.24);
		margin: 0px auto;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 100;
	}

	#fixBar h1 {
		width: 400px;
		margin-left: 2.5%;
	}

	#fixBar h1 img {
		width: 100%;
		height: auto;
	}

	#fixBar .navigation {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		align-items: center;
	}

	#fixBar .navigation ul {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	#fixBar .navigation ul li {
		font-size: 2.4rem;
		line-height: 4.2rem;
	}

	#fixBar .navigation ul li:nth-child(n+2) {
		margin-left: 0.5em;
	}

	#fixBar .navigation ul li a {
		display: block;
		width: 4.2rem;
		line-height: 3.8rem;
		padding-bottom: 0.4rem;
		text-align: center;
		color: #666;
		text-decoration: none;
		background: #EEE;
		border-radius: 100%;
	}

	#fixBar .navigation ul li a:hover {
		background: #666;
		color: #FFF;
	}

	#fixBar .navigation p {
		margin-left: 2.0em;
	}

	#fixBar .navigation p a {
		display: block;
		color: #FFF;
		text-decoration: none;
		background: var(--clr-prim);
		padding: 4.0rem 6.0rem;
		padding-bottom: 3.5rem;
	}

	#fixBar .navigation p a:hover {
		color: #FFF;
		background: #555;
	}

	#fixBar .navigation p a em {
		display: block;
		text-align: center;
		font-style: normal;
		font-size: 1.4rem;
		line-height: 1.0em;
		font-weight: 700;
		margin-bottom: 0.25em;
	}

	#fixBar .navigation p a span {
		display: inline-block;
		text-align: center;
		color: #FFF;
		font-weight: 700;
		font-size: 2.4rem;
		line-height: 1.0em;
		padding-left: 1.2em;
		position: relative;
	}

	#fixBar .navigation p a span:before {
		content: "\f044";
		font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands";
		font-weight: 600;
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
	}

	/*--------------------------------------------------------------
# common
--------------------------------------------------------------*/
	* {
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	body {
		margin: 0;
		padding: 0;
		text-align: center;
		font-size: 2.0rem;
		line-height: 1.8em;
		font-family: -apple-system, "Noto Sans JP", BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
		font-optical-sizing: auto;
		color: #333;
		-webkit-text-size-adjust: 100%;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		position: relative;
	}

	a {
		color: #3F73BE;
		text-decoration: underline;
		transition: all 0.3s ease 0s;
	}

	a:hover {
		color: #3562A2;
		text-decoration: none;
	}

}

/*--------------------------------------------------------------
# reset
--------------------------------------------------------------*/
html {
	height: 100%;
	font-size: 62.5%;
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
blockquote,
th,
td,
img,
p {
	margin: 0px;
	padding: 0px;
	font-weight: 400;
}

address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
	font-style: normal;
}

h1,
h2,
h3,
h4,
h5,
h6,
div,
p,
pre,
ul,
ol,
dl,
dt,
dd,
address,
form,
blockquote {
	text-align: left;
	display: block;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

caption,
th {
	text-align: left;
}

q:before,
q:after {
	content: '';
}

img,
object,
embed {
	vertical-align: top;
}

legend {
	display: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: 100%;
}

img,
abbr,
acronym,
fieldset {
	border: none;
}

li {
	list-style-type: none;
}

svg {
	fill: currentColor;
}

/*---------- align ----------*/
.align-left {
	text-align: left;
}

.align-right {
	text-align: right;
}

.align-center {
	text-align: center;
}

/*----- clearfix -----*/
.container,
.clearfix {
	zoom: 1;
}

.container:after,
.clearfix:after {
	content: "";
	display: block;
	clear: both;
}

.clearfloat {
	clear: both;
	height: 0;
	font-size: 1px;
	line-height: 0px;
}