@charset "UTF-8";

/* RESET CSS */

*,
*::before,
*::after {
	box-sizing:border-box;
}

* {
	border:0;
	margin:0;
	outline:0;
	padding:0;
	font:inherit;
	font-family:inherit;
	font-size:100%;
	font-style:inherit;
	font-weight:inherit;
	text-decoration:none;
	vertical-align:baseline;
}

article, aside, footer, header, main, nav, article, section {display:block;}
img, picture, audio, canvas, video, svg {display:block; max-width:100%;}

br,
hr {display:block;}

ol,
ul {list-style:none;}

blockquote, q {quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {content:none;}

input,
select {vertical-align:middle;}

body {
	line-height:1;
	line-break:strict;
	overflow-wrap:break-word;
	overflow-wrap:anywhere;
	word-break:normal;
	font-feature-settings:"palt";
	-webkit-text-size-adjust:100%;
	-webkit-font-smoothing:antialiased;
}

a {-webkit-tap-highlight-color:transparent;}

/* RESET CSS END */


/* BASIC CSS */
html{ scroll-behavior: smooth; }
p{ color: #ffffff; font-size: 16px;}
a{ display: inline-block; text-decoration: none;}
a:hover{ opacity: 0.7; }
img{ width: 100%; height: auto; }

/* Google font */
body{
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

h2,h3{
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 600;
  font-style: normal;
}

/* SPで表示 ・ PCで非表示 */
.sp{
  display: none;
}

/*----- 共通変数 -----*/
:root{
	--yeti-pink-high: #FF33CC;
	--yeti-pink-dark: #DB11A6;
	--yeti-blue: #6633FF;
	--yeti-purple: #330066;

	--font-MaruGothic: "Zen Maru Gothic", sans-serif;
	--font-KakuGochic: "Noto Sans JP", sans-serif;
}

/*----- パララックス -----*/
.js-scroll-overlap:not(.is-disabled) {
  --sticky-offset: -1px;
  position: sticky;
  top: var(--sticky-offset);
}
#Application, #Case, #Movie, #Partner, #Inquiry{ position: relative; }

/*----- フェードイン -----*/

/* アニメーション前 */
.u-fade-type-up{
    transform: translateY(50px);
    opacity: 0;
}

/* トリガー発火でis-activeを付与 */
.u-fade-type-up.is-active{
    transition: 1s;
    transform: translateY(0);
    opacity: 1;
}

/*----- PC -----*/

main{
	background-color: var(--yeti-purple);
	}

.inner{
	width: 100%;
    max-width: 1080px;
    height: 100%;
	min-height: 640px;
    margin: 0 auto;
	text-align: center;
	padding-left: 15px;
	padding-right: 15px;
}

h2{
	color: #fff;
	font-size: 32px;
	display: inline-block;
	padding-bottom: 16px;
}

/* アラート */
.wpcf7-not-valid-tip{
	color: #ff5555;
}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output{
	color: #fff;
	padding: 8px;
	margin: 2em 0;
}


/* ファーストビュー */
#Fv{
	background: var(--yeti-purple);
	background: linear-gradient(90deg,rgba(96, 40, 181, 1) 0%, rgba(62, 0, 125, 1) 85%);
	
	position: relative;

	&::after{
		position: absolute;
		bottom: -30px;
		left: 0;
		content: url('../images/FV_bg-element.svg');		
	}


	.inner{
	}

	.wrap{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 50px;
		position: relative;
		z-index: 2;
	}

	.text{
		width: 540px;
		height: auto;
		display: flex;
		flex-direction: column;
		gap: 25px;

		figure.yetilogo img{
			width: 440px;
			height: auto;
		}

		h2{
			font-size: 30px;
			line-height: 1.6;
			text-align: left;
		}

		p{
			font-size: 18px;
			line-height: 1.9;
			text-align: left;
		}

		


	}

	.fv_img{
		flex: 1;
	}

	.fv_btn_inq{
		    width: 50%;
			margin-bottom: 40px;
			position: relative;
			z-index: 2;

			a{
				background: var(--yeti-pink-dark);
				width: 100%;
				height: auto;
				border-radius: 40px;
				padding: 20px;

				p{
				font-family: var(--font-MaruGothic);
				font-weight: 600;
				letter-spacing: 2px;
				text-align: center;
				}

			}

			/* ホバーグラデーション */
			a{
				position: relative;
				transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
			}

			a:hover{
				background: transparent;
				opacity: 1;
			}

			a::after{
				background: linear-gradient(
					90deg,
					var(--yeti-blue),
					var(--yeti-pink-high)					
				);
				color: #fff;
				border-radius: 40px;
				content: '';
				inset: 0;
				position: absolute;
				z-index: -1;
			}

			
		}

	

}

/* イントロダクション */
#Intro{

	background-image: url(../images/Intro_bg_img.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;

	.inner{
		display: flex;
        align-items: center;
	}

	.gra_box{
		width: 475px;
		height: auto;
		padding: 40px 30px;
		border-radius: 6px;
		background: #DB11A6;
		background: linear-gradient(90deg,rgba(219, 17, 166, 0.7) 0%, rgba(167, 0, 196, 0.7) 50%, rgba(96, 1, 192, 0.7) 100%);
		
		h2{
			font-size: 26px;
			line-height: 1.5;
			border-top: solid 1px #fff;
			border-bottom: solid 1px #fff;
			text-align: left;
			padding: 20px 0;
		}
		p{
			font-size: 18px;
			line-height: 2;
			text-align: left;
			margin-top: 20px;
		}
	}

}

/* Yetiを導入する3つのメリット */
#Merit{
	background: var(--yeti-purple);
	background: linear-gradient(90deg,rgba(96, 40, 181, 1) 0%, rgba(62, 0, 125, 1) 85%);

	.inner{
		padding-top: 90px;
		padding-bottom: 170px;

	}

	h2{
		border-bottom: 5px solid;
		border-image: linear-gradient(to right, var(--yeti-pink-high), var(--yeti-blue)) 1;
	}
	h3{
		font-size: 32px;
		color: #fff;
		text-align: left;
		line-height: 1.6;
		margin-top: 20px;
	}
	p{
		text-align: left;
		line-height: 1.9;
	}
	.contents{
		display: flex;
		flex-direction: column;
		gap: 140px;
		margin-top: 140px;
	}
	.area-a{
		min-height: 280px;
		display: flex;
		align-items: center;
	}

	.wrap{
		display: flex;
		gap: 50px;

		.text{			
		}
		.graphic{
			display: flex;
			flex-direction: column;
			gap: 25px;

			figure{
				width: 520px;
				max-width: 520px;
			}
			figure.photo{
				border-radius: 30px;
				overflow: hidden;
			}

		}
	}



	ul.label-for{
		display: flex;
		gap: 8px;

		li{
			font-family: var(--font-MaruGothic);
			font-weight: 600;
			color: #fff;
			font-size: 14px;
			padding: 4px 15px 5px;
			border-radius: 20px;
			background: linear-gradient(90deg,rgba(219, 17, 166, 0.8) 0%, rgba(167, 0, 196, 1) 50%, rgba(96, 1, 192, 0.8) 100%);
		}
	}

	

}

/* アプリ紹介 */
#Application{
	background-color: #fff;

	.inner{
		padding: 70px 0;
	}

	h2{
		color: var(--yeti-pink-dark);
		border-bottom: 5px solid;
		border-image: linear-gradient(to right, var(--yeti-pink-high), var(--yeti-blue)) 1;
	}

	h3{
		font-family: var(--font-KakuGochic);
		color: var(--yeti-pink-dark);
		font-size: 18px;
		line-height: 1.4;
		font-weight: 700;
	}

	p{
		color: #333;
		font-size: 14px;
		font-weight: 600;
		line-height: 1.8;
	}

	p.intro, .label-app{
		font-family: var(--font-MaruGothic);
	}

	p.intro{
		color: var(--yeti-purple);
		font-weight: 700;
		font-size: 16px;
	}

	p.label-app{
		color: #fff;
		background: linear-gradient(90deg,rgba(219, 17, 166, 0.8) 0%, rgba(167, 0, 196, 1) 50%, rgba(96, 1, 192, 0.8) 100%);
		width: fit-content;
        height: auto;
		padding: 4px 15px;
        border-radius: 20px;
		font-size: 18px;
        font-weight: 600;
	}

	.wrap{
		display: flex;
		flex-direction: column;
		gap: 25px;
		margin-top: 80px;
	}

	.introduction{
		display: flex;
		border: 2px solid var(--yeti-pink-dark);
		padding: 40px 30px;
		border-radius: 20px;

		figure{
			width: 500px;
			height: auto;
			margin-right: 30px;
		}

		.text{
			display: flex;
			flex-direction: column;
			text-align: left;
			flex: 1;
			gap: 10px;
		}
	}

	



}

/* ブランドストーリー */
#Brand{
	background-color: #DFDFDF;
	background-image: url(../images/Brand_bg_img.png);
	background-repeat: no-repeat;
	background-size: cover;

	.inner{
		padding: 80px 0 120px;
	}

	h2{
		color: var(--yeti-purple);
		line-height: 1.5;
		padding-bottom: 60px;
	}

	p{
		color: #555;
		text-align: left;
	}

	.wrap{
		display: flex;
		justify-content: space-between;
		gap: 30px;
	}

	figure{
		width: 525px;
		height: auto;
		border-radius: 4px;
        overflow: hidden;
	}
	figcaption{
		font-size: 12px;
		line-height: 1.3;
		text-align: left;
		margin-top: 4px;
		color: #777;
	}

	.text{
		flex: 1;
		
		p{
			font-size: 15px;
			line-height: 1.85;
		}
	}


}

/* 導入事例 */
#Case{
	background: var(--yeti-purple);
	background: linear-gradient(90deg,rgba(96, 40, 181, 1) 0%, rgba(62, 0, 125, 1) 85%);

	padding: 70px 0;
	.cnt{
		margin-bottom: 80px;
		text-align: center;
	}

	h2{
		display: inline-block;
		border-bottom: 5px solid;
		border-image: linear-gradient(to right, var(--yeti-pink-high), var(--yeti-blue)) 1;
	}

	h3{
		color: var(--yeti-purple);
		font-size: 32px;
		text-align: center;
		line-height: 1.5;
	}

	.ex{
		background-color: #fff;
		padding: 70px;
		border-radius: 30px;
		margin: 0 auto;
		max-width: 1300px;

		p{
			color: #555;
			text-align: left;
			font-size: 16px;
			line-height: 1.8;
		}
	}

	.contents{
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 60px;
		margin-top: 40px;

		p.label-case{
			color: var(--yeti-purple);
			font-size: 14px;
			font-family: var(--font-MaruGothic);
			font-weight: 600;
			border: 2px solid var(--yeti-purple);
			display: inline-block;
			border-radius: 20px;
			padding: 0 13px 1px;
			margin: 0 auto;
		}

		hr{
			background-color: var(--yeti-pink-dark);
			width: 100px;
			height: 5px;
			display: inline-block;
			margin: 0 auto;
		}
	}

	.catch{
		display: flex;
		flex-direction: column;
		gap: 26px;
	}

	.detail{
		display: flex;
		gap: 40px;

		figure{
			width: 520px;
			height: auto;
		}
		.text{
			flex: 1;
		}
	}

	/* カルーセル（Splide） */

	.splide{
		visibility: unset;
		width: 100%;
        margin: 0 auto;
	}

	.splide__track{
		margin-bottom: 155px;

	}

	.splide__list{

	}

	.splide__slide{
		height: auto;
		padding: 0 30px;
	}

	/* -- ページネーション -- */
	.splide__pagination{
		bottom: -5em;
		gap: 20px;
	}
	.splide__pagination__page{
		background: inherit;
		transform: scale(2.2);
		opacity: 1;
		border: 1px solid #fff;
	}
	.splide__pagination__page.is-active{
		background: #fff;
		border: none;
	}

	/* -- 矢印 -- */
	.splide-wrapper{
		position: relative;
	}
	.splide__arrows.splide__arrows--ltr{
		position: sticky;
		top: 50%;
		z-index: 9999;
		max-width: 1365px;
        margin: 0 auto;
	}
	.splide__arrow--prev svg,
	.splide__arrow--next svg{
		display: none;
	}
	.splide__arrow{
		opacity: .9;
		background: none;
	}
	.splide__arrow--prev{
		width: 60px;
        height: 60px;
		opacity: 0.9;
		border-radius: 50%;
		background: var(--yeti-purple);
		background: linear-gradient(90deg, rgba(219, 17, 166, 0.9) 0%, rgba(167, 0, 196, 0.9) 50%, rgba(96, 1, 192, 0.9) 100%);

		/*
		content: "";
		display: inline-block;
		width: 60px;
		height: 60px;
		background-image: url('../images/icon_carousel_arrow-left.png');
		background-position: center;
		background-size: contain;
		*/

		&::before{
			font-family: 'Font Awesome 5 Free';
            font-weight: 900;
            content: '\f054';
            font-size: 30px;
            color: #fff;
            position: absolute;
            width: 25px;
            height: 25px;
            top: 15px;
            bottom: 10px;
            right: 5px;
            left: 0;
            margin: auto;
            text-align: center;
            transform: rotate(180deg);
		}
	}
	.splide__arrow--next{
		width: 60px;
        height: 60px;
		opacity: 0.9;
		border-radius: 50%;
		background: var(--yeti-purple);
		background: linear-gradient(90deg, rgba(219, 17, 166, 0.9) 0%, rgba(167, 0, 196, 0.9) 50%, rgba(96, 1, 192, 0.9) 100%);

		/*
		content: "";
		display: inline-block;
		width: 60px;
		height: 60px;
		background-image: url('../images/icon_carousel_arrow-right.png');
		background-position: center;
		background-size: contain;
		background: linear-gradient(90deg, rgba(219, 17, 166, 0.9) 0%, rgba(167, 0, 196, 0.9) 50%, rgba(96, 1, 192, 0.9) 100%);
		*/

		&::before{
			font-family: 'Font Awesome 5 Free';
            font-weight: 600;
            content: '\f054';
            font-size: 30px;
            color: #fff;
            position: absolute;
            width: 25px;
            height: 25px;
            top: 15px;
            bottom: 20px;
            right: -5px;
            left: 0;
            margin: auto;
            text-align: center;
		}
	}

}

/* 紹介動画 */
#Movie{
	background-color: var(--yeti-purple);
	background: linear-gradient(90deg, rgba(96, 40, 181, 1) 0%, rgba(62, 0, 125, 1) 85%);

	.inner{
		padding: 80px 20px 160px;
	}
	
	h2{
		color: #fff;
		display: inline-block;
        border-bottom: 5px solid;
        border-image: linear-gradient(to right, var(--yeti-pink-high), var(--yeti-blue)) 1;
	}

	.wrap{
		margin: 0 auto;
        margin-top: 80px;
        max-width: 960px;
	}

	iframe{
		width: 100%;
		height: auto;
		aspect-ratio: 16/9;
		border: 1px solid #666;
	}

}

/* 販売パートナーAMATUHI */
#Partner{
	background-color: #BCAFE4;
	background-image: url(../images/Partner_bg_dot_w.svg);
	background-repeat: repeat;
	background-size: 16px;
	padding: 100px 15px;

	.inner{
		background-color: #fff;
		border-radius: 30px;
		padding: 60px 50px;
	}

	h2{
		color: #555;
		padding-bottom: 0;
		line-height: 2;

		span{
			display: block;
			font-size: 0.8em;
		}
	}

	figure{
		max-width: 700px;
		height: auto;
		margin: 0 auto;
		margin-top: 90px;
	}

	.text{
		display: flex;
		flex-direction: column;
		gap: 20px;
		padding: 0 20px;
		margin-top: 90px;

		p{
		color: #333;
		text-align: left;
		line-height: 1.8;
		}

		ul{
			li{
				text-align: left;
				margin-bottom: 7px;

				&::before{
					content: "";
					display: inline-block;
					background-color: var(--yeti-pink-dark);
					width: 12px;
					height: 12px;
					border-radius: 50%;
					margin-right: 3px;
				}

				a{
					color: inherit;
				}

				a:hover{
					color: var(--yeti-blue);
				}

				a::after{
					content: "";
					display: inline-block;
					width: 14px;
					height: 14px;
					background-image: url('../images/icon_page-sent_blue.svg');
					background-repeat: no-repeat;
					margin-left: 3px;
					vertical-align: bottom;
				}
			}
		}
		
	}

	.yetichan{
		border: 2px solid var(--yeti-blue);
		border-radius: 30px;
		padding: 50px;
		position: relative;
		overflow: hidden;
		margin-top: 40px;

		display: flex;
		align-items: center;
		gap: 40px;

		&::before,
		&::after{
			content: "";
			background-color: #e5dcff;
			background-image: url(../images/Partner_bg_stripe20_w.svg);
			background-repeat: repeat;
			background-size: 7px;
			width: 100%;
            height: 20px;
			position: absolute;
		}
		&::before{
			top: 0;
            left: 0;
		}
		&::after{
			bottom: 0;
			left: 0;
		}



		.illust{
			figure{
				width: 250px;
				height: auto;
				margin-top: 0;
			}

		}
		.descript{
			flex: 1;
			display: flex;
			flex-direction: column;
			gap: 10px;
			
			
			p{
				font-family: var(--font-MaruGothic);
				color: var(--yeti-blue);
				font-size: 16px;
				font-weight: 500;
				line-height: 1.8;
				text-align: left;
			}
		}
	}

	

}

/* お問い合わせ */
#Inquiry{
	background: var(--yeti-purple);
	background: linear-gradient(90deg,rgba(96, 40, 181, 1) 0%, rgba(62, 0, 125, 1) 85%);

	padding: 70px 0;

	.inner{
		max-width: 710px;
	}

	h2{
		display: inline-block;
		border-bottom: 5px solid;
		border-image: linear-gradient(to right, var(--yeti-pink-high), var(--yeti-blue)) 1;
	}

	p{
		line-height: 1.8;
	}

	.wrap{
		margin-top: 40px;
	}

	.inq-tell{
		margin-top: 40px;
		
		a{
			color: #fff;
			background-color: #ffffff15;
			border: 1px solid #fff;
			border-radius: 4px;
			padding: 10px 30px 12px;
			width: 100%;

			span{
				font-size: 1.2em;
				font-weight: 600;

				&::before{
					content: "";
					display: inline-block;
					width: 17px;
					height: 17px;
					background-image: url('../images/icon_tel.svg');
					background-repeat: no-repeat;
					margin-left: 3px;
					vertical-align: bottom;
				}
			}
		}
	}

	.form1{
		display: flex;
        flex-direction: column;
        gap: 20px;
		width: 100%;
        margin: 0 auto;
		margin-top: 45px;

		p{
			text-align: left;
		}
		input{
			border-radius: 4px;
			width: 100%;
			height: 60px;
			padding: 0.5em;
		}
	}

	.row{
		display: flex;
		justify-content: space-between;
		gap: 10px;
	}
	.ms{
		width: 100%;
	}
	.wpcf7-form-control-wrap{
		width: 100%;
    	display: inline-block;
		margin-top: 5px;
	}
	textarea.wpcf7-form-control.wpcf7-textarea{
		width: 100%;
		height: 200px;
		border-radius: 4px;
		padding: 0.5em;
	}

	.caution{
		margin-top: 20px;
		text-align: left;

		a{
			color: #fff;
			text-decoration: underline;
		}
	}

	.linkpolicy{
		
		a::after{
			content: "";
			display: inline-block;
			width: 11px;
			height: 11px;
			background-image: url('../images/icon_page-sent_gray.svg');
			background-repeat: no-repeat;
			margin-left: 3px;
			vertical-align: bottom;
		}
	}

	.agreepolicy{
		margin-top: 20px;
	}

	input.wpcf7-form-control.wpcf7-submit.has-spinner{
		background-color: var(--yeti-pink-dark);
		width: 200px;
        height: 60px;
        color: #fff;
        border-radius: 2px;
		margin-top: 30px;
		
		&:hover{
			cursor: pointer;
			opacity: 0.8;
		}
	}

}

/* トップへ戻る */
#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 20px;
  bottom: 20px;
}
.button{
  font-size: 50px;
  color: #fff;
  border-radius: 50%;
  background: var(--yeti-purple);
  background: linear-gradient(90deg,rgba(219, 17, 166, 0.9) 0%, rgba(167, 0, 196, 0.9) 50%, rgba(96, 1, 192, 0.9) 100%);
  opacity: 0.9;
  padding: 10px;
  cursor: pointer;
  transition: .3s;

  &::before{
	font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f054';
    font-size: 22px;
    color: #fff;
    position: absolute;
    width: 22px;
    height: 22px;
    top: 7px;
    bottom: 8px;
    right: -1px;
    left: 0;
    margin: auto;
    text-align: center;
    transform: rotate(270deg);
  }
  
  /*デフォルトで非表示にする*/
  opacity: 0;
  visibility: hidden;
}

/*このクラスが付与されると表示する*/
.active{
  opacity: 1;
  visibility: visible;
}


/* フッター */
footer{
	background-color: #fff;
	padding: 40px 20px;

	p{
		color: #333;
		text-align: center;
		font-size: 12px;
	}

	.logo{
		figure{
			width: 200px;
			height: auto;
		}
	}


	p.ptnr{
		margin: 20px 0 10px;

		a{
			color: inherit;
		}

		a:hover{
			color: var(--yeti-blue);
		}

		a::after{
			content: "";
			display: inline-block;
			width: 11px;
			height: 11px;
			background-image: url('../images/icon_page-sent_gray.svg');
			background-repeat: no-repeat;
			margin-left: 3px;
			vertical-align: bottom;
		}
	}

	.wrap1{
		display: flex;
		justify-content: center;
		gap: 100px;
		margin-top: 20px;
        margin-bottom: 40px;
	}

	.txt{
		display: flex;
		align-items: flex-start;
		gap: 40px;

		p{
			font-size: 14px;
			font-weight: 800;
			color: #555;
			text-align: left;
			display: inline-block;
		}

		a:hover{
			p{
				color: var(--yeti-blue);
			}
		}
		a::after{
			content: "";
			display: inline-block;
			width: 11px;
			height: 11px;
			background-image: url('../images/icon_page-sent_gray.svg');
			background-repeat: no-repeat;
			margin-left: 3px;
			vertical-align: bottom;
		}

	}

	.b-details{
		ul{
			list-style: disc;
			margin-top: 10px;

			li{
				font-size: 14px;
				margin-left: 18px;
				line-height: 1.8;
			}
			::marker {
			font-size: 0.7em;
			color: #777;
			}
		}
	}

	
}

/*----- PC End -----*/

/*----- TB -----*/
@media screen and (max-width: 960px) {

	/* ファーストビュー */
	#Fv{
		overflow: hidden;

		.wrap{
			padding-bottom: 40px;
		}
		.text{
			width: 50%;
			height: auto;
		}
		

	}

	/* イントロダクション */
	#Intro{

	}

	/* Yetiを導入する3つのメリット */
	#Merit{

		.wrap {
			gap: 20px;

			.text{
				width: 50%;
			}

			.graphic {
				width: 50%;

				figure {
					width: 100%;
				}
			}
		}
	}

	/* アプリ紹介 */
	#Application{
		.wrap{
			padding: 0 15px;
		}
		.introduction{
			figure{
				width: 50%;
			}
		}

	}

	/* ブランドストーリー（カルーセル） */
	#Brand{
		.inner{
			padding-left: 15px;
			padding-right: 15px;
		}
		.portrait{
			width: 50%;
			figure{
				width: 100%;
			}
		}
	}

	/* 導入事例 */
	#Case{
		.detail{
			flex-direction: column;
			align-items: center;

			figure{
				width: 70%;
			}
		}
		.splide__slide{
			padding: 0 15px;
		}

	}

	/* 紹介動画 */
	#Movie{
		.inner{
			min-height: auto;
			padding: 100px 20px 150px;
		}

	}

	/* 販売パートナーAMATUHI */
	#Partner{

		.yetichan{

			.illust{
				width: 30%;

				figure{
					width: 100%;

				}

			}

		}

	}

	/* お問い合わせ */
	#Inquiry{

	}



}
/*----- TB End -----*/

/*----- SP -----*/
@media screen and (max-width: 480px) {

	h2{
		font-size: 20px;
		line-height: 1.6;
	}
	p{
		font-size: 13px;
		line-height: 1.8;
	}

/* SPで表示 ・ PCで非表示 */
  .sp{
    display: inline-block;
  }

/* ファーストビュー */
#Fv{
	height: auto;
	min-height: auto;

	.inner{
		padding-bottom: 10px;
	}

	.wrap{
		flex-direction: column;
		padding: 0;
	}
	.text{
		width: 100%;
		gap: 10px;

		h2{
		font-size: 20px;
		}

		p{
			font-size: 13px;
			line-height: 1.8;
		}

		
	}

	.fv_img{
			margin-top: 20px;
		}

	figure.yetilogo{
		width: 87%;
		margin-top: 20px;
	}

	.fv_btn_inq{
			width: 100%;
            padding: 0 10px;
			margin-bottom: 10px;
            z-index: 9999;
			position: fixed;
			bottom: 0;
			left: 0;

			a{
				padding: 10px;

				p{
					font-size: 17px;
				}
			}
		}
	


}

/* イントロダクション */
#Intro{
	    background: linear-gradient(90deg, rgba(219, 17, 166) 0%, rgba(167, 0, 196) 50%, rgba(96, 1, 192) 100%);

	.inner{
		align-items: self-end;
		margin: 0;
        padding: 0;
		min-height: 575px;

		background-image: url(../images/Intro_bg_img_SP.jpg);
		background-size: contain;
		background-position: top;
		background-repeat: no-repeat;
	}
	.gra_box{
		border-radius: 0;
		background: linear-gradient(90deg, rgba(219, 17, 166) 0%, rgba(167, 0, 196) 50%, rgba(96, 1, 192) 100%);

		h2{
			font-size: 18px;
			line-height: 1.6;
			padding: 15px 0;
			width: 100%;
		}
		p{
			font-size: 13px;
			line-height: 1.8;
		}
		
	}

}

/* Yetiを導入する3つのメリット */
#Merit{
	h2{
		border-bottom: 3px solid;
	}
	h3{
		font-size: 20px;
	}
	.area-a{
		min-height: auto;
		height: auto;
		margin-bottom: 25px;
	}

	.contents{
		gap: 90px;
		margin-top: 90px;
	}

	.wrap{
		flex-direction: column;
		gap: 30px;

		.text{
			width: 100%;
		}
		.graphic{
			width: 100%;
		}
	}

	.page-2{
		.wrap{
			flex-direction: column-reverse;
		}

	}

}

/* アプリ紹介 */
#Application{
	.inner{
		padding: 40px 0;
	}

	.wrap{
		margin-top: 50px;
	}

	p{
		font-weight: 400;
	}

	.introduction{
		flex-direction: column;
		gap: 20px;

		figure{
			width: 100%;
		}
	}

	p.label-app{
		font-size: 13px;
	}

}

/* ブランドストーリー（カルーセル） */
#Brand{
	h2{
		padding-bottom: 30px;
	}
	.inner{
		padding: 50px 15px 150px;
	}
	.wrap{
		flex-direction: column;
		gap: 20px;
		padding: 0 10px;
	}
	.portrait{
		width: 100%;
	}

}

/* 導入事例 */
#Case{
	padding: 40px 0 0;

	.splide__arrow--prev,
	.splide__arrow--next{
		width: 40px;
		height: 40px;
	}

	.cnt{
		margin-bottom: 50px;
	}

	h3{
		font-size: 20px;
	}
	.ex{
		padding: 20px;

		p{
			font-size: 13px;
		}
	}
	.catch{
		gap: 20px;
	}
	.contents{
		gap: 0;

		p.label-case{
			font-size: 12px;
		}
	}
	.detail{
		gap: 0;

		figure{
			width: 112%;
		}
	}
	.splide__arrow--prev{
		&::before{
			font-size: 20px;
			top: 5px;
			right: 3px;
		}
	}
	.splide__arrow--next {
		&::before{
			font-size: 20px;
			top: 23px;
			right: -3px;
		}

	}
	.splide__pagination{
		position: static;
		padding-top: 30px;
	}

	.splide__pagination__page{
		transform: scale(1.2);
	}
	.splide__track{
		margin-bottom: 0;
	}
}

/* 紹介動画 */
#Movie{
	.inner{
	}
	.wrap{
		margin-top: 50px;
	}
	iframe{
	}

}

/* 販売パートナーAMATUHI */
#Partner{
	padding: 20px 15px 10px;

	.inner{
		padding: 20px 10px 10px;
	}
	.text{
		padding: 0 0.5em;
		margin-top: 50px;

		ul{
			font-size: 13px;
		}
	}
	figure{
		margin-top: 50px;
		padding: 0 15px;
	}

	.yetichan{
		flex-direction: column;
		padding: 40px 15px;
		gap: 10px;
		margin-top: 30px;

		.illust{
			width: 70%;
		}

		.descript{
			p{
				font-size: 13px;
			}
		}
	}


}

/* お問い合わせ */
#Inquiry{
	.row{
		flex-direction: column;

	}

	a{
		span{
			display: block;
			margin-top: 8px;
		}
	}

	.form1{
		input{
			line-height: 2.5;
			height: 45px;
		}
	}

	.inq-tell{
		a{
			font-size: 13px;
			padding: 14px;
			
			span{

				&::before{
					width: 12px;
                    height: 12px;
                    background-image: url(../images/icon_tel_sp.svg);
					vertical-align: baseline;
				}

			}
		}
	}
	.wpcf7-form-control-wrap{
		margin-top: 3px;
	}
}

/* フッター */
footer{
	padding-bottom: 100px;


	p.ptnr{
		a::after{
			height: 13px;
			vertical-align: middle;
		}
	}
}

/* トップへ戻る */
#page_top{
	right: 10px;
    bottom: 70px;
}

}/*----- SP End -----*/