@charset "utf-8";

/*-------------------------------------------------------------- */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;font-family:inherit;font-size:100%;font-style:inherit;font-weight:inherit;margin:0;outline:0;padding:0;vertical-align:baseline;scroll-behavior: smooth;}
:focus{outline:0;}
html{scroll-behavior: smooth;}
ol,ul{list-style:none;}
table{border-collapse:separate;border-spacing:0;}
caption,th,td{font-weight:normal;text-align:left;}
blockquote:before,blockquote:after,q:before,q:after{content:"";}
blockquote,q{quotes:"";}
img{max-width:100%;height:auto;vertical-align:bottom;-webkit-backface-visibility: hidden;}
a img{max-width:100%;height:auto;border:0;}
a:hover img{opacity: 0.8; filter: alpha(opacity=80); -moz-opacity: 0.8; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; /*animation:fadeIn 1s ease 0s 1 normal;*/}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
body{font:18px/1.75 "source-han-sans-japanese","游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic","ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;color:#333333;animation:fadeIn 2s ease 0s 1 normal; font-feature-settings : "palt";font-weight: 500; letter-spacing: 0.25rem;}
/*"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","游明朝",YuMincho,"HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;*/
/*::after{ display: block; clear: both; content: '';}*/

/* リンク設定
------------------------------------------------------------*/
a{text-decoration:none;outline:0;vertical-align:baseline;color:#333333;}
a:hover,a:active{color:#333333;}

/**** Clearfix ****/
.inner:after{content:""; display:table;clear:both;}
.inner{zoom:1;}
.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
.clearfix{*zoom:1;}

/* 汎用クラス
*****************************************************/
.pcDisp{display:block;}
.spDisp{display:none;}

/* ヘッダー
------------------------------------------------------------*/
header{ background-size: 100% auto; padding: 100px 0; font-size: 40px; font-weight: 700; text-align: center; background: #f1f1f1; margin-bottom: 100px;}

@media only screen and (max-width:644px){
header{ background-size: 100% auto; padding: 50px 0;font-size: 20px; margin-bottom: 50px;}
}

/* メイン画像
*****************************************************/
#kv img{ width: 100%;}

/* フローティングボタン
*****************************************************/
div.fixedMenu{ position: fixed; top: 100px; right:0px; z-index: 100;}

/* コンテンツ
*****************************************************/
#nayami{ background: url(images/bg1.jpg) no-repeat right top #c9c9c9; padding: 50px 0;}
#nayami h2{ font-size: 30px; font-weight: 700; text-align: center;}
#nayami .copy{text-align: center; margin-bottom: 50px;}
#nayami .copy span{ font-size: 40px; font-weight: 700; border-bottom: 3px #333 dotted;}
#nayami ul li{ width: 50%; float: left; background: url("images/check.png") no-repeat left top; padding-left: 40px; box-sizing: border-box;font-family: "vdl-penletter", sans-serif; font-size: 25px; margin-bottom: 20px;}
#nayami ul li:nth-child(odd)::after{ display: block; clear: both; content: '';}

@media only screen and (max-width:644px){
#nayami{ background-size: 60% auto;padding: 100px 0 50px;}
#nayami h2 { font-size: 20px;}
#nayami .copy span{ font-size: 30px;}
#nayami ul{ width: 96%; margin: 0 auto;}
#nayami ul li{ width: 100%; float: none;font-size: 20px;}
}

#riyu .tit{background: url(images/bg3.jpg) no-repeat center top #333333;  padding: 70px 0 10px; margin-bottom: 50px;}
#riyu h2{ font-size: 34px; font-weight: 700; text-align: center; color: #dc0707; position: relative; width: 350px; margin: 0 auto;}
#riyu h2 span{ font-size: 24px;}
/*
#riyu h2:before{ position: absolute;content: ''; top: -10px; left: 0; background: url(images/osaka.png) no-repeat; width: 47px; height: 22px;}
*/
#riyu .copy{text-align: center;}
#riyu .copy span{ font-size: 40px; font-weight: 700; border-bottom: 3px #333 dotted;}
#riyu ul li{  position: relative; padding: 100px 0;}
#riyu ul li:nth-child(1){background: url(images/riyu1.jpg) no-repeat left top 50px;}
#riyu ul li:nth-child(2){background: url(images/riyu2.jpg) no-repeat left top 50px;}
#riyu ul li:nth-child(3){background: url(images/riyu3.jpg) no-repeat left top 50px;}
#riyu ul li:nth-child(4){background: url(images/riyu4.jpg) no-repeat left top 50px;}
#riyu ul li:nth-child(5){background: url(images/riyu5.jpg) no-repeat left top 50px;}
#riyu ul li:nth-child(1):before,#riyu ul li:nth-child(2):before,#riyu ul li:nth-child(3):before,#riyu ul li:nth-child(4):before,#riyu ul li:nth-child(5):before{ font-size: 110px;position: absolute;font-family: "source-han-serif-japanese", serif;font-style: italic;}
#riyu ul li:nth-child(1):before{ content: '01'; top: -40px; left: 2%; }
#riyu ul li:nth-child(2):before{ content: '02'; top: -40px; right: 2%; }
#riyu ul li:nth-child(3):before{ content: '03'; top: -40px; left: 2%; }
#riyu ul li:nth-child(4):before{ content: '04'; top: -40px; right: 2%; }
#riyu ul li:nth-child(5):before{ content: '05'; top: -40px; left: 2%; }
#riyu ul li:nth-child(odd){ padding-top: 75px; padding-left: 100px;}
#riyu ul li:nth-child(even){ padding-top: 75px; padding-right: 100px;}
#riyu ul li h3{ margin-top: 50px; font-size: 30px; font-weight: 700;text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff; margin-bottom: 20px;}
#riyu ul li p{ width: 55%;}
#riyu ul li:nth-child(even) h3{ text-align: right;}
#riyu ul li:nth-child(even) p{ padding-left: 45%;}

@media only screen and (max-width:644px){
#riyu ul li:nth-child(1):before, #riyu ul li:nth-child(2):before, #riyu ul li:nth-child(3):before, #riyu ul li:nth-child(4):before, #riyu ul li:nth-child(5):before { font-size: 60px;}
#riyu ul li:nth-child(1) { background: url(images/riyu1.jpg) no-repeat left -10px top 0px; background-size: 100%;}
#riyu ul li:nth-child(2){background: url(images/riyu2.jpg) no-repeat left 5px top 0px; background-size: 100%;}
#riyu ul li:nth-child(3){background: url(images/riyu3.jpg) no-repeat left -10px top 0px; background-size: 100%;}
#riyu ul li:nth-child(4){background: url(images/riyu4.jpg) no-repeat left 5px top 0px; background-size: 100%;}
#riyu ul li:nth-child(5){background: url(images/riyu5.jpg) no-repeat left -10px top 0px; background-size: 100%;}
#riyu ul li { padding: 50px 0;}
#riyu ul li:nth-child(odd) { padding-top: 5px; padding-left: 40px;}
#riyu ul li:nth-child(even) { padding-top: 5px; padding-right: 40px;}
#riyu ul li h3 { margin-top: 38px; font-size: 16px;margin-bottom: 10%;}
#riyu ul li p { width: 96%;}
#riyu ul li:nth-child(even) p { padding-left: 20px;}

}

#voice h2{ background: url(images/bg4.jpg) no-repeat center center; background-size: 100% auto; padding: 100px 0; font-size: 40px; font-weight: 700; text-align: center; color: #FFFFFF;}
#voice h3{ font-size: 30px; font-weight: 700; margin-bottom: 30px; position: relative; padding-left: 220px;}
#voice h3:before{ position: absolute; top: 0; bottom: 0; left: 0; content: ''; margin: auto;width: 200px; height: 1px; background: #333;}
#voice ul li{ margin-bottom: 50px;box-shadow: 0px 0px 15px -5px #777777; border-radius: 20px; width: 90%; padding: 30px; box-sizing: border-box; position: relative;}
#voice ul li:nth-child(odd){ float: right;}
#voice ul li:nth-child(even){ float: left;}
/*
#voice ul li:nth-child(odd):before{position: absolute; top: 30px; left: -50px; content: ''; width: 120px; height: 120px; background: url(images/icon1.png) no-repeat;}
#voice ul li:nth-child(even):before{position: absolute; top: 30px; right: -50px; content: ''; width: 120px; height: 120px; background: url(images/icon1.png) no-repeat;}
*/
#voice ul li h4{font-size: 26px; font-weight: 700; border-bottom: 1px solid #333; margin-bottom: 20px;}
#voice ul li h4 img {width:40%}
#voice ul li p{ width: 70%;}
#voice ul li p img {width:45%}
#voice ul li:nth-child(1){ background: url(images/illust1.jpg) no-repeat right 50px bottom;}
#voice ul li:nth-child(2){ background: url(images/illust2.jpg) no-repeat right 50px bottom;}
#voice ul li:nth-child(3){ background: url(images/illust3.jpg) no-repeat right 50px bottom;}

@media only screen and (max-width:644px){
#voice h2 { padding: 50px 0; font-size: 19px; margin-bottom: 10%; background-size: 200% auto;}
#voice h3 { padding-left: 110px;font-size: 20px;}
#voice h3:before { width: 90px;}
#voice ul li:nth-child(odd):before {  left: -15px; width: 60px; height: 60px; background-size: 100% auto;}
#voice ul li:nth-child(even):before{ right: -15px; width: 60px; height: 60px; background-size: 100% auto;}
#voice ul li:nth-child(odd) { width: 90%; padding: 20px 20px 180px 20px; margin: 0 auto 50px;}
#voice ul li:nth-child(even) { width: 90%; padding: 20px 40px 180px 20px; margin: 0 auto 50px;}
#voice ul li h4 { font-size: 17px;}
#voice ul li h4 img {width:60%}
#voice ul li p { width: 100%;}
#voice ul li p img {width:50%}
#voice ul li:nth-child(1){ background: url(images/illust1.jpg) no-repeat center bottom;}
#voice ul li:nth-child(2){ background: url(images/illust2.jpg) no-repeat center bottom;}
#voice ul li:nth-child(3){ background: url(images/illust3.jpg) no-repeat center bottom;}
#voice ul li:nth-child(odd){ float: none;}
#voice ul li:nth-child(even){ float: none;}

}
#faq{ padding: 100px 0;}
#faq h2{ text-align: center; font-size: 38px; margin-bottom: 30px; font-weight: 700;}

@media only screen and (max-width:644px){
#faq{ padding: 50px 0;}
#faq h2{ font-size: 30px;}
}

/*アコーディオン*/
.accordion-area{ list-style: none; width: 100%; max-width: 1000px; margin:0 auto;}
.accordion-area li{ margin: 10px 0;}
.title { position: relative; cursor: pointer; padding: 0 3% 0 50px; transition: all .5s ease; background: #f9f9f9; font-size: 20px; font-weight: 700;}
.title::before,.title::after{ position: absolute; content:''; width: 15px; height: 2px; background-color: #333;}
.title::before{ top:48%; right: 15px; transform: rotate(0deg);}
.title::after{top:48%;right: 15px;transform: rotate(90deg);}
.title.close::before{transform: rotate(45deg);}
.title.close::after{transform: rotate(-45deg);}
.box { display: none;/*はじめは非表示*/margin:0 3% 3% 50px; padding: 3% 3% 3% 50px; position: relative;}
.title span{ font-family: "source-han-serif-japanese", serif; font-size: 35px; font-style: italic;}
.box:before{ position: absolute; content:'A.'; font-family: "source-han-serif-japanese", serif; font-size: 35px; font-style: italic; top: 0; left: 0;}

@media only screen and (max-width:644px){
.title span { font-size: 25px;}
.title { padding: 0 30px 0 10px; font-size: 16px;}
.box:before { font-size: 30px;}
.box { margin: 0 3% 3% 10px; padding: 3% 3% 3% 37px; font-size: 14px;}
}

#intro h2{ text-align: center; font-weight: 800; margin-bottom: 50px; font-size: 30px;}
#intro ul::after{ display: block; clear: both; content: '';}
#intro ul{ margin-bottom: 100px;}
#intro ul li{ width: 48%; margin-right: 4%; float: left; margin-bottom: 20px; }
#intro ul li:nth-child(even){ margin-right: 0;}
#intro ul li a{background: #1b32ab; border-radius: 10px; border: solid #fff 1px; text-align: center; font-weight: 800; padding: 30px 0; box-sizing: border-box; color: #fff; font-size: 30px; display: block;box-shadow: 0px 0px 15px -5px #777777; transition: 0.2s;}
#intro ul li a:hover{ opacity: 0.5;}
main #intro .inner10{max-width:1000px;width:90%;margin:0 auto;padding:0;box-sizing:border-box;}

@media only screen and (max-width:644px){
#intro h2{ font-size: 20px;}
#intro ul{ margin-bottom: 50px;}
#intro ul li{ width: 100%; margin-right: 4%; float: left; margin-bottom: 20px; }
#intro ul li a{padding: 15px 0;font-size: 20px;} 
}

/* 共通エリア
*****************************************************/
section::after{ display: block; clear: both; content: '';}
main .inner10{max-width:1000px;width:100%;margin:0 auto;padding:0;box-sizing:border-box;}
main .inner12{max-width:1200px;width:100%;margin:0 auto;padding:0;box-sizing:border-box;}

.cta{ background: url(images/bg2.jpg) no-repeat;background-size:cover; padding: 100px 0;}
.cta h2{ position: relative; font-size: 50px; font-weight: 700; text-align: center; margin-bottom: 30px;}
.cta h2:before,.cta h2:after{ position: absolute; content: ''; width: 100px; height: 2px; background: #333; top: 0; bottom: 0; margin: auto;}
.cta h2:before{ left: 100px;}
.cta h2:after{ right: 100px;}
.cta .btn { width: 100%; margin-bottom: 100px;}
.cta .btn a{  display: block; text-align: center;width: 100%; color: #fff; font-weight: 700; font-size: 50px; height: 180px; line-height: 180px;background-image: url(images/cta60.png),url(images/ctaarrow.png); background-position: left 50px center, right 150px center; background-repeat: no-repeat,no-repeat; background-color: #ef6918; border: #fff solid 2px; border-radius: 10px;box-shadow: 0px 0px 15px -5px #777777;}
.cta ul{ display: flex; width: 90%; margin: 0 auto 50px;}
.cta ul li{ width: 100%; text-align: center; font-size: 50px; color: #fff; font-weight: 700; background: url(images/ctamaru.png) no-repeat; background-size: 100% auto; margin-right: 20px; padding: 60px 0;}
.cta ul li:last-child{ margin-right: 0;}
.cta .btm{ font-size: 40px; font-weight: 700; text-align: center; background: url(images/ctapen.png) no-repeat right bottom; width: 610px; margin: 0 auto;}
.cta .btm span{ border-bottom: 3px solid #333;}

@media only screen and (max-width:644px){
.cta{ padding: 50px 0;}
.cta h2{ font-size: 25px;}
.cta h2:before,.cta h2:after{ width: 10px;}
.cta h2:before{ left: 10px;}
.cta h2:after{ right: 10px;}
.cta .btn { width: 96%; margin: 0 auto 50px;}
.cta .btn a { font-size: 20px; background-size: 10% auto,10% auto;background-position: left 10px center, right 10px center; height: 90px; line-height: 90px;}
.cta ul li { font-size: 18px; margin-right: 0px; padding: 32px 0;}
.cta ul{ margin: 0 auto 20px;}
.cta .btm { font-size: 20px; width: 100%;padding-top: 10px;background: url(images/ctapen.png) no-repeat right 5px bottom;}
}

/* フッター
*****************************************************/
footer{padding:50px 0; background: #f0f0f0;}
footer .inner{max-width:1200px;width:100%;margin:0 auto;padding:0;box-sizing:border-box;}
footer .logo{ float: left; margin-right: 50px;}
footer .add{ font-size: 14px;}

@media only screen and (max-width:644px){
footer .logo { float: none; margin-right: 0; text-align: center; margin-bottom: 30px;}
footer .add { text-align: center;}
}

/* スマホサイズ
------------------------------------------------------------*/
@media only screen and (max-width:644px){
.pcDisp{display:none;}
.spDisp{display:block;}

div.fixedMenu2{ position: fixed; bottom: 0px; z-index: 100; width: 100%;important;}
div.fixedMenu2 ul li { float: left;
width : 50% ; /* 未対応ブラウザ用フォールバック */
width : -webkit-calc(100% / 2) ;
width : calc(100% / 2) ;}
}



/* 売却実績
======================= */

#record{ margin-top: 50px;}

#record .tit{no-repeat center top #333333;  padding: 70px 0 10px; margin-bottom: 50px;}
#record h2{ font-size: 34px; font-weight: 700; text-align: center; color: #dc0707; position: relative; width: 500px; margin: 0 auto;}
#record h2 span{ font-size: 24px;}
/*
#record h2:before{ position: absolute;content: ''; top: -10px; left: 0; background: url(images/osaka.png) no-repeat; width: 47px; height: 22px;}
*/
#record .copy{text-align: center; margin-bottom:60px;}
#record .copy span{ font-size: 40px; font-weight: 700; border-bottom: 3px #333 dotted;}

.p-sales-record {margin-bottom:60px;}

.p-sales-record ul li  {
    margin-bottom: 20px;
    vertical-align: top;
    border: solid 1px #ccc;
    box-shadow: 0px 0px 15px -5px #777777;
    border-radius: 10px;
    max-width:98%;
    margin-left:5px;
    margin-right:5px;
    }

.p-sales-record__top {
    display: block;
    border-bottom: 1px solid #f0f0f0;
}

.p-sales-record__top h3 {
    font-weight: bold;
    background-color: #1b32ab;
    color: #fff;
    padding: 7px 10px;
    border-radius: 10px 10px 0 0;
}

/*
.p-sales-record__top dl {
    display: flex;
}
*/
.p-sales-record__top dl dt {
    padding: 7px 5px;
    font-weight: bold;
    background-color: #f5f5f5;
}

.p-sales-record__top dl dd {
    padding: 7px 10px;
}

.p-sales-record__top dl dd span{
    color: #dc0707;
}

.p-sales-record__textarea {
    display: flex;
    border-top: none;
}

.p-sales-record__textarea__image {
    padding: 10px;
    text-align: center;
}

.p-sales-record__textarea__image img {
    width: 50px;
    height: 50px;
}

.p-sales-record__textarea p {
    padding: 10px;
}

/* PC */
@media screen and (min-width:768px) {
    .p-sales-record ul {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 100%;  
        margin: 0 auto;     
    } 

    .p-sales-record ul li {
        width: 49%;
        margin-left:0;
        margin-right:0;
    }
    
    .p-sales-record__textarea__image img {
        width: 70px;
        height: 70px;
    }

    .p-sales-record__textarea p {
        width: calc(100% - 10px);
    }
}


/* スマホサイズ
------------------------------------------------------------*/
@media only screen and (max-width:644px){

#record .tit{no-repeat center top #333333;  padding: 70px 0 10px; margin-bottom: 50px;}
#record h2{ font-size: 30px; font-weight: 700; text-align: center; color: #dc0707; position: relative; width: 300px; margin: 0 auto;}
#record h2 span{ font-size: 24px;}
/*
#record h2:before{ position: absolute;content: ''; top: -10px; left: 0; background: url(images/osaka.png) no-repeat; width: 47px; height: 22px;}
*/
#record .copy{text-align: center; margin-bottom:60px;}
#record .copy span{ font-size: 30px; font-weight: 700; border-bottom: 3px #333 dotted;}
}

/*form*/
#formset{ padding-bottom: 100px;}
#formset #formbox h2{ background: #000; color: #fff; padding: 5px 10px; font-weight: 800; font-size: 20px; margin-bottom: 20px;}
#formset #formbox h3{ text-align: center; font-weight: 800; margin-bottom: 50px; font-size: 30px;}
#formset #formbox table{ width: 100%; margin-bottom: 100px;}
#formset #formbox th,#formset #formbox td{ padding-bottom: 20px; padding-top: 20px; border-bottom: 1px solid #ccc;}
#formset #formbox th span{ color: #fff; background: #ff8645; padding: 5px 10px; margin-left: 10px; font-size: 14px;}
#formset #formbox th{ width: 42%; vertical-align: top; text-align: left; padding-left: 100px;}
#formset #formbox input{ width: 80%; height: 30px;}
#formset #formbox input.inputs{ width: 150px;}
#formset #formbox input.inputm{ width: 400px;}
#formset #formbox td div{ margin-bottom: 10px;}
#formset #formbox input[type="radio"]{ width: 30px; height: 30px; position: relative; /*top: 8px;*/}
#formset #formbox select{ width: 50%; font-size: 25px; font-weight: 500; height: 40px;}
#formset #formbox textarea{ width: 80%!important; height: 200px!important;}
#formset #formbox .btn{ clear:both; width:100%; text-align:center; margin-top: 50px;}
#formset #formbox .btn button{border:none; background:none;}
.tableset .formend{max-width:1000px; width:100%; margin:100px auto; text-align: center; font-size: 20px;}
.tableset .formend h2{ font-size: 30px; margin-bottom: 50px;}

@media only screen and (max-width:800px){
#formset #formbox th{padding-left: 20px; padding-right: 20px;}
#formset #formbox select { width: 80%;}
}

@media only screen and (max-width:644px){
#formset{ padding-bottom: 50px;}
#formset #formbox h2{ font-size: 18px;}
#formset #formbox table{ margin-bottom: 50px;}
#formset #formbox{ margin-bottom: 0;}
#formset #formbox h2::before, #formset #formbox h2::after { width: 70px;}
#formset #formbox h4 { font-size: 23px; margin-top: 50px; margin-bottom: 20px;}
#formset #formbox th,#formset #formbox td{width: 100%; display: block;}
#formset #formbox th{ padding-left: 0px; border-bottom: none; padding-bottom: 0;font-weight: 800;}
#formset #formbox input{ height: 40px;}
#formset #formbox input,#formset #formbox select,#formset #formbox textarea{ width: 100%;box-sizing: border-box;}
.tableset .formend{max-width:1000px; width:100%; margin:100px auto; text-align: center; font-size: 16px;}
.tableset .formend h2{ font-size: 20px; margin-bottom: 50px;}
main #formbox .inner12{max-width:1200px;width:90%;margin:0 auto;padding:0;box-sizing:border-box;}
}