@charset "utf-8";

/* パソコンで出してスマホは出さない */
.pc {
  display: inline !important;
}

.sp {
  display: none !important;
}

/* スマホは出してパソコンは出さない */
@media screen and (max-width: 736px) {
  .pc {
    display: none !important;
  }

  .sp {
    display: inline !important;
  }
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  /* フォント設定もここで */
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  font-feature-settings: "palt";
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

img {
  vertical-align: bottom;
  border: none;
  -webkit-backface-visibility: hidden;
  image-rendering: -webkit-optimize-contrast;
}

ul,
li,
dl,
dt,
dd,
ol,
p {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

a {
  color: #FFF;
  text-decoration: none;
}

/*リセット
------------------------------*/
.clearFix:after {
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
  content: ".";
  zoom: 1;
}

.clearFix {
  min-height: 1px;
}

* html .clearFix {
  height: 1px;
}


/***** ヘッダー *****/
.waku {
  margin: 2% 7%;
  position: relative;
}


/* メニュー */

.logo {
  width: 22%;
  margin: 12% 0 0 20%;
}

.logo img {
  width: 100%;
}

.logo:hover {
  opacity: 0.7;
}

.menu {
  background-color: #1E5A73;
  width: 28%;
  position: absolute;
  top: 0;
  left: 0;
}

.menu_box {
  margin-left: 20%;
  padding: 10% 0;
  font-weight: 600;
}

.menu_box a {
  text-decoration: none;
  background-image: linear-gradient(to right,
      #CFE3FF,
      #CFE3FF 50%,
      #fff 50%);
  background-size: 200% 100%;
  background-position: -100%;
  display: inline-block;
  padding: 2px 0;
  position: relative;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 0.3s ease-in-out;
}

.menu_box a:before {
  content: '';
  background: #CFE3FF;
  display: block;
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 1px;
  transition: all 0.3s ease-in-out;
}

.menu_box a:hover {
  background-position: 0;
  cursor: pointer;
}

.menu_box a:hover::before {
  width: 100%;
}

.menu ul {
  color: white;
  font-size: 1.4vw;
  font-size: max(1.4vw,13px);
}

.menu li {
  padding: 3% 0;
}


/* トップ画像 */
.top {
  width: 76%;
  position: relative;
  padding: 5% 0;
  position: absolute;
  top: 0;
  right: 0;
}

.top p {
  writing-mode: vertical-rl;
  position: absolute;
  top: 3%;
  right: 5%;
  font-size: 2.3vw;
  font-family: "sawarabi-mincho", sans-serif;
  font-weight: 500;
  font-style: normal;
  line-height: 1.5;
  color: #1E5A73;
}

.wf-loading {
  opacity: 0;
}

.pb {
  position: absolute;
  bottom: 0;
  left: 47%;
  width: 28.5%;
}

.recruitment {
  color: red;
  font-size: 25px;
  text-align: center;
}

.comfortable_life img {
  width: 40%;
  min-width: 350px;
  margin: auto;
  display: block;
  padding-top: 58%;
}

.comfortable_life p {
  width: 60%;
  font-size: calc(13px + 4 * ((100vw - 737px) / 263));
  font-weight: bold;
  line-height: 2;
  margin: auto;
  display: block;
  padding: 3% 0 8% 0;
  text-align: justify;
  text-align-last: left;
}

.top img,
.pb img {
  width: 100%;
}

/***** ルームプラン *****/
.roomplan {
  text-align: center;
  margin: 0 auto;
  padding: 8% 0 18% 0;
  background-color: #F9F7ED;
}

.subtitle {
  font-size: calc(13px + 3 * ((100vw - 737px) / 263));
  letter-spacing: 0.3em;
  color: #B47D32;
}

.each_title {
  font-size: calc(20px + 5 * ((100vw - 737px) / 263));
  letter-spacing: 0.3em;
  color: #B47D32;
}

.title_back {
  width: 90%;
  height: 1px;
  background-color: #B47D32;
  border: none;
  margin: 1% auto;
}

.each_title_japan {
  font-size: calc(13px + 3 * ((100vw - 737px) / 263));
  letter-spacing: 0.3em;
  color: #B47D32;
}

/*ルームプラン メイン*/
.select {
  font-size: calc(13px + 3 * ((100vw - 737px) / 263));
  text-align: left;
  margin: 5% 0 0 21%;
}

.cp_tab *,
.cp_tab *:before,
.cp_tab *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.cp_tab {
  margin: -2% 0 5% 0;
  position: relative;
  caret-color: transparent;
}

.cp_tab input[type='radio'] {
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  outline: none;
  background: none;
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.cp_tab .cp_tabpanel {
  display: none;
}

/*ルームプラン メイン画像サイズ*/
.cp_tabpanel img {
  width: 100%;
}

.cp_tab>input:first-child:checked~.cp_tabpanels>.cp_tabpanel:first-child,
.cp_tab>input:nth-child(3):checked~.cp_tabpanels>.cp_tabpanel:nth-child(2),
.cp_tab>input:nth-child(5):checked~.cp_tabpanels>.cp_tabpanel:nth-child(3),
.cp_tab>input:nth-child(7):checked~.cp_tabpanels>.cp_tabpanel:nth-child(4),
.cp_tab>input:nth-child(9):checked~.cp_tabpanels>.cp_tabpanel:nth-child(5),
.cp_tab>input:nth-child(11):checked~.cp_tabpanels>.cp_tabpanel:nth-child(6) {
  display: block;
}

.cp_tab .cp_tabpanels {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  display: block;
}

.cp_tab>input+label {
  position: relative;
  z-index: 100;
  left: 20%;
  width: 10%;
  display: block;
  cursor: pointer;
  padding-top: 0.1%;
  margin-top: 3%;
}

.cp_tab label img {
  width: 100%;
}

input[type=radio]+label:before {
  content: "";
  display: block;
  background-size: cover;
  width: 100%;
  height: 0;
  background-repeat: no-repeat;
  padding-top: 52.33644859813084%;
  margin-top: 3%;
}

input[type=radio][value="atype"]+label:before {
  background-image: url(../../image/f_sumiyoshitaisha/a_off.png);
}

input[type=radio][value="btype"]+label:before {
  background-image: url(../../image/f_sumiyoshitaisha/b_off.png);
}

input[type=radio][value="ctype"]+label:before {
  background-image: url(../../image/f_sumiyoshitaisha/c_off.png);
}

input[type=radio]:checked+label::before {
  background-color: #B47D32;
  box-sizing: border-box;
}


/*****フォトギャラリー*****/
.Photogallery {
  text-align: center;
  margin: 0 auto;
  padding: 8% 0;
}

.each_title2 {
  text-align: center;
  font-size: calc(20px + 5 * ((100vw - 737px) / 263));
  letter-spacing: 0.3em;
  color: #1E5A73;
}

.title_back2 {
  text-align: center;
  width: 90%;
  height: 1px;
  background-color: #1E5A73;
  border: none;
  margin: 1% auto;
}

.each_title_japan2 {
  text-align: center;
  font-size: calc(13px + 3 * ((100vw - 737px) / 263));
  letter-spacing: 0.3em;
  color: #1E5A73;
}

.photo_back {
  height: calc(30px + 10 * ((100vw - 737px) / 263));
  background-color: #1E5A73;
  border: none;
  margin: -18% 0 10% 0;
}

.photo3 {
  display: flex;
  justify-content: space-between;
  margin: 1% 15%;
}

.closet {
  width: 70%;
  right: 0;
}

.leaf {
  width: 70%;
  margin-top: 13%;
}

.book {
  width: 80%;
  margin-top: 5%;
}

.attention {
  font-size: calc(13px + 2 * ((100vw - 737px) / 263));
  text-align: center;
  padding: 2% 0;
}

.photo360 {
  width: 40%;
  text-align: center;
  margin: 10% auto;
}

.photo360:hover {
  box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.5);
  transform: translateY(-5px);
  cursor: pointer;
}

/* パノラマ 本体 */
.pano_box {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 0 0 0 0;
  text-align: center;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.pano_wrap {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.pano_mainImg_box {
  width: 100%;
  height: 100%;
  margin: 0;
  background-color: #fff;
}

#photosphere {
  width: 100%;
  height: 100%;
}

.slider_box {
  width: 45%;
  margin: 0 auto;
  margin-bottom: 5%;
}

.photo3 img,
.photo360 img,
.slider img {
  width: 100%;
}

/*****設備*****/
.equipment {
  text-align: center;
  margin: 0 auto;
  padding: 8% 0;
  background-color: #F9F7ED;
}

.faci_box1,
.faci_box2 {
  width: 80%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 auto;
}

.box {
  width: 45%;
  display: flex;
  margin: 5% 0;
}

.equipment_box,
.equipment_box img {
  width: 100%;
}

.name1_1,
.name1_2,
.name1_3,
.name1_4 {
  position: relative;
  z-index: 2;
  font-size: calc(13px + 4 * ((100vw - 737px) / 263));
  margin-top: calc(-45% + 12 * ((100vw - 737px) / 263));
  margin-left: 42%;
  font-weight: bold;
  text-align: left;
}

.name2_1,
.name2_2,
.name2_3,
.name2_4 {
  position: relative;
  z-index: 2;
  font-size: calc(13px + 2 * ((100vw - 737px) / 263));
  width: 47%;
  text-align: justify;
  text-align-last: left;
  margin-left: 44%;
  padding-top: 2%;
}

/*****アクセス*****/
.access {
  text-align: center;
  margin: 0 auto;
  padding: 8% 0;
}

.large {
  font-size: calc(22px + 4 * ((100vw - 737px) / 263));
  font-weight: bold;
  margin-top: 7%;
  line-height: 2;
  letter-spacing: 0.1em;
}

.medium {
  font-size: calc(15px + 2 * ((100vw - 737px) / 263));
  font-weight: bold;
  margin-top: 3%;
  line-height: 2;
  letter-spacing: 0.1em;
}

.small {
  font-size: calc(13px + 1 * ((100vw - 737px) / 263));
  margin: 1% 0;
  font-weight: 400;
}

.box_namba {
  width: 50%;
  margin: 7% 0 0 -1%;
}

.box_tennoji {
  width: 50%;
  margin: 7% -1% 0 0;
}

.box_namba img,
.box_tennoji img {
  width: 100%;
}

.box_namba p,
.box_tennoji p {
  font-size: calc(13px + 3 * ((100vw - 737px) / 263));
  color: #1E5A73;
  text-align: left;
  margin-top: 1%;
}

/*****ロケーション*****/
.location {
  position: relative;
  text-align: center;
  margin: 0 auto;
  padding: 8% 0;
  background-color: #F9F7ED;
}

.map_around {
  width: 600px;
  margin: 8% auto;
}

.map_around img {
  width: 100%;
}

.map_around p {
  font-size: 18px;
  font-weight: 500;
}

.faci_box3 {
  width: 90%;
  display: flex;
  margin: 5% auto;
  justify-content: space-evenly;
}

.box_1-8 {
  width: 20%;
}

.box_1-8 img {
  width: 100%;
}

.box_1-8 p {
  width: 100%;
  font-size: calc(13px + 2 * ((100vw - 737px) / 263));
  margin-top: 5%;
  color: #B47D32;
  font-weight: 800;
}

/*****物件概要*****/
/*概要
------------------------------*/
.outline {
  text-align: center;
  margin: 0 auto;
  padding: 8% 0;
}

.outline_main {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  margin-top: 80px;
  padding: 0 50px;
}

.outline2 {
  text-align: left;
  margin: 0 auto;
  margin-top: 80px;
  font-size: calc(16px + 4 * (100vw - 737px)/1663);
}

.table_title {
  font-size: calc(20px + 4 * (100vw - 737px)/1663);
  font-weight: 400;
  padding: 10px 0 10px 23px;
  text-align: left;
}

.outline2 table {
  border-collapse: collapse;
  border-spacing: 0;
}

.outline2 th {
  font-size: calc(13px + 7 * (100vw - 737px)/1663);
  width: 20%;
  padding: 1em 1em 1em 2em;
  border-top: 1px solid #CCC;
  font-weight: bold;
}

.outline2 td {
  font-size: calc(13px + 7 * (100vw - 737px)/1663);
  width: 75%;
  padding: 1em 1em 1em 1.5em;
  border-top: 1px solid #CCC;
  text-align: justify;
  font-weight: bold;
}

.table_last {
  margin: 3% 0;
  text-align: right;
  font-size: calc(13px + 2 * ((100vw - 737px) / 263));
  font-weight: 400;
}


/*****フッター*****/
.ft {
  text-align: center;
  padding-top: 5%;
  background-color: #F9F7ED;
}

.ft_logo {
  width: calc(510px + 60 * ((100vw - 737px) / 263));
}

.ft_logo img {
  width: 100%;
}

.middle {
  display: flex;
  align-items: center;
  margin: 1% auto;
  width: calc(510px + 60 * ((100vw - 737px) / 263));
}

.free_dial {
  display: flex;
  align-items: baseline;
}

.icon {
  width: 15%;
  height: 60%;
}

.icon img {
  width: 100%;
}

.free_dial p {
  font-size: calc(32px + 4 * ((100vw - 737px) / 263));
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-weight: bold;
  color: #B47D32;
  padding-left: 1%;
}

.tel_address {
  margin-right: 0;
  font-size: calc(12px + 1.5 * ((100vw - 737px) / 263));
  font-weight: 500;
  text-align: left;
  margin-left: calc(-5% + 11 * ((100vw - 737px) / 263));
}

.takken {
  width: calc(490px + 59 * ((100vw - 737px) / 263));
  margin: 2% auto;
  text-align: justify;
  text-align-last: left;
  font-size: calc(13px + 1.3 * ((100vw - 737px) / 263));
  font-weight: 500;
}

.FF {
  display: flex;
  align-items: center;
  justify-content: center;
  align-items: center;
  margin-top: 3%;
  font-size: calc(17px + 2 * ((100vw - 737px) / 263));
  font-weight: 500;
}

.FF img {
  width: calc(5% + -8 * ((100vw - 737px) / 263));
}

.link {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 3%;
}

.link_l {
  align-items: center;
  margin-right: 1.5%;
  white-space: nowrap
}

.link_r {
  align-items: center;
  margin-left: 1.5%;
  white-space: nowrap
}

.link_l a,
.link_r a {
  font-size: calc(13px + 2 * ((100vw - 737px) / 263));
  font-weight: 600;
  color: #000;
}

.link_l:hover,
.link_r:hover {
  opacity: 0.7;
}

.link_l img,
.link_r img {
  width: calc(8% + 2 * ((100vw - 737px) / 263));
  max-width: 30px;
  height: calc(13% + 2 * ((100vw - 737px) / 263));
  margin: 1%;
}

.copyright {
  width: 100%;
  bottom: 0;
  left: 50%;
  background-color: #FFF;
  text-align: center;
  padding: 10px 0;
  font-size: calc(13px + 2 * ((100vw - 737px) / 263));
  font-weight: 500;
  text-align: center;
}

/*ページスクロール
------------------------------*/
#page-top {
  background-color: #B47D32;
  filter: drop-shadow(0 0 4px #FEF8E1);
  color: white;
  width: 70px;
  height: 70px;
  position: fixed;
  bottom: 20px;
  right: 20px;
  border-radius: 50%;
  z-index: 1000;
}

#page-top a {
  padding: 10% 0 0 0;
  display: block;
  width: 70px;
  height: 70px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

#page-top a:link,
#page-top a:visited {
  color: #FFF;
  font-size: 35px;
  text-decoration: none;
}

/* トップ 下からフェードアップ */
.fadeUpTrigger {
  opacity: 0;
}

.fadeUp {
  animation: animationName 0.8s ease-in 0.5s forwards;
  opacity: 0;
  animation-name: fadeUpAnime;
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hide {
  /*デフォルトで透明度0に指定*/
  opacity: 0;
  transform: translateY(80px);
  transition: 1s;
}

/*スクロールした時に追加されるクラス*/
.fadein {
  opacity: 1;
  transform: translateY(0);
}


/* ボタン共通設定 */
.btn_map,
.btn_contact {
  /*矢印の基点とするためrelativeを指定*/
  position: relative;
  /*ボタンの形状*/
  text-decoration: none;
  display: inline-block;
  background: #B47D32;
  color: #fff;
  text-align: center;
  outline: none;
  /*アニメーションの指定*/
  transition: ease .2s;
}

.btn_map {
  margin: 5%;
  /*ボタンの形状*/
  padding: 10px 100px 10px 90px;
  border-radius: 40px;
}

.btn_contact {
  margin: 0 2%;
  /*ボタンの形状*/
  padding: 1.2% 8%;
  border-radius: 50px;
}

.btn_map:hover,
.btn_contact:hover {
  background: #1E5A73;
}

.btn_contact a {
  color: #fff;
}

/* 矢印が右に移動 */

.btnarrow::after {
  content: '';
  /*絶対配置で矢印の位置を決める*/
  position: absolute;
  top: 42%;
  right: 20px;
  /*矢印の形状*/
  width: 9px;
  height: 9px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  /*アニメーションの指定*/
  transition: all .3s;
}

/*hoverした際の移動*/
.btnarrow:hover::after {
  right: 16px;
}

/*contact.html
------------------------------*/
#wrapper {
  font-size: calc(16px + 0.5*((100vw - 737px) / 263)) !important;
}

.contact_bg {
  /* 上部タイトル */
  display: block;
  padding: 50px 0 !important;
  padding-top: 70px !important;
  color: #FFF !important;
  font-size: calc(28px + 3 * ((100vw - 737px) / 263)) !important;
  font-weight: 600 !important;
  background: #B47D32;
  margin: 0 auto;
  text-align: center;
  line-height: 1.2 !important;
}

#contact_form {
  /* 上部タイトル・説明文 */
  width: 70% !important;
  text-align: center !important;
  margin: 0 auto !important;
}

#contact_form p {
  /* 上部説明文 */
  padding: 30px 0 !important;
  font-size: calc(16px + 0.5*((100vw - 737px) / 263)) !important;
}

#container {
  width: 70% !important;
  margin: 0 auto !important;
  margin-bottom: 50px !important;
}

.yohaku {
  display: inline-block !important;
  width: 40px !important;
}

.yohaku2 {
  display: inline-block !important;
  width: 20px !important;
}

.contact_pp {
  padding: 30px 0 !important;
  text-align: center !important;
  font-size: calc(16px + 0.5*((100vw - 737px) / 263)) !important;
}

.must {
  background: #B47D32 !important;
  border: #B47D32 !important;
  background-image: none !important;
  font-size: calc(16px + 0.5*((100vw - 737px) / 263)) !important;
  margin: 0 !important;
}

form#mailformpro dl dt {
  width: calc(180px + 20 * ((100vw - 737px) / 263)) !important;
  border-top: solid 1px #CCC !important;
}

form#mailformpro dl dd {
  padding-top: 25px !important;
  padding-bottom: 25px !important;
  padding-left: calc(220px + 15 * ((100vw - 737px) / 263)) !important;
}

form#mailformpro label.mfp_not_checked {
  padding: 15px !important;
}

.mfp_element_all {
  max-width: 90% !important;
}

.mfp_element_text,
.mfp_element_number,
.mfp_element_select-one,
.mfp_element_email,
.mfp_element_tel,
.mfp_element_textarea,
.mfp_element_date,
.mfp_element_password {
  padding: 10px 8px !important;
  margin: 5px !important;
}

form#mailformpro li {
  padding-bottom: 10px !important;
}

form#mailformpro label {
  margin-right: 10px !important;
}

.padding {
  padding-top: 40px !important;
}

.padding2 {
  padding-top: 36px !important;
}

.padding3 {
  padding-top: 100px !important;
}

.line_break2 {
  display: none !important;
}

.any {
  display: block;
  background-color: #F0F0F0;
  background-image: none !important;
  border:  #F0F0F0;
  padding: 2px 5px;
  font-size: calc(16px + 0.5*((100vw - 737px) / 263)) !important;
  color: #000;
  float: left;
  margin: 0 !important;
  border-radius: 4px;
}

.must3 a{
  color: #551a8b;
}

.must3 a:hover {
  color: red;
}

button {
  padding: 8px 15px !important;
}

@media screen and (min-width:880px) {
  .nowrap {
    white-space: nowrap
  }
}

#mfp_confirm_table th, #mfp_confirm_table td {
  font-size: calc(16px + 0.5*((100vw - 737px) / 263)) !important;
}

/*thanks.html
------------------------------*/
#contactmail {
  width: 600px;
  margin: 0 auto;
  padding-top: 50px;
  padding-bottom: 80px;
  font-size: calc(16px + 0.5 * ((100vw - 737px) / 263)) !important;
}

#mfp_thanks {
  padding-top: 30px !important;
  padding-bottom: 50px !important;
}

#mfp_thanks h3 {
  font-size: 2.4rem !important;
  font-weight: 600 !important;
  color: #B47D32;
}

.mfp_thanks_p {
  font-weight: 600 !important;
  letter-spacing: 0.2rem !important;
  color: #B47D32 !important;
}

.line_break3 {
  display: none !important;
}


.contact_line {
  height: 1px;
  background-color: #B47D32;
  border: none;
  margin-bottom: 20px;
}

.thanks_address {
  width: 500px;
  border: 1px solid #B47D32;
  padding: 1em;
  margin: 0 auto;
}

.top_back {
  text-align: center;
  margin-top: 30px;
}

.top_back a {
  display: inline-block;
  text-align: center;
  outline: none;
  background-color: #B47D32;
  border-radius: 50px;
  border: 1px solid #B47D32;
  color: #FFF;
  padding: 0.8em 6em;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .5s;
  transition: all .5s;
  letter-spacing: 0.1rem;
  font-size: calc(15px + 2 * ((100vw - 737px) / 263)) !important;
  font-weight: 500;
}

.top_back a:hover {
  background-color: transparent;
  background: #1E5A73;
  border: 1px solid #1E5A73;
  color: #fff;
}

div#mfp_overlay h4 {
  font-size: 2.2rem;
  text-align: center;
  margin: 10px 0 20px 0;
}