@charset "UTF-8";
/* Scss Document */
/* ---------- subtitle ---------- */
#subttl {
  background-image: url(../img/family/family-mainph@2x.jpg);
  padding-bottom: 374px;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;
  margin: 0 auto 35px;
  max-width: 1000px; }
  @media (max-width: 1023px) {
    #subttl {
      background-size: cover;
      background-position: center center; } }
  @media (max-width: 599px) {
    #subttl {
      background-image: url(../img/family/family-mainph.jpg);
      padding-bottom: 250px;
      background-size: 700px auto;
      background-position: center bottom; } }

h2 {
  background-color: #FFFFFF;
  padding: 120px 0 60px;
  width: 100%;
  text-align: center; }
  @media (max-width: 1023px) {
    h2 {
      padding: 50px 0 30px;
      margin: 0 auto; } }
  @media (max-width: 599px) {
    h2 img {
      width: 90%;
      max-width: 403px; } }

.lead {
  color: #2c7e97;
  margin: 70px auto;
  width: 90%; }
  @media (max-width: 1023px) {
    .lead {
      margin: 30px auto; } }

/* ---------- main ---------- */
main {
  text-align: center;
  padding-bottom: 80px; }
  main p.link {
    font-size: 140%; }
    @media (max-width: 1023px) {
      main p.link {
        white-space: nowrap;
        line-height: 150%; } }
  main p a {
    color: #b5a25d; }
    main p a:visited {
      color: #93844c; }

/* ---------- common ---------- */
h3 {
  padding: 10px 0;
  background-color: #2c7e97;
  margin-bottom: 0px; }

#plan .content {
  margin: 0 0 0 100px;
  width: 800px;
  text-align: left; }
  @media (max-width: 1023px) {
    #plan .content {
      margin: 0;
      display: block;
      width: 100%;
      text-align: center; } }
  @media (max-width: 1023px) {
    #plan .content h4 {
      display: block;
      vertical-align: middle;
      padding-right: 0;
      width: 255px;
      margin: 0 auto; } }
#plan .subttl {
  display: table; }
  @media (max-width: 1023px) {
    #plan .subttl {
      display: block;
      text-align: center;
      margin: 10px 0;
      padding: 0;
      width: 100%; } }
  #plan .subttl h4 {
    vertical-align: middle;
    padding-right: 90px;
    width: 255px;
    display: table-cell; }
    @media (max-width: 1023px) {
      #plan .subttl h4 {
        padding: 0;
        display: block;
        margin: 0 auto 20px;
        width: 100%; } }
  #plan .subttl p {
    font-size: 24px;
    vertical-align: middle;
    padding-right: 90px;
    display: table-cell;
    color: #2c7e97; }
    @media (max-width: 1023px) {
      #plan .subttl p {
        font-size: 24px;
        vertical-align: middle;
        padding-right: 0;
        display: block;
        width: 100%; } }
#plan .cvbtn {
  width: 90%;
  max-width: 410px; }
#plan .photo {
  margin: 50px auto 60px;
  max-width: 1000px; }
  @media (max-width: 1023px) {
    #plan .photo {
      margin: 20px auto 40px; } }
  #plan .photo p {
    width: 33.3%;
    padding: 0;
    float: left;
    line-height: 0px; }
    @media (max-width: 1023px) {
      #plan .photo p {
        width: 50%; }
        #plan .photo p:last-of-type {
          width: 100%;
          margin: 0;
          padding: 0;
          float: clear; } }
    #plan .photo p img {
      width: 100%; }
  @media (max-width: 1023px) {
    #plan .photo img {
      width: 100%; } }
#plan .text {
  margin: 50px auto 0;
  text-align: left;
  max-width: 800px;
  padding-left: 1em;
  width: 80%; }
  #plan .text li {
    list-style: none;
    text-indent: -1em; }
  #plan .text .notice {
    font-size: 80%; }
#plan .recommend {
  display: table;
  margin: 50px 0 0 100px; }
  @media (max-width: 1023px) {
    #plan .recommend {
      display: block;
      margin: 0; } }
  #plan .recommend h5 {
    margin: 50px auto; }
    @media (max-width: 1023px) {
      #plan .recommend h5 {
        display: block;
        vertical-align: middle;
        padding: 0;
        height: 28px;
        line-height: 1em;
        margin: 40px auto 20px; } }
  #plan .recommend p {
    display: table-cell;
    vertical-align: middle;
    color: #2c7d97;
    padding-left: 10px;
    text-align: left; }
    @media (max-width: 1023px) {
      #plan .recommend p {
        display: block;
        vertical-align: middle;
        padding-left: 0;
        margin: 0 auto 10px;
        width: 90%;
        text-align: center; } }

@media (max-width: 1023px) {
  #plan_a .cvbtn {
    width: 90%; } }

/* --- family --- */
#family {
  margin: 0 auto;
  max-width: 1000px;
  width: 100%; }
  #family .subttl {
    margin-top: 80px; }
    @media (max-width: 599px) {
      #family .subttl {
        margin: 40px 0 0;
        padding: 0;
        width: 100%; } }
    #family .subttl h4 {
      width: 333px; }
      @media (max-width: 599px) {
        #family .subttl h4 {
          width: 100%;
          margin: 0 0 20px;
          padding: 0;
          display: block;
          float: none; } }
    #family .subttl p {
      font-size: 28px;
      padding-right: 0;
      line-height: 140%; }
      @media (max-width: 599px) {
        #family .subttl p {
          font-size: 20px; } }
  #family .price-off {
    margin-top: 50px;
    text-align: right; }
    #family .price-off img {
      width: 56%;
      margin: 0 5%; }
  #family .notes {
    text-align: right;
    margin-top: 20px; }
  #family .ratio:before {
    content: "";
    display: block;
    padding-top: 114.8%;
    /* width1000pxの時高さ1148px */ }
    @media (max-width: 599px) {
      #family .ratio:before {
        padding: 0; } }
  #family .inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
    @media (max-width: 599px) {
      #family .inner {
        position: relative; } }
  #family .photosample {
    margin-top: 50px;
    margin-bottom: 70px;
    position: relative;
    height: auto; }
    @media (max-width: 599px) {
      #family .photosample {
        height: auto; } }
    #family .photosample .ph01 {
      width: 36.8%; }
    #family .photosample .ph02 {
      width: 31.1%;
      left: 37.3%; }
    #family .photosample .ph03 {
      width: 31.1%;
      left: 68.9%; }
    #family .photosample .ph04 {
      width: 36.8%;
      top: 38.76%; }
    #family .photosample .ph05 {
      width: 62.7% x;
      left: 37.3%;
      top: 26.13%; }
    #family .photosample .ph06 {
      width: 33%;
      top: 61.24%; }
    #family .photosample .ph07 {
      width: 33%;
      left: 33.5%;
      top: 61.24%; }
    #family .photosample .ph08 {
      width: 33%;
      top: 80.84%; }
    #family .photosample .ph09 {
      width: 33%;
      left: 33.5%;
      top: 80.84%; }
      @media (max-width: 599px) {
        #family .photosample .ph09 {
          display: none; } }
    #family .photosample .ph10 {
      width: 33%;
      left: 67%;
      top: 61.24%; }
      @media (max-width: 599px) {
        #family .photosample .ph10 {
          display: none; } }
    #family .photosample p {
      position: absolute; }
      @media (max-width: 599px) {
        #family .photosample p {
          position: relative;
          width: 100% !important;
          top: 0 !important;
          left: 0 !important; } }
    #family .photosample img {
      width: 100%; }
  #family .plandetail {
    margin-top: 200px; }
    #family .plandetail .info {
      margin: 0 auto;
      align-items: center; }
      #family .plandetail .info .price {
        margin-top: 50px; }
    #family .plandetail .name {
      color: #2c7e97;
      border-top: solid #8FB2BE 1px;
      border-bottom: solid #8FB2BE 1px;
      padding: 50px 0;
      margin: 0 auto;
      font-size: 40px;
      line-height: 120%; }
      #family .plandetail .name span {
        font-family: a-otf-ud-reimin-pr6n, Times New Roman, "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "メイリオ", Meiryo, serif;
        font-size: 16px; }
    @media (max-width: 1023px) {
      #family .plandetail .price {
        margin: 40px auto;
        width: 90%;
        max-width: 382px;
        background-size: contain; } }
    @media (max-width: 599px) {
      #family .plandetail .price img {
        width: 90%; } }
    #family .plandetail .price p {
      font-size: 14px;
      color: #2c7e97; }
      #family .plandetail .price p:first-of-type {
        margin-left: 2em;
        margin-bottom: 30px; }
      #family .plandetail .price p span {
        font-size: 46px; }
    #family .plandetail ul.text li.em {
      color: #2c7e97;
      font-weight: bold; }
  #family #family_standard {
    margin-top: 0px; }
    #family #family_standard h5.name img {
      width: 90%;
      max-width: 396px; }
  #family #family_premium h5.name img {
    width: 90%;
    max-width: 360px; }
  #family #family_light .price {
    background: none; }
    @media (max-width: 599px) {
      #family #family_light .price {
        padding-top: 40px; } }
  #family #family_light h5.name img {
    width: 90%;
    max-width: 288px; }
  #family #family_movie h5.name img {
    width: 90%;
    max-width: 308px; }
  #family #family_movie iframe {
    margin-top: 50px; }
    @media (max-width: 599px) {
      #family #family_movie iframe {
        width: 100%; } }
  #family .phbook {
    margin-top: 60px;
    display: flex;
    flex-wrap: wrap;
    max-width: 1000px;
    margin: 60px auto 0; }
    #family .phbook .flexitem {
      flex-basis: 25%;
      line-height: 0;
      padding: 0.3%;
      box-sizing: border-box; }
      @media (max-width: 599px) {
        #family .phbook .flexitem {
          flex-basis: 50%; } }
      #family .phbook .flexitem:nth-child(1) {
        order: 1; }
      #family .phbook .flexitem:nth-child(2) {
        order: 2; }
      #family .phbook .flexitem:nth-child(3) {
        order: 3; }
      #family .phbook .flexitem:nth-child(4) {
        order: 4; }
      #family .phbook .flexitem:nth-child(5) {
        flex-grow: 2;
        order: 5;
        padding: 60px 0 0; }
        @media (max-width: 599px) {
          #family .phbook .flexitem:nth-child(5) {
            padding: 60px 5%; } }
        #family .phbook .flexitem:nth-child(5) h6 {
          margin-bottom: 40px; }
          #family .phbook .flexitem:nth-child(5) h6 img {
            width: 294px; }
        #family .phbook .flexitem:nth-child(5) p {
          line-height: 180%; }
          @media (max-width: 599px) {
            #family .phbook .flexitem:nth-child(5) p {
              text-align: left; } }
      #family .phbook .flexitem img {
        width: 100%; }

h3.family img {
  width: 192px; }

/* ---------- 家族写真3つのプラン -削除予定---------*/
#planlist {
  display: flex;
  justify-content: center; }
  @media (max-width: 599px) {
    #planlist {
      flex-wrap: wrap; } }
  #planlist a {
    border: solid #cddee4 2px;
    padding: 0 10px;
    margin-right: 1%; }
    @media (max-width: 599px) {
      #planlist a {
        box-sizing: border-box;
        width: 45%;
        margin: 10px 5px 0;
        padding: 0 5px;
        border: solid #cddee4 1px; } }
    @media (max-width: 599px) {
      #planlist a:first-of-type {
        order: 1; } }
    #planlist a:nth-of-type(2) {
      border: solid #cddee4 5px;
      flex-grow: 1.2; }
      @media (max-width: 599px) {
        #planlist a:nth-of-type(2) {
          order: 0;
          width: 90%;
          margin: 0 auto;
          flex-grow: 0;
          border: solid #cddee4 2px; } }
      @media (max-width: 599px) {
        #planlist a:nth-of-type(2) .box {
          margin: 10px 0; } }
      @media (max-width: 599px) {
        #planlist a:nth-of-type(2) .name img {
          width: 60% !important; } }
      #planlist a:nth-of-type(2) .summary {
        display: inline; }
    #planlist a:nth-of-type(3) {
      margin-right: 0; }
      @media (max-width: 599px) {
        #planlist a:nth-of-type(3) {
          order: 2; } }
      @media (max-width: 599px) {
        #planlist a:nth-of-type(3) .summary:nth-of-type(2) {
          display: none; } }
  #planlist .box {
    margin: 30px 0; }
    @media (max-width: 599px) {
      #planlist .box {
        margin: 10px 0; } }
    @media (max-width: 599px) {
      #planlist .box .name img {
        width: 100%; } }
    #planlist .box .price {
      text-align: center;
      margin: 0 auto 10px;
      color: #2c7e97 !important;
      font-size: 40px !important;
      padding: 20px 0 0; }
      @media (max-width: 599px) {
        #planlist .box .price {
          font-size: 28px !important; } }
      #planlist .box .price span {
        font-size: 13px; }
      @media (max-width: 1023px) {
        #planlist .box .price img {
          width: 100%;
          max-width: 260px; } }
    #planlist .box .price_holiday {
      color: #2c7e97;
      margin-bottom: 20px; }
      #planlist .box .price_holiday span {
        font-size: 12px; }
    #planlist .box .name, #planlist .box .price {
      margin-bottom: 10px; }
    @media (max-width: 599px) {
      #planlist .box .summary {
        font-size: 12px;
        margin: 0;
        text-align: center;
        padding: 0; } }
  #planlist a .box .campaign {
    border-width: 2px;
    border-color: #c7bda0;
    border-style: solid;
    background-color: #b0a274;
    -webkit-border-radius: 17px;
    -moz-border-radius: 17px;
    border-radius: 17px;
    padding: 2px 5px;
    color: #FFFFFF;
    margin-top: 10px; }
  #planlist a:hover {
    text-decoration: none;
    color: #79aec0; }

/* ---------- 家族写真4つのプラン ---------- */
#plan_idx {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 80px auto;
  max-width: 1200px; }
  #plan_idx a {
    padding: 10px 10px 30px;
    margin: 0 10px 20px;
    box-sizing: border-box;
    width: 45%;
    max-width: 520px;
    border: solid #C1D4DB 1px;
    text-align: center; }
    @media (max-width: 599px) {
      #plan_idx a {
        width: 90%;
        margin: 0 0 20px;
        padding: 10px 10px 20px; } }
    #plan_idx a:hover {
      text-decoration: none;
      background: #FFFDF4; }
    #plan_idx a .ttl {
      margin-top: 40px;
      font-size: 16px;
      color: #2c7e97;
      font-family: a-otf-ud-reimin-pr6n, Times New Roman, "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "メイリオ", Meiryo, serif; }
      @media (max-width: 599px) {
        #plan_idx a .ttl {
          margin-top: 30px; } }
      #plan_idx a .ttl img {
        margin-bottom: 15px; }
    #plan_idx a .txt {
      margin-top: 30px;
      font-size: 14px;
      color: #2c7e97;
      text-align: center;
      padding: 0 10px; }
      @media (max-width: 599px) {
        #plan_idx a .txt {
          font-size: 12px;
          margin-top: 20px; } }
    #plan_idx a .price {
      margin-top: 30px;
      font-size: 20px;
      color: #2c7e97; }
      @media (max-width: 599px) {
        #plan_idx a .price {
          margin-top: 20px; } }
      #plan_idx a .price span {
        font-size: 12px; }
  @media (max-width: 1023px) {
    #plan_idx .something_v .ttl img {
      width: 100%;
      max-width: 292px; } }
  @media (max-width: 1023px) {
    #plan_idx .japanese_stl .ttl img {
      width: 100%;
      max-width: 255px; } }
  @media (max-width: 1023px) {
    #plan_idx .favorite .ttl img {
      width: 100%;
      max-width: 250px; } }
  @media (max-width: 1023px) {
    #plan_idx .roulottes .ttl img {
      width: 100%;
      max-width: 272px; } }
  @media (max-width: 1023px) {
    #plan_idx .vories .ttl img {
      width: 100%;
      max-width: 290px; } }
  @media (max-width: 1023px) {
    #plan_idx .movie .ttl img {
      width: 100%;
      max-width: 292px; } }

/* --- portlait --- */
#portlait, #snap {
  margin: 0 auto;
  max-width: 1000px;
  width: 100%; }
  #portlait .subttl, #snap .subttl {
    color: #2c7e97; }
    @media (max-width: 1023px) {
      #portlait .subttl p, #snap .subttl p {
        margin-top: 40px; } }
  #portlait .price, #snap .price {
    margin-top: 50px;
    text-align: center; }
    @media (max-width: 1023px) {
      #portlait .price, #snap .price {
        margin: 40px auto;
        width: 90%;
        max-width: 382px;
        background-size: contain; } }
    @media (max-width: 599px) {
      #portlait .price img, #snap .price img {
        width: 90%; } }
    #portlait .price p, #snap .price p {
      font-size: 14px;
      color: #2c7e97; }
      #portlait .price p:first-of-type, #snap .price p:first-of-type {
        margin-bottom: 30px; }
      #portlait .price p span, #snap .price p span {
        font-size: 46px; }
        #portlait .price p span.wave, #snap .price p span.wave {
          font-size: 20px; }

h3.portlait {
  margin-top: 70px; }
  h3.portlait img {
    width: 270px; }

/* --- snap --- */
h3.snap {
  margin-top: 70px; }
  h3.snap img {
    width: 126px; }

/* --- webphoto --- */
#webphoto {
  margin: 85px auto 0;
  width: 90%; }
  @media (max-width: 1023px) {
    #webphoto {
      padding-top: 20px;
      border-top: dashed 1px #2c7e97; } }
  #webphoto p {
    color: #2C7E97;
    font-size: 18px; }

.enquiry {
  margin-top: 80px; }