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

	mainvisual

*********************/
#pageMainvisual {
  margin-bottom: 5%; }

@media screen and (max-width: 480px) {
  #pageMainvisual br {
    display: none; } }
/*********************

	contents

*********************/
h2 {
  text-align: center;
  margin-bottom: 40px; }

#plan1 {
  margin: 6% auto 3%;
  border-top: 1px solid #333;
  padding-top: 3%; }
  #plan1 p {
    margin-bottom: 40px; }
  #plan1 .img img {
    width: 100%;
    height: auto; }

#plan3 {
  margin: 50px auto;
  text-align: center; }
  #plan3 .img img {
    width: 100%;
    height: auto; }
  #plan3 .plan_box {
    width: 100%;
    margin: 50px auto 0; }
    #plan3 .plan_box li {
      float: left;
      width: 47.395833333333333%;
      margin-right: 5.208333333333333%;
      text-align: left; }
      #plan3 .plan_box li:nth-child(2) {
        margin-right: 0%; }
      #plan3 .plan_box li .ttl_img, #plan3 .plan_box li .read_txt {
        margin-bottom: 30px; }
      #plan3 .plan_box li .w100 {
        max-width: 455px;
        margin: 0 auto; }

/*=====
	plan3
=====*/
@media screen and (max-width: 768px) {
  #plan3 .plan_box li {
    margin-right: 0%;
    width: 100%;
    margin-bottom: 50px; }
    #plan3 .plan_box li:nth-child(2) {
      margin-right: 0%;
      width: 100%;
      margin-bottom: 50px; } }
.panorama_window {
  position: relative;
  margin-top: 50px;
  text-align: left;
  padding-bottom: 5%; }
  .panorama_window .txtbox {
    float: right;
    width: 64%;
    padding: 3% 10% 5%;
    background: #163b54;
    box-sizing: border-box; }
    .panorama_window .txtbox h5 {
      font-size: 20px;
      margin-bottom: 0; }

.window_img {
  position: absolute;
  z-index: 2;
  top: -20%;
  left: 0;
  width: 42%; }
  .window_img img {
    width: 100%;
    max-width: 410px;
    height: auto; }

@media screen and (max-width: 768px) {
  .window_img {
    top: 0; }

  .panorama_window .txtbox {
    padding-right: 2em; }
    .panorama_window .txtbox h5 {
      font-size: 15px; } }
@media screen and (max-width: 480px) {
  .window_img {
    position: static;
    width: 80%;
    margin: 0 auto -5%; }

  .panorama_window .txtbox {
    float: none;
    width: 100%;
    padding: 2em; } }
/*=====
plan class
=====*/
.plan_class {
  width: 94%;
  max-width: 930px;
  border-bottom: 1px solid #767676;
  margin: 50px auto 30px;
  padding: 0; }
  .plan_class.ex {
    border-color: #9f967d; }
  .plan_class h3 {
    margin: 0;
    padding: 0; }
  .plan_class img {
    display: block; }

/*=====
	thum
=====*/
.thum * {
  box-sizing: border-box;
  transition: all .5s;
  -webkit-transition: all .5s; }

.btn {
  overflow: hidden;
  max-width: 960px;
  width: 96%;
  margin: 0 auto 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: center; }
  .btn > li {
    width: 50%;
    /*float: left;*/
    padding: 15px; }

.thum figure {
  border: 1px solid #555;
  position: relative;
  margin: 0;
  overflow: hidden;
  background: #222;
  /*background-image: -moz-linear-gradient( 90deg, rgb(17,17,17) 0%, rgb(51,51,51) 100%);
  background-image: -webkit-linear-gradient( 90deg, rgb(17,17,17) 0%, rgb(51,51,51) 100%);
  background-image: -ms-linear-gradient( 90deg, rgb(17,17,17) 0%, rgb(51,51,51) 100%);*/ }
.thum .image {
  position: absolute;
  opacity: 0.3;
  top: 50%;
  left: 60%;
  transform: translateY(-50%) translateX(-50%) rotate(-30deg);
  -webkit-transform: translateY(-50%) translateX(-50%) rotate(-30deg); }
.thum .spec {
  /*padding: 2em 1em 1em;*/
  padding: 4.5em 1em 3.5em; }
  .thum .spec.loan_btn {
    padding: 3.2em 1em 2.2em; }
  .thum .spec.loan_btn2 {
    /*padding: 2em 1em 1em;*/
    padding: 2em 1em 0.9em; }
  .thum .spec.loan_btn3 {
    padding: 2.8em 1em 2.7em; }
  .thum .spec.loan_btn4 {
    padding: 4.0em 1em 3.8em; }
  .thum .spec li {
    display: inline-block;
    margin-bottom: 7px;
    font-size: 13px; }
    .thum .spec li:first-child {
      font-size: 19px; }
    .thum .spec li.li_br {
      display: block; }
      .thum .spec li.li_br .btn_loan2 {
        display: inline-block;
        margin-right: 5px; }
.thum a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute; }
.thum figure:hover {
  background: #323f5b; }
.thum .ex figure:hover {
  background: #423f35; }
.thum .st figure:hover {
  background: #154d6c; }
.thum .icon {
  position: absolute;
  top: 0;
  right: 0;
  /*padding: 10% 5%;*/
  /*margin: -10% -5%;*/
  background: rgba(17, 61, 148, 0.7);
  /*transform: rotate(-30deg);
  -webkit- transform: rotate(-30deg);
  */
  position: static;
  margin: 0;
  padding: 10px; }
  .thum .icon img {
    /*margin: 10% 10% 0 -15%;*/
    margin: 0; }
.thum .ex .icon {
  background: rgba(138, 122, 61, 0.7); }
.thum .st .icon {
  background: rgba(41, 154, 215, 0.7); }

@media screen and (max-width: 768px) {
  .thum .icon {
    transform: rotate(0);
    -webkit-transform: rotate(0);
    position: static;
    margin: 0;
    padding: 10px; }
    .thum .icon img {
      margin: 0; } }
@media screen and (max-width: 480px) {
  .btn > li {
    width: 100%;
    padding: 10px; } }
/*=====
	plan2
=====*/
#plan2 {
  text-align: center;
  /*margin-top: -54px;*/
  padding-top: 54px;
  max-width: 1300px;
  margin: -54px auto 0; }

.roomplan_inner {
  /*padding-bottom: 2em;
  background: #1f1f1f;*/ }

#plan2 .plan {
  padding: 5% 20px;
  /*border-bottom: 10px solid #000;*/
  background: #1f1f1f;
  margin-bottom: 10px; }

.zumen {
  max-width: 860px;
  margin: 30px auto 0; }

.spec li {
  display: inline-block;
  font-size: 18px;
  line-height: 1.1;
  margin: 0 5px;
  font-family: Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ ゴシック" , "MS PGothic" , sans-serif; }
  .spec li span {
    font-size: 1.7em; }
.spec .menu {
  vertical-align: text-bottom;
  padding: 3px;
  font-size: 12px;
  border: 1px solid #eee; }
.spec .btn_loan, .spec .btn_loan2 {
  padding: 5px;
  border: 1px solid #fff;
  text-align: center; }
.spec .btn_loan span {
  font-size: 1em; }

.price {
  padding: 0.25rem 0.5rem;
  width: 40%;
  border: thin solid #C5AD65;
  color: #C5AD65;
  margin: auto; }
  @media screen and (max-width: 600px) {
    .price {
      width: 80%; } }

.view {
  width: 40%;
  margin: 0.5rem auto 0;
  padding: 0.25rem 0.5rem;
  border: thin solid #C5AD65;
  color: #C5AD65; }
  @media screen and (max-width: 600px) {
    .view {
      width: 80%; } }

.view-list {
  width: 96%;
  max-width: 800px;
  margin: 1rem auto 0; }
  .view-list li {
    width: 100%;
    margin-bottom: 1rem; }
    .view-list li:last-child {
      margin-bottom: 0; }
    .view-list li .note {
      text-align: right; }

.btn_printpage {
  text-align: center;
  margin: 40px auto 0;
  max-width: 260px; }
  .btn_printpage a {
    display: inline-block;
    box-sizing: border-box;
    border: 1px solid #666666;
    padding: 14px 0;
    width: 100%;
    transition: 0.2s linear border; }
    .btn_printpage a:hover {
      border: 1px solid #fff; }

#kankyo_btn {
  display: inline-block;
  padding: 1em 6em;
  text-align: center;
  margin: 40px auto 20px;
  border: 1px solid #666666;
  /*background-color: #999999;*/
  color: #fff;
  cursor: pointer;
  transition: 0.2s linear border;
  /*font-weight: bold;*/ }
  #kankyo_btn:hover {
    border: 1px solid #FFFFFF; }

#kankyo {
  margin: 5% auto; }

.others {
  background-color: #000;
  max-width: 960px;
  margin: auto; }
  .others .note {
    text-align: left; }
    .others .note .icon_floorHeating {
      display: inline-block;
      background: #4B4B4B;
      width: 20px;
      height: 10px;
      margin-bottom: -1px; }
    .others .note .icon_e_storage {
      display: inline-block;
      background: #565247;
      width: 20px;
      height: 10px;
      margin-bottom: -1px;
      box-sizing: border-box;
      border: 1px solid #666; }
    .others .note .icon_p_storage {
      display: inline-block;
      background: #323C44;
      width: 20px;
      height: 10px;
      margin-bottom: -1px;
      box-sizing: border-box;
      border: 1px solid #666; }
    .others .note .icon_s_storage {
      display: inline-block;
      background: #27343C;
      width: 20px;
      height: 10px;
      margin-bottom: -1px;
      box-sizing: border-box;
      border: 1px solid #666; }

.loan {
  display: inline-block;
  vertical-align: top;
  width: 27%;
  margin: 30px auto; }

.zumen_loan {
  display: inline-block;
  width: 100%;
  margin: 0 -25%; }

@media screen and (max-width: 1300px) {
  .others {
    width: 90%;
    margin: 0 auto; } }
@media screen and (max-width: 960px) {
  .thum .spec li:first-child {
    display: block; } }
@media screen and (max-width: 768px) {
  .btn_printpage {
    display: none; }

  .loan {
    display: block;
    vertical-align: top;
    width: 100%; }

  .zumen_loan {
    display: block;
    width: 100%;
    margin: 30px auto 0; } }
@media screen and (max-width: 672px) {
  .thum .spec {
    padding: 4em 1em 2.5em; } }
@media screen and (max-width: 527px) {
  .thum .spec {
    padding: 4.8em 1em 4.2em; } }
@media screen and (max-width: 480px) {
  #plan2 .plan {
    padding: 40px 20px 50px;
    overflow: hidden; }

  .spec li {
    font-size: 15px; }

  .narrow .zumen img {
    width: 140%;
    margin-left: -20%; }

  .thum .spec {
    padding: 3.5em 1em 2em; } }
.popup .tab {
  background: #ccc;
  padding: 15px 0;
  letter-spacing: -0.4em; }
  .popup .tab li {
    letter-spacing: normal;
    display: inline-block;
    width: 48%;
    max-width: 300px;
    margin: 1%;
    box-sizing: border-box;
    border: 1px solid #555;
    background: linear-gradient(to bottom, #3c3c3c 0%, #0f0f0f 100%); }
  .popup .tab a {
    display: block;
    padding: 10px; }
  .popup .tab li:not(.current) a:hover {
    background: linear-gradient(to top, #3c3c3c 0%, #0f0f0f 100%); }
  .popup .tab .current a {
    color: #A49557; }
    .popup .tab .current a::before {
      content: "▼";
      padding: 0 1em 0 0; }

@media screen and (max-width: 480px) {
  .popup .tab {
    font-size: 11px; } }
/*=====
	e110a
=====*/
#plan2 .e-110a {
  text-align: center;
  /*margin-top: -54px;*/
  padding-top: 54px;
  max-width: 1300px;
  margin: -54px auto 0; }
  #plan2 .e-110a .plan {
    padding: 5% 20px;
    background: #FFF;
    margin-bottom: 10px; }

.e-110a .spec {
  color: #a99b55; }

.e110a_main {
  position: relative; }
  .e110a_main .note {
    position: absolute;
    bottom: 0;
    right: 5px;
    color: #FFF; }
  .e110a_main img {
    width: 100%;
    height: auto; }

.e-110a .view {
  margin: 0 auto;
  /*max-width: 960px;*/
  padding-top: 3em;
  background-color: #FFFFFF; }
  .e-110a .view .note {
    color: #333;
    margin-top: 5px;
    margin-bottom: 0;
    text-align: left; }
.e-110a .model {
  max-width: 960px;
  margin: 0 auto;
  margin-top: 2em;
  margin-bottom: 2em; }

.equ {
  max-width: 960px;
  margin: 0 auto;
  margin-top: 5em; }
  .equ .h22 {
    margin-left: -4px; }
    .equ .h22 img {
      height: 22px;
      width: auto;
      margin: 4px; }
  .equ .box1 {
    float: left;
    width: 47.916666666%;
    max-width: 460px; }
  .equ .box2 {
    float: right;
    width: 47.916666666%;
    max-width: 460px; }
    .equ .box2 li {
      float: left;
      width: 45.652173913%;
      margin-right: 8.695652173%; }
      .equ .box2 li:nth-child(2n+2) {
        margin-right: 0; }
  .equ .box3 {
    width: 100%;
    max-width: 960px;
    margin: 0 auto; }
    .equ .box3 li {
      float: left;
      width: 21.875%;
      margin-right: 4.166666666%; }
      .equ .box3 li:nth-child(4n+4) {
        margin-right: 0; }
  .equ .img_large {
    width: 100%;
    max-width: 460px;
    position: relative; }
  .equ .img {
    width: 100%;
    max-width: 210px;
    position: relative; }
  .equ .img_large .note, .equ .img .note {
    position: absolute;
    bottom: 5px;
    right: 5px;
    color: #999; }
  .equ .ttl {
    padding-bottom: 10px;
    border-bottom: 1px solid #999;
    color: #000;
    text-align: left;
    font-weight: bold; }
  .equ .read {
    font-size: 12px;
    line-height: 1.6em;
    color: #000;
    text-align: left; }
    .equ .read .note {
      color: #000; }

@media screen and (max-width: 580px) {
  .equ .box1, .equ .box2 {
    float: none;
    width: 100%; }
  .equ .box3 li {
    float: left;
    width: 45.652173913%;
    margin-right: 8.695652173%; }
    .equ .box3 li:nth-child(2n+2) {
      margin-right: 0; } }
@media screen and (max-width: 480px) {
  .equ .h22 img {
    height: 16px;
    width: auto; } }
#plan #footer_info {
  display: block; }

/*=====
	e140b
=====*/
#plan2 .e-140b {
  text-align: center;
  /*margin-top: -54px;*/
  padding-top: 54px;
  max-width: 1300px;
  margin: -54px auto 0; }
  #plan2 .e-140b .plan {
    padding: 5% 20px;
    background: #FFF;
    margin-bottom: 10px; }

.e-140b .spec {
  color: #a99b55; }

.e140b_main {
  position: relative; }
  .e140b_main .note {
    position: absolute;
    bottom: 0;
    right: 5px;
    color: #FFF; }
  .e140b_main img {
    width: 100%;
    height: auto; }

.e-140b .view {
  margin: 0 auto;
  /*max-width: 960px;*/
  padding-top: 3em;
  background-color: #FFFFFF; }
  .e-140b .view .note {
    color: #333;
    margin-top: 5px;
    margin-bottom: 0;
    text-align: left; }
.e-140b .model {
  max-width: 960px;
  margin: 0 auto;
  margin-top: 2em;
  margin-bottom: 2em; }

/*=====
	plan4
=====*/
#plan4 {
  text-align: center;
  padding-top: 54px;
  max-width: 1300px;
  margin: -54px auto 0; }

#plan4 .plan {
  padding: 5% 20px;
  /*background: #1f1f1f;*/
  margin-bottom: 10px; }

.zumen {
  max-width: 860px;
  margin: 30px auto 0; }

.spec li {
  display: inline-block;
  font-size: 18px;
  line-height: 1.1;
  margin: 0 5px;
  font-family: Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ ゴシック" , "MS PGothic" , sans-serif; }
  .spec li span {
    font-size: 1.7em; }
.spec .menu {
  vertical-align: text-bottom;
  padding: 3px;
  font-size: 12px;
  border: 1px solid #eee; }
.spec .btn_loan, .spec .btn_loan2 {
  padding: 5px;
  border: 1px solid #fff;
  text-align: center; }
.spec .btn_loan span {
  font-size: 1em; }

.price {
  padding: 0.25rem 0.5rem;
  width: 40%;
  border: thin solid #C5AD65;
  color: #C5AD65;
  margin: auto; }
  @media screen and (max-width: 600px) {
    .price {
      width: 80%; } }

.view {
  width: 40%;
  margin: 0.5rem auto 0;
  padding: 0.25rem 0.5rem;
  border: thin solid #C5AD65;
  color: #C5AD65; }
  @media screen and (max-width: 600px) {
    .view {
      width: 80%; } }

.view-list {
  width: 96%;
  max-width: 800px;
  margin: 1rem auto 0; }
  .view-list li {
    width: 100%;
    margin-bottom: 1rem; }
    .view-list li:last-child {
      margin-bottom: 0; }
    .view-list li .note {
      text-align: right; }

.btn_printpage {
  text-align: center;
  margin: 40px auto 0;
  max-width: 260px; }
  .btn_printpage a {
    display: inline-block;
    box-sizing: border-box;
    border: 1px solid #666666;
    padding: 14px 0;
    width: 100%;
    transition: 0.2s linear border; }
    .btn_printpage a:hover {
      border: 1px solid #fff; }

#kankyo_btn {
  display: inline-block;
  padding: 1em 6em;
  text-align: center;
  margin: 40px auto 20px;
  border: 1px solid #666666;
  color: #fff;
  cursor: pointer;
  transition: 0.2s linear border; }
  #kankyo_btn:hover {
    border: 1px solid #FFFFFF; }

#kankyo {
  margin: 5% auto; }

.others {
  background-color: #000;
  max-width: 960px;
  margin: auto; }
  .others .note {
    text-align: left; }
    .others .note .icon_floorHeating {
      display: inline-block;
      background: #4B4B4B;
      width: 20px;
      height: 10px;
      margin-bottom: -1px; }
    .others .note .icon_e_storage {
      display: inline-block;
      background: #565247;
      width: 20px;
      height: 10px;
      margin-bottom: -1px;
      box-sizing: border-box;
      border: 1px solid #666; }
    .others .note .icon_p_storage {
      display: inline-block;
      background: #323C44;
      width: 20px;
      height: 10px;
      margin-bottom: -1px;
      box-sizing: border-box;
      border: 1px solid #666; }
    .others .note .icon_s_storage {
      display: inline-block;
      background: #27343C;
      width: 20px;
      height: 10px;
      margin-bottom: -1px;
      box-sizing: border-box;
      border: 1px solid #666; }

.loan {
  display: inline-block;
  vertical-align: top;
  width: 27%;
  margin: 30px auto; }

.zumen_loan {
  display: inline-block;
  width: 100%;
  margin: 0 -25%; }

@media screen and (max-width: 1300px) {
  .others {
    width: 90%;
    margin: 0 auto; } }
@media screen and (max-width: 960px) {
  .thum .spec li:first-child {
    display: block; } }
@media screen and (max-width: 768px) {
  .btn_printpage {
    display: none; }

  .loan {
    display: block;
    vertical-align: top;
    width: 100%; }

  .zumen_loan {
    display: block;
    width: 100%;
    margin: 30px auto 0; } }
@media screen and (max-width: 672px) {
  .thum .spec {
    padding: 4em 1em 2.5em; } }
@media screen and (max-width: 527px) {
  .thum .spec {
    padding: 4.8em 1em 4.2em; } }
@media screen and (max-width: 480px) {
  #plan2 .plan {
    padding: 40px 20px 50px;
    overflow: hidden; }

  .spec li {
    font-size: 15px; }

  .narrow .zumen img {
    width: 140%;
    margin-left: -20%; }

  .thum .spec {
    padding: 3.5em 1em 2em; } }
.popup .tab {
  background: #ccc;
  padding: 15px 0;
  letter-spacing: -0.4em; }
  .popup .tab li {
    letter-spacing: normal;
    display: inline-block;
    width: 48%;
    max-width: 300px;
    margin: 1%;
    box-sizing: border-box;
    border: 1px solid #555;
    background: linear-gradient(to bottom, #3c3c3c 0%, #0f0f0f 100%); }
  .popup .tab a {
    display: block;
    padding: 10px; }
  .popup .tab li:not(.current) a:hover {
    background: linear-gradient(to top, #3c3c3c 0%, #0f0f0f 100%); }
  .popup .tab .current a {
    color: #A49557; }
    .popup .tab .current a::before {
      content: "▼";
      padding: 0 1em 0 0; }

@media screen and (max-width: 480px) {
  .popup .tab {
    font-size: 11px; } }
/* ========== ポップアップ ========== */
.c_ex #container {
  /*background: #fff;*/ }
  .c_ex #container .mt1 {
    margin-top: 1rem; }
  .c_ex #container .page-ttl {
    margin: 3rem auto 0 auto;
    width: 80%;
    max-width: 500px; }
    .c_ex #container .page-ttl img {
      width: 100%;
      height: auto; }
  .c_ex #container #plan2 .roomplan_inner {
    background: #fff; }
  .c_ex #container #plan2 .plan {
    /*background: #fff;*/
    background: none; }
  .c_ex #container #plan4 .spec ul li {
    color: #000; }
  .c_ex #container #plan4 .spec p {
    color: #000; }
  .c_ex #container #plan4 .spec .price {
    color: #C5AD65;
    /*border: thin solid #000;*/ }
  .c_ex #container #plan4 .spec .view {
    color: #C5AD65;
    /*border: thin solid #000;*/ }
  .c_ex #container #plan4 .others {
    margin-top: 2rem;
    background: none; }
    .c_ex #container #plan4 .others .note {
      color: #000; }
  .c_ex #container .others {
    margin-top: 2rem; }
    .c_ex #container .others .note .icon_floorHeating {
      background: #e6e0cd; }
    .c_ex #container .others .note .icon_e_storage {
      background: #9fd2d5;
      border: none; }
  .c_ex #container .c_ex-ttl {
    margin-top: 3rem;
    padding-bottom: .25rem;
    border-bottom: solid 1px #a49755;
    text-align: left; }
    .c_ex #container .c_ex-ttl img {
      height: 24px;
      width: auto; }
    @media screen and (max-width: 580px) {
      .c_ex #container .c_ex-ttl {
        margin-top: 1rem; }
        .c_ex #container .c_ex-ttl img {
          height: 18px; } }
  .c_ex #container .bnr {
    margin: 3rem auto 0 auto;
    width: 90%;
    max-width: 960px;
    padding-bottom: 3rem; }
    .c_ex #container .bnr img {
      width: 100%;
      height: auto;
      border: solid 1px #a49755; }
  @media screen and (max-width: 580px) {
    .c_ex #container .thum .spec li {
      display: block; } }

.interior {
  background: #000;
  font-family: "Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif; }
  .interior section {
    width: 90%;
    max-width: 1100px;
    margin: 3rem auto 0 auto; }
  .interior *, .interior *:before, .interior *:after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
  .interior .pc {
    display: block; }
    @media screen and (max-width: 580px) {
      .interior .pc {
        display: none; } }
  .interior .sp {
    display: none; }
    @media screen and (max-width: 580px) {
      .interior .sp {
        display: block; } }
  .interior .note {
    font-size: .625rem;
    line-height: 1.5;
    margin-top: 1rem; }
  .interior .img-box {
    position: relative; }
    .interior .img-box img {
      width: 100%;
      height: auto; }
  .interior .page-ttl {
    width: 90%;
    max-width: 400px;
    margin: 3rem auto 0 auto; }
    .interior .page-ttl img {
      width: 100%;
      height: auto; }
  .interior .maincopy {
    margin-top: 2rem;
    text-align: center; }
    .interior .maincopy img {
      height: 2rem;
      width: auto; }
    @media screen and (max-width: 580px) {
      .interior .maincopy img {
        height: 1.5rem; } }
  .interior .lead {
    text-align: center;
    margin: 3rem auto 0 auto;
    font-size: 1rem;
    line-height: 2; }
    @media screen and (max-width: 580px) {
      .interior .lead {
        font-size: .9rem; } }
  .interior .int-box01 {
    position: relative;
    margin: 3rem auto 0 auto; }
    .interior .int-box01 .img-box {
      width: 60%;
      margin-left: 40%; }
    .interior .int-box01 .tatoe {
      width: 100%;
      position: absolute;
      top: 50%;
      transform: translateY(-50%); }
      .interior .int-box01 .tatoe .copy {
        width: 100%; }
        .interior .int-box01 .tatoe .copy img {
          display: inline-block;
          height: 2rem;
          width: auto; }
      .interior .int-box01 .tatoe ul li {
        list-style-position: inside;
        list-style-type: disc;
        margin: 1rem auto 0 0; }
    @media screen and (max-width: 580px) {
      .interior .int-box01 .img-box {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        margin-left: 0; }
      .interior .int-box01 .tatoe {
        position: relative;
        top: auto;
        transform: none;
        padding-bottom: 5%; }
        .interior .int-box01 .tatoe .copy img {
          height: 1.25rem; }
        .interior .int-box01 .tatoe ul {
          margin-left: 1rem; }
          .interior .int-box01 .tatoe ul li {
            list-style-position: outside; } }
  .interior .ttl01 {
    width: 85%;
    max-width: 500px;
    margin: auto; }
  .interior .list01 {
    width: 100%;
    margin: 2rem auto 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch; }
    .interior .list01 li {
      width: 45%;
      margin-top: 1rem; }
      .interior .list01 li .li-ttl {
        text-align: center;
        padding: .5rem; }
        .interior .list01 li .li-ttl img {
          height: 1.5rem;
          width: auto; }
      .interior .list01 li .img-box {
        width: 100%; }
    @media screen and (max-width: 580px) {
      .interior .list01 li {
        width: 48%; }
        .interior .list01 li .li-ttl img {
          height: 1rem; } }
  .interior .eg {
    width: 100%;
    margin: 3rem auto 0 auto;
    padding: .5rem;
    background: #222; }
    .interior .eg .eg-inner {
      padding: 1rem;
      border: solid 1px #000;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-box-align: stretch;
      -ms-flex-align: stretch;
      align-items: stretch; }
      .interior .eg .eg-inner .eg-txt {
        width: 48%; }
        .interior .eg .eg-inner .eg-txt .eg-ttl01 {
          color: #AE9752;
          font-size: .9rem;
          padding-bottom: 2rem; }
        .interior .eg .eg-inner .eg-txt .eg-ttl02 {
          border-bottom: solid 1px #999;
          padding-bottom: 1rem;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -ms-flex-wrap: wrap;
          flex-wrap: wrap;
          -webkit-box-pack: justify;
          -ms-flex-pack: justify;
          justify-content: space-between;
          -webkit-box-align: stretch;
          -ms-flex-align: stretch;
          align-items: stretch; }
          .interior .eg .eg-inner .eg-txt .eg-ttl02 .img-box {
            width: 45%; }
          .interior .eg .eg-inner .eg-txt .eg-ttl02 .eg-name {
            width: 45%;
            font-size: .75rem; }
        .interior .eg .eg-inner .eg-txt .eg-lead {
          margin-top: 1rem; }
      .interior .eg .eg-inner .eg-list {
        width: 48%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch; }
        .interior .eg .eg-inner .eg-list li {
          width: 48%; }
          .interior .eg .eg-inner .eg-list li .img-box {
            width: 100%; }
            .interior .eg .eg-inner .eg-list li .img-box .cap {
              margin-top: .25rem;
              text-align: left;
              font-size: .625rem;
              line-height: 1.5; }
      @media screen and (max-width: 580px) {
        .interior .eg .eg-inner .eg-txt {
          width: 100%; }
          .interior .eg .eg-inner .eg-txt .eg-ttl02 .img-box {
            width: 100%; }
          .interior .eg .eg-inner .eg-txt .eg-ttl02 .eg-name {
            width: 100%;
            margin-top: .5rem; }
        .interior .eg .eg-inner .eg-list {
          width: 100%;
          /*li{
            width: 100%;
            margin-top: 1rem;
          }*/ } }
  .interior .item-ttl {
    width: 100%;
    position: relative;
    height: 1rem; }
    .interior .item-ttl span {
      padding: 0 1rem;
      font-size: .9rem;
      background: #000;
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      z-index: 3;
      line-height: 1; }
      .interior .item-ttl span img {
        height: 1rem;
        width: auto; }
    .interior .item-ttl::after {
      content: "";
      background: #999;
      height: 1px;
      width: 100%;
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%); }
    @media screen and (max-width: 580px) {
      .interior .item-ttl span img {
        height: .9rem; } }
  .interior .item-list {
    width: 100%;
    margin: 2rem auto 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    /*@media screen and (max-width: 480px) {
      li{
        width: 100%;
      }
    }*/ }
    .interior .item-list li {
      width: 23%;
      margin-top: 1rem; }
      .interior .item-list li .img-box {
        width: 100%; }
        .interior .item-list li .img-box .cap {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          background: rgba(0, 0, 0, 0.7);
          color: #fff;
          text-align: center;
          padding: .5rem; }
          .interior .item-list li .img-box .cap img {
            display: block;
            height: .9rem;
            width: auto;
            margin: auto; }
    @media screen and (max-width: 580px) {
      .interior .item-list li {
        width: 48%; }
        .interior .item-list li .img-box .cap img {
          height: .825rem; } }
  .interior .ttl02 {
    width: 100%;
    max-width: 180px;
    margin: 0 auto; }
  .interior .flow {
    width: 100%;
    margin: 3rem auto 0 auto; }

/* view2 */
.view2 {
  display: flex;
  justify-content: center;
  max-width: 1210px;
  margin: 3rem auto 0; }
  .view2 .box {
    margin: 0 1%; }
  @media screen and (max-width: 480px) {
    .view2 {
      flex-direction: column; }
      .view2 .box {
        margin: 0 auto 1rem; }
        .view2 .box:last-child {
          margin-bottom: 0; } }