@charset "UTF-8";
/*---------------------------------------------

 SP用　767px以下設定

---------------------------------------------*/
@media screen and (max-width: 767px) {
  /*---------------------------------------------
  	common
  ---------------------------------------------*/
  body {
    padding-top: 50px;
  }

  .inner {
    width: 100%;
  }

  .pcOnly {
    display: none;
  }

  .spOnly {
    display: block;
  }

  .pageTitle {
    font-size: 21px;
    padding: 15px 0px;
  }

  /*---------------------------------------------
  header
  ---------------------------------------------*/
  header .inner {
    width: 100%;
  }

  header h1 img {
    width: 250px;
    margin-left: 10px;
    margin-top: 14px;
  }

  #global-nav ul li {
    border: none;
  }

  #global-nav ul li:last-child {
    border: none;
  }

  #global-nav ul li a {
    padding: 0 20px;
  }

  #main-visual {
    height: 300px;
  }

  #top-head {
    width: 100%;
    padding: 0;
  }

  #top-head {
    top: 0;
    position: fixed;
    margin-top: 0;
  }

  /* Fixed reset */
  #top-head.fixed {
    padding-top: 0;
    background: transparent;
  }

  #mobile-head {
    background: #fff;
    width: 100%;
    height: 56px;
    z-index: 999;
    position: relative;
  }

  #top-head.fixed .logo,
#top-head .logo {
    position: absolute;
    left: 0;
    top: 0;
  }

  #global-nav {
    position: absolute;
    /* 開いてないときは画面外に配置 */
    top: -500px;
    background: #333;
    width: 100%;
    text-align: center;
    padding: 10px 0;
    transition: 0.5s ease-in-out;
  }

  #global-nav ul {
    list-style: none;
    position: static;
    right: 0;
    bottom: 0;
    font-size: 16px;
    font-weight: bold;
    padding: 0 5px;
  }

  #global-nav ul li {
    float: none;
    position: static;
  }

  #global-nav ul li:after {
    display: none;
  }

  #top-head #global-nav ul li a,
#top-head.fixed #global-nav ul li a {
    width: 100%;
    display: block;
    color: #fff;
    padding: 18px 0;
  }

  #nav-toggle {
    display: block;
  }

  #global-nav ul li {
    transition: 0.5s ease-in-out;
  }

  #global-nav ul li:hover {
    background: rgba(0, 0, 0, 0.5);
  }

  /* #nav-toggle 切り替えアニメーション */
  .open #nav-toggle span:nth-child(1) {
    top: 11px;
    transform: rotate(315deg);
  }

  .open #nav-toggle span:nth-child(2) {
    width: 0;
    left: 50%;
  }

  .open #nav-toggle span:nth-child(3) {
    top: 11px;
    transform: rotate(-315deg);
  }

  /* #global-nav スライドアニメーション */
  .open #global-nav {
    /* #global-nav top + #mobile-head height */
    transform: translateY(556px);
  }

  /*---------------------------------------------
  	.siteIntro
  ---------------------------------------------*/
  .siteIntro {
    padding: 30px 15px 20px;
    margin-bottom: 30px;
  }
  .siteIntro .inner h4 {
    font-size: 16px;
    margin-bottom: 10px;
    letter-spacing: 0.1em;
  }
  .siteIntro .inner .linkBox .box {
    float: left;
    width: 47.5%;
    margin-right: 5%;
    margin-bottom: 10px;
  }
  .siteIntro .inner .linkBox .box img {
    width: 100%;
  }
  .siteIntro .inner .linkBox p {
    font-size: 12px;
    margin-left: -10px;
    position: relative;
  }
  .siteIntro .inner .linkBox p:after {
    position: absolute;
    top: 3px;
    margin-left: 5px;
    width: 6px;
    height: 6px;
    border: solid 6px transparent;
    border-left: solid 6px currentColor;
  }
  .siteIntro .inner .linkBox .box:nth-of-type(even) {
    margin-right: 0;
    margin-bottom: 10px;
  }
  .siteIntro .inner .linkBox .box:nth-of-type(3) {
    margin-right: 5%;
  }
  .siteIntro .inner .linkBox .box:nth-of-type(4) {
    clear: none;
  }

  /*---------------------------------------------
  	home
  ---------------------------------------------*/
  #home {
    /* .news */
  }
  #home .news {
    margin: 40px 10px;
    font-size: 14px;
    /* news 推しトピックス */
    /* TOP ニュースリスト */
  }
  #home .news .recommend {
    float: none;
    width: 100%;
    margin-right: 0px;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  #home .news .newsTitle a {
    margin-top: 0px;
    padding: 0;
  }
  #home .news .list {
    float: none;
    width: 100%;
    margin-bottom: 0;
  }
  #home .news .list ul {
    border-top: 1px solid #999;
  }
  #home .news .list ul li:first-of-type {
    margin-top: 5px;
  }
  #home .news .list ul time {
    padding: 7px 10px;
  }
  #home .news .list ul p {
    padding: 7px 10px 7px 0;
    margin: 0 0 0 100px;
  }
  #home .news .list ul a {
    padding: 5px 0;
  }
  /*---------------------------------------------
    .mainVisual
  ---------------------------------------------*/
  .mainVisual {
    background-image: url(../img/main_bg_sp.jpg);
    background-position: 50% 85%;
    height: 420px;
  }

  .mainVisual .head {
    overflow: hidden;
    padding-top: 18px;
  }

  .mainVisual .catch {
    top: 80px;
  }

  .mainVisual .catch img {
    max-width: 171px;
  }

  .mainVisual .campaign {
    right: 20px;
    top: 230px;
  }
  .mainVisual .campaign img {
    width: 150px;
  }

  /*---------------------------------------------
  	.bl_movie
  ---------------------------------------------*/
  .bl_movie {
    padding: 30px 0;
  }

  .bl_movie_title {
    font-size: 18px;
    margin-bottom: 5px;
  }

  /*---------------------------------------------
  	.placeImg
  ---------------------------------------------*/
  .placeImg .comConfig {
    height: 300px;
    background-attachment: scroll;
  }
  .placeImg .placeImg01 .inner {
    height: 300px;
  }
  .placeImg .placeImg01 .inner .read {
    display: none;
  }
  .placeImg .placeImg03 .read {
    display: none;
  }
  .placeImg .placeImg03 img {
    max-width: 265px;
    top: 20px;
  }
  .placeImg .readSp {
    font-size: 14px;
    padding: 30px 20px;
    line-height: 2.3;
    letter-spacing: 0.1em;
    color: #333;
    background-color: #fff;
    font-family: Georgia, "Yu Mincho", "Hiragino Mincho ProN", serif;
  }

  /*---------------------------------------------
  	.comLayout
  ---------------------------------------------*/
  .comLayout {
    padding: 25px 10px;
  }
  .comLayout .text p, .comLayout p {
    font-size: 14px;
    letter-spacing: 0;
    line-height: 1.8;
    padding: 0 10px;
    margin-bottom: 20px;
  }
  .comLayout h2 {
    padding: 0 0 5px 10px;
    font-size: 18px;
    letter-spacing: 0em;
    margin-bottom: 10px;
  }
  .comLayout .comRightBig {
    margin-bottom: 10px;
  }
  .comLayout .comRightBig .text {
    margin-right: 0;
    padding-right: 0;
  }
  .comLayout .comRightBig .pict {
    float: none;
    width: 100%;
  }
  .comLayout .comRightBig .pict img {
    width: 100%;
  }
  .comLayout .comRightSmall {
    margin-bottom: 10px;
  }
  .comLayout .comRightSmall .text {
    margin-right: 0;
    padding-right: 0;
  }
  .comLayout .comRightSmall .text h2 {
    text-align: left;
  }
  .comLayout .comRightSmall .pict {
    float: none;
    width: 100%;
  }
  .comLayout .comRightSmall .pict img {
    width: 100%;
  }
  .comLayout .comRightExsmall {
    margin-bottom: 10px;
  }
  .comLayout .comRightExsmall .text {
    margin-right: 0;
    padding-right: 0;
  }
  .comLayout .comRightExsmall .text h2 {
    text-align: left;
  }
  .comLayout .comRightExsmall .pict {
    float: none;
    width: 100%;
    text-align: center;
  }
  .comLayout .comRightExsmall .pict img {
    max-width: 100%;
  }
  .comLayout .comLeftSmall {
    margin-bottom: 10px;
  }
  .comLayout .comLeftSmall .text {
    float: none;
    width: 100%;
    margin-left: 0;
  }
  .comLayout .comLeftSmall .pict {
    float: none;
    width: 100%;
  }
  .comLayout .comLeftSmall .pict img {
    width: 100%;
  }
  .comLayout .concierge {
    margin-bottom: 10px;
  }
  .comLayout .concierge .pict {
    float: left;
    width: 49%;
    margin-right: 2%;
  }
  .comLayout .concierge .pict img {
    width: 100%;
  }
  .comLayout .concierge .text {
    float: left;
    width: 49%;
    margin-left: 0;
  }
  .comLayout .expBox {
    padding: 20px 20px 10px;
    margin-bottom: 30px;
  }
  .comLayout .expBox h4 {
    font-size: 18px;
    margin-bottom: 10px;
  }
  .comLayout .expBox ul {
    font-size: 14px;
  }
  .comLayout table.needs {
    width: 100%;
  }
  .comLayout table.needs th, .comLayout table.needs td {
    display: block;
    width: 100%;
    padding: 3px 5px;
    border: 1px solid #dadada;
  }
  .comLayout table.needs th {
    background-color: #dadada;
    text-align: center;
    font-size: 14px;
  }
  .comLayout table.needs td.triangle {
    font-size: 12px;
  }
  .comLayout .expBox02 {
    padding: 20px 20px 10px;
    margin-bottom: 40px;
  }
  .comLayout .expBox02 .left {
    float: none;
    width: 100%;
  }
  .comLayout .expBox02 .right {
    float: none;
    width: 100%;
    margin-bottom: 20px;
  }
  .comLayout .expBox02 .right ul {
    margin-left: 25px;
  }
  .comLayout .expBox02 .right p {
    margin: 5px 0;
  }
  .comLayout .expBox02 .right p.textR {
    text-align: right;
  }
  .comLayout .expBox02 h5 {
    font-size: 14px;
  }
  .comLayout .expBox02 h5 em {
    font-size: 21px;
  }
  .comLayout .pictOne {
    margin-bottom: 30px;
  }
  .comLayout .pictTwo .pict {
    margin-top: 10px;
    margin-bottom: 30px;
  }
  .comLayout .pictTwo .pict ul li {
    float: none;
    width: 100%;
    margin-right: 0%;
  }
  .comLayout .pictTwo .pict ul img {
    max-width: 100%;
  }
  .comLayout .pictTwo .pict img {
    max-width: 100%;
  }
  .comLayout .pictThree .pict {
    margin-top: 10px;
    margin-bottom: 30px;
  }
  .comLayout .pictThree .pict img {
    width: 100%;
  }

  /*---------------------------------------------
  	.#house
  ---------------------------------------------*/
  #house h2.separateTitle {
    padding: 10px 0;
    font-size: 20px;
    letter-spacing: 0;
    margin-bottom: 20px;
  }
  #house .pageImg {
    margin: 20px 10px 0;
  }
  #house .pageImg img {
    width: 100%;
  }
  #house .comLeftBig {
    margin-bottom: 30px;
  }
  #house .comLeftBig .text {
    float: none;
    width: 100%;
    margin-left: 0;
  }
  #house .comLeftBig .text .equipment {
    display: flex;
    justify-content: space-around;
  }
  #house .comLeftBig .text .equipment dl {
    font-size: 14px;
  }
  #house .comLeftBig .text .equipment dl:first-of-type {
    margin-right: 2%;
  }
  #house .comLeftBig .text .equipment dl:last-of-type {
    margin-left: 2%;
  }
  #house .comLeftBig .pict {
    float: none;
    width: 100%;
    margin: 20px 0;
  }
  #house .comLeftBig .pict img {
    width: 100%;
  }

  /*---------------------------------------------
  	#location
  ---------------------------------------------*/
  /* .around
  ---------------------------------------------*/
  .around {
    padding: 30px 10px 0;
  }
  .around h3 {
    font-size: 18px;
  }
  .around .aroundInfo {
    margin-bottom: 0;
  }
  .around .aroundInfo .map {
    float: none;
    width: 100%;
    margin-bottom: 10px;
  }
  .around .aroundInfo .map img {
    width: 100%;
  }
  .around .aroundInfo .info {
    float: none;
    width: 100%;
  }
  .around .aroundInfo .info .box {
    float: left;
    width: 32%;
    margin-right: 2%;
    font-size: 12px;
  }
  .around .aroundInfo .info .box img {
    max-width: 100%;
  }
  .around .aroundInfo .info .box:nth-of-type(3n) {
    margin-right: 0px;
  }
  .around .aroundInfo .info .box:nth-of-type(4) {
    margin-right: 2%;
  }
  .around .aroundInfo .info .box:nth-of-type(5) {
    clear: none;
  }
  .around .aroundInfo .info .box:nth-of-type(3n+1) {
    clear: both;
  }

  /* .access
  ---------------------------------------------*/
  .access {
    padding: 30px 10px;
  }
  .access .accessInfo {
    margin-bottom: 40px;
  }
  .access h3 {
    font-size: 18px;
    margin-bottom: 10px;
  }
  .access .map {
    float: none;
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 60%;
    overflow: hidden;
  }
  .access .map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .access .text {
    float: none;
    margin-right: 0;
    padding-right: 0;
    margin-top: 20px;
    padding: 0 20px;
    font-size: 14px;
  }
  .access .text li {
    float: none;
    width: 100%;
  }
  .access .text li:nth-child(odd) {
    margin-right: 0;
  }
  /*---------------------------------------------
  	.price
  ---------------------------------------------*/
  #price .topRead {
    margin: 20px 10px 0;
    font-size: 16px;
  }

  .price {
    padding: 30px 10px;
  }
  .price p.example {
    font-size: 16px;
    margin-bottom: 10px;
  }
  .price h3 {
    font-size: 18px;
  }
  .price .modelCase {
    overflow: hidden;
    margin-bottom: 10px;
  }
  .price .modelCase .lumpSum {
    float: none;
    width: 100%;
  }
  .price .modelCase .monSum {
    float: none;
    width: 100%;
  }
  .price .modelCase table {
    font-size: 14px;
    margin-bottom: 15px;
  }
  .price .modelCase table th {
    padding: 5px;
  }
  .price .modelCase table th:first-of-type {
    width: 50%;
  }
  .price .modelCase table th:nth-of-type(2n) {
    width: 50%;
  }
  .price .modelCase table td {
    padding: 5px;
  }
  .price .modelCase table td:nth-of-type(2n) {
    text-align: right;
  }
  .price ul {
    display: list-item;
  }
  .price ul li {
    margin-left: 1.5em;
    margin-right: 0;
  }
  .price .patternA table, .price .patternB table {
    font-size: 12px;
  }
  .price .patternA table th, .price .patternB table th {
    padding: 3px 5px;
  }
  .price .patternA table td, .price .patternB table td {
    padding: 4px;
  }
  .price .tableBox {
    overflow-x: auto;
    white-space: nowrap;
  }
  .price .tableBox::-webkit-scrollbar {
    height: 10px;
  }
  .price .tableBox::-webkit-scrollbar-track {
    margin: 0;
    background: #ccc;
    border-radius: 5px;
  }
  .price .tableBox::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: #666;
  }
  .price p {
    font-size: 14px;
  }

  /*---------------------------------------------
  	.#facility
  ---------------------------------------------*/
  #facility .comRightSmall {
    margin-bottom: 10px;
  }
  #facility .comRightSmall .text {
    margin-right: 0;
    padding-right: 0;
  }
  #facility .comRightSmall .text h2 {
    text-align: left;
  }
  #facility .comRightSmall .pict {
    float: none;
    width: 100%;
    text-align: center;
  }
  #facility .comRightSmall .pict img {
    margin: 20px 0;
    max-width: 100%;
  }
  #facility .summary {
    padding: 0 10px;
  }
  #facility .summary h3 {
    font-size: 18px;
  }
  #facility .summary .info ul {
    float: none;
    width: 100%;
    letter-spacing: 0;
    font-size: 14px;
  }
  #facility .summary .info ul.left {
    margin-right: 0;
  }
  /*---------------------------------------------
  	.link
  ---------------------------------------------*/
  .link {
    width: 100%;
    padding: 0 20px;
  }
  .link ul {
    list-style: none;
  }
  .link ul li {
    float: none;
  }
  .link ul li img {
    width: 100%;
    max-width: 100%;
  }
  .link ul li:first-of-type {
    margin-right: 0px;
    margin-bottom: 10px;
  }
  /*---------------------------------------------
  	footer
  ---------------------------------------------*/
  footer .inner {
    padding: 25px 35px 100px;
    text-align: center;
  }
  footer img {
    width: 100%;
    max-width: 529px;
    margin-bottom: 20px;
  }
  footer .info {
    font-size: 12px;
  }
  footer .info .address {
    float: none;
    margin-bottom: 1em;
    line-height: 1.8;
  }
  footer .info .copyright {
    float: none;
    text-align: center;
  }
  /*---------------------------------------------
  	.contact
  ---------------------------------------------*/
  .contact {
    padding: 7px 7px 0px;
    height: 80px;
  }
  .contact .box {
    min-width: 290px;
    margin-bottom: 0px;
  }
  .contact .box .text {
    float: none;
    width: 100%;
    font-size: 14px;
    margin-right: 0;
    margin-bottom: 5px;
    text-align: center;
  }
  .contact .box .tel {
    font-size: 12px;
  }
  .contact .box .tel strong {
    font-size: 18px;
  }
  .contact .box .tel a {
    color: #fff;
    text-decoration: none;
  }
  .contact .box .btn {
    margin-left: 5px;
  }
  .contact .box .btn a {
    font-size: 12px;
    padding: 8px 5px;
  }
  /*---------------------------------------------
  	#news
  ---------------------------------------------*/
  #news .newsList {
    margin: 25px 10px;
  }
  #news .newsList ul.list {
    margin-bottom: 20px;
  }
  #news .newsList ul.list li .pict {
    float: none;
    width: 100%;
  }
  #news .newsList ul.list li .pict img {
    width: 100%;
    height: auto;
  }
  #news .newsList ul.list li .info {
    float: none;
    width: auto;
    margin-left: 0;
    padding: 10px;
  }
  #news .newsList ul.list li .info p {
    font-size: 16px;
    margin-top: 10px;
  }

  /* .pagination ページネーション */
  .newsList .pagination ul li a {
    padding: 5px 10px;
    font-size: 14px;
  }
  /*---------------------------------------------
  	#newsPage
  ---------------------------------------------*/
  #newsPage .newsContents {
    margin: 25px 10px;
  }
  #newsPage .newsContents .main {
    padding: 20px;
  }
  #newsPage .newsContents .main time {
    color: #999;
  }
  #newsPage .newsContents .main h3 {
    font-size: 18px;
    margin-top: 5px;
    padding-bottom: 5px;
    margin-bottom: 15px;
  }
  #newsPage .newsContents .main .pict {
    margin-top: 15px;
    margin-bottom: 15px;
  }
  #newsPage .newsContents .main img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }
  /*---------------------------------------------
  	#newsPage
  ---------------------------------------------*/
  #newsPage .newsContents {
    margin: 25px 10px;
  }
  #newsPage .newsContents .main {
    padding: 20px;
    margin-bottom: 20px;
  }
  #newsPage .newsContents .main h3 {
    font-size: 18px;
  }
  #newsPage .newsContents .main .pict {
    margin-top: 15px;
    margin-bottom: 15px;
  }
  #newsPage .newsContents .main img {
    width: 100%;
    height: auto;
  }
  #newsPage .newsContents ul.pagination {
    margin: 0 auto 20px;
  }
  #newsPage .newsContents ul.pagination li:first-of-type {
    margin-right: 10px;
  }
  #newsPage .newsContents ul.pagination li:nth-of-type(3) {
    margin-left: 10px;
  }
  #newsPage .newsContents ul.pagination li a {
    padding: 5px 15px;
    font-size: 14px;
  }
  /*---------------------------------------------
  	#privacy
  ---------------------------------------------*/
  #privacy .comLayout ul {
    font-size: 14px;
  }
  #privacy p {
    font-size: 14px;
  }
  #privacy p.extra {
    margin-top: 20px;
  }
}
/*---------------------------------------------
	mainVisual調整
---------------------------------------------*/
@media screen and (max-width: 480px) {
  .mainVisual {
    background-position: 50% 85%;
  }
}