/*
 * ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
 * CSS for Resale HP
 *
 * 目次
 * 1. 全ページ共通
 * 2. トップページ
 * 3. QUOTEページ
 * 4. ログインページ
 * 5. 管理者ページ
 * 6. 個別静的ページ
 * ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
 */

/*
 * ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
 * 全ページ共有
 * ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
 */
 @font-face { font-family: "Yu Gothic M"; src: local("Yu Gothic Medium"); }
 @font-face { font-family: "Yu Gothic M"; src: local("Yu Gothic Bold"); font-weight: bold; }

 *{font-family: -apple-system, BlinkMacSystemFont, "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "Helvetica Neue", HelveticaNeue, Helvetica, Arial, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";}

 a{text-decoration:none !important}
 button{cursor:pointer !important}
 ::placeholder {color: #cccccc;}

/* 簡易操作系 */
.fl{display:inline-block;float:left}
.fr{display:inline-block;float:right}
.tc{text-align:center}
.bc{margin:0 auto}
.lh{line-height:1.5em}
.bigf{font-size:2em}
.hugeg{font-size:4em}
.mg{margin:20px auto;}
.is-invalid{border-color:red;}
.emph{color:#fada03;}
.emph-b{color:#005a9f;}
.emph-bold{font-weight:bold;}

/*レイアウト系 */
h1,h2,h3,h4{font-weight:bold !important;}
body{background:#f7fbff;}
#main{
  padding-top:65px;
  min-height: calc(100vh - 230px);
}
h3.top-title{font-size:24px;text-align:center;}
ruby rt{color:#005a9f}
p.top-sub-title{
    font-size:16px;
    text-align:center;
    margin-top:18px;
    line-height:26px;
}

/* ヘッダー */
header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:65px;
  background:#ffffff;
  box-shadow: 0 0 8px;
  z-index:99;
  padding-left:calc((100% - 1280px)/2);
  padding-right:calc((100% - 1280px)/2);
}
#logo{position:relative;}
#logo h1{
    font-size: 28px;
    line-height: 1 !important;
    margin: 17px 0 0 30px;
    max-height:40px;
}
#logo h1 a{color:#000000;position:relative;display:block;}
#logo h1 a:after{
    content:"";
    background:rgba(255,255,255,0.5);
    width:175px;
    height:160px;
    display:block;
    position:absolute;
    top:0;
    left:-18px;
    z-index:1;
}
#logo h1 a img{max-height:155px;position:relative;top:-14px;z-index:2;}
nav{margin:15px 30px 0 0;}
nav ul li{
    display:inline-block;
    padding: 10px;
    margin-left:10px;
}
nav ul li a{
    font-size:18px;
    color:black;
}
nav ul li a:hover{color:#005a9f;}
.login-button{
    background:#005a9f;
    border-radius:999px;
    padding:10px 25px;
}
.login-button a{color:#ffffff;}
.login-button a:hover{color:#b2cde2;}

/* フッター */
footer{
  position:relative;
  width:100%;
  height:230px;
  color:#ffffff;
  background:#005a9f;
  padding-top:50px;
}
#footer-navi p{margin-bottom:15px}
#footer-navi p a{
    padding:0 20px;
    display:inline-block;
    color:#ffffff;
    border-right:1px #ffffff solid;
}
#footer-navi p a:hover{color:#b2cde2;}
#footer-navi p a:last-child{border-right:0;}
#footer-logo{
    margin:35px 0 10px;
    font-size:28px;
}
#footer-logo a img{max-height:40px;}
.copyright{font-size:11px;}
.content-half{width:50%;}
.clearfix:after{
    content:'';
    display:block;
    clear:both;
}
.uk-totop{
    position:fixed;
    right:20px;
    bottom:20px;
    background:#005a9f;
    padding: 14px 10px;
    border-radius:999px;
    color:#fff !important;
}

/*
 * ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
 * トップページ
 * ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
 */
#top,#to-top2{
    position:relative;
    width:100%;
    /*height:745px;*/
    background:url("../images/top-bg.jpg") no-repeat center;
    background-size:cover;
    padding: 30px 0 50px 0;
    /*margin-bottom:255px;*/
}
#top:before, #top:after{
    content: '';
    position: absolute;
    width:100%;
    height:75px;
    bottom: 0;
    left: 0;
    /*background-image: linear-gradient(to bottom,rgba(255,255,255,0),rgba(247, 251, 255,1));*/
    opacity:1;
}
/*#top:after {
    height:40px;
    bottom: -255px;
    background-image: linear-gradient(to bottom,rgba(247, 251, 255,1),rgba(255,255,255,1));
}*/
#top h2,#to-top2 h2{
    display:inline-block;
    font-size:44px;
    text-shadow: 0px 6px 9px #000000,0px 2px 1px #000000;
    color:#ffffff;
    line-height:72px;
    margin-top:35px;
}
#quote-form{
    background: #ffffff;
    padding: 30px;
    width: 586px;
    margin: 20px auto 0;
    border-radius: 10px;
    box-shadow: 0 6px 8px rgba(0,0,0,0.6);
    text-align: left;
    position:relative
}
#quote-form h3{
    font-size:26px;
    color:#005a9f;
    padding-bottom:20px;
    border-bottom:1px #005a9f solid;
}
#quote-form p{
    margin-top:40px;
    width:100%;
}
#quote-form p.input-left{
    width:calc(50% - 17.5px);
    margin-right:25px;
}
#quote-form p.input-right{width:calc(50% - 17.5px);}
#quote-form p.input-large-left{
    width:calc(66.666666% - 25px);
    margin-right:25px;
}
#quote-form p.input-small-right{
    width:33.333333%;
}
#quote-form p input::placeholder{
    font-size:16px;
}
#quote-form p select{font-size:16px !important}
#quote-form label{
    display:inline-block;
    font-size:18px;
    margin-bottom:15px;
}
.sub-label{font-size:15px;padding-left:30px}
#quote-form input,#quote-form select,.edit-price{
  display:block;
  width:100%;
  height:54px;
  border:1px #cccccc solid;
  border-radius:3px;
  font-size:18px;
  padding-left:15px;
  background:#ffffff;
}
#quote-form select{
    color:#cccccc;
}
#quote-form .radios{width:100%;display:block}
#quote-form .radios input {
	display: none;
}
#quote-form .radios label{
	display: block;
	float: left;
	cursor: pointer;
	width: 50%;
    height:54px;
	margin: 0;
	padding: 18px 10px 10px;
	background: #ffffff;
	color: #cccccc;
    border:1px #cccccc solid;
	font-size: 16px;
	text-align: center;
	line-height: 1;
	transition: .2s;
}
#quote-form .radios label:first-of-type{
	border-radius: 3px 0 0 3px;
}
#quote-form .radios label:last-of-type{
	border-radius: 0 3px 3px 0;
}
#quote-form .radios input[type="radio"]:checked + .switch-on {
	background-color: #005a9f;
    border-color:#005a9f;
	color: #fff;
}
#quote-form .radios input[type="radio"]:checked + .switch-off {
	background-color: #ddc000;
    border-color:#ddc000;
	color: #fff;
}
#form-apartment-building-wrapper-reserve{display:none;}
.quote-submit{
    background:#ddc000;
    font-size:24px;
    color:#ffffff;
    padding:10px;
    width:90%;
    max-width:475px;
    border-radius:999px;
    margin:0 auto;
    display:inherit;
    border:0;
    margin-bottom:6px;
}

/* 選ばれるワケ */
section#about-site,section#about-site2{
    background:#ffffff;
    padding:50px 0 60px;
}
.boxed-content{
    width:100%;
    max-width:1280px;
    margin:45px auto 0;
}
.contentbox{padding:40px 50px;}
.to-quote{
    background:#ddc000;
    font-size:24px;
    color:#ffffff;
    padding:10px;
    width:390px;
    border-radius:999px;
    margin:0 auto;
    display:inline-block;
}
.reason{
    width: 70px;
    height: 70px;
    margin: 0 30px 60px 0;
}
.reason .title{
    color: #005a9f;
    display: block;
    margin-bottom: 5px;
}
.reason .number{
    width: 70px;
    height: 70px;
    padding-top: 17px;
    background: #005a9f;
    display: block;
    color: #fff;
    font-size: 36px;
    border-radius: 999px;
}
.reason-wrapper{position:relative;}
.reason-wrapper h4{font-size: 20px;line-height: 2em;}
.reason-wrapper p{
    line-height: 1.6em;
    font-size: 16px;
}

/* 仕組み */
section#system{
    background:url('../images/system/bg.jpg');
    background-size:cover !important;
    padding:50px 0 60px;
    position:relative;
}
section#system::before{
    content:'';
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    background:rgba(255,255,255,0.5);
}
section#system .boxed-content img{margin: 0 10px;}
.top-arrow{position:relative;top:-210px;}

/* フロー */
section#flow{
    background:#f7fbff;
    padding:50px 0 60px;
}
.flow-container{
    width:calc(20% - 16px);
    margin:15px 10px 0;
    float:left;
    position:relative;
}
.flow-container:first-child{margin-left:0;}
.flow-container:last-child{margin-right:0;}
.flow-container .number{
    width:50px;
    height:50px;
    text-align:center;
    font-size:24px;
    font-weight:bold;
    padding-top:12px;
    background:#005a9f;
    border-radius:999px;
    color:#fff;
    display: block;
    position: absolute;
    top: -15px;
    left: -15px;
    z-index:1;
}
.flow-header{
    position:relative;
    height:175px;
    overflow:hidden;
}
.flow-header img{width:100%;}
.flow-header h4{
    position:absolute;
    width:100%;
    bottom:0;
    left:0;
    text-align:center;
    color:#fff;
    background:rgba(0,90,159,0.6);
    padding:10px 0
}
.flow-content{
    width:100%;
    background:#fff;
    padding: 15px;
    height: 150px;
    font-size:14px;
    line-height: 1.5em;
}
#flow .boxed-content{padding: 0 30px;}

.c1,.c2,.c3,.c4{position:absolute;}
.c1{
    height: 100px;
    right: -60px;
    top: 10px;
}
.c2{
    right: -40px;
    height: 170px;
    top: -30px;
}
.c3{
    top: -10px;
    height: 150px;
    left: -80px;
}
.c4 {
    top: 0px;
    left: -110px;
    height: 120px;
}

/*
 * ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
 * QUOTEページ
 * ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
 */
#quote{
    position:relative;
    width:100%;
    padding-top:1px;
    background:url("../images/bg.png") repeat;
    background-size:200px 200px;
    padding-bottom: 20px;
}
#quote-box{
    background: #ffffff;
    padding: 30px;
    width: 586px;
    margin: 60px auto 40px;
    box-shadow: 0 6px 8px rgba(0,0,0,0.6);
    position:relative
}
#quote-box img{max-width:100%;}
#quote h3{
    font-size:22px;
    color:#005a9f;
    margin-top:40px;
    margin-bottom:20px;
    line-height: 42px;
    color:#666;

}
#quote h2{
    font-family: 'Lora', serif;
    font-size:42px;
    color:#005a9f;
    margin-top:40px;
    margin-bottom:35px;
    line-height: 32px;
}
#quote h2 span{font-size:24px;}
#quote .sub-quote{
    padding:6px 25px;
    background:#005a9f;
    border-radius:999px;
    color:#ffffff;
    font-size:12px;
    display: inline-block;
    margin:40px 0 20px;
}
#quote .apartment-quote{
    font-size:18px;
    margin:30px 0 0px;
}
#quote .price-quote{
    font-size:64px;
    margin:40px 0 50px;
    font-family: 'Montez', cursive;
}
#quote .price-quote span{font-size:42px}
#quote .info-quote{
    font-size:12px;
    margin:20px 0;
    font-family: 'Noto Serif SC', serif;
    color:#000;
    line-height:20px
}
#quote .info-quote a{color:#000;}
#quote table.quote-table{
    width: 90%;
    margin-left:5%;
    text-align: left;
}
#quote table.quote-table td{
    border:1px #ccc solid;
    padding:5px 10px;
}
#quote .signature-quote {
    color:#005a9f;
    font-family: 'Noto Serif TC', serif;
    border-bottom:2px #005a9f solid;
    padding-bottom:5px;
    display:inline-block;
    font-weight:bold;
    width:320px;
    margin:30px 0 50px;
    font-size: 28px;
    letter-spacing: -2px;
    line-height:28px
}
#quote .signature-quote span{
    font-family: 'Noto Serif TC', serif;
    font-size:14px;
}
#quote .boxed-content{
    margin-top:50px;
    margin-bottom:50px;
}

/*
 * ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
 * ログインページ
 * ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
 */
#login-form{
    background: #ffffff;
    padding: 30px;
    width: 586px;
    margin: 115px auto 0;
    border-radius: 10px;
    box-shadow: 0 6px 8px rgba(0,0,0,0.6);
    text-align: left;
    position:relative;
}
#login-form h2{
    font-size:26px;
    color:#005a9f;
    padding-bottom:20px;
    border-bottom:1px #005a9f solid;
}
#login-form p{margin-top:20px;width:100%;}
#login-form label{
    display:inline-block;
    font-size:18px;
    margin-bottom:15px;
}
#login-form input{
  display:block;
  width:100%;
  height:54px;
  border:1px #cccccc solid;
  border-radius:3px;
  font-size:18px;
  padding-left:15px;
  background:#ffffff;
}
#login-form input#remember{
    display:inline-block;
    width:auto;
    position: relative;
    top: -2px;
}
.nm{margin:0 !important;}
.login-submit{
    background:#ddc000;
    font-size:22px;
    color:#ffffff;
    padding:10px;
    width:90%;
    border-radius:999px;
    margin:0 auto;
    display:inherit;
    border:0;
    margin-bottom:6px;
}
.password-reset{
    display: block;
    font-size: 14px;
    color: #ccc;
    margin-top: 10px;
}

/*
 * ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
 * 管理者ページ
 * ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
 */
#quotes-table{
    background: #ffffff;
    padding: 20px 30px 1px;
    width: 100%;
    margin: 30px auto 0;
    border-radius: 10px;
    text-align: left;
    position:relative;
}
#quotes-table .check{color:#32cd32;}
#quotes-table .close{color:#b22222;}
#quotes-table td{max-width:450px;}
#quotes-table td.setsize{min-width:200px;}
#admin h1{
    float: left;
    font-size: 22px;
    font-weight: bold;
    padding-top: 5px;
}
.pagination{text-align:right;}
.pagination .page-item{
    padding:6px 15px;
    border:1px #e5e5e5 solid;
    display: inline-block;
    border-radius: 3px;
}
.pagination .page-item span,.pagination .page-item a{color:#666;}
.pagination .page-item.active span,.pagination .page-item.active a{
    color:black;
    font-weight:bold;
    text-decoration:underline !important;
}
.pagination:last-child{margin-bottom:20px;}
.quote-save,.quote-cancel{
    background:#ddc000;
    font-size:18px;
    color:#ffffff;
    font-weight:bold;
    padding:10px;
    width:300px;
    border-radius:999px;
    margin:0 5px 6px;
    display:inherit;
    border:0;
    margin-bottom:;
    display: inline-block;
}
.quote-cancel{
    background:#b22222;
    line-height:normal;
}
.admin-nav{
    width: 100%;
    text-align:right;
}
.admin-nav h1{float:left;}
.admin-nav ul{display: inline-block;}
.admin-nav li{
    list-style: none;
    display:inline-block;
    margin:0 10px;
    background: #ccc;
    padding:10px 20px;
    border-radius:999px;
}
.admin-nav li.current{background: #005a9f;}
.admin-nav li a{color:#fff;}

/*
 * ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
 * 個別静的ページ
 * ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
 */
.single-page-wrapper{
    max-width:1280px;
    margin:0 auto;
    padding:50px 30px 30px;
}
.single-page-content{
    max-width:980px;
    margin:10px auto;
    padding:30px;
}
.uk-accordion li::before{
    content:'Q. ';
    float:left;
    padding-right:10px;
    padding-top: 3px;
    color:#005a9f;
}
.uk-accordion-title{font-size:16px;}
.uk-accordion-content{min-height: 40px;}
.uk-accordion-content p{
    position:relative;
    padding-left:93px;
    line-height:1.5em;
}
.uk-accordion-content p::before{
    content:'A. ';
    position:absolute;
    left:73px;
    color:#005a9f;
}
.uk-accordion-content img.shibiro{
    position: absolute;
    top: -15px;
    left: 13px;
    height: 75px;
}
.uk-accordion-content img.fukuta{
    position: absolute;
    top: -3px;
    left: 3px;
    height: 50px;
}
.uk-accordion-content img.yabusa{
    position: absolute;
    top: -8px;
    left: 17px;
    height: 65px;
}
.uk-accordion li{
    border-bottom:4px #ccc dotted;
    padding-bottom:20px;
}
.all-form p{
    margin-bottom:40px;
    width:100%;
}
.all-form p.input-left{
    width:calc(66.66666% - 25px);
    margin-right:25px;
    float:left;
}
.all-form p.input-right{
    width:33.33333%;
    float:right;
}
.all-form .input-half{
    width:calc(50% - 12.5px);
    margin-right:12.5px;
    float:left;
}
.all-form p.input-half-last{
    width:calc(50% - 12.5px);
    margin-left:12.5px;
    margin-right:0;
    float:left
}
.all-form label{
    display:inline-block;
    font-size:16px;
    margin-bottom:15px;
}
.all-form input,.all-form select,.all-form textarea{
  display:block;
  width:100%;
  height:54px;
  border:1px #cccccc solid;
  border-radius:3px;
  font-size:16px;
  padding-left:15px;
  background:#ffffff;
}
.all-form textarea{
    padding:15px;
    min-height:180px
}
.all-form select{color:#cccccc;}
.contact-tel a{
    font-size:48px;
    color:#005a9f;
    padding-bottom:20px;
    display:inline-block
}

/*
 * ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
 * 会社概要
 * ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
 */
.company-left{
    width:300px;
    float:left;
}
.company-left img{width:100%;}
.company-right{
    float:right;
    width:calc(100% - 330px);
}

/*
 * ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
 * 管理者設定用
 * ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
 */
.admin header{background-color:#000}
.admin #logo h1 a{color:#ffffff;}
.admin #logo:after{
    content:'管理者ログイン中';
    position:absolute;
    color:#ffffff;
    display:inline-block;
    bottom: 3px;
    right: -120px;
    font-size: 14px;
}
.admin nav ul li a{color:#fff;}
.edit-price{
    display:inline-block;
    width:auto;
    position: relative;
    top: -10px;
    font-size: 32px;
}
#errors h2{font-size:32px;}
.firstuser{
    position:fixed;
    z-index:99;
    bottom:10px;
    right:10px;
    padding:10px 15px;
    background:#005a9f;
    border-radius:5px;
    color:#fff;
    text-align:center;
}