/*reset*/
/*******************************************************************/
html{box-sizing:border-box;overflow-y:scroll;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block;}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:0;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}img{width:auto;max-width:100%;height:auto;border-style:none;vertical-align:middle}i{vertical-align:middle}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}ul,ol{list-style:none}i{font-style:normal}
body { -webkit-text-size-adjust: 100%; -webkit-overflow-scrolling: touch; width: 100%; height: 100%; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro","メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
pre,code,kbd,samp{font-family:monospace, sans-serif}
a { color: #111; text-decoration: none;}
a:hover { text-decoration: underline;}
/*
10:77%   15:116%     20:153.9%   25:189%
11:85%   16:123.1%   21:161.6%   26:197%
12:93%   17:131%     22:167%
13:100%  18:138.5%   23:174% 
14:108%  19:146.5%   24:182%
*/


/*SETTING*/
/*******************************************************************/
#container { position: relative; width: 100%; overflow: hidden;}
.container { position: relative; text-align: left; font-size: 12px; line-height: 1.5;}
.container > div:not(.form) { display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; padding: 10vh 0;}
.inner { max-width: 980px;}
.form .inner { max-width: 790px; margin: 0 auto; padding: 10vh 0;}
.contents { padding-left: 190px;}
.sp { display: none;}

h1 { margin-bottom: 24px;}
.box { width: 100%; max-width: 790px; margin-top: 16px; padding: 20px; background: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.9); overflow: auto; overflow-X: hidden;}

table { width: 100%;}
th, td { border-bottom: #111 dotted 1px;}
th { padding: 8px 0; font-weight: bold;}
td { padding: 8px 0 8px 40px;}
img { width: auto; max-width: 100%; height: auto;}
li { list-style: none;}

.loading{ position: absolute; width: 100%; height: 100%; background: #FFF; z-index: 10;}
.loading-container{ width: 48px; height: 48px; position: fixed; top: 50%; left: 50%; margin-left: -24px; margin-top: -24px;}


/*MENU*/
/*******************************************************************/
@media only screen and (min-width: 1025px){
#header { position: relative; max-width: 980px; margin: 0 auto; z-index: 100;}
#header ul { position: fixed; top: 50%; left: 50%; margin: -214px 0 0 -490px;}
#header li { padding-bottom: 1px;}
#header a { display: block; width: 170px; height: 60px; background: url(../images/top/btn.png) 0 0 no-repeat; text-indent: -9999px; overflow: hidden;}
#b1 a { background-position: 0 0;} #b1 a.current, #b1 a:hover { background-position: -170px 0;}
#b2 a { background-position: 0 -60px;} #b2 a.current, #b2 a:hover { background-position: -170px -60px;}
#b3 a { background-position: 0 -120px;} #b3 a.current, #b3 a:hover { background-position: -170px -120px;}
#b4 a { background-position: 0 -180px;} #b4 a.current, #b4 a:hover { background-position: -170px -180px;}
#b5 a { background-position: 0 -240px;} #b5 a.current, #b5 a:hover { background-position: -170px -240px;}
#b6 a { background-position: 0 -300px;} #b6 a.current, #b6 a:hover { background-position: -170px -300px;}
#b7 a { background-position: 0 -360px;} #b7 a.current, #b7 a:hover { background-position: -170px -360px;}
#open { display: none;}
}


/*TOP*/
/*******************************************************************/
/*1:Top*/
.top { background: #111 url(../images/top/top.jpg) center 0 no-repeat; background-size: cover;}
.top .contents { padding-left: 0;}
.topics { width: 100%; max-width: 390px; height: 70vh;}
.topics h2 { position: relative; padding-bottom: 10px;}
.topics dt { padding: 0 0 2px 20px; background: url(../images/top/arrow.png) 0 5px no-repeat; font-weight: bold; color: #25A9D7;}
.topics dd { padding: 0 0 10px 20px;}

#feed li { padding: 16px 0; border-bottom: 1px solid #222;}
#feed li > a, #feed li > div { display: flex; justify-content: space-between;}
#feed li figure { width: 120px;}
#feed li figure img { width: 120px; height: 80px; object-fit: cover; object-position: center; font-family: 'object-fit: cover; object-position: center;';}
#feed li .feedtxt { width: calc(100% - 136px);}



/*2:Company*/
.company { height: auto!important; background: #111 url(../images/top/company.jpg) center 0 no-repeat; background-size: cover;}
.company p { margin-top: 16px; color: #FFF;}
.company .contents h2:last-of-type { margin: 40px 0 16px;}
.photo { display: flex; margin-top: 16px;}
.photo li { margin: 2px;}
.map { float: right;}


/*3:Realestate*/
.realestate { background: #111 url(../images/top/realestate.jpg) center 0 no-repeat; background-size: cover;}
.realestate ul { display: flex; justify-content: space-between; margin-top: 24px;}
.realestate li { width: 48%;}
.realestate li a { display: flex; justify-content: center; align-items: center; height: 80px; padding: 8px 24px; background: #FFF;}


/*4:Gallery*/
.gallery { background: #111 url(../images/top/gallery.jpg) center 0 no-repeat; background-size: cover;}
.ga { margin-top: 70px;}
.ga li { float: left; width: 16%; margin-bottom: 1%;}


/*5:Contact*/
.contact, .form { background: #111 url(../images/top/contact.jpg) center 0 no-repeat; background-size: cover;}
.btn { margin-top: 24px; padding: 32px; text-align: center; background: rgba(0,0,0,.4);}
.btn li { display: inline; padding: 16px; vertical-align: middle;}


/*FOOTER*/
/*******************************************************************/
#footer { position: fixed; bottom: 10px; right: 10px; z-index: 50;}
	

input[type="text"], input[type="tel"], input[type="email"], input[type="date"] { display: inline-block; padding: 8px 16px; background: #F7F7F7; border: 1px solid #999; border-radius: 3px; vertical-align: middle; font-size: 1.6rem;}
select { padding: 8px 16px; background: #F7F7F7; border: 1px solid #E0E0E0; border-radius: 3px; font-size: 1.6rem;}
textarea { width: 100%; min-height: 320px; padding: 8px 16px; background: #F7F7F7; border: 1px solid #E0E0E0; border-radius: 3px; font-size: 1.6rem;}





@media only screen and (max-width: 1024px){
#nav { pointer-events: none; opacity: 0; position: fixed; top: -40px; left: 0; width: 100%; max-width: 100%; max-height: 100vh; margin: 0; padding: 40px 4vw; background: #1ea1cc; overflow: auto; z-index: 200; -webkit-transition: .8s cubic-bezier(.19,1,.22,1); transition: .8s cubic-bezier(.19,1,.22,1);}
#nav li { padding: 16px 0; text-align: center;}
#nav a { font-size: 18px; font-weight: 700; letter-spacing: 0.2em; color: #FFF;}
#open { position: fixed; top: 8px; right: 8px; display: flex; justify-content: center; align-items: center; width: 62px; height: 62px; text-align: center; background: #1ea1cc; border-radius: 50%; cursor: pointer; z-index: 9999; transition: .2s linear;}
#open div { position: relative; display: block; width: 22px; height: 17px; transition: .2s linear;}
#open span { position: absolute; left: 0; display: block; width: 22px; height: 3px; background: #FFF; transition: .2s linear;}
#open span:nth-child(1) { top: 0px;}
#open span:nth-child(2) { top: 7px;}
#open span:nth-child(3) { top: 14px;}
#open i { position: absolute; bottom: -12px; left: 0; display: block; width: 100%; text-align: center; font-size: 1.3rem; font-weight: bold; color: #FFF;}
.open #open span:nth-child(1) { top: 7px; background: #FFF; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg);}
.open #open span:nth-child(2) { width: 0; left: -24px;}
.open #open span:nth-child(3) { top: 7px; background: #FFF; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg);}
.open #nav { pointer-events: auto; opacity: 1; top: 0;}
.open #nav li { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);}

th, td { display: block;}
th { padding: 8px 0 0; border-bottom: none;}
td { padding: 8px 0;}

.container { line-height: 1.8;}
.container > div:not(.form) { height: auto; min-height: 100vh;}
.inner { padding: 0 8vw;}
.form .inner h1, .form .inner h2 { padding-left: 8vw; padding-right: 8vw;}
.contents { padding-left: 0;}
.pc { display: none;}
.sp { display: block;}

.top { padding: 40px 0!important;}
.topics { height: 60vh;}
.topics h2 { width: 70px;}
.topics dt { font-size: 12px;}
.topics dd { font-size: 12px;}

.company { position: relative; background: rgba(0,0,0,.6);}
.company::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("../images/top/shop6.jpg") center no-repeat; background-size: cover; z-index: -1;}
.photo { flex-wrap: wrap;}
.photo li { width: calc(100% / 3 - 4px);}
.map { float: none; text-align: center; margin: 8px auto;}
.realestate ul { display: block;}
.realestate li { width: auto; text-align: center; margin-bottom: 16px;}
.ga { display: flex; flex-wrap: wrap; justify-content: center;}
.ga li { width: auto; margin: 1px;}
.btn li { display: block;}

#mailformpro dl dt { float: none; width: auto;}
#mailformpro dl dd { padding: 10px 0;}
input[type="text"], input[type="tel"], input[type="email"], input[type="date"] { width: calc(60% - 8px); margin: 4px; font-size: 16px;}
textarea { font-size: 16px;}
div.mfp_buttons { display: flex; justify-content: center;}
div.mfp_buttons button { width: auto; max-width: 100%; height: auto; font-size: 16px; padding: 8px 16px;}
}