@charset "utf-8";
/*-----------------------------------------------------

  layout.css
  common CSS

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

:root {

  --vw: calc(100vw / 1920);
  /* PC基準幅 */
  --vw-sp: calc(100vw / 750);
  /* SP基準幅 */

  --text-color: #000000;
  /* テキスト */
  --text-white: #ffffff;
  /* テキスト白 */
  --text-blue: #1d3c88;
  /* テキストブルー */
  --text-light-blue: #427ca6;
  /* テキストブルー */
  --text-breadcrumbs: #7da2bc;
  /* パンくず */
  --bg-white: #ffffff;
  /* 背景白 */
  --bg-black: #000000;
  /* 背景黒 */
  --bg-blue: #1d3d88;
  /* 背景ブルー */
  --bg-blue-gray: #b8d2e6;
  /* 背景薄ブルー */
  --bg-gray: #ebf2f2;
  /* 背景グレー */
  --border-black: #000000;
  /* 罫線黒 */
  --border-white: #ffffff;
  /* 罫線白 */
  --border-gray: #e6e6e6;
  /* 罫線グレー */
  --hover-blue: #38698c;
  /* hoverブルー */
}




/*-----------------------------------------------------
  general　
-----------------------------------------------------*/

html {
  -webkit-text-size-adjust: none;
  overflow-x: hidden;
}

body {
  width: 100%;
  min-width: 1280px;
  min-height: 100vh;
  font-family: "Noto Sans JP", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
  font-weight: 400;
  line-height: 1.75;
  font-size: clamp(12px, calc(18 * var(--vw)), 18px);
  color: var(--text-color);
  letter-spacing: 0.08rem;
}


#wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  padding-top: 104px;
}

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
}

a:link {
  text-decoration: none;
  color: var(--text-color);
}

a:visited {
  text-decoration: none;
  color: var(--text-color);
}

a:hover {
  text-decoration: none;
  color: var(--hover-blue);
}


/*---- hashtag_box ----*/

.hashtag_box {
  position: relative;
  padding: clamp(13.33px, calc(20 * var(--vw)), 20px);
}

.hashtag_box_inner {
  padding: clamp(20px, calc(30 * var(--vw)), 30px);
}


/*---- hashtag_box_frame ----*/

.hashtag_box_frame {
  position: relative;
  display: inline-block;
  padding: clamp(26.67px, calc(40 * var(--vw)), 40px);
  --line-width: 1px;
  --line-color: var(--text-color);
}

.hashtag_box_frame_inner {
  background-color: var(--bg-white);
  display: flex;
  justify-content: center;
  align-items: center;
}

.hashtag_box_frame_contents {
  display: flex;
  flex-flow: column;
  align-items: center;
}

.hashtag_box_frame_bg {
  width: calc(100% - clamp(26.67px, calc(40 * var(--vw)), 40px));
  height: calc(100% - clamp(26.67px, calc(40 * var(--vw)), 40px));
  background: var(--bg-blue-gray);
  position: absolute;
  z-index: -1;
  top: clamp(13.33px, calc(20 * var(--vw)), 20px);
  left: clamp(13.33px, calc(20 * var(--vw)), 20px);
}


/*---- hashtag_box_photo ----*/

.hashtag_box_photo {
  position: relative;
  display: inline-block;
  padding: clamp(26.67px, calc(40 * var(--vw)), 40px) clamp(26.67px, calc(40 * var(--vw)), 40px) clamp(26.67px, calc(40 * var(--vw)), 40px);
  --line-width: 1px;
  --line-color: var(--text-color);
  width: 100%;
}

.hashtag_box_photo_bg {
  width: calc(100% - clamp(26.67px, calc(40 * var(--vw)), 40px));
  height: calc(100% - clamp(26.67px, calc(40 * var(--vw)), 40px));
  background: var(--bg-gray);
  position: absolute;
  z-index: -1;
  top: clamp(13.33px, calc(20 * var(--vw)), 20px);
  left: clamp(13.33px, calc(20 * var(--vw)), 20px);
}


/*---- line_horizontal ----*/

.line_horizontal {
  height: 1px;
  background:
    repeating-linear-gradient(to right,
      #000 0 calc(24 * var(--vw)),
      transparent calc(24 * var(--vw)) calc(28 * var(--vw)),
      #000 calc(28 * var(--vw)) calc(32 * var(--vw)),
      transparent calc(32 * var(--vw)) calc(36 * var(--vw)));
}

.line_vertical {
  width: 1px;
  height: clamp(66.67px, calc(100 * var(--vw)), 100px);
  background:
    repeating-linear-gradient(to bottom,
      #000 0 calc(24 * var(--vw)),
      transparent calc(24 * var(--vw)) calc(28 * var(--vw)),
      #000 calc(28 * var(--vw)) calc(32 * var(--vw)),
      transparent calc(32 * var(--vw)) calc(36 * var(--vw)));
}


/*---- arrow_diagonal ----*/

.arrow_diagonal {
  width: clamp(28.67px, calc(43 * var(--vw)), 43px);
  height: clamp(28.67px, calc(43 * var(--vw)), 43px);
  position: absolute;
  right: clamp(35px, calc(30 * var(--vw)), 30px);
  bottom: clamp(35px, calc(30 * var(--vw)), 30px);
}

@media (min-width: 1500px) {
  .arrow_diagonal {

    right: 44px;
    bottom: 44px;
  }
}

.arrow_diagonal::before {
  content: '';
  position: absolute;
  width: clamp(40px, calc(60 * var(--vw)), 60px);
  height: 1px;
  background:
    repeating-linear-gradient(to right,
      var(--border-black) 0 calc(24 * var(--vw)),
      transparent calc(24 * var(--vw)) calc(28 * var(--vw)),
      var(--border-black) calc(28 * var(--vw)) calc(32 * var(--vw)),
      transparent calc(32 * var(--vw)) calc(36 * var(--vw)));
  transform-origin: left center;
  transform: rotate(45deg);
}

.arrow_diagonal::after {
  content: '';
  position: absolute;
  width: clamp(14px, calc(21 * var(--vw)), 21px);
  height: clamp(14px, calc(21 * var(--vw)), 21px);
  border-right: solid 1px var(--border-black);
  border-bottom: solid 1px var(--border-black);
  right: 0;
  bottom: 0;
}


/*---- arrow_circle ----*/

.arrow_circle {
  width: clamp(63.33px, calc(95 * var(--vw)), 95px);
  height: clamp(53.33px, calc(80 * var(--vw)), 80px);
  position: relative;
  overflow: hidden;
}

.arrow_circle::before {
  content: '';
  width: clamp(106.67px, calc(160 * var(--vw)), 160px);
  height: clamp(106.67px, calc(160 * var(--vw)), 160px);
  position: absolute;
  top: 0;
  right: clamp(-81px, calc(-81 * var(--vw)), -54px);
  border-radius: clamp(53.33px, calc(80 * var(--vw)), 80px);
  border: solid 1px var(--border-black);
  box-sizing: border-box;
}

.arrow_circle::after {
  content: '';
  width: clamp(11.33px, calc(17 * var(--vw)), 17px);
  height: clamp(11.33px, calc(17 * var(--vw)), 17px);
  position: absolute;
  bottom: clamp(6.67px, calc(10 * var(--vw)), 10px);
  left: clamp(6.67px, calc(10 * var(--vw)), 10px);
  border-right: solid 1px var(--border-black);
  border-bottom: solid 1px var(--border-black);
  transform-origin: left center;
  transform: rotate(45deg);
}

.rotate135 {
  transform: rotate(-135deg);
}

.rotate270 {
  transform: rotate(-270deg);
}


/*---- cross_box ----*/

.cross_box {
  position: relative;
  margin: 0 auto;
  padding: clamp(13.33px, calc(20 * var(--vw)), 20px);
}

.cross {
  width: clamp(53.33px, calc(80 * var(--vw)), 80px);
  height: clamp(53.33px, calc(80 * var(--vw)), 80px);
  position: absolute;

  background:
    linear-gradient(to right,
      transparent calc(40 * var(--vw)),
      var(--border-black) calc(40 * var(--vw)),
      var(--border-black) calc((40 * var(--vw)) + 1px),
      transparent calc((40 * var(--vw)) + 1px)),
    linear-gradient(to bottom,
      transparent calc(40 * var(--vw)),
      var(--border-black) calc(40 * var(--vw)),
      var(--border-black) calc((40 * var(--vw)) + 1px),
      transparent calc((40 * var(--vw)) + 1px));
}

.cross:nth-of-type(1) {
  top: calc(-20 * var(--vw));
  left: calc(-20 * var(--vw));
}

.cross:nth-of-type(2) {
  top: calc(-20 * var(--vw));
  right: calc(-20 * var(--vw));
}

.cross:nth-of-type(3) {
  bottom: calc(-20 * var(--vw));
  left: calc(-20 * var(--vw));
}

.cross:nth-of-type(4) {
  bottom: calc(-20 * var(--vw));
  right: calc(-20 * var(--vw));
}


/*---- btn_more ----*/

.btn_more {
  width: clamp(266.67px, calc(400 * var(--vw)), 400px);
  height: clamp(42.67px, calc(64 * var(--vw)), 64px);
  position: relative;
}

.btn_more a {
  display: block;
  width: 100%;
  height: 100%;
  padding-left: clamp(26.67px, calc(40 * var(--vw)), 40px);
  background-color: var(--bg-black);
  display: flex;
  align-items: center;
  -webkit-transition: all .2s;
  transition: all .2s;
}

.btn_more a:link {
  text-decoration: none;
  color: var(--text-white);
}

.btn_more a:visited {
  text-decoration: none;
  color: var(--text-white);
}

.btn_more a:hover {
  text-decoration: none;
  color: var(--text-white);
}

.btn_more::before {
  content: '';
  position: absolute;
  width: clamp(64px, calc(96 * var(--vw)), 96px);
  height: 1px;
  background:
    repeating-linear-gradient(to right,
      var(--border-white) 0 clamp(16px, calc(24 * var(--vw)), 24px),
      transparent clamp(16px, calc(24 * var(--vw)), 24px) clamp(18.67px, calc(28 * var(--vw)), 28px),
      var(--border-white) clamp(18.67px, calc(28 * var(--vw)), 28px) clamp(21.33px, calc(32 * var(--vw)), 32px),
      transparent clamp(21.33px, calc(32 * var(--vw)), 32px) clamp(24px, calc(36 * var(--vw)), 36px),
      var(--border-white) clamp(24px, calc(36 * var(--vw)), 36px) clamp(40px, calc(60 * var(--vw)), 60px),
      transparent clamp(40px, calc(60 * var(--vw)), 60px) clamp(42.67px, calc(64 * var(--vw)), 64px),
      var(--border-white) clamp(42.67px, calc(64 * var(--vw)), 64px) clamp(45.33px, calc(68 * var(--vw)), 68px),
      transparent clamp(45.33px, calc(68 * var(--vw)), 68px) clamp(48px, calc(72 * var(--vw)), 72px),
      var(--border-black) clamp(48px, calc(72 * var(--vw)), 72px) clamp(64px, calc(96 * var(--vw)), 96px));

  top: 50%;
  transform: translateY(-50%);
  right: clamp(-24px, calc(-24 * var(--vw)), -16px);
  z-index: 9;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.btn_more::after {
  content: '';
  position: absolute;
  width: clamp(10px, calc(15 * var(--vw)), 15px);
  height: clamp(10px, calc(15 * var(--vw)), 15px);
  border-right: solid 1px var(--border-black);
  border-bottom: solid 1px var(--border-black);
  right: clamp(-21px, calc(-21 * var(--vw)), -14px);
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
  -webkit-transition: all .3s;
  transition: all .3s;
}

.btn_more a:hover {
  background-color: var(--hover-blue);
}

.btn_more:hover::before {
  transform: translateX(clamp(5.33px, calc(8 * var(--vw)), 8px)) translateY(-50%);
  background:
    repeating-linear-gradient(to right,
      var(--border-white) 0 clamp(16px, calc(24 * var(--vw)), 24px),
      transparent clamp(16px, calc(24 * var(--vw)), 24px) clamp(18.67px, calc(28 * var(--vw)), 28px),
      var(--border-white) clamp(18.67px, calc(28 * var(--vw)), 28px) clamp(21.33px, calc(32 * var(--vw)), 32px),
      transparent clamp(21.33px, calc(32 * var(--vw)), 32px) clamp(24px, calc(36 * var(--vw)), 36px),
      var(--border-white) clamp(24px, calc(36 * var(--vw)), 36px) clamp(40px, calc(60 * var(--vw)), 60px),
      transparent clamp(40px, calc(60 * var(--vw)), 60px) clamp(42.67px, calc(64 * var(--vw)), 64px),
      var(--border-black) clamp(42.67px, calc(64 * var(--vw)), 64px) clamp(45.33px, calc(68 * var(--vw)), 68px),
      transparent clamp(45.33px, calc(68 * var(--vw)), 68px) clamp(48px, calc(72 * var(--vw)), 72px),
      var(--border-black) clamp(48px, calc(72 * var(--vw)), 72px) clamp(64px, calc(96 * var(--vw)), 96px));
}

.btn_more:hover::after {
  transform: translateY(-50%) translateX(clamp(5.33px, calc(8 * var(--vw)), 8px)) rotate(-45deg);
}


/*---- btn_more_nega ----*/

.btn_more.nega a {
  background-color: var(--bg-white);
}

.btn_more.nega a:link {
  text-decoration: none;
  color: var(--text-blue);
}

.btn_more.nega a:visited {
  text-decoration: none;
  color: var(--text-blue);
}

.btn_more.nega a:hover {
  text-decoration: none;
  color: var(--text-white);
}

.btn_more.nega::before {
  background:
    repeating-linear-gradient(to right,
      var(--border-black) 0 clamp(16px, calc(24 * var(--vw)), 24px),
      transparent clamp(16px, calc(24 * var(--vw)), 24px) clamp(18.67px, calc(28 * var(--vw)), 28px),
      var(--border-black) clamp(18.67px, calc(28 * var(--vw)), 28px) clamp(21.33px, calc(32 * var(--vw)), 32px),
      transparent clamp(21.33px, calc(32 * var(--vw)), 32px) clamp(24px, calc(36 * var(--vw)), 36px),
      var(--border-black) clamp(24px, calc(36 * var(--vw)), 36px) clamp(40px, calc(60 * var(--vw)), 60px),
      transparent clamp(40px, calc(60 * var(--vw)), 60px) clamp(42.67px, calc(64 * var(--vw)), 64px),
      var(--border-black) clamp(42.67px, calc(64 * var(--vw)), 64px) clamp(45.33px, calc(68 * var(--vw)), 68px),
      transparent clamp(45.33px, calc(68 * var(--vw)), 68px) clamp(48px, calc(72 * var(--vw)), 72px),
      var(--border-white) clamp(48px, calc(72 * var(--vw)), 72px) clamp(64px, calc(96 * var(--vw)), 96px));
}

.btn_more.nega::after {
  border-right: solid 1px var(--border-white);
  border-bottom: solid 1px var(--border-white);
}

.btn_more.nega a:hover {
  background-color: var(--bg-black);
}

.btn_more.nega:hover::before {
  transform: translateX(clamp(5.33px, calc(8 * var(--vw)), 8px)) translateY(-50%);
  background:
    repeating-linear-gradient(to right,
      var(--border-white) 0 clamp(16px, calc(24 * var(--vw)), 24px),
      transparent clamp(16px, calc(24 * var(--vw)), 24px) clamp(18.67px, calc(28 * var(--vw)), 28px),
      var(--border-white) clamp(18.67px, calc(28 * var(--vw)), 28px) clamp(21.33px, calc(32 * var(--vw)), 32px),
      transparent clamp(21.33px, calc(32 * var(--vw)), 32px) clamp(24px, calc(36 * var(--vw)), 36px),
      var(--border-white) clamp(24px, calc(36 * var(--vw)), 36px) clamp(40px, calc(60 * var(--vw)), 60px),
      transparent clamp(40px, calc(60 * var(--vw)), 60px) clamp(42.67px, calc(64 * var(--vw)), 64px),
      var(--border-white) clamp(42.67px, calc(64 * var(--vw)), 64px) clamp(45.33px, calc(68 * var(--vw)), 68px),
      transparent clamp(45.33px, calc(68 * var(--vw)), 68px) clamp(48px, calc(72 * var(--vw)), 72px),
      var(--border-white) clamp(48px, calc(72 * var(--vw)), 72px) clamp(64px, calc(96 * var(--vw)), 96px));
}




/*-----------------------------------------------------
  header
------------------------------------------------------*/

header {
  width: 100%;
}

#header_fixed {
  width: 100%;
  height: 104px;
  background: rgba(255, 255, 255, 0.9);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  justify-content: space-between;
  -webkit-transition: all .35s;
  transition: all .35s;
  font-size: 18px;
}


#header_fixed h1,
body.sub #header_fixed h2 {
  margin: 36px 0 0 32px;
}

#header_fixed h1 img,
body.sub #header_fixed h2 img {
  margin-right: 40px;
}

#header_fixed h1 a:hover img {
  opacity: 0.8;
}

#menu_btn {
  display: none;
}



@media screen and (min-width: 768px) {


  header nav {
    font-weight: 500;
  }

  header nav ul {
    display: flex;
    gap: 3em;
    padding: 32px 50px 0 0;
  }

  header nav li {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    position: relative;
  }

  header nav li.arrow_down {
    background: url(../images/common/arrow_navi.png) no-repeat left center;
    padding-left: 22px;
    cursor: pointer;
  }

  header nav li a {
    display: block;
    position: relative;
  }

  header nav a:link {
    text-decoration: none;
    color: var(--text-color);
  }

  header nav a:visited {
    text-decoration: none;
    color: var(--text-color);
  }

  header nav a:hover {
    text-decoration: none;
    color: var(--hover-blue);
  }



  /*  プルダウン  */

  header nav li li a::after {
    display: none;
  }

  header nav li ul {
    display: inline-block;
    list-style: none;
    position: absolute;
    top: 100%;
    left: -20px;
    margin: 0;
    padding: 0;
    z-index: 999;
  }

  header nav li ul li {
    display: block;
    overflow: hidden;
    width: 375px;
    height: 0;
    color: #fff;
    -moz-transition: .2s;
    -webkit-transition: .2s;
    -o-transition: .2s;
    -ms-transition: .2s;
    transition: .2s;
    font-size: 0.85em;
  }

  header nav li ul li a {
    width: 100%;
    padding: 8px 0 8px 42px;
    display: block;
    text-align: left;
    font-weight: 400;
    font-size: 16px;
    position: relative;
  }

  header nav li ul li a::before {
    content: '';
    width: 8px;
    height: 1px;
    position: absolute;
    top: 50%;
    left: 22px;
    transform: translateY(-50%);
    background-color: var(--bg-blue);
  }

  header nav li ul li a:link {
    text-decoration: none;
    color: var(--text-color);
  }

  header nav li ul li a:visited {
    text-decoration: none;
    color: var(--text-color);
  }

  header nav li ul li a:hover {
    text-decoration: none;
    color: var(--hover-blue);
  }

  header nav li:hover ul li {
    overflow: visible;
    height: 40px;
    background: rgba(255, 255, 255, 0.9);
  }

  header nav li:hover ul li:first-child {
    padding-top: 7px;
    height: 47px;
  }

  header nav li:hover ul li:last-child {
    padding-bottom: 65px;
  }

}

@media screen and (min-width: 769px) and (max-width: 1279px) {
  #header_fixed {
    font-size: 1.2em;
  }
  header nav ul {
    gap: 2em;
  }
}
/*-----------------------------------------------------
  contents
------------------------------------------------------*/

#contents {
  width: 100%;
}

main section {
  padding: clamp(106.67px, calc(120 * var(--vw)), 120px) 0;
}

main section .sect_inner {
  width: 91.67%;
  margin: 0 auto;
}

main section h2 {
  margin-bottom: clamp(106.67px, calc(160 * var(--vw)), 160px);
}

main section h2 .h2_en {
  display: block;
  padding: clamp(1.33px, calc(2 * var(--vw)), 2px) 0 clamp(11.33px, calc(17 * var(--vw)), 17px) clamp(28.67px, calc(43 * var(--vw)), 43px);
  font-family: "Barlow", sans-serif;
  font-weight: 700;
  font-size: clamp(16px, calc(24 * var(--vw)), 24px);
  line-height: 1;
  border-left: solid 1px var(--border-black);
  border-right: solid 1px var(--border-black);
}

main section h2 .h2_jp {
  display: block;
  padding: clamp(23.33px, calc(35 * var(--vw)), 35px) 0 0 clamp(29.33px, calc(44 * var(--vw)), 44px);
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
  font-size: clamp(53.33px, calc(80 * var(--vw)), 80px);
  line-height: 1;
  letter-spacing: 0.33rem;
  border-left: solid 1px var(--border-black);
  border-top: solid 1px var(--border-black);
  border-right: solid 1px var(--border-black);
}


/*-----------------------------------------------------
  footer
------------------------------------------------------*/

footer {
  position: relative;
}

.footer_inner {
  width: 72.92%;
  margin: 0 auto;
  padding-top: 100px;
}

footer nav {
  display: flex;
  justify-content: space-between;
  line-height: 1;
  margin-bottom: 30px;
}

footer .navi_box h4 {
  font-weight: 600;
  margin-bottom: 20px;
}

footer li {
  font-size: clamp(10.67px, calc(16 * var(--vw)), 16px);
  position: relative;
  margin-bottom: clamp(10px, calc(15 * var(--vw)), 15px);
  padding-left: clamp(16.67px, calc(25 * var(--vw)), 25px);
}

footer li::after {
  content: '';
  width: clamp(10.67px, calc(16 * var(--vw)), 16px);
  height: 1px;
  background-color: var(--bg-blue);
  position: absolute;
  top: 50%;
  left: 0;
}

.footer_bottom {
  display: flex;
  justify-content: space-between;
  padding-bottom: 100px;
  align-items: flex-end;
}

.footer_address {
  display: flex;
  gap: 60px;
}




#miya_sangyo_footer {
  width: clamp(163.333px, calc(245 * var(--vw)), 245px);
}

#miya_estate_footer {
  width: clamp(190px, calc(285 * var(--vw)), 285px);
}

.footer_address dd {
  line-height: 1.5;
  margin-top: 15px;
}

#footer_map {
  width: clamp(533.33px, calc(800 * var(--vw)), 800px);
  height: clamp(300px, calc(450 * var(--vw)), 450px);
}

#footer_map iframe {
  width: 100%;
  height: 100%;
}

#copyright {
  font-size: 0.6rem;
  color: #909090;
}

/*-----------------------------------------------------
  Responsive
-----------------------------------------------------*/

.onlyPC {
  display: block;
}

.onlySP {
  display: none;
}

@media screen and (max-width: 767px) {
  .onlyPC {
    display: none;
  }

  .onlySP {
    display: block;
  }
}



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

  SP layout

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


@media screen and (max-width: 767px) {


  /*-----------------------------------------------------
  SP general　
-----------------------------------------------------*/

  body {
    min-width: auto;
    font-size: calc(30 * var(--vw-sp));
    min-width: auto;
  }

  body::before {
    min-width: auto;
    background-image:
      linear-gradient(var(--border-gray), var(--border-gray)),
      linear-gradient(var(--border-gray), var(--border-gray)),
      linear-gradient(var(--border-gray), var(--border-gray)),
      linear-gradient(var(--border-gray), var(--border-gray));

    background-repeat: no-repeat;

    background-size:
      1px 100%,
      1px 100%,
      1px 100%,
      1px 100%;

    background-position:
      4.6667% 0,
      34.8% 0,
      65.0667% 0,
      95.2% 0;
  }

  body.menu-open {
    overflow: hidden;
  }

  #wrapper {
    padding-top: calc(104 * var(--vw-sp));
  }

  img {
    width: 100%;
    height: auto;
  }

  /*
  .hashtag_box {
    position: relative;
    padding: calc(20 * var(--vw-sp));
    --line-width: 1px;
    --line-color: #333333;
  }*/

  .hashtag_box_inner {
    padding: calc(30 * var(--vw-sp));
  }


  .hashtag_box_frame {
    position: relative;
    display: inline-block;
    padding: calc(40 * var(--vw-sp));
    --line-width: 1px;
    --line-color: var(--text-color);
  }


  .hashtag_box_frame_inner {
    background-color: var(--bg-white);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .hashtag_box_frame_contents {
    display: flex;
    flex-flow: column;
    align-items: center;
  }

  .hashtag_box_frame_bg {
    width: calc(100% - calc(40 * var(--vw-sp)));
    height: calc(100% - calc(40 * var(--vw-sp)));
    background: var(--bg-blue-gray);
    position: absolute;
    z-index: -1;
    top: calc(20 * var(--vw-sp));
    left: calc(20 * var(--vw-sp));
  }


  .hashtag_box_photo {
    position: relative;
    display: inline-block;
    padding: calc(40 * var(--vw-sp));
    --line-width: 1px;
    --line-color: var(--text-color);
  }


  .hashtag_box_photo_bg {
    width: calc(100% - calc(40 * var(--vw-sp)));
    height: calc(100% - calc(40 * var(--vw-sp)));
    background: var(--bg-gray);
    position: absolute;
    z-index: -1;
    top: calc(20 * var(--vw-sp));
    left: calc(20 * var(--vw-sp));
  }


  .line_horizontal {
    height: 1px;
    background:
      repeating-linear-gradient(to right,
        #000 0 calc(24 * var(--vw-sp)),
        transparent calc(24 * var(--vw-sp)) calc(28 * var(--vw-sp)),
        #000 calc(28 * var(--vw-sp)) calc(32 * var(--vw-sp)),
        transparent calc(32 * var(--vw-sp)) calc(36 * var(--vw-sp)));
  }

  .line_vertical {
    width: 1px;
    height: calc(100 * var(--vw-sp));
    background:
      repeating-linear-gradient(to bottom,
        #000 0 calc(24 * var(--vw-sp)),
        transparent calc(24 * var(--vw-sp)) calc(28 * var(--vw-sp)),
        #000 calc(28 * var(--vw-sp)) calc(32 * var(--vw-sp)),
        transparent calc(32 * var(--vw-sp)) calc(36 * var(--vw-sp)));
  }

  .arrow_diagonal {
    width: calc(43 * var(--vw-sp));
    height: calc(43 * var(--vw-sp));
    position: absolute;
    right: calc(50 * var(--vw-sp));
    bottom: calc(50 * var(--vw-sp));
  }

  .arrow_diagonal::before {
    content: '';
    position: absolute;
    width: calc(60 * var(--vw-sp));
    height: 1px;
    background:
      repeating-linear-gradient(to right,
        var(--border-black) 0 calc(24 * var(--vw-sp)),
        transparent calc(24 * var(--vw-sp)) calc(28 * var(--vw-sp)),
        var(--border-black) calc(28 * var(--vw-sp)) calc(32 * var(--vw-sp)),
        transparent calc(32 * var(--vw-sp)) calc(36 * var(--vw-sp)));
    transform-origin: left center;
    transform: translateX(calc(-22 * var(--vw-sp))) rotate(45deg);
  }

  .arrow_diagonal::after {
    content: '';
    position: absolute;
    width: calc(21 * var(--vw-sp));
    height: calc(21 * var(--vw-sp));
    border-right: solid 1px var(--border-black);
    border-bottom: solid 1px var(--border-black);
    right: 0;
    bottom: 0;
  }


  .arrow_circle {
    width: calc(95 * var(--vw-sp));
    height: calc(80 * var(--vw-sp));
    position: relative;
    overflow: hidden;
  }

  .arrow_circle::before {
    content: '';
    width: calc(160 * var(--vw-sp));
    height: calc(160 * var(--vw-sp));
    position: absolute;
    top: 0;
    right: calc(-81 * var(--vw-sp));
    border-radius: calc(80 * var(--vw-sp));
    border: solid 1px var(--border-black);
    box-sizing: border-box;
  }

  .arrow_circle::after {
    content: '';
    width: calc(17 * var(--vw-sp));
    height: calc(17 * var(--vw-sp));
    position: absolute;
    bottom: calc(10 * var(--vw-sp));
    left: calc(10 * var(--vw-sp));
    border-right: solid 1px var(--border-black);
    border-bottom: solid 1px var(--border-black);
    transform-origin: left center;
    transform: rotate(45deg);
  }

  .rotate135 {
    transform: rotate(-135deg);
  }

  .rotate270 {
    transform: rotate(-270deg);
  }

  .cross_box {
    position: relative;
    margin: 0 auto;
    padding: calc(20 * var(--vw-sp));
    background: transparent;
    z-index: 1;
  }

  .cross {
    width: calc(80 * var(--vw-sp));
    height: calc(80 * var(--vw-sp));
    position: absolute;

    background:
      linear-gradient(to right,
        transparent calc(40 * var(--vw-sp)),
        var(--border-black) calc(40 * var(--vw-sp)),
        var(--border-black) calc((40 * var(--vw-sp)) + 1px),
        transparent calc((40 * var(--vw-sp)) + 1px)),
      linear-gradient(to bottom,
        transparent calc(40 * var(--vw-sp)),
        var(--border-black) calc(40 * var(--vw-sp)),
        var(--border-black) calc((40 * var(--vw-sp)) + 1px),
        transparent calc((40 * var(--vw-sp)) + 1px));
  }

  .cross:nth-of-type(1) {
    top: calc(-20 * var(--vw-sp));
    left: calc(-20 * var(--vw-sp));
  }

  .cross:nth-of-type(2) {
    top: calc(-20 * var(--vw-sp));
    right: calc(-20 * var(--vw-sp));
  }

  .cross:nth-of-type(3) {
    bottom: calc(-20 * var(--vw-sp));
    left: calc(-20 * var(--vw-sp));
  }

  .cross:nth-of-type(4) {
    bottom: calc(-20 * var(--vw-sp));
    right: calc(-20 * var(--vw-sp));
  }


  .btn_more {
    width: calc(600 * var(--vw-sp));
    height: calc(96 * var(--vw-sp));
    position: relative;
    font-size: calc(30 * var(--vw-sp));
  }

  .btn_more a {
    display: block;
    width: 100%;
    height: 100%;
    padding-left: calc(60 * var(--vw-sp));
    background-color: var(--bg-black);
    display: flex;
    align-items: center;
    -webkit-transition: all .2s;
    transition: all .2s;
  }

  .btn_more a:link {
    text-decoration: none;
    color: var(--text-white);
  }

  .btn_more a:visited {
    text-decoration: none;
    color: var(--text-white);
  }

  .btn_more a:hover {
    text-decoration: none;
    color: var(--text-white);
  }

  .btn_more::before {
    content: '';
    position: absolute;
    width: calc(96 * var(--vw-sp));
    height: 1px;
    background:
      repeating-linear-gradient(to right,
        var(--border-white) 0 calc(24 * var(--vw-sp)),
        transparent calc(24 * var(--vw-sp)) calc(28 * var(--vw-sp)),
        var(--border-white) calc(28 * var(--vw-sp)) calc(32 * var(--vw-sp)),
        transparent calc(32 * var(--vw-sp)) calc(36 * var(--vw-sp)),
        var(--border-white) calc(36 * var(--vw-sp)) calc(60 * var(--vw-sp)),
        transparent calc(60 * var(--vw-sp)) calc(64 * var(--vw-sp)),
        var(--border-black) calc(64 * var(--vw-sp)) calc(68 * var(--vw-sp)),
        transparent calc(68 * var(--vw-sp)) calc(72 * var(--vw-sp)),
        var(--border-black) calc(72 * var(--vw-sp)) calc(96 * var(--vw-sp)));

    top: 50%;
    transform: translateY(-50%);
    right: calc(-32 * var(--vw-sp));
    z-index: 9;
    -webkit-transition: all .3s;
    transition: all .3s;
  }

  .btn_more::after {
    content: '';
    position: absolute;
    width: calc(15 * var(--vw-sp));
    height: calc(15 * var(--vw-sp));
    border-right: solid 1px var(--border-black);
    border-bottom: solid 1px var(--border-black);
    right: calc(-29 * var(--vw-sp));
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
    -webkit-transition: all .3s;
    transition: all .3s;
  }

  .btn_more a:hover {
    background-color: var(--hover-blue);
  }

  .btn_more:hover::before {
    transform: translateX(-8px) translateY(-50%);
    background:
      repeating-linear-gradient(to right,
        var(--border-white) 0 calc(24 * var(--vw-sp)),
        transparent calc(24 * var(--vw-sp)) calc(28 * var(--vw-sp)),
        var(--border-white) calc(28 * var(--vw-sp)) calc(32 * var(--vw-sp)),
        transparent calc(32 * var(--vw-sp)) calc(36 * var(--vw-sp)),
        var(--border-white) calc(36 * var(--vw-sp)) calc(60 * var(--vw-sp)),
        transparent calc(60 * var(--vw-sp)) calc(64 * var(--vw-sp)),
        var(--border-white) calc(64 * var(--vw-sp)) calc(68 * var(--vw-sp)),
        transparent calc(68 * var(--vw-sp)) calc(72 * var(--vw-sp)),
        var(--border-black) calc(72 * var(--vw-sp)) calc(96 * var(--vw-sp)));
  }

  .btn_more:hover::after {
    transform: translateY(-50%) translateX(-8px) rotate(-45deg);
  }


  .btn_more.nega a {
    background-color: var(--bg-white);
  }

  .btn_more.nega a:link {
    text-decoration: none;
    color: var(--text-blue);
  }

  .btn_more.nega a:visited {
    text-decoration: none;
    color: var(--text-blue);
  }

  .btn_more.nega a:hover {
    text-decoration: none;
    color: var(--text-white);
  }

  .btn_more.nega::before {
    background:
      repeating-linear-gradient(to right,
        var(--border-black) 0 calc(24 * var(--vw-sp)),
        transparent calc(24 * var(--vw-sp)) calc(28 * var(--vw-sp)),
        var(--border-black) calc(28 * var(--vw-sp)) calc(32 * var(--vw-sp)),
        transparent calc(32 * var(--vw-sp)) calc(36 * var(--vw-sp)),
        var(--border-black) calc(36 * var(--vw-sp)) calc(60 * var(--vw-sp)),
        transparent calc(60 * var(--vw-sp)) calc(64 * var(--vw-sp)),
        var(--border-white) calc(64 * var(--vw-sp)) calc(68 * var(--vw-sp)),
        transparent calc(68 * var(--vw-sp)) calc(72 * var(--vw-sp)),
        var(--border-white) calc(72 * var(--vw-sp)) calc(96 * var(--vw-sp)));
  }

  .btn_more.nega::after {
    border-right: solid 1px var(--border-white);
    border-bottom: solid 1px var(--border-white);
  }

  .btn_more.nega a:hover {
    background-color: var(--bg-black);
  }

  .btn_more.nega:hover::before {
    transform: translateX(-8px) translateY(-50%);
    background:
      repeating-linear-gradient(to right,
        var(--border-white) 0 calc(24 * var(--vw-sp)),
        transparent calc(24 * var(--vw-sp)) calc(28 * var(--vw-sp)),
        var(--border-white) calc(28 * var(--vw-sp)) calc(32 * var(--vw-sp)),
        transparent calc(32 * var(--vw-sp)) calc(36 * var(--vw-sp)),
        var(--border-white) calc(36 * var(--vw-sp)) calc(60 * var(--vw-sp)),
        transparent calc(60 * var(--vw-sp)) calc(64 * var(--vw-sp)),
        var(--border-white) calc(64 * var(--vw-sp)) calc(68 * var(--vw-sp)),
        transparent calc(68 * var(--vw-sp)) calc(72 * var(--vw-sp)),
        var(--border-white) calc(72 * var(--vw-sp)) calc(96 * var(--vw-sp)));
  }



  /*-----------------------------------------------------
  SP header
------------------------------------------------------*/

  #header_fixed h1,
  body.sub #header_fixed h2 {
    margin: calc(36 * var(--vw-sp)) 0 0 calc(32 * var(--vw-sp));
    display: flex;
    align-items: flex-start
  }

  #header_fixed h1 img,
  body.sub #header_fixed h2 img {
    vertical-align: top;
  }

  #header_fixed {
    min-width: auto;
    height: calc(104 * var(--vw-sp));
  }

  #header_fixed h1 a:first-child img,
  body.sub #header_fixed h2 a:first-child img {
    width: calc(218 * var(--vw-sp));
    height: auto;
    margin-right: calc(40 * var(--vw-sp));
  }

  #header_fixed h1 a:nth-child(2) img,
  body.sub #header_fixed h2 a:nth-child(2) img {
    width: calc(254 * var(--vw-sp));
    height: auto;
    margin-right: 0;
  }




  #menu_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    width: calc(104 * var(--vw-sp));
    height: calc(104 * var(--vw-sp));
    right: 0;
    top: 0;
    text-align: center;
    z-index: 9999;
    background-color: var(--bg-black);
  }

  body.sub #menu_btn {
    top: 0px;
  }

  .menuButton {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: calc(40 * var(--vw-sp));
    height: calc(22 * var(--vw-sp));
    z-index: 9999;
  }

  .menuButton span {
    display: block;
    background: var(--bg-white);
    width: 100%;
    height: calc(2 * var(--vw-sp));
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
  }

  .menuButton.active span:first-child {
    transform: translateY(calc(10 * var(--vw-sp))) rotate(30deg);
  }

  .menuButton.active span:nth-child(2) {
    opacity: 0;
  }

  .menuButton.active span:last-child {
    transform: translateY(calc(-10 * var(--vw-sp))) rotate(-30deg);
  }


  #header_navi {
    position: absolute;
    width: 100vw;
    height: 100vh;
    background-color: var(--bg-gray);
    z-index: -1;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    right: -100%;
    -webkit-transition: all .35s;
    transition: all .35s;
  }

  #header_navi.open-menu {
    right: 0;
  }



  header nav ul {
    position: relative;
    z-index: 9;
    line-height: 1;
  }

  header nav ul li {
    font-size: calc(40 * var(--vw-sp));
    font-weight: 600;
    margin-bottom: calc(78 * var(--vw-sp));
  }

  header nav ul li ul {
    margin-top: calc(38 * var(--vw-sp));
  }

  header nav ul li ul li {
    font-size: calc(24 * var(--vw-sp));
    font-weight: 400;
    margin-bottom: calc(38 * var(--vw-sp));
  }

  header nav ul li ul li a {
    position: relative;
    padding-left: calc(32 * var(--vw-sp));
  }

  header nav ul li ul li a::before {
    content: '';
    width: calc(16 * var(--vw-sp));
    height: 1px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background-color: var(--bg-blue);
  }


  /*-----------------------------------------------------
  SP contents
------------------------------------------------------*/

  main section {
    padding: calc(160 * var(--vw-sp)) 0;
  }

  main section .sect_inner {
    width: 90.6667%;
  }

  main section h2 {
    margin-bottom: calc(160 * var(--vw-sp));
  }

  main section h2 .h2_en {
    font-size: calc(20 * var(--vw-sp));
    padding: 0 0 calc(17 * var(--vw-sp)) calc(42 * var(--vw-sp));
  }

  main section h2 .h2_jp {
    font-size: calc(60 * var(--vw-sp));
    padding: calc(23 * var(--vw-sp)) 0 0 calc(42 * var(--vw-sp));
    letter-spacing: 0.1em;
  }


  /*-----------------------------------------------------
  SP footer
------------------------------------------------------*/

  .footer_inner {
    width: 90.6667%;
  }

  footer nav {
    flex-wrap: wrap;
    padding: 0 calc(45 * var(--vw-sp));
    margin-bottom: 20px;
    line-height: 1.5;
  }

  footer #navi_box_01 {
    width: calc(390 * var(--vw-sp));
  }

  footer #navi_box_02 {
    width: calc(200 * var(--vw-sp));
  }

  footer #navi_box_03 {
    width: calc(390 * var(--vw-sp));
  }

  footer #navi_box_04 {
    width: calc(200 * var(--vw-sp));
  }

  footer .navi_box {
    margin-bottom: calc(33 * var(--vw-sp));
  }

  footer .navi_box h4 {
    margin-bottom: calc(25 * var(--vw-sp));
  }

  footer li {
    font-size: calc(24 * var(--vw-sp));
    margin-bottom: calc(30 * var(--vw-sp));
    padding-left: calc(26 * var(--vw-sp));
  }

  footer li::after {
    width: calc(16 * var(--vw-sp));
    top: calc(18 * var(--vw-sp));
    transform: none;
  }

  .footer_bottom {
    display: block;
    padding: 0 calc(45 * var(--vw-sp)) 4em;
  }

  #miya_sangyo_footer {
    width: calc(245 * var(--vw-sp));
  }

  #miya_estate_footer {
    width: calc(285 * var(--vw-sp));
  }

  .footer_address {
    display: block;
    padding-top: 0;
    padding-bottom: 60px;
  }

  .footer_address dl:first-child {
    margin-bottom: calc(35 * var(--vw-sp));
  }

  .footer_address dt {
    margin-bottom: calc(20 * var(--vw-sp));
  }

  .footer_address dd {
    font-size: calc(24 * var(--vw-sp));
  }

  #footer_map {
    width: 100%;
    height: calc(383 * var(--vw-sp));
  }

  #copyright {
    font-size: calc(18 * var(--vw-sp));
    text-align: center;
  }

}


/*-----------------------------------------------------
  br無効化
-----------------------------------------------------*/

@media screen and (min-width: 768px) {
  br.pc_br_off {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  br.sp_br_off {
    display: none;
  }
}