@charset "UTF-8";
html {
  min-width: 750px;
  color: #231815;
  font-size: 62.5%;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: 400;
  -webkit-text-size-adjust: 100%; }
  @media only screen and (min-width: 751px) and (max-width: 1280px) {
    html {
      font-size: 0.80vw; } }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    html {
      width: 750px; } }

body {
  font-size: 1.6rem;
  line-height: 3rem; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    body {
      font-size: 2.8rem;
      line-height: 5.6rem; } }

html, body {
  width: 100%; }

main {
  display: block; }

a {
  color: initial;
  text-decoration: underline; }
  @media only screen and (min-width: 751px) {
    a:hover {
      text-decoration: none; } }

h1, h2, h3, h4, h4 {
  margin: 0;
  padding: 0;
  font-size: 1.4rem;
  font-weight: 400; }

#layout {
  overflow: hidden; }

header #headerContact {
  position: fixed;
  width: 15.6rem;
  height: 8rem;
  top: 0;
  right: 8rem;
  z-index: 102;
  box-shadow: 0 0 0.8rem rgba(0, 0, 0, 0.3); }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    header #headerContact {
      width: 23.4rem;
      height: 12rem;
      right: 12rem; } }
  header #headerContact a {
    display: flex;
    width: 100%;
    height: 100%;
    font-size: 1.6rem;
    font-weight: bold;
    letter-spacing: 0.15rem;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    background: #fcd475; }
    @media only screen and (min-width: 751px) {
      header #headerContact a {
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s; }
        header #headerContact a:hover {
          color: #231815;
          background: #fff; } }
    @media only screen and (min-width: 1px) and (max-width: 750px) {
      header #headerContact a {
        font-size: 2.4rem;
        letter-spacing: 0.2rem; } }
header #gNavTrigger {
  position: fixed;
  width: 8rem;
  height: 8rem;
  top: 0;
  right: 0;
  cursor: pointer;
  box-shadow: 0 0 0.8rem rgba(0, 0, 0, 0.3);
  background: #fff;
  z-index: 101;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    header #gNavTrigger {
      width: 12rem;
      height: 12rem; } }
  @media only screen and (min-width: 751px) {
    header #gNavTrigger:hover {
      background: #f5f6f7; }
      header #gNavTrigger:hover .line {
        background: #231815; } }
  header #gNavTrigger .line {
    position: absolute;
    width: 2.7rem;
    height: 1px;
    top: 50%;
    left: calc(50% - (2.7rem / 2));
    background: #231815;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s; }
    @media only screen and (min-width: 1px) and (max-width: 750px) {
      header #gNavTrigger .line {
        width: 4rem;
        height: 2px;
        left: calc(50% - (4rem / 2)); } }
    header #gNavTrigger .line.line01 {
      transform: translateY(-1rem); }
      @media only screen and (min-width: 1px) and (max-width: 750px) {
        header #gNavTrigger .line.line01 {
          transform: translateY(-1.6rem); } }
    header #gNavTrigger .line.line03 {
      transform: translateY(1rem); }
      @media only screen and (min-width: 1px) and (max-width: 750px) {
        header #gNavTrigger .line.line03 {
          transform: translateY(1.6rem); } }
  header #gNavTrigger.active {
    background: #fff; }
    @media only screen and (min-width: 751px) {
      header #gNavTrigger.active:hover {
        background: #f5f6f7; }
        header #gNavTrigger.active:hover .line {
          background: #231815; } }
    header #gNavTrigger.active .line {
      background: #231815; }
      header #gNavTrigger.active .line.line01 {
        transform: translateY(0) rotate(45deg); }
      header #gNavTrigger.active .line.line02 {
        opacity: 0; }
      header #gNavTrigger.active .line.line03 {
        transform: translateY(0) rotate(-45deg); }
header #gNav {
  display: none;
  position: fixed;
  width: 100%;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  min-height: 65rem;
  background: url(../img/bg_section.png) no-repeat right top #fff;
  z-index: 100; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    header #gNav {
      min-height: 100vh;
      min-height: calc(var(--vh, 1vh) * 100); } }
  header #gNav .gNavInner {
    position: relative;
    max-width: 1200px;
    height: 100%;
    margin: auto; }
    @media only screen and (min-width: 1px) and (max-width: 750px) {
      header #gNav .gNavInner {
        padding-top: 20rem; } }
  header #gNav .innerLogo {
    display: flex;
    position: absolute;
    height: 8rem;
    top: 0;
    left: 2rem;
    align-items: center; }
    @media only screen and (min-width: 751px) and (max-width: 1280px) {
      header #gNav .innerLogo {
        left: 2rem; } }
    @media only screen and (min-width: 1px) and (max-width: 750px) {
      header #gNav .innerLogo {
        height: 12rem;
        left: 4rem; } }
  header #gNav .navFlex {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%; }
    @media only screen and (min-width: 1px) and (max-width: 750px) {
      header #gNav .navFlex {
        flex-direction: column;
        justify-content: flex-start; } }
    @media only screen and (min-width: 751px) {
      header #gNav .navFlex .visual {
        margin-right: 5.5rem; } }
    header #gNav .navFlex .visual img {
      width: 31.2rem;
      height: 32.1rem; }
      @media only screen and (min-width: 1px) and (max-width: 750px) {
        header #gNav .navFlex .visual img {
          width: 63.8rem;
          height: 14.4rem;
          margin: auto; } }
    @media only screen and (min-width: 1px) and (max-width: 750px) {
      header #gNav .navFlex ul {
        width: 63.8rem;
        margin: 6rem auto 0;
        border-top: 2px solid #b7b7b7; } }
    header #gNav .navFlex ul li {
      position: relative;
      line-height: 0; }
      @media only screen and (min-width: 751px) {
        header #gNav .navFlex ul li {
          padding-left: 2rem; }
          header #gNav .navFlex ul li:nth-child(n+2) {
            margin-top: 4.5rem; } }
      @media only screen and (min-width: 1px) and (max-width: 750px) {
        header #gNav .navFlex ul li {
          border-bottom: 2px solid #b7b7b7; } }
      header #gNav .navFlex ul li:before {
        content: "";
        position: absolute;
        width: 0.6rem;
        height: 0.6rem;
        top: 50%;
        left: 0;
        border-top: 1px solid #231815;
        border-right: 1px solid #231815;
        transform: translateY(-50%) rotate(45deg); }
        @media only screen and (min-width: 1px) and (max-width: 750px) {
          header #gNav .navFlex ul li:before {
            width: 1.2rem;
            height: 1.2rem;
            border-width: 2px; } }
      header #gNav .navFlex ul li a {
        display: inline-block;
        position: relative; }
        header #gNav .navFlex ul li a:before {
          content: "";
          position: absolute;
          width: 0;
          height: 1px;
          left: 0;
          bottom: -0.5rem;
          background: #231815;
          transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s; }
        @media only screen and (min-width: 751px) {
          header #gNav .navFlex ul li a:hover:before {
            width: 100%; } }
        @media only screen and (min-width: 1px) and (max-width: 750px) {
          header #gNav .navFlex ul li a {
            display: block;
            padding: 3.6rem 3.5rem; } }
      header #gNav .navFlex ul li .nav01 {
        width: 33.4rem; }
        @media only screen and (min-width: 1px) and (max-width: 750px) {
          header #gNav .navFlex ul li .nav01 {
            width: 26.8rem; } }
      header #gNav .navFlex ul li .nav02 {
        width: 40.4rem; }
        @media only screen and (min-width: 1px) and (max-width: 750px) {
          header #gNav .navFlex ul li .nav02 {
            width: 34.8rem; } }
      header #gNav .navFlex ul li .nav03 {
        width: 49.0rem; }
        @media only screen and (min-width: 1px) and (max-width: 750px) {
          header #gNav .navFlex ul li .nav03 {
            width: 34.0rem; } }
      header #gNav .navFlex ul li .nav04 {
        width: 36.5rem; }
        @media only screen and (min-width: 1px) and (max-width: 750px) {
          header #gNav .navFlex ul li .nav04 {
            width: 33.2rem; } }
      header #gNav .navFlex ul li .nav05 {
        width: 39.6rem; }
        @media only screen and (min-width: 1px) and (max-width: 750px) {
          header #gNav .navFlex ul li .nav05 {
            width: 29.4rem; } }

footer .footerVisual {
  padding-bottom: 65vw;
  background: url(../img/bg_footer.jpg) no-repeat center bottom;
  background-size: 100%; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    footer .footerVisual {
      padding-bottom: 76vw;
      background: url(../img/bg_footer_sp.jpg) no-repeat center bottom;
      background-size: 100%; } }
  footer .footerVisual .footerLogo {
    width: 32.4rem;
    margin: auto; }
    @media only screen and (min-width: 1px) and (max-width: 750px) {
      footer .footerVisual .footerLogo {
        width: 42rem; } }
footer .footerInner {
  position: relative;
  padding: 7rem 0 5rem;
  text-align: center;
  background: #f5f6f7; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    footer .footerInner {
      padding: 14rem 0 10rem; } }
  footer .footerInner:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2rem;
    top: 0;
    left: 0;
    background: url(../img/bg_mainimage_wood.jpg) repeat-x center center; }
  footer .footerInner p {
    font-size: 2.4rem; }
  footer .footerInner .btnList {
    display: flex;
    margin-top: 3rem;
    justify-content: center; }
    footer .footerInner .btnList li:nth-child(n+2) {
      margin-left: 4rem; }
    footer .footerInner .btnList a {
      display: flex;
      width: 32.0rem;
      height: 6rem;
      font-size: 1.8rem;
      font-weight: bold;
      text-decoration: none;
      align-items: center;
      justify-content: center;
      border-radius: 3rem;
      background: #fff;
      box-shadow: 0 0 0.8rem rgba(0, 0, 0, 0.3); }
  footer .footerInner .footerLogoWrap {
    display: flex;
    margin-top: 6rem;
    align-items: center;
    justify-content: center; }
    footer .footerInner .footerLogoWrap a:nth-child(n+2) {
      margin-left: 5rem; }
    @media only screen and (min-width: 1px) and (max-width: 750px) {
      footer .footerInner .footerLogoWrap {
        margin: 8rem 8rem 0; } }
  footer .footerInner .snsList {
    display: flex;
    margin-top: 7.5rem;
    align-items: center;
    justify-content: center; }
    footer .footerInner .snsList li:nth-child(n+2) {
      margin-left: 4rem; }
      @media only screen and (min-width: 1px) and (max-width: 750px) {
        footer .footerInner .snsList li:nth-child(n+2) {
          margin-left: 8rem; } }
footer .copyright {
  display: flex;
  flex-direction: column;
  height: 15rem;
  color: #fff;
  text-align: center;
  align-items: center;
  justify-content: center;
  background: #6c7377; }
  footer .copyright .textLink {
    display: flex;
    font-size: 1.4rem;
    justify-content: center; }
    footer .copyright .textLink li:nth-child(n+2) {
      position: relative;
      margin-left: 3rem;
      padding-left: 3rem; }
      footer .copyright .textLink li:nth-child(n+2):before {
        content: "｜";
        position: absolute;
        top: 0;
        left: -0.5em; }
    footer .copyright .textLink a {
      color: #fff;
      text-decoration: none; }
  footer .copyright small {
    margin-top: 2rem;
    font-size: 1.2rem; }

#mainImageWrap {
  position: relative;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  min-height: 67rem;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzZjNzM3NyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzhhODk4OSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #6c7377), color-stop(100%, #8a8989));
  background-image: -moz-linear-gradient(top, #6c7377 0%, #8a8989 100%);
  background-image: -webkit-linear-gradient(top, #6c7377 0%, #8a8989 100%);
  background-image: linear-gradient(to bottom, #6c7377 0%, #8a8989 100%); }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    #mainImageWrap {
      min-height: 150vw; } }
  #mainImageWrap:before {
    content: "";
    position: absolute;
    width: 100%;
    height: calc(100% - 2rem);
    max-height: 65rem;
    left: 0;
    bottom: 2rem;
    background: url(../img/bg_mainimage.png) no-repeat right bottom;
    background-size: auto 100%; }
    @media only screen and (min-width: 1px) and (max-width: 750px) {
      #mainImageWrap:before {
        height: 100%;
        max-height: 100%;
        bottom: 4rem;
        background: url(../img/bg_mainimage.png) no-repeat right bottom;
        background-size: 72.2rem; } }
  #mainImageWrap:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2rem;
    left: 0;
    bottom: 0;
    background: url(../img/bg_mainimage_wood.jpg) repeat-x center center; }
@media only screen and (min-width: 1px) and (max-width: 750px) {
      #mainImageWrap:after {
        height: 4rem;
        background: url(../img/bg_mainimage_wood_sp.jpg) repeat-x center center; } 
    }
    #mainImageWrap .mainImageHeader { position: absolute; width: 100%; z-index: 10; background: #fff;}
    #mainImageWrap .mainImageHeader .headerInner {
      display: flex;
      height: 8rem;
      margin: auto;
      padding-left: 2rem;
      padding-right: 12rem;
      justify-content: space-between;
      align-items: center; }
      @media only screen and (min-width: 1px) and (max-width: 750px) {
        #mainImageWrap .mainImageHeader .headerInner {
          height: 12rem;
          padding-left: 4rem; } }
    #mainImageWrap .mainImageHeader .headerNav {
      display: flex;
      align-items: center; }
      @media only screen and (min-width: 1px) and (max-width: 750px) {
        #mainImageWrap .mainImageHeader .headerNav {
          display: none; } }
      #mainImageWrap .mainImageHeader .headerNav li:nth-child(n+2) {
        margin-left: 1.5rem; }
      #mainImageWrap .mainImageHeader .headerNav a {
        display: block;
        position: relative;
        color: #fff;
        font-weight: bold;
        text-decoration: none;
        overflow: hidden; }
        #mainImageWrap .mainImageHeader .headerNav a:hover .en {
          transform: translateY(-100%);
          opacity: 0; }
        #mainImageWrap .mainImageHeader .headerNav a:hover .jp {
          top: 0;
          opacity: 1; }
      #mainImageWrap .mainImageHeader .headerNav span {
        display: block;
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s; }
      #mainImageWrap .mainImageHeader .headerNav .en {
        position: relative;
        letter-spacing: 0.1rem; }
      #mainImageWrap .mainImageHeader .headerNav .jp {
        position: absolute;
        width: 100%;
        text-align: center;
        top: 100%;
        letter-spacing: 0.1rem;
        white-space: nowrap;
        opacity: 0; }
  #mainImageWrap .mainImageInner {
    position: relative;
    height: 100%; }
    @media only screen and (min-width: 751px) {
      #mainImageWrap .mainImageInner {
        display: flex;
        align-items: center;
        max-width: 1200px;
        margin: auto; } }
    @media only screen and (min-width: 751px) and (max-width: 1280px) {
      #mainImageWrap .mainImageInner {
        padding-left: 2rem; } }
    @media only screen and (min-width: 1px) and (max-width: 750px) {
      #mainImageWrap .mainImageInner {
        display: flex;
        align-items: center;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-bottom: 66vw; } }
    @media only screen and (min-width: 751px) {
      #mainImageWrap .mainImageInner .h_mainimage_copy {
        position: absolute;
        bottom: 7rem;
        right: 50%;
        transform: translateX(-6.5rem); } }
    @media only screen and (min-width: 1px) and (max-width: 750px) {
      #mainImageWrap .mainImageInner .h_mainimage_copy {
        margin-top: 5rem; } }
  #mainImageWrap .scroll {
    position: absolute;
    height: 13.6rem;
    left: 0;
    bottom: 0; }
    @media only screen and (min-width: 751px) and (max-width: 1280px) {
      #mainImageWrap .scroll {
        left: 2rem; } }
    @media only screen and (min-width: 1px) and (max-width: 750px) {
      #mainImageWrap .scroll {
        height: 27.2rem;
        left: 2.6rem; } }
    #mainImageWrap .scroll:before {
      content: "";
      position: absolute;
      width: 1px;
      height: 100%;
      top: 0;
      left: 0;
      background: #fff; }
      @media only screen and (min-width: 1px) and (max-width: 750px) {
        #mainImageWrap .scroll:before {
          width: 2px; } }
    #mainImageWrap .scroll span {
      display: block;
      color: #fff;
      font-size: 1.1rem;
      letter-spacing: 0.1rem;
      transform-origin: left bottom;
      transform: translateY(-2em) rotate(90deg); }
      @media only screen and (min-width: 1px) and (max-width: 750px) {
        #mainImageWrap .scroll span {
          font-size: 2.2rem; } }

section .sectionInner {
  max-width: 1200px;
  margin: auto;
  padding: 11rem 0 10rem; }
  @media only screen and (min-width: 751px) and (max-width: 1280px) {
    section .sectionInner {
      max-width: 100%;
      padding-left: 2rem;
      padding-right: 2rem; } }
section h2 {
  position: relative; }
  section h2:before {
    content: "";
    position: absolute;
    width: 6.1rem;
    height: 5.2rem;
    top: 0;
    right: calc(100% + 2rem);
    background: url(../img/bg_headline.jpg) no-repeat center center;
    background-size: cover; }
  @media only screen and (min-width: 751px) and (max-width: 1280px) {
    section h2 {
      margin-left: 2rem; } }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    section h2 {
      margin-left: 9rem; }
      section h2:before {
        width: 7rem;
        height: 6rem;
        top: -0.4rem;
        left: -9rem;
        right: auto;
        background: url(../img/bg_headline_sp.jpg) no-repeat center center;
        background-size: cover; } }
section .accordionTrigger {
  display: flex;
  position: relative;
  width: 100%;
  height: 8rem;
  padding-left: 3.5rem;
  align-items: center;
  font-size: 3rem;
  font-weight: bold;
  cursor: pointer;
  border-top: 1px solid #b7b7b7;
  border-bottom: 1px solid #b7b7b7;
  margin-top: -1px; }
  @media only screen and (min-width: 751px) {
    section .accordionTrigger {
      transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s; }
      section .accordionTrigger:hover {
        opacity: 0.5; } }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    section .accordionTrigger {
      height: 16rem;
      padding-left: 4rem;
      font-size: 3.6rem;
      line-height: 5.6rem;
      border-width: 2px;
      margin-top: -2px; } }
  section .accordionTrigger:before {
    content: "";
    position: absolute;
    width: 2.2rem;
    height: 2.2rem;
    top: 50%;
    right: 3rem;
    border-right: 1px solid #231815;
    border-bottom: 1px solid #231815;
    transform: translateY(-75%) rotate(45deg);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s; }
    @media only screen and (min-width: 1px) and (max-width: 750px) {
      section .accordionTrigger:before {
        width: 3.2rem;
        height: 3.2rem;
        right: 6rem;
        border-width: 2px; } }
  section .accordionTrigger.active:before {
    transform: translateY(-25%) rotate(-135deg); }
section .accordion {
  display: none; }
  section .accordion.default {
    display: block; }
  section .accordion .accordionInner {
    padding: 4rem 5.5rem; }
    @media only screen and (min-width: 1px) and (max-width: 750px) {
      section .accordion .accordionInner {
        padding: 4.4rem 4rem; } }
  @media only screen and (min-width: 751px) {
    section .accordion .flex {
      display: flex;
      justify-content: space-between; } }
  section .accordion h4 {
    font-size: 2.4rem;
    line-height: 4rem;
    font-weight: bold; }
    @media only screen and (min-width: 1px) and (max-width: 750px) {
      section .accordion h4 {
        font-size: 3.2rem;
        line-height: 5.6rem; } }
@media only screen and (min-width: 1px) and (max-width: 750px) {
  section .imgWrap img {
    margin: auto; } }
section .imgCaption {
  margin-top: 0.5rem;
  font-size: 1.4rem;
  line-height: 2.4rem; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    section .imgCaption {
      margin-top: 1rem;
      font-size: 2.4rem;
      line-height: 2.8rem; } }
@media only screen and (min-width: 751px) {
  section .comboSet > *:last-child {
    margin-left: 1rem; } }
@media only screen and (min-width: 1px) and (max-width: 750px) {
  section .comboSet > *:last-child {
    margin-top: 4rem; } }
section .attention {
  margin-top: 3rem;
  font-size: 1.4rem;
  line-height: 2.4rem;
  padding-left: 1em;
  text-indent: -1em; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    section .attention {
      margin-top: 6rem;
      font-size: 2.4rem;
      line-height: 2.8rem; } }

#concept {
  background: url(../img/bg_section.png) no-repeat right top; }
  #concept h2 {
    width: 52.1rem; }
    @media only screen and (min-width: 1px) and (max-width: 750px) {
      #concept h2 {
        width: 33.2rem; } }
  #concept .conceptVisualWrap {
    position: relative;
    padding-bottom: 6rem; }
    #concept .conceptVisualWrap #fadeChangeVisual {
      position: relative;
      width: 93.2rem;
      height: 57.7rem;
      margin-top: 8.6rem; }
      @media only screen and (min-width: 1px) and (max-width: 750px) {
        #concept .conceptVisualWrap #fadeChangeVisual {
          width: 100%;
          height: 46.4rem; } }
    @media only screen and (min-width: 751px) {
      #concept .conceptVisualWrap h3 {
        position: absolute;
        width: 47.6rem;
        top: 4.8rem;
        right: 0;
        z-index: 2; } }
    @media only screen and (min-width: 1px) and (max-width: 750px) {
      #concept .conceptVisualWrap h3 {
        width: 40rem;
        margin: 7rem auto 0;
        transform: translateX(4rem); } }
  #concept .conceptDetailWrap {
    position: relative;
    margin-top: 7rem;
    text-align: center;
    letter-spacing: 0.2rem; }
    @media only screen and (min-width: 1px) and (max-width: 750px) {
      #concept .conceptDetailWrap {
        margin-top: 6rem;
        padding-top: 35.8rem;
        padding-bottom: 37.8rem; } }
    #concept .conceptDetailWrap:before, #concept .conceptDetailWrap:after {
      content: "";
      position: absolute; }
      @media only screen and (min-width: 751px) {
        #concept .conceptDetailWrap:before, #concept .conceptDetailWrap:after {
          width: 21rem;
          height: 100%;
          top: 0; } }
      @media only screen and (min-width: 1px) and (max-width: 750px) {
        #concept .conceptDetailWrap:before, #concept .conceptDetailWrap:after {
          width: 100%;
          height: 29.8rem;
          left: 0; } }
    @media only screen and (min-width: 751px) {
      #concept .conceptDetailWrap:before {
        left: 9rem;
        background: url(../img/ph_concept_02.jpg) no-repeat center center;
        background-size: 100% auto; } }
    @media only screen and (min-width: 1px) and (max-width: 750px) {
      #concept .conceptDetailWrap:before {
        top: 0;
        background: url(../img/ph_concept_02_sp.jpg) no-repeat center center;
        background-size: cover; } }
    @media only screen and (min-width: 751px) {
      #concept .conceptDetailWrap:after {
        right: 9rem;
        background: url(../img/ph_concept_03.jpg) no-repeat center center;
        background-size: 100% auto; } }
    @media only screen and (min-width: 1px) and (max-width: 750px) {
      #concept .conceptDetailWrap:after {
        bottom: 0;
        background: url(../img/ph_concept_03_sp.jpg) no-repeat center center;
        background-size: cover; } }
    #concept .conceptDetailWrap h3 {
      font-size: 2.2rem;
      font-weight: bold;
      line-height: 4.5rem; }
      @media only screen and (min-width: 1px) and (max-width: 750px) {
        #concept .conceptDetailWrap h3 {
          font-size: 3.6rem;
          line-height: 8rem; } }
    #concept .conceptDetailWrap p {
      margin-top: 4rem;
      line-height: 4rem; }
      @media only screen and (min-width: 1px) and (max-width: 750px) {
        #concept .conceptDetailWrap p {
          font-size: 2.8rem;
          line-height: 7.2rem; } }
    #concept .conceptDetailWrap .conceptLogo {
      margin-top: 4rem; }

#exterior {
  background: url(../img/bg_section_exterior.png) no-repeat right top #f5f6f7; }
  #exterior h2 {
    width: 66.3rem; }
    @media only screen and (min-width: 1px) and (max-width: 750px) {
      #exterior h2 {
        width: 56.6rem; } }
  #exterior article {
    margin-top: 10rem; }
    @media only screen and (min-width: 751px) {
      #exterior article .articleInner {
        display: flex;
        position: relative; }
        #exterior article .articleInner .designVisual {
          position: absolute;
          bottom: 0; } }
    @media only screen and (min-width: 751px) {
      #exterior article .articleInner .designDetail {
        width: 48rem; } }
    #exterior article .articleInner .designDetail h3 {
      padding-top: 13rem;
      font-size: 3rem;
      font-weight: bold; }
      @media only screen and (min-width: 1px) and (max-width: 750px) {
        #exterior article .articleInner .designDetail h3 {
          padding: 13rem 4rem 0; } }
    #exterior article .articleInner .designDetail p {
      margin-top: 1rem; }
      @media only screen and (min-width: 1px) and (max-width: 750px) {
        #exterior article .articleInner .designDetail p {
          padding: 0 4rem; } }
    @media only screen and (min-width: 1px) and (max-width: 750px) {
      #exterior article .articleInner .designDetail .designVisual {
        margin-top: 4rem; }
        #exterior article .articleInner .designDetail .designVisual .imgCaption {
          text-align: center; } }
    #exterior article .articleInner .designDetail .imgCaption span.en {
      display: block;
      letter-spacing: 0.1rem; }
      @media only screen and (min-width: 1px) and (max-width: 750px) {
        #exterior article .articleInner .designDetail .imgCaption span.en {
          margin-bottom: 1rem; } }
    #exterior article .articleInner .designDetail h4 {
      margin-top: 4rem;
      letter-spacing: 0.1rem;
      border-bottom: 1px solid #231815; }
      @media only screen and (min-width: 1px) and (max-width: 750px) {
        #exterior article .articleInner .designDetail h4 {
          margin: 4rem 4rem 0;
          font-size: 2.4rem;
          border-width: 2px; } }
    #exterior article .articleInner .designDetail .colorVariation {
      display: flex;
      margin-top: 2rem;
      justify-content: space-between; }
      @media only screen and (min-width: 1px) and (max-width: 750px) {
        #exterior article .articleInner .designDetail .colorVariation {
          margin: 2.8rem 4rem 0; } }
      #exterior article .articleInner .designDetail .colorVariation li {
        width: 22.1rem; }
        @media only screen and (min-width: 1px) and (max-width: 750px) {
          #exterior article .articleInner .designDetail .colorVariation li {
            width: 31.4rem; } }
    #exterior article.design01 .articleInner {
      justify-content: flex-end; }
    @media only screen and (min-width: 751px) {
      #exterior article.design01 .designVisual {
        width: 71rem;
        left: -8.1rem; }
        #exterior article.design01 .designVisual .imgCaption {
          padding-left: 8.1rem; } }
    #exterior article.design01 .designDetail h3 {
      background: url(../img/h_exterior_01.png) no-repeat center top;
      background-size: 9.6rem; }
    #exterior article.design02 {
      padding-top: 6rem; }
      @media only screen and (min-width: 751px) {
        #exterior article.design02 .designVisual {
          width: 71.6rem;
          right: -8.1rem; } }
      #exterior article.design02 .designDetail h3 {
        background: url(../img/h_exterior_02.png) no-repeat center top;
        background-size: 9.6rem; }
      @media only screen and (min-width: 751px) {
        #exterior article.design02 .designDetail h3,
        #exterior article.design02 .designDetail p {
          white-space: nowrap; } }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    #exterior .attention {
      margin-left: 4rem;
      margin-right: 4rem; } }

#interior {
  background: url(../img/bg_section.png) no-repeat right top; }
  #interior h2 {
    width: 77.3rem; }
    @media only screen and (min-width: 1px) and (max-width: 750px) {
      #interior h2 {
        width: 55.4rem; } }
  #interior #interiorGraph {
    position: relative;
    width: 58.4rem;
    height: 58.8rem;
    margin: 10rem auto 0;
    background: url(../img/bg_interior_graph.png) no-repeat center center;
    background-size: cover; }
    @media only screen and (min-width: 1px) and (max-width: 750px) {
      #interior #interiorGraph {
        width: 70.2rem;
        height: 70.6rem;
        background: url(../img/bg_interior_graph_sp.png) no-repeat center center;
        background-size: cover; } }
    #interior #interiorGraph button {
      position: absolute;
      width: 1.8rem;
      height: 1.8rem;
      border: none;
      background: #000;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      cursor: pointer;
      font-size: 0;
      line-height: 0;
      overflow: hidden;
      transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s; }
      @media only screen and (min-width: 1px) and (max-width: 750px) {
        #interior #interiorGraph button {
          width: 2.2rem;
          height: 2.2rem; } }
      #interior #interiorGraph button span {
        display: block;
        text-indent: -9999px;
        overflow: hidden; }
      @media only screen and (min-width: 751px) {
        #interior #interiorGraph button:hover {
          background: #fcd475; } }
      #interior #interiorGraph button.active {
        width: 2.4rem;
        height: 2.4rem;
        background: #fcd475; }
        @media only screen and (min-width: 1px) and (max-width: 750px) {
          #interior #interiorGraph button.active {
            width: 2.8rem;
            height: 2.8rem; } }
      #interior #interiorGraph button[data-index="1"] {
        top: calc(2.4rem + (4.920% * 6));
        left: calc(4.7rem + (4.975% * 2)); }
        @media only screen and (min-width: 1px) and (max-width: 750px) {
          #interior #interiorGraph button[data-index="1"] {
            top: calc(2.8rem + (4.920% * 6));
            left: calc(5.7rem + (4.975% * 2)); } }
      #interior #interiorGraph button[data-index="2"] {
        top: calc(2.4rem + (4.920% * 10));
        left: calc(4.7rem + (4.975% * 4)); }
        @media only screen and (min-width: 1px) and (max-width: 750px) {
          #interior #interiorGraph button[data-index="2"] {
            top: calc(2.8rem + (4.920% * 10));
            left: calc(5.7rem + (4.975% * 4)); } }
      #interior #interiorGraph button[data-index="3"] {
        top: calc(2.4rem + (4.920% * 15));
        left: calc(4.7rem + (4.975% * 10)); }
        @media only screen and (min-width: 1px) and (max-width: 750px) {
          #interior #interiorGraph button[data-index="3"] {
            top: calc(2.8rem + (4.920% * 15));
            left: calc(5.7rem + (4.975% * 10)); } }
      #interior #interiorGraph button[data-index="4"] {
        top: calc(2.4rem + (4.920% * 6));
        left: calc(4.7rem + (4.975% * 4)); }
        @media only screen and (min-width: 1px) and (max-width: 750px) {
          #interior #interiorGraph button[data-index="4"] {
            top: calc(2.8rem + (4.920% * 6));
            left: calc(5.7rem + (4.975% * 4)); } }
      #interior #interiorGraph button[data-index="5"] {
        top: calc(2.4rem + (4.920% * 8));
        left: calc(4.7rem + (4.975% * 5)); }
        @media only screen and (min-width: 1px) and (max-width: 750px) {
          #interior #interiorGraph button[data-index="5"] {
            top: calc(2.8rem + (4.920% * 8));
            left: calc(5.7rem + (4.975% * 5)); } }
      #interior #interiorGraph button[data-index="6"] {
        top: calc(2.4rem + (4.920% * 12));
        left: calc(4.7rem + (4.975% * 9)); }
        @media only screen and (min-width: 1px) and (max-width: 750px) {
          #interior #interiorGraph button[data-index="6"] {
            top: calc(2.8rem + (4.920% * 12));
            left: calc(5.7rem + (4.975% * 9)); } }
      #interior #interiorGraph button[data-index="7"] {
        top: calc(2.4rem + (4.920% * 15));
        left: calc(4.7rem + (4.975% * 13)); }
        @media only screen and (min-width: 1px) and (max-width: 750px) {
          #interior #interiorGraph button[data-index="7"] {
            top: calc(2.8rem + (4.920% * 15));
            left: calc(5.7rem + (4.975% * 13)); } }
      #interior #interiorGraph button[data-index="8"] {
        top: calc(2.4rem + (4.920% * 3));
        left: calc(4.7rem + (4.975% * 5)); }
        @media only screen and (min-width: 1px) and (max-width: 750px) {
          #interior #interiorGraph button[data-index="8"] {
            top: calc(2.8rem + (4.920% * 3));
            left: calc(5.7rem + (4.975% * 5)); } }
      #interior #interiorGraph button[data-index="9"] {
        top: calc(2.4rem + (4.920% * 7));
        left: calc(4.7rem + (4.975% * 7)); }
        @media only screen and (min-width: 1px) and (max-width: 750px) {
          #interior #interiorGraph button[data-index="9"] {
            top: calc(2.8rem + (4.920% * 7));
            left: calc(5.7rem + (4.975% * 7)); } }
      #interior #interiorGraph button[data-index="10"] {
        top: calc(2.4rem + (4.920% * 12));
        left: calc(4.7rem + (4.975% * 12)); }
        @media only screen and (min-width: 1px) and (max-width: 750px) {
          #interior #interiorGraph button[data-index="10"] {
            top: calc(2.8rem + (4.920% * 12));
            left: calc(5.7rem + (4.975% * 12)); } }
      #interior #interiorGraph button[data-index="11"] {
        top: calc(2.4rem + (4.920% * 3));
        left: calc(4.7rem + (4.975% * 7)); }
        @media only screen and (min-width: 1px) and (max-width: 750px) {
          #interior #interiorGraph button[data-index="11"] {
            top: calc(2.8rem + (4.920% * 3));
            left: calc(5.7rem + (4.975% * 7)); } }
      #interior #interiorGraph button[data-index="12"] {
        top: calc(2.4rem + (4.920% * 7));
        left: calc(4.7rem + (4.975% * 10)); }
        @media only screen and (min-width: 1px) and (max-width: 750px) {
          #interior #interiorGraph button[data-index="12"] {
            top: calc(2.8rem + (4.920% * 7));
            left: calc(5.7rem + (4.975% * 10)); } }
      #interior #interiorGraph button[data-index="13"] {
        top: calc(2.4rem + (4.920% * 11));
        left: calc(4.7rem + (4.975% * 13)); }
        @media only screen and (min-width: 1px) and (max-width: 750px) {
          #interior #interiorGraph button[data-index="13"] {
            top: calc(2.8rem + (4.920% * 11));
            left: calc(5.7rem + (4.975% * 13)); } }
      #interior #interiorGraph button[data-index="14"] {
        top: calc(2.4rem + (4.920% * 12));
        left: calc(4.7rem + (4.975% * 15)); }
        @media only screen and (min-width: 1px) and (max-width: 750px) {
          #interior #interiorGraph button[data-index="14"] {
            top: calc(2.8rem + (4.920% * 12));
            left: calc(5.7rem + (4.975% * 15)); } }
  #interior #interiorSlide {
    position: relative;
    width: 100rem;
    margin: 3rem auto 0;
    border: 1px solid #e9e9e9; }
    @media only screen and (min-width: 1px) and (max-width: 750px) {
      #interior #interiorSlide {
        width: 58rem;
        border-width: 1px; } }
    #interior #interiorSlide .slick-arrow {
      position: absolute;
      width: 0;
      height: 0;
      top: 50%;
      text-indent: -9999px;
      border: none;
      background: none; }
      @media only screen and (min-width: 751px) {
        #interior #interiorSlide .slick-arrow {
          transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s; }
          #interior #interiorSlide .slick-arrow:hover {
            opacity: 0.5; } }
      #interior #interiorSlide .slick-arrow:before {
        content: "";
        position: absolute;
        width: 2.8rem;
        height: 2.8rem;
        top: 50%;
        left: 50%;
        border-top: 1px solid #231815;
        border-left: 1px solid #231815;
        cursor: pointer; }
      #interior #interiorSlide .slick-arrow.slick-prev {
        left: -5rem; }
        #interior #interiorSlide .slick-arrow.slick-prev:before {
          transform: translate(-50%, -50%) rotate(-45deg); }
      #interior #interiorSlide .slick-arrow.slick-next {
        right: -5rem; }
        #interior #interiorSlide .slick-arrow.slick-next:before {
          transform: translate(-50%, -50%) rotate(135deg); }

#feature {
  background: url(../img/bg_section_feature.png) no-repeat right top #faf7f2; }
  #feature h2 {
    width: 56.3rem; }
    @media only screen and (min-width: 1px) and (max-width: 750px) {
      #feature h2 {
        width: 36.2rem; } }
    #feature h2 + article {
      margin-top: 10rem; }
  #feature .accordionTrigger {
    border-left: 5px solid #fcd475;
    background: #fef5de; }
    @media only screen and (min-width: 1px) and (max-width: 750px) {
      #feature .accordionTrigger {
        border-left-width: 10px; } }
  #feature .accordion {
    background: #fff; }
    #feature .accordion * ~ p, #feature .accordion * ~ .imgWrap {
      margin-top: 3rem; }
      @media only screen and (min-width: 1px) and (max-width: 750px) {
        #feature .accordion * ~ p, #feature .accordion * ~ .imgWrap {
          margin-top: 4rem; } }
    @media only screen and (min-width: 1px) and (max-width: 750px) {
      #feature .accordion .imgWrap .imgCaption {
        margin-top: 4rem;
        font-size: 2.8rem;
        line-height: 5.6rem; } }
    @media only screen and (min-width: 751px) {
      #feature .accordion.feature01 .flexItem:first-child {
        width: 57rem; }
      #feature .accordion.feature01 .flexItem:last-child {
        display: flex;
        width: 46.6rem;
        flex-direction: column;
        justify-content: space-between; } }
    @media only screen and (min-width: 751px) {
      #feature .accordion.feature02 .flexItem:first-child {
        width: 55.2rem; }
      #feature .accordion.feature02 .flexItem:last-child {
        width: 50.1rem; } }
    @media only screen and (min-width: 751px) {
      #feature .accordion.feature02 .flexItem .petwalkLayout {
        display: flex;
        margin-top: 3rem;
        justify-content: space-between; } }
    @media only screen and (min-width: 1px) and (max-width: 750px) {
      #feature .accordion.feature02 .flexItem .petwalkLayout {
        width: 52rem;
        margin: auto; } }
    @media only screen and (min-width: 751px) {
      #feature .accordion.feature02 .flexItem .petwalkLayout .petwalkBlock {
        width: 26rem; } }
    @media only screen and (min-width: 1px) and (max-width: 750px) {
      #feature .accordion.feature02 .flexItem .petwalkLayout .petwalkBlock {
        margin-top: 4rem; } }
    #feature .accordion.feature02 .flexItem .petwalkLayout .petwalkBlock dt {
      display: flex;
      width: 100%;
      height: 3.6rem;
      font-weight: bold;
      align-items: center;
      justify-content: center;
      background: #fcd475;
      border-radius: 1.8rem; }
      @media only screen and (min-width: 1px) and (max-width: 750px) {
        #feature .accordion.feature02 .flexItem .petwalkLayout .petwalkBlock dt {
          height: 7.2rem;
          font-size: 3.2rem;
          border-radius: 3.6rem; } }
    @media only screen and (min-width: 751px) {
      #feature .accordion.feature02 .flexItem .petwalkLayout .petwalkBlock dd {
        margin-top: 1rem;
        font-size: 1.4rem;
        line-height: 2.4rem; } }
    @media only screen and (min-width: 1px) and (max-width: 750px) {
      #feature .accordion.feature02 .flexItem .petwalkLayout .petwalkBlock dd {
        margin-top: 2rem;
        line-height: 4.8rem; } }
    #feature .accordion.feature02 .petwalkDetailLayout {
      margin-top: 3rem;
      background: #f5f6f7; }
      @media only screen and (min-width: 751px) {
        #feature .accordion.feature02 .petwalkDetailLayout {
          display: flex;
          justify-content: space-between;
          padding: 3rem 4rem; } }
      @media only screen and (min-width: 1px) and (max-width: 750px) {
        #feature .accordion.feature02 .petwalkDetailLayout {
          padding: 3rem 3.5rem; } }
      @media only screen and (min-width: 751px) {
        #feature .accordion.feature02 .petwalkDetailLayout .imgWrap:first-child {
          width: 43.7rem; }
        #feature .accordion.feature02 .petwalkDetailLayout .imgWrap:last-child {
          width: 52.6rem; } }
    @media only screen and (min-width: 751px) {
      #feature .accordion.feature03 .flexItem:first-child {
        width: 51.3rem; }
      #feature .accordion.feature03 .flexItem:last-child {
        width: 54.0rem; } }
    @media only screen and (min-width: 1px) and (max-width: 750px) {
      #feature .accordion.feature03 .flexItem:last-child {
        margin-top: 0; } }
    @media only screen and (min-width: 751px) {
      #feature .accordion.feature03 .rainyLayout {
        display: flex;
        margin-top: 3rem;
        justify-content: space-between; } }
    @media only screen and (min-width: 1px) and (max-width: 750px) {
      #feature .accordion.feature03 .rainyLayout {
        margin-top: 4rem; } }
    @media only screen and (min-width: 751px) {
      #feature .accordion.feature03 .rainyLayout .rainyBlock:first-child {
        width: 29.3rem; }
      #feature .accordion.feature03 .rainyLayout .rainyBlock:last-child {
        width: 23.5rem; } }
    @media only screen and (min-width: 1px) and (max-width: 750px) {
      #feature .accordion.feature03 .rainyLayout .rainyBlock:last-child .imgWrap:not(.float) {
        display: flex; }
        #feature .accordion.feature03 .rainyLayout .rainyBlock:last-child .imgWrap:not(.float) picture {
          width: 24.8rem;
          margin-right: 3rem;
          flex-shrink: 0; }
        #feature .accordion.feature03 .rainyLayout .rainyBlock:last-child .imgWrap:not(.float) .imgCaption {
          margin-top: 0; } }
    @media only screen and (min-width: 751px) {
      #feature .accordion.feature03 .rainyLayout .rainyBlock .float {
        position: relative; }
        #feature .accordion.feature03 .rainyLayout .rainyBlock .float img {
          position: absolute;
          max-width: none;
          width: 24.6rem;
          top: 2rem;
          left: -1rem; } }
    @media only screen and (min-width: 751px) {
      #feature .accordion.feature04 .flexItem:first-child {
        width: 51.3rem; }
      #feature .accordion.feature04 .flexItem:last-child {
        width: 54.0rem; } }
    @media only screen and (min-width: 751px) {
      #feature .accordion.feature04 .pantryLayout {
        display: flex;
        justify-content: space-between; } }
    @media only screen and (min-width: 1px) and (max-width: 750px) {
      #feature .accordion.feature04 .pantryLayout .spFlex .imgWrap {
        display: flex; }
        #feature .accordion.feature04 .pantryLayout .spFlex .imgWrap picture {
          width: 26.8rem;
          margin-right: 3rem;
          flex-shrink: 0; }
        #feature .accordion.feature04 .pantryLayout .spFlex .imgWrap .imgCaption {
          margin-top: 0; }
      #feature .accordion.feature04 .pantryLayout:last-child {
        margin-top: 4rem; } }
    @media only screen and (min-width: 751px) {
      #feature .accordion.feature04 .pantryLayout .pantryBlock:first-child {
        width: 30.2rem; }
      #feature .accordion.feature04 .pantryLayout .pantryBlock:last-child {
        width: 21.3rem; } }
    @media only screen and (min-width: 751px) {
      #feature .accordion.feature04 .pantryLayout .pantryBlock .float {
        position: relative; }
        #feature .accordion.feature04 .pantryLayout .pantryBlock .float img {
          position: absolute;
          width: 24.5rem;
          max-width: none;
          top: 2rem;
          left: -1rem; } }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    #feature .attention {
      margin-left: 4rem;
      margin-right: 4rem; } }

#technology {
  background: url(../img/bg_section.png) no-repeat right top; }
  #technology h2 {
    width: 63.7rem; }
    @media only screen and (min-width: 1px) and (max-width: 750px) {
      #technology h2 {
        width: 48.0rem; } }
    #technology h2 + article {
      margin-top: 10rem; }
  #technology .accordionTrigger {
    border-left: 5px solid #a1a1a1; }
    @media only screen and (min-width: 1px) and (max-width: 750px) {
      #technology .accordionTrigger {
        border-left-width: 10px; } }
  #technology .accordion {
    background: #f5f6f7; }
    #technology .accordion * ~ p, #technology .accordion * ~ .imgWrap {
      margin-top: 1rem; }
      @media only screen and (min-width: 1px) and (max-width: 750px) {
        #technology .accordion * ~ p, #technology .accordion * ~ .imgWrap {
          margin-top: 4rem; } }
    #technology .accordion .bgLayout {
      margin-top: 4.5rem;
      background: #fff; }
      @media only screen and (min-width: 751px) {
        #technology .accordion .bgLayout {
          display: flex;
          padding: 3.5rem 4rem;
          justify-content: space-between; } }
      @media only screen and (min-width: 1px) and (max-width: 750px) {
        #technology .accordion .bgLayout {
          padding: 4rem 3.5rem; } }
      #technology .accordion .bgLayout + .bgLayout {
        margin-top: 2.5rem; }
      #technology .accordion .bgLayout:first-child {
        margin-top: 0; }
    @media only screen and (min-width: 751px) {
      #technology .accordion.technology01 .flex {
        align-items: center; }
        #technology .accordion.technology01 .flex .flexItem:first-child {
          width: 43.8rem; }
        #technology .accordion.technology01 .flex .flexItem:last-child {
          width: 61.0rem; } }
    @media only screen and (min-width: 751px) {
      #technology .accordion.technology01 .layout01 .bgBlock:first-child {
        width: 39.2rem; }
      #technology .accordion.technology01 .layout01 .bgBlock:last-child {
        width: 60.7rem; } }
    @media only screen and (min-width: 751px) {
      #technology .accordion.technology01 .layout02 .bgBlock:first-child {
        width: 39.2rem; }
      #technology .accordion.technology01 .layout02 .bgBlock:last-child {
        width: 59.1rem; } }
    @media only screen and (min-width: 751px) {
      #technology .accordion.technology02 .layout01 .bgBlock:first-child {
        width: 51.2rem; }
      #technology .accordion.technology02 .layout01 .bgBlock:last-child {
        width: 47.3rem; } }
    @media only screen and (min-width: 751px) {
      #technology .accordion.technology02 .layout02 {
        align-items: center; }
        #technology .accordion.technology02 .layout02 .bgBlock:first-child {
          width: 51.2rem; }
        #technology .accordion.technology02 .layout02 .bgBlock:last-child {
          width: 47.3rem; }
          #technology .accordion.technology02 .layout02 .bgBlock:last-child img {
            display: block;
            width: 30.0rem;
            margin: auto; } }
    @media only screen and (min-width: 751px) {
      #technology .accordion.technology03 .flex {
        align-items: center; }
        #technology .accordion.technology03 .flex .flexItem:first-child {
          width: 26.2rem; }
        #technology .accordion.technology03 .flex .flexItem:last-child {
          width: 76.3rem; } }
    #technology .accordion.technology03 .centerVisual {
      margin-top: 3rem; }
      @media only screen and (min-width: 751px) {
        #technology .accordion.technology03 .centerVisual {
          text-align: center; }
          #technology .accordion.technology03 .centerVisual img {
            margin: auto; } }
    @media only screen and (min-width: 751px) {
      #technology .accordion.technology03 .bgLayout .bgBlock:first-child {
        width: 72.8rem; }
      #technology .accordion.technology03 .bgLayout .bgBlock:last-child {
        width: 22.4rem; } }
    #technology .accordion.technology03 .layout01 .bgBlock .color {
      color: #e95504; }
    #technology .accordion.technology03 .layout02 .bgBlock .color {
      color: #009fe8; }
    #technology .accordion.technology03 .layout03 .bgBlock .color {
      color: #6fb92c; }
    @media only screen and (min-width: 751px) {
      #technology .accordion.technology04 .flex {
        align-items: center; }
        #technology .accordion.technology04 .flex .flexItem:first-child {
          width: 56.8rem; }
        #technology .accordion.technology04 .flex .flexItem:last-child {
          width: 43.5rem; } }
    @media only screen and (min-width: 1px) and (max-width: 750px) {
      #technology .accordion.technology04 .flex .flexItem:last-child {
        margin-top: 2.5rem; } }
    @media only screen and (min-width: 751px) {
      #technology .accordion.technology05 .flex {
        align-items: center; }
        #technology .accordion.technology05 .flex .flexItem:first-child {
          width: 68.4rem; }
        #technology .accordion.technology05 .flex .flexItem:last-child {
          width: 32.1rem; } }
    @media only screen and (min-width: 1px) and (max-width: 750px) {
      #technology .accordion.technology05 .flex .flexItem:last-child {
        margin-top: 2.5rem; } }

/* image Height */
.ph_header_logo { /*width: 17.0rem;*/ height: 3.9rem; }
@media only screen and (min-width: 1px) and (max-width: 750px) {
    .ph_header_logo {/* width: 21.8rem;*/  height: 5rem; }
}

.h_mainimage_logo {
  width: 54.0rem;
  height: 16.8rem; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    .h_mainimage_logo {
      width: 58rem;
      height: 18rem;
      margin: auto; } }

.h_mainimage_copy {
  width: 22.2rem;
  height: 2.4rem; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    .h_mainimage_copy {
      width: 28.6rem;
      height: 3.1rem;
      margin: auto; } }

.h_concept_title {
  width: 52.1rem;
  height: 4.7rem; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    .h_concept_title {
      width: 33.2rem;
      height: 9.6rem; } }

.h_concept_01 {
  width: 47.6rem;
  height: 23.9rem; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    .h_concept_01 {
      width: 40rem;
      height: 20.4rem; } }

#fadeChangeVisual img {
  width: 93.2rem;
  height: 57.7rem; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    #fadeChangeVisual img {
      width: 75rem;
      height: 46.4rem; } }

.ph_concept_logo {
  width: 12.6rem;
  height: 9.3rem;
  margin: auto; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    .ph_concept_logo {
      width: 17rem;
      height: 12.5rem; } }

.h_exterior_title {
  width: 66.2rem;
  height: 4.7rem; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    .h_exterior_title {
      width: 56.4rem;
      height: 9.8rem; } }

.design01 .designVisual img {
  width: 71rem;
  height: 47.4rem; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    .design01 .designVisual img {
      width: 75rem;
      height: 50rem; } }

.design01 .colorVariation img {
  width: 22.1rem;
  height: 15.7rem; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    .design01 .colorVariation img {
      width: 31.4rem;
      height: 22.2rem; } }

.design02 .designVisual img {
  width: 71.6rem;
  height: 49.1rem; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    .design02 .designVisual img {
      width: 75rem;
      height: 51.5rem; } }

.design02 .colorVariation img {
  width: 22.1rem;
  height: 15.2rem; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    .design02 .colorVariation img {
      width: 31.4rem;
      height: 21.6rem; } }

.h_interior_title {
  width: 77.3rem;
  height: 4.7rem; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    .h_interior_title {
      width: 55.4rem;
      height: 9.8rem; } }

#interiorSlide .imgWrap img {
  width: 99.8rem;
  height: 49.8rem; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    #interiorSlide .imgWrap img {
      width: 57.8rem;
      height: 28.8rem; } }

.h_feature_title {
  width: 56.2rem;
  height: 4.7rem; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    .h_feature_title {
      width: 36.2rem;
      height: 9.6rem; } }

.ph_feature_01_01 {
  width: 57.0rem;
  height: 64.1rem; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    .ph_feature_01_01 {
      width: 67rem;
      height: 86.0rem; } }

.ph_feature_01_02 {
  width: 46.6rem;
  height: 34.8rem; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    .ph_feature_01_02 {
      width: 67rem;
      height: 50.2rem; } }

.ph_feature_02_01 {
  width: 50.1rem;
  height: 34.9rem; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    .ph_feature_02_01 {
      width: 67rem;
      height: 46.6rem; } }

.ph_feature_02_02 {
  width: 43.7rem;
  height: 17.7rem; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    .ph_feature_02_02 {
      width: 59.2rem;
      height: 24rem; } }

.ph_feature_02_03 {
  width: 52.6rem;
  height: 17rem; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    .ph_feature_02_03 {
      width: 60rem;
      height: 19.4rem; } }

.ph_feature_03_01 {
  width: 51.3rem;
  height: 51.8rem; }

.ph_feature_03_01_sp {
  width: 67rem;
  height: 63.2rem; }

.ph_feature_03_02 {
  width: 29.3rem;
  height: 27.6rem; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    .ph_feature_03_02 {
      width: 48rem;
      height: 45.2rem; } }

.ph_feature_03_03 {
  width: 22.5rem;
  height: 17.5rem; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    .ph_feature_03_03 {
      width: 24.8rem;
      height: 21.6rem; } }

.ph_feature_03_04 {
  width: 24.6rem;
  height: 18.4rem; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    .ph_feature_03_04 {
      width: 49.2rem;
      height: 37.2rem; } }

.ph_feature_04_01 {
  width: 51.3rem;
  height: 37.8rem; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    .ph_feature_04_01 {
      width: 67rem;
      height: 49.4rem; } }

.ph_feature_04_02 {
  width: 30.2rem;
  height: 33.5rem; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    .ph_feature_04_02 {
      width: 48rem;
      height: 53.4rem; } }

.ph_feature_04_03 {
  width: 21.3rem;
  height: 33.5rem; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    .ph_feature_04_03 {
      width: 26.8rem;
      height: 42.2rem; } }

.ph_feature_04_04 {
  width: 21.9rem;
  height: 17rem; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    .ph_feature_04_04 {
      width: 26.8rem;
      height: 21rem; } }

.ph_feature_04_05 {
  width: 24.5rem;
  height: 18.1rem; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    .ph_feature_04_05 {
      width: 49.2rem;
      height: 36.2rem; } }

.h_technology_title {
  width: 63.7rem;
  height: 4.7rem; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    .h_technology_title {
      width: 48rem;
      height: 9.8rem; } }

.ph_technology_01_01 {
  width: 61.0rem;
  height: 21.3rem; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    .ph_technology_01_01 {
      width: 51.2rem;
      height: 60.2rem; } }

.ph_technology_01_02 {
  width: 60.7rem;
  height: 23.1rem; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    .ph_technology_01_02 {
      width: 60rem;
      height: 79.2rem; } }

.ph_technology_01_03 {
  width: 59.1rem;
  height: 26.8rem; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    .ph_technology_01_03 {
      width: 60rem;
      height: 27.4rem; } }

.ph_technology_02_01 {
  width: 47.3rem;
  height: 34.6rem; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    .ph_technology_02_01 {
      width: 60rem;
      height: 44.2rem; } }

.ph_technology_02_02 {
  width: 30rem;
  height: 15rem; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    .ph_technology_02_02 {
      width: 43.8rem;
      height: 20rem; } }

.ph_technology_03_01 {
  width: 26.2rem;
  height: 7.8rem; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    .ph_technology_03_01 {
      width: 47.2rem;
      height: 14.2rem; } }

.ph_technology_03_02 {
  width: 72.8rem;
  height: 41.1rem; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    .ph_technology_03_02 {
      width: 67rem;
      height: 37.8rem; } }

.ph_technology_03_03 {
  width: 19.4rem;
  height: 12rem; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    .ph_technology_03_03 {
      width: 44.6rem;
      height: 27.6rem; } }

.ph_technology_03_04 {
  width: 22.4rem;
  height: 17.9rem; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    .ph_technology_03_04 {
      width: 40.6rem;
      height: 35.6rem; } }

.ph_technology_03_05 {
  width: 22.4rem;
  height: 17.1rem; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    .ph_technology_03_05 {
      width: 25.6rem;
      height: 34.2rem; } }

.ph_technology_04_01 {
  width: 43.5rem;
  height: 25.1rem; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    .ph_technology_04_01 {
      width: 67rem;
      height: 38.5rem; } }

.ph_technology_05_01 {
  width: 32.1rem;
  height: 24.3rem; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    .ph_technology_05_01 {
      width: 58.4rem;
      height: 44.2rem; } }

.ph_header_logo_color {/*width: 17rem;*/ height: 3.9rem; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    .ph_header_logo_color {/*width: 21.8rem;*/ height: 5rem; }
  }

.ph_gnav_visual {
  width: 31.2rem;
  height: 32.1rem; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    .ph_gnav_visual {
      width: 63.8rem;
      height: 14.4rem; } }

.gnav_01 {
  width: 33.4rem;
  height: 2.7rem; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    .gnav_01 {
      width: 26.8rem;
      height: 6.8rem; } }

.gnav_02 {
  width: 40.4rem;
  height: 2.8rem; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    .gnav_02 {
      width: 34.8rem;
      height: 6.8rem; } }

.gnav_03 {
  width: 49rem;
  height: 2.7rem; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    .gnav_03 {
      width: 34rem;
      height: 6.8rem; } }

.gnav_04 {
  width: 36.5rem;
  height: 2.7rem; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    .gnav_04 {
      width: 33.2rem;
      height: 6.8rem; } }

.gnav_05 {
  width: 39.6rem;
  height: 2.8rem; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    .gnav_05 {
      width: 29.4rem;
      height: 6.8rem; } }

/* CI修正により削除
.ph_footer_logo {
  width: 19.5rem;
  height: 4.7rem; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    .ph_footer_logo {
      width: 39rem;
      height: 10.4rem; } }
.ph_footer_logo_select {
  width: 29.0rem;
  height: 3.5rem;
  transform: translateY(0.3rem); }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    .ph_footer_logo_select {
      width: 42rem;
      height: 5.1rem; } }
*/

.icon_footer_fb {
  width: 3.9rem;
  height: 3.9rem; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    .icon_footer_fb {
      width: 7.8rem;
      height: 7.8rem; } }

.icon_footer_yt {
  width: 4.5rem;
  height: 3.1rem; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    .icon_footer_yt {
      width: 9rem;
      height: 6.2rem; } }

.icon_footer_tw {
  width: 3.9rem;
  height: 3.1rem; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    .icon_footer_tw {
      width: 7.8rem;
      height: 6.2rem; } }

@media only screen and (min-width: 751px) {
  .telLink {
    cursor: text;
    text-decoration: none;
    pointer-events: none; } }

@media only screen and (min-width: 751px) {
  .s {
    display: none; } }

@media only screen and (min-width: 1px) and (max-width: 750px) {
  .l {
    display: none; } }

@media only screen and (min-width: 751px) {
  #ws {
    display: none; } }