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

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

@media screen and (max-width: 767px) {
/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/
#wrapper{ width: 100%; margin: 0px auto; position: relative; overflow: hidden; padding-bottom: 106px;}

/* promo
----------------------------------------------------*/
#promo{ width: 100%; padding-bottom: 150%; background: url("../../images/promo_bg_sp.webp") no-repeat center center; background-size: 100%; position: relative; z-index: 1;}
#promo:before{ content: ""; width: 100%; height: 100%; background: url("../../images/promo_sp_comic.webp") no-repeat left bottom; background-size: 100%; position: absolute; bottom: 0; left: 0; z-index: 1;}
#promo .inner{ width: 20%; position: absolute; top: 7%; right: 17%; z-index: 10;}
#promo .inner h1.pcLogo{ display: none;}
#promo .inner h1.spLogo{ width: 106%; margin: 0 auto;}
#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: 6.0rem 0; position: relative;}
article.contents section{ width: 94%; margin: 0px auto;}

h2.head{ font-size: 2.4rem; 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: 2.0rem; line-height: 1.2em; color: #333; font-weight: 700;}

h2.imgHead{ width: 90%; margin: 0px auto 1.0em; font-size: 2.4rem; 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; margin-bottom: 20px !important;}

/* 漫画で読む万有引力の法則（業者会編） */
#comic{ background: #F6F6F6; position: relative;}
#comic:before{ content: ""; width: 50%; height: 20px; border-radius: 20px 0 0 0; background: #F6F6F6; position: absolute; bottom: 100%; left: 50%; z-index: 10;}
#comic:after{ content: ""; width: 50%; height: 20px; border-radius: 0 20px 0 0; background: #F6F6F6; position: absolute; bottom: 100%; right: 50%; z-index: 10;}
#comic ul{ width: 100%; margin: 0px auto;}
#comic ul li{ border: solid 5px #FFF; border-radius: 8px; position: relative; z-index: 11;}
#comic ul li:nth-child(n+2){ margin-top: 4.0rem;}
#comic ul li img{ width: 100%; height: auto;}

/* BANYUに聞いてみる */
#faq{ position: relative;}
#faq:before{ content: ""; width: 50%; height: 20px; border-radius: 20px 0 0 0; background: #FFF; position: absolute; bottom: 100%; left: 50%; z-index: 10;}
#faq:after{ content: ""; width: 50%; height: 20px; border-radius: 0 20px 0 0; background: #FFF; position: absolute; bottom: 100%; right: 50%; z-index: 10;}
.faq{ padding-bottom: 1.0em;}
.faq dl{ padding: 0 10%;}
.faq dl dt{ width: 100%; min-height: 100px; padding: 0 35% 0 0; margin-left: auto; position: relative;}
.faq dl dt:before{ content: ""; width: 100px; height: 100px; background: url("../../images/question.webp") no-repeat; background-size: contain; position: absolute; top: 0; right: 0;}
.faq dl dt span{ display: block; background: #FFF; border: solid 2px #CCC; font-size: 1.4rem; line-height: 1.6em; border-radius: 16px; padding: 1.0em 0.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: 100%; min-height: 100px; padding: 0 0 0 35%; margin-right: auto; position: relative; margin-top: 1.0em;}
.faq dl dd:before{ content: ""; width: 100px; height: 100px; 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.illust04 dl dd span{ padding: 1.5em 1.0em;}
.faq.illust04 dl dd span em{ display: none;}
.faq dl dd span{ display: block; background: #C7A93F; color: #FFF; font-size: 1.4rem; line-height: 1.6em; border-radius: 16px; padding: 1.0em 0.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: 60%; margin: 0px auto;}
#about h3 img{ width: 100%; height: auto;}
#about h4{ font-size: 2.0rem; line-height: 1.2em; text-align: center; font-weight: 700; margin: 1.0em 0;}
#about ul{ margin: 1.0em 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: 1.6rem; line-height: 1.0em; color: #FFF; font-weight: 700; background: var(--clr-prim); padding: 0.5em;}

/* 販売実績 */
#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: 1.4rem; color: #FFF; line-height: 1.0em; font-weight: 700; padding: 0.5em 5.0em; text-align: center; position: absolute; top: 40px; left: -80px; transform: rotate(-45deg); z-index: 11;}
#sales h3.belt strong{ font-size: 2.0rem; 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;}

.flex-direction-nav a::before{ font-size: 30px !important;}

/* 資産家の会員様限定収益不動産検索サイト */
#intro{ background: url("../../images/intro_bg.webp") no-repeat left bottom; background-size: contain;}
#intro section{ position: relative;}
#intro section:before{ content: none;}
#intro section:after{ content: none;}
#intro h2{ width: 80%; margin: 0px auto;}
#intro h2 img{ width: 100%; height: auto;}
#intro h3{ font-size: 2.4rem; line-height: 1.4em; text-align: center; font-weight: 700; margin: 1.0em 0;}
#intro .linkBnr{ width: 70%; margin: 1.5em auto 3.0em; display: inline-block; position: relative; left: 50%; transform: translateX(-50%);}
#intro .linkBnr img{ width: 100%; height: auto;}
#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:  1.0em; position: relative;}
#intro .frame h4{ font-size: 1.4rem; line-height: 1.2em; font-weight: 700; text-align: center; position: absolute; top: -0.75em; left: 50%; transform: translateX(-50%); z-index: 11;}
#intro .frame h4 span{ background: #FFF;display: inline-block; padding: 0 0.5em; word-break: keep-all;}
#intro .frame dl{}
#intro .frame dl dt{ font-size: 1.6rem; 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.2rem; line-height: 1.2em; text-align: center; margin-top: 1.0em;}
#intro .largeBtn{ width: 90%; margin: 2.0em auto 0;}
#intro .largeBtn a{ display: block; font-size: 1.6rem; 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: 2.0rem 0;}
footer h1{ width: 40%; margin: 0px auto;}
footer h1 img{ width: 100%; height: auto;}
footer ul{ display: flex; justify-content: center; flex-wrap: wrap; margin: 1.0em auto;}
footer ul li{ font-size: 2.0rem; line-height: 3.6rem;}
footer ul li:nth-child(n+2){ margin-left: 0.75em;}
footer ul li a{ display: block; width: 3.6rem; line-height: 3.4rem; padding-bottom: 0.2rem; text-align: center; color: #666; text-decoration: none; background: #EEE; border-radius: 100%;}
footer ul li a:hover{ background: #666; color: #FFF;}
footer .copyright{ font-size: 1.4rem; line-height: 1.0em; color: #FFF; font-weight: 500; text-align: center; margin-top: 1.0em;}

.topBtn{ display: none !important;}
.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%; background: #FFF; box-shadow: 0 0 16px rgba(0,0,0,0.24); margin: 0px auto; position: fixed; bottom: 0; left: 0; z-index: 100;}
#fixBar h1{ display: none;}
#fixBar h1 img{ width: 100%; height: auto;}
#fixBar .navigation{}
#fixBar .navigation ul{ display: none;}
#fixBar .navigation p { width: 100%;}
#fixBar .navigation p a{ width: 100%; display: block; color: #FFF; text-decoration: none; background: var(--clr-prim); padding: 3.0rem 0; text-align: center; padding-bottom: 2.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.5em;}
#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:1.6rem;
	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;}