@charset "utf-8";

ul {
    list-style: none;
}
a {
    transition: .3s;
    display: block;
}
a:hover {
    opacity: .7;
}
img {
    vertical-align: bottom;
	object-fit: cover;
}

/*-------------------------------- PCここから --------------------------------*/

.fs-l-main {
	margin: 0 auto;
	padding: 0;
	max-width: 1100px;
}
.fs-l-page {
	margin-top: 90px;
}


#lp_wrap {
	max-width: 600px;
	height: auto;
    margin: 0 auto;
/*    letter-spacing: 0.05em;*/
    padding-bottom: 100px;
/*    color: #2d2d2d;*/
    padding-top: 0px;
    line-height: 1.8;
/*	background-color: #8F6637;*/
	position: relative;
	font-family: "pragmatica", sans-serif;
/*	  font-family: "Lora", serif;*/
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}



.fixed_image{
	position:sticky;
	top: 14vh;
	left: calc(100vw - 2em);
	width: 43px;
	height: auto;
	z-index: 800;
}


.fv {
width: 100%;
	height: auto;}

.fv img{
	width: 100%;
	height: auto;
/*height: calc(100dvh - 50px);*/
	object-fit: cover;
}
.fv_flex{
	width: 80%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	font-family: "pragmatica", sans-serif;
/*	font-family: "pragmatica-extended", sans-serif;*/
    font-style: normal;
	letter-spacing: normal;
	padding-top: 80px;
}

.fv_flex_box1{
	width: 50%;
}

.fv_flex_box1 img {
	max-width: 220px;
}


.fv_flex_box2{
/*
	font-weight: 700;
	font-size: 16px;
*/
/*	line-height: 1.3em;*/
	margin-top: 25%;
}
/* 親コンテナ */
#animated-text {
  position: relative;
  font-size: 20px; /* ベースのフォントサイズ */
  font-weight: bold; /* ベースのフォント太さ */
  line-height: 1.3; /* 行間を詰める */
}

/* 各タイピング行 */
.typing-line {
  display: inline-block; /* 必須: 行ごとのサイズ指定を確実に適用 */
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  margin: 0;
  font-size: inherit; /* 親からフォントサイズを継承 */
  font-weight: inherit; /* 親から太さを継承 */
}

/* カーソル */
#cursor {
  position: absolute;
  width: 2px;
  height: 1.2em; /* 行の高さに合わせる */
  background-color: black;
  animation: blink 0.5s step-end infinite;
}

/* 点滅アニメーション */
@keyframes blink {
  50% {
    background-color: transparent;
  }
}


.style1{
	margin-top: 160px;
}


.style{
	padding-bottom: 140px;
}



.item_link{
	padding-top: 20px;
	padding-left: 8px;
	max-width: 170px;
}

.item_link span{
/*	margin-left: 11px;*/
	padding: 0px 7px;
    font-size: 10px;
	border: solid 1px #000000;
	background-color: #fff;
	float: right;
	line-height: normal;
	 margin-top: 4px;
	font-weight: bold;
}

.style1 .item_link,
.style2_area_2 .item_link{
	margin-left: 20%;
}

.style9_left .item_link{
	margin-left: 4%;
}

.style5 .item_link{
	margin-left: 10%;
}
.style1_flex,
.style3_flex,
.style4_flex{
	display: flex;
    justify-content: space-between;
}

.style1_flex_container1{
	margin-top: 16%;
	width: 36%;
}

.style1_flex_container{
	width: 50%;
}

.style1_left{
	width: 57%;
	padding-left: 70px;
	z-index: 2;
	margin-top: -230px;
}

.style1_right{
	width: 60%;
	margin-left: auto;
	padding-top: 120px;
	
}

.style2_container{
	margin: 0 auto;
	width: 78%;
}

.style2_area,
.style6{
	width: 88%;
	margin: 0 auto;
/*	padding-top: 20px;*/
}

.style2_area_2{
	width: 53%;
	margin-left: auto;
	margin-top: -12%;
}

.style2_area_1{
	width: 52%;
	margin-right: auto;
	margin-top: -37%;
		padding-bottom: 120px;
}

.style2_container2,
.style7_container{
	width: 45%;
	margin: 0 auto;
}

.style3_flex_container1{
	width: 30%;
	margin-top: 35%;
}

.style3_flex_container2{
	width: 65%;
}
.style3{
	position: relative;
	padding-bottom: 210px;
}

.style3_bk{
	position: absolute;
    z-index: -2;
    top: 42%;
    left: 8%;
	width: 72%;
}

.style4_flex{
	width: 90%;
	margin: 0 auto;
}

.style4_flex_container2{
	width: 40%;
	margin-top: 26%;
}

.style4_flex_container1{
	width: 57%;
}

.style5{
	width: 90%;
	margin-left: auto;
	padding-bottom: 100px;
}

.style5_flex{
	display: flex;
	justify-content: flex-end;
	margin-top: -10%
}

.style5_container{
	width: 30%;
}

.style5_flex .slider{
	width: 38%;
	padding-right: 20px;
}

.style5_flex_right{
	width: 50%;
	margin-top: -20%;
}
.style5_center{
	width: 55%;
	margin: 0 auto;
}

.style6_flex{
	width: 90%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	padding-top: 50px;
}

.style6_flex_container1{
	width: 40%;
}

.style6_flex_container2{
	width: 48%;
}

.style7{
	margin-top: 50px;
	position: relative;
	padding-bottom: 30px;
	
}


.style7_right{
	width: 55%;
	margin-left: auto
}

.style7_inner{
	width: 45%;
	position: absolute;
	z-index: -1;
	top: -3%;
	left: 15%;
	
}

.style7_left{
	width: 52%;
	margin-right: auto;
	margin-top: -25%;
}

.style7_container,
.style9_container{
	margin-top: 90px;
}

.style8_container{
	width: 90%;
	margin-right: auto;
}

.style8_container .slider{
	width: 42%;
	margin-left: auto;
	margin-top: -32%;
}

.style8_container_items2{
	width: 70%;
    padding-left: 12%;
    margin-top: -5%;
}

.style8_container_items1{
	width: 65%;
}

.style9_left{
	width: 55%;
}
.style9_right{
	width: 40%;
	margin-top: -49%;
	float: right;
}

.style8{
	position: relative;
}

.style8_bk{
	position: absolute;
	top: 70px;
	right: 0;
	z-index: -2;
	width: 85%;
}

.link_bn {
	padding : 80px 0;
	width: 80%;
	margin: 0 auto;
}


/*　Anime
-----------------------------*/


.fadeInTrigger{
opacity: 0;

}
.fadeIn {
    animation-name: fadeInAnime;
    animation-duration:2s;
    animation-fill-mode:forwards;
    opacity: 0;
}
@keyframes fadeInAnime{
from {
    opacity: 0;
    /*transform: translateY(100px);*/
}
to {
    opacity: 1;
    /*transform: translateY(0);*/
}
}

/* fadeUpをするアイコンの動き */
.fadeUp{
animation-name: fadeUpAnime;
animation-duration:2s;
animation-fill-mode:forwards;
opacity: 0;
animation-delay: 0.6s;
}

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

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

.delay-time02{
animation-delay: 0.2s;
}
.delay-time04{
animation-delay: 0.4s;
}

.delay-time06{
animation-delay: 0.6s;
}
.delay-time08{
animation-delay: 0.8s;
}

.delay-time10{
animation-delay: 1s;
}

/*-------------------------------- ローディング --------------------------------*/

#splash {
/*fixedで全面に固定*/
  position: fixed;
  width: 100%;
max-width: 700px;
  height: 100dvh;
  z-index: 1000;
  /*background: rgba(0,0,0,1.00);*/
  text-align:center;
  color:#fff;
  background-image: url('https://titivate.jp/project/ikki/24winter/assets/img/loading.jpg');
	background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/* Loading画像中央配置　*/
#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#splash_logo img{
  width: 80vw;
}
/* fadeUpをするアイコンの動き */
.fadeUp{
animation-name: fadeUpAnime;
animation-duration:2s;
animation-fill-mode:forwards;
opacity: 0;
animation-delay: 0.6s;
}

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

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


	
/***************▼タブレット▼*****************/
@media (max-width: 1025px) {
	 #lp_wrap {
        padding-top: 0px;
    }

}
@media (max-width: 768px) {



/***************▼スマホ大▼*****************/
@media screen and (max-width: 640px) {
	.fs-l-main {
		margin: 0 auto;
		padding: 0;
		width: 100%;
	}
	.fs-l-page {
		margin-top: 80px;
	}
	
#lp_wrap {
        padding-top: 0px;
    }
	
#animated-text {
  font-size: 17px;
}
.fv_flex_box1{
	width: 45%;
}
	
#splash_logo {
		width: 70%;
		margin-top: -10px;
	}
	
.style2_area,
.style6{
	width: 92%;
}
}
.style1_left {
    width: 52%;
    padding-left: 50px;
}

.style1 .item_link{
	margin-left: 10%;
	}
}





/***************▼スマホ小▼*****************/
@media screen and (max-width: 479px) {
.fixed_image{
	top: 13vh;
	width: 31px;
}

	.style1{
	margin-top: 110px;
}
	
	.fv_flex {
		padding-top: 60px;
	}


#animated-text {
  font-size: 15px;
  line-height: 1.3; /* 行間を詰める */
}
	
.item_link{
	max-width: 160px;
}
	
	
.item_link span {
    margin-left: none; 
	padding: 0px 5px;
	}
	
	.link_bn {
		padding: 0;
		width: 85%;
}
	
.style9_container{
	margin-top: 70px;
}


	}