@charset "utf-8";

/*========================================================================================================================


  ◇◆◇ THETA ◇◆◇
  
  
========================================================================================================================*/

.pgHeadline-theta {
  background-image:url(../../image/pgHeadline/theta.jpg);
}

@media print,screen and (min-width:768px) {
  .pc-center {
    text-align:center;
  }
  
  .pc-kai:before {
    content:"\A";
    white-space:pre;
  }
  
  .sp-kai:before {
    content:"、";
    white-space:inherit;
  }
}

@media screen and (max-width:767px) {
  .pc-kai:before {
    content:"、";
    white-space:inherit;
  }
  
  .sp-kai:before {
    content:"\A";
    white-space:pre;
  }
}

@media print,screen and (min-width:768px) {
  .mv {
    padding-bottom:50px;
    max-width:1100px;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
  }
}

@media screen and (max-width:767px) {
  .mv {
    padding-top:2.5em;
    padding-bottom:3em;
    padding-left:3%;
    padding-right:3%;
    box-sizing:border-box;
  }
  
  .mv p {
    text-align:left;
  }
}

@media screen and (max-width:640px) {
  .mv {
    padding-top:2em;
    padding-bottom:2.5em;
  }
}


/*----------------------------------------------------------------------------------------------------

  nav
  
----------------------------------------------------------------------------------------------------*/

.pg-nav {
  background-color:#dfebf7;
  padding-top:1.5em;
  padding-bottom:1.5em;
}

.pg-nav ul {
  height:100%;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
}

.pg-nav li {
  padding:4px;
  box-sizing:border-box;
}

.pg-nav li a {
  height:100%;
  box-sizing:border-box;
  display:block;
  background-color:#fff;
  padding:1em 1em 1.5em 1em;
  line-height:1.4;
  position:relative;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
  -webkit-box-pack:center;
  -ms-flex-pack:center;
  justify-content:center;
}

.pg-nav li a,
.pg-nav li a:visited { color:inherit; text-decoration:none; }
.pg-nav li a:hover { color:#0f64b9; text-decoration:none; }

.pg-nav li a:after {
  content:"";
  width:0;
  height:0;
  border-style:solid;
  border-width:5px 5px 0 5px;
  border-color:#0f64b9 transparent transparent transparent;
  position:absolute;
  left:50%;
  bottom:0.75em;
  transform:translateX(-50%);
}

@media print,screen and (min-width:768px) {
  .pg-nav ul {
    max-width:1108px;
    margin-left:auto;
    margin-right:auto;
  }
  
  .pg-nav li {
    width:25%;
  }
}

@media screen and (max-width:767px) {
  .pg-nav {
    padding-left:2.5%;
    padding-right:2.5%;
  }
  
  .pg-nav ul {
    font-size:95%;
  }
  
  .pg-nav li {
    -webkit-box-flex:2;
    -ms-flex-positive:2;
    flex-grow:2;
    width:33.333333%;
  }
}

@media screen and (max-width:500px) {
  .pg-nav li {
    width:50%;
  }
}


/*----------------------------------------------------------------------------------------------------

  360度画像とは？
  
----------------------------------------------------------------------------------------------------*/

@media print,screen and (min-width:768px) {
  .about p:not(:first-of-type) { margin-top:2.5em; }
  .about .ricoh-theta-tour-image:first-of-type { margin-top:2em; }
  .about .ricoh-theta-tour-image:not(:first-of-type) { margin-top:1.5em; }
}

@media screen and (max-width:767px) {
  .about p:not(:first-of-type) { margin-top:2em; }
  .about .ricoh-theta-tour-image:first-of-type { margin-top:1.75em; }
  .about .ricoh-theta-tour-image:not(:first-of-type) { margin-top:1.25em; }
}


/*----------------------------------------------------------------------------------------------------

  活用事例
  
----------------------------------------------------------------------------------------------------*/

@media print,screen and (min-width:768px) {
  .case {
    padding-top:1em;
  }
}

@media screen and (max-width:767px) {
  .case {
    padding-top:0.5em;
  }
}

.case-uesr {
  line-height:1;
  text-align:center;
  margin-top:1.5em;
}

.case-uesr img {
  width:100%;
  max-width:580px;
}


/*----------------------------------------------------------------------------------------------------

  撮影について
  
----------------------------------------------------------------------------------------------------*/

.satsuei-wrap {
  background-color:#f2f2f2;
}

.satsuei-set ul {
  width:100%;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
}

.satsuei-set li {
  width:33.333333%;
  background-color:#fff;
  position:relative;
  line-height:1;
}

.satsuei-set li img {
  vertical-align:bottom;
}

.satsuei-set li:before {
  content:attr(data-label);
  display:inline-block;
  position:absolute;
  left:0;
  top:0;
  background-color:rgba(30,30,30,0.8);
  color:#fff;
  z-index:1;
  padding:0.6em 0.5em;
}

.satsuei-madori {
  background-color:#fff;
  box-sizing:border-box;
}

@media print,screen and (min-width:768px) {
  .satsuei-set {
    max-width:940px;
    margin-left:auto;
    margin-right:auto;
    padding-top:1.75em;
    padding-bottom:1.75em;
  }
  
  .satsuei-set li {
    margin:0 10px;
  }
  
  .satsuei-madori {
    margin-top:2.25em;
    padding:2em;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
  }
  
  .satsuei-madori .madorizu {
    width:460px;
  }
  
  .satsuei-madori .txt {
    padding-left:2em;
    align-self:center;
  }
  
  .satsuei-madori .txt p:not(:first-child) {
    padding-top:1em;
  }
}

@media screen and (max-width:767px) {
  .satsuei-set {
    padding-top:1.5em;
    padding-bottom:1.5em;
    margin-left:-0.5em;
    margin-right:-0.5em;
  }
  
  .satsuei-set li {
    margin:0 0.5em;
  }
  
  .satsuei-madori {
    margin-top:1.75em;
    padding:1.5em;
  }
  
  .satsuei-madori .madorizu {
    text-align:center;
  }
  
  .satsuei-madori .madorizu img {
    width:100%;
    max-width:360px;
  }
  
  .satsuei-madori .txt p {
    padding-top:1em;
  }
}

@media screen and (max-width:640px) {
  .satsuei-set li:before {
    font-size:2.2vw;
  }
}


/*----------------------------------------------------------------------------------------------------

  編集について
  
----------------------------------------------------------------------------------------------------*/

.hensyu01 {
  text-align:center;
  line-height:1;
}

.hensyu01 img {
  width:100%;
  max-width:600px;
}

.hensyu-kino-headline {
  text-align:center;
  line-height:1;
}

.hensyu-kino-headline span {
  display:inline-block;
  text-align:center;
  border-top:2px solid #bdd7f0;
  border-bottom:2px solid #bdd7f0;
  padding:0.6em 1em;
  line-height:1;
}

.hensyu-kino .box {
  background-color:#eef4fa;
  text-align:center;
  box-sizing:border-box;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -ms-flex-direction:column;
  flex-direction:column;
}

.hensyu-kino .box p {
  text-align:left;
}

.hensyu-kino .box p:first-of-type {
  padding-top:0.5em;
}

.hensyu-kino .box p:last-of-type {
  padding-bottom:1.25em;
}

.hensyu-kino .box p:not(:first-of-type) {
  padding-top:1em;
}

.hensyu-kino-ss {
  text-align:center;
  background-color:#fff;
  padding:5px;
  margin-top:auto;
}

.hensyu-kino-ss img,
.hensyu-hp img {
  vertical-align:bottom;
}

.hensyu-hp {
  text-align:center;
}

@media print,screen and (min-width:768px) {
  .hensyu01 {
    padding-top:1.75em;
  }

  .hensyu-kino-headline {
    padding-top:3em;
    padding-bottom:2.25em;
  }
  
  .hensyu-kino-headline span {
    width:360px;
  }
  
  .hensyu-kino {
    width:100%;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    padding-bottom:2.5em;
  }
  
  .hensyu-kino .box {
    width:50%;
    padding:2em;
  }
  
  .hensyu-kino .box:first-child {
    margin-right:20px;
  }
  
  .hensyu-kino .box:last-child {
    margin-left:20px;
  }
  
  .hensyu-hp {
    padding-top:1.5em;
  }
}

@media screen and (max-width:767px) {
  .hensyu01 {
    padding-top:1.5em;
  }

  .hensyu-kino-headline {
    padding-top:2.5em;
    padding-bottom:0.25em;
  }
  
  .hensyu-kino-headline span {
    width:60%;
  }
  
  .hensyu-kino {
    padding-bottom:2em;
  }
  
  .hensyu-kino .box {
    padding:1.5em;
    margin-top:1.5em;
  }
  
  .hensyu-hp {
    padding-top:1.25em;
  }
}


/*----------------------------------------------------------------------------------------------------

  料金について
  
----------------------------------------------------------------------------------------------------*/

@media print,screen and (min-width:768px) {
  .price {
    padding-top:1em;
  }
  
  .price-ftxt {
    margin-top:-0.75em;
    margin-bottom:-0.5em;
    text-align:center;
  }
}

@media screen and (max-width:767px) {
  .price {
    padding-top:0.5em;
  }
  
  .price-ftxt {
    margin-top:-0.25em;
    text-align:center;
  }
}

.price-hdline {
  line-height:1.4;
  padding:0.6em 0.75em;
  font-size:127.5%;
  color:#fff;
  margin-top:2em;
}

.price-tbl {
  width:100%;
  border-collapse:collapse;
  line-height:1.6 !important;
}

.price-tbl th,
.price-tbl td {
  padding:1em;
}

.price-tbl .zei {
  display:inline-block;
}

@media screen and (max-width:767px) {
  .price-hdline {
    margin-top:1.5em;
  }

  .price-tbl th,
  .price-tbl td {
    padding:0.75em;
  }
}


/*-----------------------------------------------------------------------------------
  最初にかかる料金
-----------------------------------------------------------------------------------*/

.price-shoki .price-hdline {
  background-color:#28c3aa;
  margin-bottom:0.5em;
}

.price-shoki .price-tbl tr {
  border:1px solid #56d0bc;
}

.price-shoki .price-tbl th {
  border-right:1px solid #56d0bc;
  background-color:#dff6f2;
  color:#00a08c;
  text-align:center;
  white-space:nowrap;
}

.price-shoki .price-tbl td.kei {
  text-align:right;
  white-space:nowrap;
}

.price-shoki .price-tbl .kei {
  color:#00a08c;
  font-weight:bold;
  font-size:118.8%;
}

.price-shoki .camera {
  box-sizing:border-box;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
}

.price-shoki .camera li {
  border:1px solid #dcdcdc;
  box-sizing:border-box;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
}

.price-shoki .camera li .photo {
  margin-left:auto;
  align-self:center;
  line-height:0;
}

.price-shoki .camera li .type {
  padding-right:1em;
}

.price-shoki .camera li .type p {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -ms-flex-direction:column;
  flex-direction:column;
  height:100%;
}

.price-shoki .camera li .kei {
  display:inline-block;
  margin-top:auto;
}

@media print,screen and (min-width:768px) {
  .price-shoki .camera {
    margin-top:1em;
  }
  
  .price-shoki .camera li {
    padding:1.5em;
  }
  
  .price-shoki .camera li:first-child {
    width:40%;
    margin-right:0.5em;
  }
  
  .price-shoki .camera li:last-child {
    width:60%;
    margin-left:0.5em;
  }
  
  .price-shoki .camera li .type {
    padding-top:0.5em;
  }
  
  .price-shoki .camera li .photo img {
    height:110px;
  }
  
  .price-shoki .price-tbl td.kei {
    border-left:1px solid #56d0bc;
  }

  .price-shoki .camera li .type p .f-nowrap {
    display:block;
  }
}

@media screen and (max-width:767px) {
  .price-shoki .camera {
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
  }
  
  .price-shoki .camera li {
    padding:1em;
    width:100%;
    margin-top:0.75em;
  }
  
  .price-shoki .camera li .photo img {
    width:auto;
    max-width:inherit;
    height:-webkit-calc(90 / 767 * 100vw);
    height:calc(90 / 767 * 100vw);
  }
  
  .price-shoki .price-tbl td {
    display:block;
    border:0;
  }
  
  .price-shoki .price-tbl tr:not(:first-child) td:not(.kei) {
    padding-bottom:0.25em;
  }
  
  .price-shoki .price-tbl td.kei {
    text-align:left;
    padding-top:0;
  }

  .price-shoki .camera li .type p .f-nowrap {
    display:inline-block;
    margin-right:0.5em;
  }
}


/*-----------------------------------------------------------------------------------
  維持費
-----------------------------------------------------------------------------------*/

.price-iji .price-hdline {
  background-color:#2c77c2;
  margin-bottom:1.25em;
}

.price-sbj {
  color:#0f64b9;
  line-height:1.5;
  padding-top:1.5em;
  padding-bottom:0.25em;
}

.price-iji .price-tbl {
  margin-top:1em;
  margin-bottom:1em;
}

.price-iji .price-tbl th,
.price-iji .price-tbl td {
  border:1px solid #76a6d7;
  padding:0.75em;
}

.price-iji .price-tbl thead th {
  text-align:center;
  background-color:#eef4fa;
  white-space:nowrap;
}

.price-iji .price-tbl tbody th {
  font-weight:normal;
  white-space:nowrap;
}

.price-iji .price-tbl tbody td {
  text-align:center;
}

@media print,screen and (min-width:641px) {
  .price-iji .price-tbl .sp-block--spaceL {
    display:inline-block;
    margin-left:1em;
  }
}

@media screen and (max-width:767px) { 
  .price-iji .price-tbl .sp-block {
    display:block;
    margin-top:-0.25em;
  }
  
  .price-iji .price-tbl .zei {
    display:block;
    margin-top:-0.25em;
  }
}


@media screen and (max-width:640px) {
  .price-iji .price-tbl {
    font-size:2.4vw;
  }
}

@media screen and (max-width:500px) {
  .price-iji .price-tbl {
    font-size:2.5vw;
  }
  
  .price-iji .price-tbl .sp-blockS {
    display:block;
    margin-top:-0.25em;
  }
  
  .price-iji .price-tbl .sp-blockS {
    display:block;
    margin-top:-0.25em;
  }
}


/*-----------------------------------------------------------------------------------
  料金事例
-----------------------------------------------------------------------------------*/

.price-case .price-hdline {
  background-color:#3fafdf;
  margin-bottom:1.25em;
}

.price-case .price-tbl {
  margin-top:1.25em;
}

.price-case .price-tbl th,
.price-case .price-tbl td {
  border:1px solid #68c0e6;
}

.price-case .price-tbl th {
  background-color:#e2f3fa;
  color:#0f9bd7;
  font-size:106%;
  padding:0.75em;
}

.price-case-plan {
  width:100%;
}

.price-case .price-tbl dl {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
  -ms-flex-line-pack:end;
  align-content:flex-end;
  -webkit-box-align:end;
  -ms-flex-align:end;
  align-items:flex-end;
}

.price-case .price-tbl dt {
  width:-webkit-calc(100% - 11em);
  width:calc(100% - 11em);
  padding-top:0.25em;
}

.price-case .price-tbl dd {
  width:11em;
  text-align:right;
  color:#0f9bd7;
  padding-top:0.25em;
}

.price-case .price-tbl dd span {
  color:#1e1e1e;
}

.price-case .price-tbl dl dt:last-of-type,
.price-case .price-tbl dl dd:last-of-type {
  border-top:1px dotted #68c0e6;
  padding-top:0.5em;
  margin-top:0.5em;
}

.price-case .price-tbl dl dt:first-of-type,
.price-case .price-tbl dl dd:first-of-type {
  padding-top:0;
}

@media print,screen and (min-width:768px) {
  .price-case-plan {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
  }
  
  .price-case-plan dl {
    width:50%;
    box-sizing:border-box;
    padding-top:0.5em;
    padding-bottom:0.5em;
  }
  
  .price-case-plan dl:first-child {
    padding-left:0.5em;
    padding-right:1em;
  }
  
  .price-case-plan dl:last-child {
    padding-right:0.5em;
    padding-left:1em;
  }
}

@media print,screen and (min-width:641px) {
  .price-case .price-tbl:not(:first-of-type) {
    margin-top:1.5em;
  }
}

@media screen and (max-width:767px) {
  .price-case .price-tbl td {
    padding:0;
  }
  
  .price-case-plan dl {
    padding:1em;
  }
  
  .price-case-plan dl:last-child {
    border-top:1px solid #68c0e6;
  }
}

@media screen and (max-width:500px) {
  .price-case .price-tbl {
    font-size:3vw;
  }
}


/*----------------------------------------------------------------------------------------------------

  ご契約について
  
----------------------------------------------------------------------------------------------------*/

@media print,screen and (min-width:768px) {
  .keiyaku {
    padding-top:1em;
  }
}

@media screen and (max-width:767px) {
  .keiyaku {
    padding-top:0.5em;
  }
}

.keiyaku {
  text-align:center;
}

.partner-logo {
  display:inline-block;
  width:240px;
  margin-top:1.5em;
  margin-bottom:1.5em;
  border:1px solid #dcdcdc;
  vertical-align:bottom;
}

.keiyaku-step {
  text-align:left;
  line-height:1.6;
  counter-reset:number;
}

.keiyaku-step dl {
  position:relative;
  padding:1.25em 1.5em 1.25em 3.75em;
  background-color:#eef4fa;
}

.keiyaku-step dl:not(:first-of-type) {
  margin-top:0.75em;
}

.keiyaku-step dl:not(:first-of-type):after {
  content:"";
  width:0;
  height:0;
  border-style:solid;
  border-width:20px 20px 0 20px;
  border-color:#f4d03f transparent transparent transparent;
  position:absolute;
  left:50%;
  top:-0.75em;
  transform:translateX(-50%);
}

.keiyaku-step dl:before {
  counter-increment:number;
  content:counter(number);
  height:100%;
  width:2.5em;
  text-align:center;
  background-color:#2c77c2;
  color:#fff;
  font-weight:bold;
  position:absolute;
  left:0;
  top:0;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:center;
  -ms-flex-pack:center;
  justify-content:center;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
}

.keiyaku-step dt {
  font-size:118.8%;
  color:#0f64b9;
  font-weight:bold;
}

@media print,screen and (min-width:768px) {
  .keiyaku-step {
    display:inline-block;
    padding-top:2em;
    padding-bottom:1em;
  }
}

@media screen and (max-width:767px) {
  .keiyaku p {
    text-align:left;
  }
  
  .keiyaku-step {
    padding-top:1.75em;
    padding-bottom:0.5em;
  }
}

@media screen and (max-width:640px) {
  .partner-logo {
    width:40%;
  }
}


/*----------------------------------------------------------------------------------------------------

  お申し込み
  
----------------------------------------------------------------------------------------------------*/

.moushikomi-wrap {
  background:url(../image/moushikomi_bg.jpg) no-repeat center top;
  background-size:cover;
}

.moushikomi,
.moushikomi .headline {
  color:#fff;
  text-align:center;
}

.moushikomi .mk {
  background-color:#fff096;
  color:#093b6c;
  display:inline-block;
  line-height:1;
  padding:0.25em;
}

.moushikomi p:not(:first-of-type) {
  padding-top:1em;
}

.moushikomi p:last-of-type {
  padding-bottom:2em;
}

.csstransforms .moushikomi .btn span:before {
  border-right-color:#2c77c2;
  border-bottom-color:#2c77c2;
}
.moushikomi .btn,
.moushikomi .btn:visited,
.moushikomi .btn:hover { color:#0f64b9; border:1px solid #fff; background-color:#fff; }
.lte-ie8 .moushikomi .btn { border:1px solid #fff; }
.lte-ie8 .moushikomi .btn:hover { color:#fff; border:1px solid #0a457f; background-color:#0a457f; }
.lte-ie8 .moushikomi .btn:hover span:before { border-right-color:#fff; border-bottom-color:#fff; }
@media all and (min-width:768px) {
  .moushikomi .btn:hover { color:#fff; border:1px solid #0a457f; background-color:#0a457f; }
  .moushikomi .btn:hover span:before { border-right-color:#fff; border-bottom-color:#fff; }
}

@media print,screen and (min-width:768px) {
  .moushikomi {
    padding-top:70px;
    padding-bottom:70px;
  }
}

@media screen and (max-width:767px) {
  .moushikomi {
    padding-top:3.75em;
    padding-bottom:3.75em;
  }
}

@media screen and (max-width:640px) {
  .moushikomi {
    padding-top:3.25em;
    padding-bottom:3.25em;
  }
}


/*----------------------------------------------------------------------------------------------------

  ホームページ制作会社の方へ
  
----------------------------------------------------------------------------------------------------*/

.hp-company {
  position:relative;
}

.hp-company:before {
  content:"";
  height:90px;
  background:url(../image/hp-company.gif) no-repeat center top;
  background-size:contain;
}

.hp-company-hdline {
  line-height:1.5;
  color:#0f64b9;
  font-weight:normal;
}

@media print,screen and (min-width:768px) {
  .hp-company-wrap {
    padding-top:60px;
    padding-bottom:60px;
    text-align:center;
  }
  
  .hp-company {
    text-align:left;
    display:inline-block;
    margin-left:auto;
    margin-right:auto;
    padding-left:160px;
  }
  
  .hp-company:before {
    width:120px;
    display:inline-block;
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);
  }
  
  .hp-company-hdline {
    padding-bottom:0.25em;
  }
}

@media screen and (max-width:767px) {
  .hp-company-wrap {
    padding-top:3.5em;
    padding-bottom:3.5em;
  }
  
  .hp-company:before {
    width:100%;
    height:90px;
    display:block;
  }
  
  .hp-company-hdline {
    padding-top:1em;
    padding-bottom:0.5em;
    text-align:center;
  }
}

@media screen and (max-width:640px) {
  .hp-company-wrap {
    padding-top:3em;
    padding-bottom:3em;
  }
  
  .hp-company:before {
    height:-webkit-calc(90 / 640 * 100vw);
    height:calc(90 / 640 * 100vw);
  }
}