﻿@charset "utf-8";

/* ----------------------------------------------------------------------------
	top
---------------------------------------------------------------------------- */
#pageHome .pageTtl { display: none;}
#pageHome #main {
    background: url(../img/main_pc.jpg) no-repeat top center;
    background-size: cover;
    width: 100%;
    height: 40.9vw;
    min-height: 450px;
    max-height: 650px;
    position: relative;
    margin-bottom: 62px;
}
#pageHome #main p { position: absolute; left: 20px; bottom: 18px; width: 58%; min-width: 610px; max-width: 1300px;}
#pageHome .txtTOPICS { width: 168px; margin-bottom: 15px;}
#pageHome #topicsBox .inner { width: 48%; float: left; min-height: 164px;}
#pageHome #topicsBox li { border-bottom: #ccc 1px solid; padding: 0.9em 1px 0.8em 4px; margin-bottom: 1px; clear: both;}
#pageHome #topicsBox li:last-child { border: none;}
#pageHome #topicsBox li a { text-decoration: none; color: inherit; display: block;}
#pageHome #topicsBox li .date { width: 6.5em; display: block; float: left;}
#pageHome #topicsBox li .title { overflow: auto; display: block;}
.readmore a { background: #7D7D7D; display: block; padding: 5px 10px; width:46%; margin: 10px auto 0; font-size: 0; text-align: center;}
.readmore a img { width: 56%;}

#pageHome #topicsBox .right { width: 48%; float: right;}
#pageHome #topicsBox .anniversary15 { margin-bottom: 12px;}
#pageHome #topicsBox .jjc a { background: #59A239; color: #fff; font-size: 2.2rem; font-feature-settings: "palt"; letter-spacing: 0.1em; padding-left: 0.15em; font-weight: bold; position: relative; text-decoration: none; height: 50px; display: flex; justify-content: center; align-items: center;}
#pageHome #topicsBox .jjc a:before { content: ""; display: block; width: calc(100% - 6px); height: calc(100% - 6px); border: #fff 1px solid; position: absolute; left: 2px; top: 2px;}
#pageHome #topicsBox .telP { border: #5BB431 1px solid; padding: 14px 20px; margin-right: -10px; /*width: 48%; float: right;*/width: 100%; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; color: #5BB431; font-size: 1.3rem; font-weight: bold;}
#pageHome #topicsBox .telP .telLink { display: inline-block; margin-left: 1.2em; width: calc(100% - 14em);}
#pageHome #topicsBox .bousai { padding: 20px 0 0; margin-right: -10px; /*width: 48%; float: right;*/ width: 100%; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; font-size: 1.3rem; }
#pageHome #topicsBox .bousai a { width: 11em;}
#pageHome #topicsBox .bousai a img { display: block; width: 100%; height: auto;}
#pageHome #topicsBox .bousai p { margin-left: 1em; margin-right: -1em; flex: 1;}

#pageHome .imgLinkList { display: -webkit-flex; display: flex; -webkit-justify-content:space-between; justify-content:space-between; margin: 130px -23px -20px;}
#pageHome .imgLinkList li { margin: 0 3px; flex: 1;}
#pageHome .imgLinkList a { display: block; width: 100%; padding-top: 78.9%; position: relative; }
#pageHome .imgLinkList a img { height: 24px; display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
#pageHome .imgLinkList li:nth-child(1) a { background:url(../img_cmn/cover01.jpg) no-repeat center center; background-size: cover;}
#pageHome .imgLinkList li:nth-child(2) a { background:url(../img_cmn/cover02.jpg) no-repeat center center; background-size: cover; transform: translate(0%, -50px);}
#pageHome .imgLinkList li:nth-child(3) a { background:url(../img_cmn/cover03.jpg) no-repeat center center; background-size: cover; transform: translate(0%, -100px);}
#pageHome .imgLinkList li:nth-child(4) a { background:url(../img/img04.jpg) no-repeat center center; background-size: cover; transform: translate(0%, -150px);}

@media screen and ( max-width:700px ){
    #pageHome.sp #main {
        background: url(../img/main_sp.jpg) no-repeat center center/cover;
        height: 118vw;
        min-height: 0;
        max-height: 90vh;
        margin-bottom: 12%;
    }
    #pageHome.sp #main p { left:unset;right: 4px; bottom: 8px; width: 96%; min-width: 0;}
    #pageHome.sp .txtTOPICS { width: 100%; height: 24px; margin: 0 auto 10px; }
    #pageHome.sp .txtTOPICS img { height: 100%;}
    #pageHome.sp #topicsBox { width: 100%; margin: 0 auto;}
    #pageHome.sp #topicsBox .inner { width: 100%; float: none; min-height: 0;}
    #pageHome.sp #topicsBox li { padding: 0.8em 1px 0.75em 4px;}
    #pageHome.sp #topicsBox li .date { display: block; margin-bottom: 4px; float: none;}
    .sp .readmore a { padding: 8px 12px; width:70%; margin: 10px auto 0; font-size: 0; text-align: center;}
    #pageHome #topicsBox .right { width: 106%; float: none;  margin: 11.5% -3% 0; }
    #pageHome #topicsBox .anniversary15 { margin-bottom: 8px;}
    #pageHome #topicsBox .jjc a { font-size: 1.7rem; height: 50px; letter-spacing: 0.08em; padding-left:0.1em; }
    #pageHome.sp #topicsBox .telP { padding: 14px 1px 14px 4px; /*width: 106%; margin: 11.5% -3% 0;*/width:100%; font-size: 1.2rem;}
    #pageHome.sp #topicsBox .telP .telLink { display: inline-block; margin-left: 1.1em; width: calc(100% - 14em);}
    #pageHome.sp #topicsBox .bousai { padding: 1px 1px 14px 4px; /*margin: 11.5% -3% 0; width: 106%;*/width:100%; margin-top: 8%; font-size: 1.2rem; -webkit-align-items: flex-start; align-items: flex-start; }
    #pageHome.sp .imgLinkList { display:block; width: 106%; margin: 7% -3% 0;}
    #pageHome.sp .imgLinkList li { width: 100%; margin: 0 0 5px; display: block; position: relative;}
    #pageHome.sp .imgLinkList li:after { content: ""; display: block; width: 100%; height: 20px; background: url(../img/g_bg.svg) no-repeat right bottom/cover; position: absolute; right: 0; bottom: 0; z-index: 10; }
    #pageHome.sp .imgLinkList a { padding-top: 78.6%; transform: translate(0, 0) !important; position: relative; z-index: 1;}
    #pageHome.sp .imgLinkList a img { height: 28px;}
}

/* ----------------------------------------------------------------------------
	topics
---------------------------------------------------------------------------- */
#pageTopics .lowerMain { background: url(../img/topics/main.jpg) no-repeat top center/cover;}
#pageTopics #topicsList { width: 94%; margin: 0 auto; padding-bottom: 20px; }
#pageTopics #topicsList li { border-bottom: #ccc 1px solid; width: 100%; margin-bottom: 1px;}
#pageTopics #topicsList li a { text-decoration: none; color: inherit; display:block; padding: 0.9em 1px 0.8em 4px; }
#pageTopics #topicsList li .date { width: 6.5em; display: block; float: left;}
#pageTopics #topicsList li .title { overflow: auto; display: block;}

@media screen and ( max-width:700px ){
    #pageTopics.sp .pageTtl { margin-bottom: 10px;}
    #pageTopics.sp .lowerMain { background: url(../img/topics/main_sp.jpg) no-repeat top center/cover;}
    #pageTopics.sp #topicsList { width: 100%; padding-bottom: 0; }
    #pageTopics.sp #topicsList li a { padding: 0.8em 1px 0.75em 4px;}
    #pageTopics.sp #topicsList li .date { display: block; margin-bottom: 4px; float: none;}
}

/* ----------------------------------------------------------------------------
	topics 詳細
---------------------------------------------------------------------------- */
#pageTopicsDetail .lowerMain { background: url(../img/topics/main.jpg) no-repeat top center/cover;}
#pageTopicsDetail .topicsDetail { width: 90%; margin: 0 auto;}
#pageTopicsDetail .ttlDate { font-size: 1.5rem; margin-bottom: 2px; padding-left: 1px;}
#pageTopicsDetail .title { font-size: 2.2rem; font-weight: bold; line-height: 1.4; border-bottom: #ccc 1px solid; padding-bottom: 0.5em; margin-bottom: 1.6em;}
#pageTopicsDetail .detailTxt { width: 97%; margin: auto; font-size: 1.6rem; line-height: 1.7;}
#pageTopicsDetail .tuikaDate { font-size: 1.3rem; padding-left: 1px; color:#666;}
#pageTopicsDetail .tenkenList.tuika { margin: 4px 0 22px; border-bottom: 1px dashed #ccc; padding-bottom: 16px;}
#pageTopicsDetail .tenkenList { padding: 0 5px;}
#pageTopicsDetail .tenkenList li { margin-bottom: 7px; clear: both; line-height: 1.4;}
#pageTopicsDetail .tenkenList li .date { display: block; width:5.5em; float: left;}
#pageTopicsDetail .tenkenList li .txt { display: block; overflow: auto; overflow-y: hidden;}
#pageTopicsDetail .tenkenList li .type { display: inline-block; margin-right: 1.5em;}
#pageTopicsDetail .backBtn { width: 30%; margin: 50px auto 0; text-align: center;}
#pageTopicsDetail .backBtn a { display: block; border: #999 1px solid; font-size: 1.5rem; line-height: 1.0; letter-spacing: 1px; padding: 0.8em 20px; padding-left: 21px; text-decoration: none; color: inherit;}
@media screen and ( max-width:700px ){
    #pageTopicsDetail.sp .lowerMain { background: url(../img/topics/main_sp.jpg) no-repeat top center/cover;}
    #pageTopicsDetail .topicsDetail { width: 100%;}
    #pageTopicsDetail .ttlDate { font-size: 1.4rem; margin-bottom: 7px; padding-left: 1px;}
    #pageTopicsDetail .title { font-size: 2.0rem; line-height: 1.3; padding-bottom: 0.6em; margin-bottom: 1.1em;}
    #pageTopicsDetail .detailTxt { width: 100%; font-size: 1.5rem;}
    #pageTopicsDetail .tuikaDate { font-size: 1.3rem; padding-left:0; }
    #pageTopicsDetail .tenkenList.tuika { margin: 7px 0 20px; padding-bottom: 7px;}
    #pageTopicsDetail .tenkenList { padding: 0; padding-left: 4px;}
    #pageTopicsDetail .tenkenList li { margin-bottom: 10px; line-height: 1.3;}
    #pageTopicsDetail .tenkenList li .date { width:5em;}
    #pageTopicsDetail .tenkenList li .type { display: block; margin-right: 0;}
    #pageTopicsDetail .backBtn { width: 76%; max-width: 300px; margin: 10% auto -4%;}
    #pageTopicsDetail .backBtn a { font-size: 1.4rem; letter-spacing: 1px; padding: 0.9em 20px; padding-left: 21px;}
}

/* ----------------------------------------------------------------------------
	mission
---------------------------------------------------------------------------- */
#pageMission .lowerMain { background: url(../img/mission/main.jpg) no-repeat top center/cover;}
#pageMission .ttlTxt { font-size: 2.5rem; margin: 1.4em 0 0.9em; letter-spacing: 2.2px;}
#pageMission .normalTxt { font-size: 1.7rem; line-height: 1.9; margin-bottom: 1em; letter-spacing: 1px;} 
@media screen and ( max-width:700px ){
    #pageMission.sp .lowerMain { background: url(../img_cmn/cover01.jpg) no-repeat top center/cover;}
    #pageMission .ttlTxt { font-size: 2.4rem; margin: 1.3em 0 0.8em; letter-spacing: 2.0px;}
    #pageMission .normalTxt { font-size: 1.6rem; line-height: 1.8; margin-bottom: 1em; letter-spacing: 0;}
}

/* ----------------------------------------------------------------------------
	about us
---------------------------------------------------------------------------- */
#pageAboutUS .lowerMain { background: url(../img/about/main.jpg) no-repeat top center/cover;}
#pageAboutUS table { border-spacing: 0; border-collapse: separate; width: 100%; font-size: 1.7rem; }
#pageAboutUS th { font-weight: normal; vertical-align: top; text-align-last: justify; text-justify: inter-ideograph; width: 6.5em; padding: 0.3em 0; line-height: 1.5;}
#pageAboutUS td { vertical-align: top; padding: 0.3em; padding-left: 3em; line-height: 1.5;}
#pageAboutUS td ul { margin: 0.5em 0.5em 1em;}
#pageAboutUS td li { position: relative;padding-left: 10px; text-indent: -10px;}
#pageAboutUS td li:before { content: ""; width: 3px; height: 3px; background: #333; border-radius: 50%; display: inline-block; vertical-align: 0.3em; line-height: 1.0; margin: 0 7px 0 0;}
@media screen and ( max-width:700px ){
    #pageAboutUS.sp .lowerMain { background:url(../img/about/main_sp.jpg) no-repeat top center/cover;}
    #pageAboutUS table { font-size: 1.4rem; }
    #pageAboutUS th { width: 4.8em; padding: 0.3em 0; line-height: 1.4;}
    #pageAboutUS td { padding: 0.3em; padding-left: 1.7em; padding-right: 0; line-height: 1.4;}
}

/* ----------------------------------------------------------------------------
	management
---------------------------------------------------------------------------- */
#pageMM .lowerMain { background: url(../img/management/main.jpg) no-repeat top center/cover;}
#pageMM .mmList { font-size: 0; letter-spacing: 0; width: 100%; padding-top: 6px; margin-bottom: -4%;}
#pageMM .mmList li { display: inline-block; vertical-align: top; width: 22%; margin: 0 4% 6% 0;}
#pageMM .mmList li:nth-child(4n) { margin-right: 0;}
#pageMM .mmList .ttlP { font-size: 1.7rem; font-weight: bold; margin-bottom: 0.5em; line-height: 1.4; letter-spacing: 1px;}
#pageMM .mmList .txt { line-height: 1.5; font-size: 1.4rem;}
#pageMM .mmList .img { margin-top: 10px;}
#pageMM .mmList .img img { width: 100%;}
#pageMM .mmList .komeList { margin-top: 8px; font-size: 1.1rem;}
#pageMM .mmList .komeList li { padding-left: 1em; text-indent: -1em; line-height: 1.3; width: 100%; display: block; margin: 0 0 2px 0 !important;}
@media screen and ( max-width:700px ){
    #pageMM.sp .lowerMain { background:url(../img_cmn/cover02.jpg) no-repeat top center/cover;}
    #pageMM.sp .mmList { width: 94%; padding-top: 6px; margin: 0 auto;}
    #pageMM.sp .mmList li { display: block; width: 100%; margin: 0 0 13% 0;}
    #pageMM.sp .mmList .komeList { margin-top: 7px; font-size: 1.2rem;}
}


/* ----------------------------------------------------------------------------
	properties
---------------------------------------------------------------------------- */
#pagePP .lowerMain { background: url(../img/properties/main.jpg) no-repeat top center/cover;}
#pagePP .map { width: 100%;}
#pagePP .map img { width: 100%;}
#pagePP .mapCopyRight { text-align: right; font-size: 1.1rem; color: #777; margin-top: 3px;}
#pagePP .mBox { width: 90%; margin: 50px auto 0;}
#pagePP .mList { font-size: 0; letter-spacing: 0; padding-top: 6px; margin-bottom: -3%; }
#pagePP .mList li { display: inline-block; vertical-align: top; font-size: 1.4rem; font-weight: bold; width:14%; margin:0 7.5% 3% 0; text-align: center;}
#pagePP .mList li:nth-child(5n) { margin-right: 0;}
#pagePP .mList li p.img { position: relative; margin-bottom: 10px; }
#pagePP .mList li p.img span.img img { width: 100%; position: relative; z-index: 0;}
#pagePP .mList li p.img span.num { background: #E95513; color: #fff; width: 2.0em; height: 2.0em; line-height: 1.0; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; position: absolute; left: 0; bottom: 0; z-index: 10;}
#pagePP .mList li p.mName { line-height: 1.4; }
@media screen and ( max-width:700px ){
    #pagePP.sp .lowerMain { background: url(../img_cmn/cover03.jpg) no-repeat top center/cover;}
    #pagePP.sp .map { width: 100vw; height: 130vw; position: relative; left: 50%; transform: translate(-50%, 0%);}
    #pagePP.sp .dragscroll { overflow: auto;cursor : -webkit-grab; cursor : -moz-grab; cursor : -o-grab; cursor : grab;}
    #pagePP.sp .dragscroll:active {cursor : -webkit-grabbing;cursor : -moz-grabbing;cursor : -o-grabbing;cursor : grabbing;}
    #pagePP.sp .map img { width: auto; height: 130vw;}
    #pagePP .mapCopyRight { font-size: 1.0rem; margin-top: 3px; margin-right: -5%;}
    #pagePP.sp .mBox { width: 94%; margin: 9% auto 0;}
    #pagePP.sp .mList { padding-top: 0; margin-bottom: -8%; }
    #pagePP.sp .mList li { width:46%; margin:0 8% 8% 0; text-align: center;}
    #pagePP.sp .mList li:nth-child(n) { margin-right: 8%;}
    #pagePP.sp .mList li:nth-child(2n) { margin-right: 0;}
    #pagePP.sp .mList li p.img { margin-bottom: 6px; }
}

/* ----------------------------------------------------------------------------
	jjc
---------------------------------------------------------------------------- */
#pageJJC .contents { position: relative; padding-top: 70px; line-height: 1.7;}
#pageJJC .contents:before { content: ""; display: block; width: 100vw; height: 6px; background: #231815; position: absolute; left: 50%; top: 0; transform: translate(-50%, 0);}
#pageJJC .titleImg { width: 300px; margin-bottom: 16px;}
#pageJJC h2 { font-size: 1.8rem; font-weight: bold; font-feature-settings: "palt"; letter-spacing: 1px; margin-bottom: 0.5em;}
#pageJJC h3 { font-size: 1.6rem; font-weight: bold; font-feature-settings: "palt"; letter-spacing: 1px; margin: 1.8em 0 0.5em;}
#pageJJC .h3TxtBox { padding-left: 1.1em;}
#pageJJC .h3TxtBox .komeList { margin-top: 0.5em;}
#pageJJC .dotDetail { margin-top: 0.6em;}
#pageJJC .dotDetail li { display: flex; align-items: center; }
#pageJJC .dotDetail .ttl { width: 30em; margin-right: 0.5em; position: relative;}
#pageJJC .dotDetail .ttl .bg { background: #fff; display: inline-block; padding-right: 0.5em;}
#pageJJC .dotDetail .ttl:before {
  content: "";
  display: block;
  width: 100%; height: 2px;
  position: absolute; left: 0; top: 50%; transform: translate(0, -50%); z-index: -1;
  background-image : linear-gradient(to right, #000 2px, transparent 2px);
  background-size: 10px 2px;
  background-repeat: repeat-x;
  background-position: left bottom;
}
#pageJJC .goForm { display: flex; flex-wrap: wrap; align-items: center; margin-top: 50px;}
#pageJJC .goForm img { width: 40px; margin-right: 10px;}
#pageJJC .goForm a {
  display: flex; justify-content: center; align-items: center;
  width: 380px; height: 58px;
  border: #5CB531 4px solid; border-radius: 50px;
  text-decoration: none; color:#5CB531; font-size: 2.0rem; font-weight: bold; line-height: 1;
}
@media screen and ( max-width:700px ){
  #pageJJC .contents { padding-top: 12vw; }
  #pageJJC .contents:before { height: 1.4vw;}
  #pageJJC .titleImg { width: 280px; margin-bottom: 16px;}
  #pageJJC h2 { font-size: 1.7rem; line-height: 1.5; margin-bottom: 0.6em;}
  #pageJJC h3 { font-size: 1.6rem; margin: 1.8em 0 0.5em;}
  #pageJJC .h3TxtBox { padding-left: 0;}
  #pageJJC .dotDetail { margin-top: 0.6em; margin-right: -1em; font-size: 1.2rem;}
  #pageJJC .dotDetail .ttl { width: 20.5em; margin-right: 0.5em;}
  #pageJJC .goForm { display: flex; flex-direction: column; align-items: center; margin-top: 40px;}
  #pageJJC .goForm img { width: 40px; margin-right: 0; transform: rotate(90deg); margin-bottom: 20px;}
  #pageJJC .goForm a {
    max-width: 100%;
    font-size: 1.9rem;
  }
}


