@charset "utf-8";


/* レイアウト*/
#page_content { padding:100px 0 150px; }
body.page-template-page__lp #page_content { width:auto; max-width:var(--tcd-lp-content-max-size); margin:0 auto !important; }

body:has(#lp_page_compact_content) #container { overflow:visible; }

#lp_page_compact_content { max-width:var(--tcd-lp-content-max-size); margin:var(--tcd-lp-header-margin-top) auto 120px !important; }
#lp_page_compact_content.display_dropshadow { box-shadow:0 0 10px 0 rgba(0,0,0,0.2); }
#lp_page_compact_content #page_content { max-width:inherit; padding:120px 100px; }
#lp_page_compact_content.no_dropshadow #page_content { padding-left:0; padding-right:0; }

@media (max-width: 1200px) {
	body.page-template-page__lp #page_content { margin:0 100px !important; max-width:inherit; }
  #lp_page_compact_content #page_content { padding:100px 0px; }
  #lp_page_compact_content { margin:0 !important; max-width:inherit; box-shadow:none !important; border:none; }
  body:has(#header) #lp_page_compact_content { margin:0px; box-shadow:none; border:none; }
	body:not(:has(#lp_page_header)) #lp_page_compact_content { margin-top:60px !important; }
}
@media (max-width: 1000px) {
	body.page-template-page__lp #page_content { margin:0 50px !important; }
}
@media (max-width: 767px) {
	#page_content { padding:40px 0; }
	body.page-template-page__lp #page_content { margin:0 20px !important; }
  #lp_page_compact_content { margin:0 auto; }
  #lp_page_compact_content #page_content { padding:40px 0; }
	body:not(:has(#lp_page_header)) #lp_page_compact_content { margin-top:40px !important; }
}


/* ヘッダーバー */
body.lp_design_normal {

  padding-top: 0 !important;

  &:not(.header_fix) {
    &:not(:has(#header:hover)) {
      #header::after { opacity:0; }
      #global_menu > ul > li > a { color: #fff; }
      #header_search .search_button::before { background: #fff; }
    }
    #header { position: absolute; top: var(--tcd-header-message-height); }
  }
  &.header_fix {
    #header { position: fixed; }
  }
	@media (max-width: 1200px) {
    #header { top:0 !important; }
	}

}


/* ページヘッダー */
#lp_page_header {

	position:relative; overflow:hidden; width:100%; display:grid; place-items:center;

	&.height_normal { max-height:calc(100svh - var(--tcd-header-message-height)); }
	&.height_full { height:calc(100svh - var(--tcd-header-message-height)); position:relative; }
  &.height_custom { height:auto; min-height:var(--tcd-lp-header-height-custom-pc);  }
  #lp_page_compact_content & { width:100%; }

	.main_content { width:100%; height:100%; position:relative; z-index:10; display:grid; place-items:center; }
  .content { position:relative; z-index:3; gap:0px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:100px 0; width:var(--tcd-lp-content-max-size); }
	#lp_page_compact_content & .content { padding-left:100px; padding-right:100px; }
  &.layout_right .content { text-align:right; align-items:flex-end; }
  &.layout_left .content { text-align:left; align-items:flex-start; }

	.catch { line-height:var(--tcd-lp-header-text1-line-height); margin-top:calc(0.5em - 0.5lh); margin-bottom:calc( var(--tcd-lp-header-text1-margin-bottom-pc) + (0.5em - 0.5lh) ); color:var(--tcd-lp-header-text1-font-color); font-size:var(--tcd-lp-header-text1-font-size-pc); font-family:var(--tcd-lp-header-text1-font-type); font-weight:600; }
  .desc { line-height:var(--tcd-lp-header-text2-line-height); margin-top:calc(0.5em - 0.5lh); margin-bottom:calc( var(--tcd-lp-header-text2-margin-bottom-pc) + (0.5em - 0.5lh) ); color:var(--tcd-lp-header-text2-font-color); font-size:var(--tcd-lp-header-text2-font-size-pc); font-family:var(--tcd-lp-header-text2-font-type); font-weight:600; }
  .catch:last-child { margin-bottom:calc(0.5em - 0.5lh) !important; }
  .desc:last-child { margin-bottom:calc(0.5em - 0.5lh) !important; }
  .button { height:70px; min-width:270px; position:relative; border-radius:70px; overflow:hidden; line-height:1.4; display:grid; place-items:center; padding:0 25px; }
  .button span { position:relative; z-index:3; display:block; color:#fff; }
  .button:before { opacity:0; transition:opacity 0.5s ease; content:''; display:block; position:absolute; left:0; top:0; width:100%; height:100%; background-color:rgba(255,255,255,0.2); z-index:2; }
  .button:after { content:''; display:block; position:absolute; left:0; top:0; width:100%; height:100%; background-color:var(--tcd-lp-header-button-color); z-index:1; }

	.overlay { display:block; width:100%; height:100%; position:absolute; top:0; left:0; z-index:2; overflow:hidden; }
  .bg_image { display:block; width:100%; height:100%; position:absolute; top:0; left:0; z-index:1; overflow:hidden; }
  .bg_image img { width:100%; height:100%; position:absolute; top:0; left:0; object-fit:cover; }

	.content * { opacity:0; transform:translate3d(0,40px,0); }
	body.start_first_animation & .content * { opacity:1; transform:translate3d(0,0,0); }
	body.start_first_animation & .content *:nth-child(1) { transition:opacity 1.4s ease 0.5s, transform 1.4s ease 0.5s; }
	body.start_first_animation & .content *:nth-child(2) { transition:opacity 1.4s ease 0.7s, transform 1.4s ease 0.7s; }
	body.start_first_animation & .content *:nth-child(3) { transition:opacity 1.4s ease 0.9s, transform 1.4s ease 0.9s, background-color 0.25s ease, border-color 0.25s ease; }

	@media(hover: hover) {
  	.button:hover:before { opacity:0.5; }
  }
  @media (max-width: 1200px) {
		body:has(#header) & { margin-top:-60px; }
	  .content { width:100%; padding:100px; }
    .catch { font-size: calc( (var(--tcd-lp-header-text1-font-size-pc) + var(--tcd-lp-header-text1-font-size-sp)) / 2) ; }
  }
  @media (max-width: 1000px) {
	  height:auto; min-height:360px; aspect-ratio:unset !important;
	  .content { padding:100px 50px !important; }
		.button { height:60px; min-width:240px; border-radius:60px; }
  }
  @media (max-width: 767px) {
  	#lp_page_compact_content & { height:auto; min-height:300px; }
    &.height_custom { height:auto; min-height:var(--tcd-lp-header-height-custom-sp);  }
	  .content { padding:100px 50px !important; text-align:center !important; align-items:center !important; }
    .catch { font-size:var(--tcd-lp-header-text1-font-size-sp); margin-bottom:calc( var(--tcd-lp-header-text1-margin-bottom-sp) + (0.5em - 0.5lh) ); }
    .desc { font-size:var(--tcd-lp-header-text2-font-size-sp); margin-bottom:calc( var(--tcd-lp-header-text2-margin-bottom-sp) + (0.5em - 0.5lh) ); }
  }

}


/* サイドボタン */
#lp_side_button {

	position:fixed; right:0; top:50%; transform: translate3d(100%,-50%,0); z-index:100; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);

	body:not(.lp_page_header_active) & { transform: translate3d(0,-50%,0); }
	body.footer_active & { transform: translate3d(100%,-50%,0); }
  a { width:70px; min-height:180px; height:auto; font-size:16px; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; color:#fff; padding:20px 0; position:relative; }
  a span { display:block; writing-mode:vertical-rl; text-align:left; z-index:2; line-height:1.4; }
  a:after { content:''; width:100%; height:100%; position:absolute; top:0; left:0; background:#fff; z-index:1; opacity:0; mix-blend-mode:screen; transition:opacity 0.25s ease; pointer-events:none; }

	@media(hover: hover) {
	  a:hover:after { opacity:0.2; }
  }
  @media (max-width: 1280px) {
	  display:block;
    a { width:50px; min-height:120px; font-size:12px; }
  }

}


/* 画像カルーセル */
body.page-template-page__lp:not(:has(#lp_page_compact_content)) .sc_image_carousel_wrap {

	width:calc(100vw - var(--tcd-scrollbar-width)); left:calc((100% - (100vw - var(--tcd-scrollbar-width))) / 2); position:relative; z-index:1; pointer-events:none;

	&:before { display:none; }
  &:after { display:none; }

	@media (max-width: 1200px) {
		width:calc(100% + 200px); left:-100px;  
	}
	@media (max-width: 1000px) {
		width:calc(100% + 100px); left:-50px;  
	}
	@media (max-width: 767px) {
		width:calc(100% + 40px); left:0px;  
	}

}




/* END VALUE lp.css */