@charset "utf-8";
/*base*/
  :root{
    --gap: 60px;
    --font-sm: 16px;
    --font-md: 18px;
    --font-lg: 24px;
    --font-xl: 30px;
    --font-2xl: 48px;
    --color-main:#004da1;
    --color-sub:#e5effc;
    --color-accent:#a10000;
    --color-accent-light:#f9ecec;
  }
  .lp{
    overflow-x:hidden;
    background: #fff;
  }
  .lp section{
    margin-bottom: calc(var(--gap) * 2);
  }
  .lp img{
    max-width: 100%;
  }
  .lp h1{
    margin: 0;
  }
  .lp .title{
    margin: 0 0 var(--gap) 0;
    font-size: var(--font-2xl);
    font-weight: 700;
  }
  .lp .title span{
    font-size: var(--font-lg);
    display: block;
    color: var(--color-main);
  }
  .lp .title-skew{
    margin-bottom: calc(var(--gap) / 2);
    padding: calc(var(--font-xl) / 3) calc(var(--font-xl) / 1.5);
    background: var(--color-main);
    color: #fff;
    position: relative;
    display: inline-block;
    font-size: var(--font-xl);
    font-weight: 700;
  }
  .lp .title-skew::after{
    content: "";
    display: block;
    height: 100%;
    aspect-ratio: 43/87;
    position: absolute;
    left: 100%;
    top: 0;
    background: #fff url(../images/bg-skew.webp) no-repeat;
    background-size: cover;
  }
  .lp .contents{
    gap: var(--gap);
    align-items: center;
  }
  .lp .contents+.contents{
    margin-top: var(--gap);
  }
  .lp .contents__reverse{
    flex-direction: row-reverse;
  }
  .lp .contents .text,.lp .contents .thumb{
    width: calc((100% - var(--gap)) / 2);
  }
  .lp .contents__wide{
    flex-direction: column;
  }
  .lp .contents__wide .text,.lp .contents__wide .thumb{
    width: 100%;
  }
  .lp .featureWrap{
    width: 100%;
  }
  .lp .featureWrap .c-flex .thumb+p,.lp .featureWrap .c-flex .thumb+div{
    flex: 1;
  }
  .lp .alert{
    font-size: var(--font-sm);
    line-height: 1.2;
    display: inline-block;
  }
  .lp__feature section{
    margin-bottom: var(--gap);
    text-align: left;
  }
  
  /*kv*/
  section.kv{
    margin-bottom: 0;
    padding: var(--gap) 0;
    background: url(../images/bg-kv.webp) no-repeat 0 0;
    background-size: cover;
  }
  .kv img{
    filter: drop-shadow(0 0 var(--font-sm) #fff);
  }
  
  /*campaign*/
  section.campaign{
    margin-bottom: 0;
    padding: var(--gap) 0;
  }
  .campaign .contents{
    padding: var(--gap);
    background: var(--color-accent-light);
    border-radius: calc(var(--gap) / 4);
  }
  .campaign .contents .title{
    text-align: center;
  }
  .campaign .contents .title span{
    color: var(--color-accent);
  }
  .campaign .contents p{
    font-size: var(--font-lg);
    line-height: 1.75;
  }
  .campaign .contents p+div{
    margin-top: var(--gap);
  }
  .campaign .contents a{
    width: 100%;
  }
  
  /*cv*/
  .cv{
    padding: var(--gap) 0;
    background: var(--color-sub);
  }
  .cv a{
    width: 100%;
  }
  
  /*photo*/
  section.photo{
    padding: 0 var(--gap);
  }
  .photo .title{
    margin-bottom: calc(var(--gap) / 2);
  }
  .photo > .c-flex{
    gap:var(--gap);
    align-items: center;
  }
  .photo .fullsize-view,.photo .thumb{
    width:calc((100% - var(--gap)) / 2);
  }
  .photo .c-flex.thumb-list{
    margin-bottom: calc(var(--gap) / 2);
    gap: calc(var(--gap) / 4);
    flex-wrap: wrap;
  }
  .photo .c-flex.thumb-list .thumb-image,
  .photo .c-flex.thumb-list .thumb-image-raytrek{
    width: calc((100% - var(--gap) / 4 * 2) / 3);
    outline: 1px solid #cfcfcf;
  }
  
  .photo .c-flex.thumb-list .thumb-image.selected,
  .photo .c-flex.thumb-list .thumb-image-raytrek.selected {
    outline: 2px solid var(--color-main);
  }
  .lp__feature .photo{
    margin-top: var(--gap);
  }
  .lp__feature .photo > .u-pc-width > .c-flex{
    flex-direction: column;
    gap: calc(var(--gap) / 2);
  }

  .lp__feature .photo .fullsize-view, .lp__feature .photo .thumb, .lp__feature .photo .fullsize-view img, .lp__feature .photo .thumb img{
    width: 100%;
  }

/*PCのときだけサムネイル部分を右に配置*/
@media screen and (min-width:768px){
  .lp__feature .photo > .u-pc-width > .c-flex{
    flex-direction: row;
    gap: calc(var(--gap) / 2);
  }	
  .lp__feature .photo .fullsize-view{
    width: 70%;
  }
  .lp__feature .photo .thumb{
    width: calc(30% - calc(var(--gap) / 2));
  }
  .photo .c-flex.thumb-list{
    margin-bottom: 0;
  }
  .photo .c-flex.thumb-list .thumb-image,
  .photo .c-flex.thumb-list .thumb-image-raytrek{
    width: calc((100% - var(--gap) / 4) / 2);
  }
  .lp .photo .alert {
	margin-top: calc(var(--gap) / 2);	
  }
}

  [data-raytrek-mode].raytrek-show {
    display:none;
  }
  [data-raytrek-mode="true"].raytrek-show {
    display:block;
  }
  [data-raytrek-mode="true"].raytrek-hide {
    display:none;
  }
  
  /*design,extendability,customize*/
  .design p,.extendability p,.customize p{
    font-size: var(--font-lg);
    line-height: 1.75;
  }
  
  /*extendability,customize*/
  .thumb__fullwidth{
    width:100%;
    aspect-ratio: 64/9;
    margin-bottom: var(--gap);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: 50% 50%;
  }
  
  /*extendability*/
  .extendability .thumb__fullwidth{
    background-image: url(../images/bg-extendability.webp);
  }

  
  /*customize*/
  .customize .thumb__fullwidth{
    background-image: url(../images/bg-customize.webp);
  }
  
  /*map*/
  #tc50-map .link__cps-case{
    display: none;
  }

  /*responsive*/
  @media screen and (max-width:1440px){
    :root{
      --gap: 4.17vw;
      --font-sm: 1.11vw;
      --font-md: 1.25vw;
      --font-lg: 1.67vw;
      --font-xl: 2.08vw;
      --font-2xl: 3.33vw;
    }
  }
  @media screen and (max-width:767px){
    :root{
      --gap: 8vw;
      --font-sm: 3.2vw;
      --font-md: 3.73vw;
      --font-lg: 4vw;
      --font-xl: 4.8vw;
      --font-2xl: 6.4vw;
    }
    .lp .u-pc-width{
      padding: 0 calc(var(--gap) / 2);
    }
    .lp .contents{
      flex-direction: column;
    }
    .lp .contents__reverse{
      flex-direction: column;
    }
    .lp .contents .text,.lp .contents .thumb{
      width: 100%;
    }
    section.kv{
      padding: 0;
      background: none;
    }
    .kv .u-pc-width{
      padding: 0;
    }
    section.photo{
      padding: 0 calc(var(--gap) / 2);
    }
    .lp__feature section.photo{
      padding: 0;
    }
    .photo > .c-flex{
      flex-direction: column;
    }
    .photo .title{
      margin-bottom: var(--gap);
    }
    .photo .fullsize-view, .photo .thumb {
      width: 100%;
    }
    .thumb__fullwidth{
      aspect-ratio: 3/1;
      background: none;
      position: relative;
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
    .thumb__fullwidth::before{
      content: "";
      display: block;
      width: 100vw;
      height: 100vh;
      background-size: cover;
      background-position: 50% 50%;
      background-repeat: no-repeat;
      position: fixed;
      top: 0;
      left: 0;
      z-index: -1;
    }
    .extendability .thumb__fullwidth::before{
      background-image: url(../images/bg-extendability.webp);
    }
    .customize .thumb__fullwidth::before{
      background-image: url(../images/bg-customize.webp);
    }
  }

  .case-compare-table-wrapper {
    width: 100%;
    overflow-x: auto;
    margin-bottom: 12px;
  }
  @media screen and (max-width: 767px) {
    .case-compare-table-wrapper {
      position: relative;
    }
    .case-compare-table-wrapper::after {
      content: "";
      position: absolute;
      width: 120px;
      height: 78px;
      top: 100px;
      right: 20px;
      background: no-repeat url(../images/icon_scroll_gray.webp?$staticlink$) center/contain;
      transition: 0.5s;
      visibility: visible;
      pointer-events: none;
    }
    .case-compare-table-wrapper.is-scroll-over::after {
      opacity: 0;
    }
  }
  .case-compare-table {
    table-layout: fixed;
    min-width: 100%;
    margin: 0 auto;
    font-size: 20px;
    font-size: clamp(15px, 18/768*100vw, 20px);
  }
  
  .case-compare-table th,
  .case-compare-table td {
    padding: 0.5em;
    border: 1px solid #ccc;
    vertical-align: middle;
  }
  .case-compare-table thead th {
    min-width: 180px;
    width: 20%;
    text-align: center;
  }
  @media screen and (max-width: 767px) {
    .case-compare-table thead th {
      min-width: 120px;
      word-break: keep-all;
    }
    .case-compare-table thead th:first-child {
      min-width: auto;
    }
    .case-compare-table tbody th:first-child {
      word-break: keep-all;
    }
  }
  .case-compare-table thead tr:first-child th {
    border: 0;
    vertical-align: bottom;
  }
  .case-compare-table thead th > img {
    height: 190px;
    width: auto;
  }
  .case-compare-table thead th:nth-child(2) img,
  .case-compare-table thead th:nth-child(5) img {
    /* ケース高さ比 350 / 360 */
    transform: scale(0.972);
  }
  @media screen and (max-width: 767px) {
    .case-compare-table thead th > img {
      height: 100px;
    }
  }
  .case-compare-table__case-heading {
    text-align: center;
  }
  
  .case-compare-table .align-right {
    text-align: right;
  }
  .case-compare-table .is-highlighted {
    background: #ffb400;
    color: #000;
  }
  .case-compare-table-wrapper + p {
    line-height: 1.4;
  }