body.pc {
    height: auto; /* これがないとbodyが小さくなる */
}

.pc #wrapper {
    /*max-width: calc(80vw - 100px);  ここを変更して全体の幅を調整（vw単位でスクロールバーに依存しない） */
    min-width: 1000px;
    position: relative;
    /*margin-left: calc(10vw + 50px);  auto にするとスクロールバーで中央がズレる */
    /* border: 1px green solid; */
    background: whitesmoke;
    font-size:18px;
}
.pc #logo_box {
    display: inline-block;
    margin: 0px calc(10vw + 50px);
}
.pc #logo { /* ロゴ表示（divタグで社名を囲うが画像のみ表示されるように） */
    display: inline-block;
    margin: 0px;
    width: 620px;
    height: 80px;
    text-indent: 100%; /* テキスト幅でインデントを取る */
    white-space: nowrap; /* 改行を禁止する */
	overflow: hidden; /* はみ出た分は非表示にする */
    background: url("../images/logo/logo_pc.png");
    background-repeat: no-repeat;
    background-size: 620px;
    background-position: center;
}
.pc #titlebanner {
    max-height: 80px;
    overflow: hidden;
} 
.pc #menu_box {
    /* border: 1px red solid; */
    display: inline-block;
    width: calc(100% - 150px);
    height: 80px;
    overflow: hidden;
}
.pc #menu_box::after {
    /* いわゆるclearfix（floatの解除） */
    content: "";
    display: block;
    clear: both;
}
.pc #company_info {
    display: inline-block;
    /* padding-top: 5px; */
    height: 40px;
    padding-bottom: 0px;
    /* line-height: 30px; */
    overflow: hidden;
    text-align: right;
    margin-left: auto;
    margin-right: 10px;
    /* border:1px black solid; */
}
/* .pc #company_info #company_name {
    display: inline;
    color: green;
    font-size: 20px;
    margin: 0px 10px;
} */
.pc #company_info #company_msg {
    display: inline;
    /* margin: 0px 20px; */
    /* border:1px black solid; */
}
.pc #company_info #company_msg #phone {
    font-size: 25px;
    text-decoration: none;
    color: inherit;
}
.pc #toggle_button {
    display: none;
}
.pc #menu { /* このあたりに枠を入れると配置がズレる */
    padding: 0px calc(10vw + 50px);
    background: green;
    list-style: none;
    /* margin-top: 10px; */
    height: 40px;
    overflow: hidden;
    /* margin-left: -30px; メニュー左端をロゴに近づける */
}
.pc #menu li {
    float: left;
    width: 120px;
    border-right: 3px green solid; /* menu を区切る線 */
}
.pc #menu li a {
    display: inline-block;
    width: 100%;
    height: 40px;
    padding-top: 10px;
    text-align: center;
    text-decoration: none; /* 下線なし */
    font-family: 'HGS明朝B';
    font-size: 18px;
    color: white;
}
.pc #menu li a:hover {
    background: white;
    color: black;
}

.pc #slide_area {
    /* margin: 0px calc(10vw + 50px); */
    position: relative;
    background: whitesmoke;
}
.pc #slide_area #slogan {
    display: none;
}
/* スライドショーのフレーム（複数の画像はpic1,pic2つに順番に入れられてスライドする） */
.pc #pic1 {
    display: block;
    /* position: absolute; */
    width: 100%;
    height: auto;
    top: 0px; /* メニューとの間隔調整 */
    z-index: 1;
    /* border:1px blue solid; */
}
.pc #pic2 {
    display: block;
    position: absolute;
    width: 100%;
    height: auto;
    top: 0px; /* メニューとの間隔調整 */
    /* border:1px blue solid; */
}

/* 見出しのスタイル */
.pc .heading {
    margin: 30px 10px 20px 10px;
    text-align: left;
    font-size: 30px;
    height: 30px;
    line-height: 30px;
    font-weight: bold;
    position: relative;
    font-family: 'HGS明朝B';
    color: green;
}
.pc .heading:before { /* 見出し行頭の縦棒 */
    position: absolute;
    left: -10px;
    top: -5px;
    bottom: -3px;
    width: 5px;
    border-radius: 2px;
    background: green;
    content: '';
}

/* topのニュースエリア */
.pc #news_area {
    margin: 0px calc(10vw + 50px);
}
.pc #news_area #more_news {
    margin: 10px;
    text-align: right;
    color: green;
}
.pc #news_area a {
    text-decoration: none;
    color: inherit; 
}
.pc .news_article {
    margin: 10px;
    background: ivory;
    box-shadow: 10px 10px 15px -10px black;
}
.pc .news_article:hover {
    box-shadow: 0px 0px 0px 0px black;
}
.pc .news_article .date {
    display: inline;
    margin: 10px;
    font-size: 13px;
}
.pc .news_article .title {
    display: inline;
    margin: 10px;
    color: green;
    font-size: 18px;
    font-weight: normal;
}
.pc .news_article p {
    margin-top: 10px;
    margin-left: 20px;
}

/* パンくずリスト */
.pc .breadcrumb {
    margin: 0;
    padding: 5px calc(10vw + 50px);;
    list-style: none;
    overflow: hidden;
} 
.pc .breadcrumb li {
    display: inline;/*横に並ぶように*/
    list-style: none;
} 
.pc .breadcrumb li:after {
    /* >を表示*/
    content: '>';
    margin: 0px 10px;
    color: #8186a0;
} 
.pc .breadcrumb li:last-child:after {
    content: '';
}
.pc .breadcrumb li a {
    text-decoration: none;
    /* font-family: 'HG丸ｺﾞｼｯｸM-PRO'; */
    color: green;
} 
.pc .breadcrumb li a:hover {
    color: lime;
}

/* 各ページのエリア */
.pc #contents_area {
    margin: 20px calc(10vw + 50px);
}
.pc .content_box {
    padding: 10px;
    background: ivory;
}
.pc #contents_area p {
    margin: 0px 20px;
}
/* 以降は特にtopのコンテンツエリア */
.pc #contents_area .box {
    display: inline-block;
    margin: 10px 2%;
    width : 45%;
    height: 180px;
    background: white;
    box-shadow: 10px 10px 15px -10px;
    vertical-align: bottom;
}
.pc #contents_area .box .title {
    margin-bottom: 10px;
    font-family: 'HGS明朝B';
    font-weight: bold;
    padding: 10px;
    color: white;
    font-size: 20px;
    background: green;
    text-align: center;
}
.pc #contents_area .box p {
    font-size: 20px;
    margin: 15px; 
    padding: 0px;
}

/* 以降は特に問い合わせエリア */
.pc #contents_area form {
    margin: 10px 20px;
}
.pc #contents_area #phone {
    font-size: 30px;
}
.pc #contents_area .infobox {
    height: 40px;
    width: 300px;
    margin: 10px;
    line-height: 30px;
    font-size: 20px;
    font-family: 'Yu Gothic';
    padding: 5px;
}
.pc #contents_area .textbox {
    width: 800px;
    height: 100px;
    margin: 10px;
    line-height: 20px;
    font-size: 20px;
    font-family: 'Yu Gothic';
    padding: 5px;
}
.pc #contents_area .capt {  /* reCAPTCHA用レイアウト */
    margin: 0px 10px;
}
.pc #contents_area .submit {
    height: 30px;
    line-height: 25px;
    font-size: 20px;
    width: 200px;
    margin: 10px;
    border-radius: 10px;
}
.pc #contents_area .alert {
    color: red;
}
.pc #contents_area .error {
    border: 2px red solid;
    background: pink;
}
.pc #contents_area .error:focus {
    border: 2px red solid;
    outline: none;
}

/* 会社概要 */
.pc #kaisya_gaiyou dl {
    /* justify-content: space-between; */
    width: 800px;
    display: flex;
    flex-wrap: wrap;
    border-top: 1px green solid;
}
.pc #kaisya_gaiyou dt {
    display: inline-block;
    width: 20%;
    border-bottom: 1px green solid;
    box-sizing: border-box;
    padding: 30px 30px;
}
.pc #kaisya_gaiyou dd {
    display: inline-block;
    width: 80%;
    border-bottom: 1px green solid;
    box-sizing: border-box;
    padding: 30px 30px;
}

/* 施工例 */
.pc .sekou_thumbnail {
    display: inline-block;
    margin: 10px;
}
.pc .sekou_thumbnail img {
    box-shadow: 10px 10px 15px -10px black;
}
.pc .sekou_thumbnail img:hover {
    box-shadow: 0px 0px 0px 0px black;
}

/* 施工例の各項目 */
.pc .sekoukoumoku_row {
    position: relative;
    margin: 50px 20px 10px 20px;
    padding:30px 10px 10px 10px;
    background: ivory;
    width: 100%; /* transitionのため */
    transition: 0.2s;  /* 拡大時の挙動 */
}
.pc .sekoukoumoku_row .title {
    position: absolute;
    top: -30px;
    left: -10px;
    font-size: 20px;
    width: 100px;
    padding: 10px 0px;
    text-align: center;
    background: green;
    color: white;
    transform: rotate(-5deg);
}
.pc .sekoukoumoku_row img {
    width: 100%;
    vertical-align: top; /* 画像下部に余白が入るのを防ぐ */

}
.pc .sekou_case {
    text-align: center;
    display: flex;
    justify-content: space-evenly;
    /* border: 1px black solid; */
}
.pc .sekou_case .hidden {
    visibility: hidden;
}
.pc .sekou_before {
    position: relative;
    width: 250px;
    min-height: 250px;
    margin: 35px 0px 10px 0px;
    background: rgba(255,200,200,1);
    box-shadow: 10px 10px 15px -10px;
    display: inline-block;
    padding: 10px;
    transition: 0.2s;  /* 拡大時の挙動 */
}
.pc .sekou_before::before {
    position: absolute;
    top: -30px;
    left: 0px;
    width: 80px;
    height: 30px;
    content: "Before";
    font-family: "mtcorsva";
    font-size: 25px;
    background: rgba(255,200,200,1);
    border-radius: 10px 10px 0px 0px;
    padding: 5px 10px 0px 10px;
}
.pc .sekou_after {
    position: relative;
    width: 250px;
    min-height: 250px;
    margin: 35px 0px 10px 0px;
    background: rgba(200,255,200,1);
    box-shadow: 10px 10px 15px -10px;
    display: inline-block;
    padding: 10px;
    transition: 0.2s;  /* 拡大時の挙動 */
}
.pc .sekou_after::before {
    position: absolute;
    top: -30px;
    left: 0px;
    width: 80px;
    height: 30px;
    content: "After";
    font-family: "mtcorsva";
    font-size: 25px;
    background: rgba(200,255,200,1);
    border-radius: 10px 10px 0px 0px;
    padding: 5px 10px 0px 10px;
}

/* お困りごと */
.pc #okomari_koumoku dt {
    border: 1px black solid;
    margin-top: 20px;
    font-size: 20px;
}
.pc #okomari_koumoku dd {
    margin: 5px 10px 0px 10px;
}

/* お問い合わせの内容 */
.pc #otoiawase_kakunin {
    padding: 0px 30px;
}
.pc #otoiawase_kakunin div {
    font-weight:bold;
    margin-top: 10px;
}
.pc #otoiawase_kakunin .hiddenbox { /* 確認画面の入力欄は非表示 */
    display: none;
}
.pc #otoiawase_kanryou {
    padding: 100px 0px;
    text-align: center;
}
.pc #otoiawase_kanryou #message {
    font-size: 30px;
    color: green;
}
.pc #otoiawase_kanryou p {
    margin-top: 10px;
}
.pc #otoiawase_kanryou #button_rtn {
    height: 30px;
    line-height: 25px;
    font-size: 20px;
    width: 200px;
    margin-top: 30px;
    border-radius: 10px;
}


/* フッター */
.pc footer div {
    background: green;
    margin-top: 30px; 
    text-align: center;
    font-size: 14px;
    padding: 20px;
    color: white;
}


/* 不動産物件一覧（estate_itemが途中にかんでいる） */
.pc #estate_search {
    border: 1px green solid;
    height: 80px;
    text-align: center;
}
/* 他のページと同じcontents_areaに統一しても良いが */
/* こちらはレイアウトの都合上min-widthが必要 */
.pc #estate_area {
    margin: 0px calc(10vw + 50px);
    min-width: 800px;
}
.pc #estate_area .estate_item {
    margin: 10px 0px;
    background: white;
    box-shadow: 10px 10px 15px -10px;
    position: relative;
}
.pc #estate_area .estate_item .estate_link {
    position: absolute;
    width: 100%;
    height: 100%;
}
.pc #estate_area .estate_item:hover {
    box-shadow: 0px 0px 0px 0px;
}
.pc #estate_area .estate_item .title {
    font-family: 'HGS明朝B';
    font-weight: bold;
    padding: 10px;
    color: white;
    font-size: 20px;
    background: green;
    border: 1px green solid;
}
/* わざわざ枠線を設定しないと内側のblockのmarginが正常に動作しない */
.pc #estate_area .estate_item .itembox {
    border:1px white solid;
    padding: 10px;
}
.pc #estate_area .estate_item .imgbox {
    display: inline-block;
    border: 1px black solid;
    width: 300px;
    height: 300px;
    margin: 10x 0px;
    position: relative;
}
.pc #estate_area .estate_item .imgbox img {
    position: absolute;
    top: 0px;
    left: 0px;
    object-fit: contain;
    width: 100%;
    height: 100%;
}
.pc #estate_area .estate_item .infobox {
    display: inline-block;
    margin-left: 10px;
    padding: 10px;
    width: calc(100% - 300px - 10px);
    min-height: 300px;
    vertical-align: top;
    background: lightgray;
}
.pc #estate_area .estate_item .price {
    color: red;
    font-size: 20px;
    font-weight: bold;
}
.pc #estate_area .estate_item .infobox .op_th:nth-child(n+2) {
    text-align: right;
    padding-left: 5px;
}
.pc #estate_area .estate_item .infobox .op_td {
    padding-right: 10px;
}
.pc #estate_area .estate_item .infobox .sqmt {
    font-size: 14px;
}
.pc #estate_area .estate_item .infobox .cmts {
    border-top: 1px green solid;
    padding-top: 10px;
}
.pc #estate_area .estate_item .infobox dl {
    /* justify-content: space-between; */
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    border-top: 1px green solid;
    margin:10px 0px;
}
.pc #estate_area .estate_item .infobox dt {
    display: inline-block;
    width: 100px;
    border-bottom: 1px green solid;
    box-sizing: border-box;
    padding: 5px;
    color: green;
    font-weight: bold;
    /* background: lightgray; */
    /* text-align: center; */
}
.pc #estate_area .estate_item .infobox dd {
    display: inline-block;
    width: calc(100% - 100px);
    border-bottom: 1px green solid;
    box-sizing: border-box;
    padding: 5px;
}
.pc #estate_area .estate_item .infobox .multicol {
    width: calc(33.333% - 100px);
}
.pc #estate_area .estate_item .infobox .dt_cmts {
    display: none;
}
.pc #estate_area .estate_item .infobox .dd_cmts {
    width: 100%;
}

/* 個別の物件ページ */
.pc #estate_area #estate_detail {
    margin: 10px 0px;
    background: white;
    box-shadow: 10px 10px 15px -10px;
}
.pc #estate_area #estate_detail #title {
    font-family: 'HGS明朝B';
    font-weight: bold;
    padding: 10px;
    color: white;
    font-size: 20px;
    background: green;
    border: 1px green solid;
}
/* わざわざ枠線を設定しないと内側のblockのmarginが正常に動作しない */
.pc #estate_area #estate_detail #itembox {
    border:1px white solid;
    padding: 10px;
}
.pc #estate_area #estate_detail #price {
    color: red;
    font-size: 20px;
    font-weight: bold;
}
.pc #estate_area #estate_detail .infobox .sqmt {
    font-size: 14px;
}
.pc #estate_area #estate_detail .infobox .cmts {
    border-top: 1px green solid;
    padding-top: 10px;
}
.pc #estate_area #estate_detail .infobox dl {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    border-top: 1px green solid;
    margin:10px 0px;
}
.pc #estate_area #estate_detail .infobox dt {
    display: inline-block;
    width: 100px;
    border-bottom: 1px green solid;
    box-sizing: border-box;
    padding: 5px;
    color: green;
    font-weight: bold;
    background: lightgray;
    text-align: center;
}
.pc #estate_area #estate_detail .infobox dd {
    display: inline-block;
    width: calc(100% - 100px);
    border-bottom: 1px green solid;
    box-sizing: border-box;
    padding: 5px;
}
.pc #estate_area #estate_detail .infobox .multicol {
    width: calc(33.333% - 100px);
}
.pc #estate_area #estate_detail .infobox .dt_cmts {
    display: none;
}
.pc #estate_area #estate_detail .infobox .dd_cmts {
    width: 100%;
}
.pc #estate_area #estate_detail #imgbox {
    text-align: center;
}
.pc #estate_area #estate_detail #imgbox #frame_main {
    display: inline-block;
    border: 1px green solid;
    width: 600px;
    height: 400px;
    vertical-align: top;
    padding: 2px;
    position: relative;
    z-index: 2;
}
.pc #estate_area #estate_detail #imgbox #frame_main::before {
    position: absolute;
    top: 50%;
    left: 0px;
    width: 47px;
    height: 94px;
    transform: translate(0, -50%);
    background: url("https://www.sumairucommit.com/images/others/arrow_left.png");
    background-repeat: no-repeat;
    background-position: center;
    content: "";
    z-index: 1;
    display: none;
}
.pc #estate_area #estate_detail #imgbox #frame_main:hover::before {
    display: block;
}
.pc #estate_area #estate_detail #imgbox #frame_main::after {
    position: absolute;
    top: 50%;
    right: 0px;
    width: 47px;
    height: 94px;
    transform: translate(0, -50%);
    background: url("https://www.sumairucommit.com/images/others/arrow_right.png");
    background-repeat: no-repeat;
    background-position: center;
    content: "";
    z-index: 1;
    display: none;
}
.pc #estate_area #estate_detail #imgbox #frame_main:hover::after {
    display: block;
}
.pc #estate_area #estate_detail #imgbox #frame_main #trans_detect{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    /* border:1px red solid; */
    text-indent: 100%; /* テキスト幅でインデントを取る */
    white-space: nowrap; /* 改行を禁止する */
	overflow: hidden; /* はみ出た分は非表示にする */
    color: transparent;
    z-index: 3;
}
.pc #estate_area #estate_detail #imgbox #frame_main #img_main {
    position: absolute;
    top: 0px;
    left: 0px;
    object-fit: contain;
    width: 100%;
    height: 100%;
    z-index: 0;
}
.pc #estate_area #estate_detail #imgbox #imgbox_sub {
    width: 320px;
    display: inline-block;
    text-align: center;
    vertical-align: top;
}
.pc #estate_area #estate_detail #imgbox #imgbox_sub .frame_sub {
    width: 100px;
    height: 100px;
    overflow: hidden;
    display: inline-block;
    border: 1px green solid;
    margin: 0px 2px 2px 2px;
    vertical-align: top;
    position: relative;
}
.pc #estate_area #estate_detail #imgbox #imgbox_sub .frame_sub .imgs_sub {
    position: absolute;
    top: 0px;
    left: 0px;
    object-fit: contain;
    width: 100%;
    height: 100%;
}