@charset "UTF-8";

/*-------------------------------------------
全体設定
-------------------------------------------*/

html {
	margin: 0;
	padding: 0;
	font-size: 15px;	/*基準となるフォントサイズ。*/
	overflow-x: hidden;
	scroll-behavior:smooth;
}

body {
	margin:0;
	font-family:"font-all-g","Noto Serif JP", "Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;	/*フォント種類*/
	background: #dcedf7;	/*背景色*/
	color: #;		/*文字色*/
	width:100vw;
	overflow:hidden;
}

main{
	margin-top:22vh;
}

input{
	-webkit-appearance: auto;
	appearance: auto;}

a {text-decoration:none;
	color: #;		/*文字色*/
	transition: 0.3s;
	text-align: center;
	font-size:13px;
}

img{max-width:100%;
}

p{font-size:15px;
	line-height:2.1;
}

h1{font-size:5rem;
}

h2{font-size:2.5rem;
	margin:3% 0;
}

h3{font-size:1.5rem;
	margin:5%;
}

main .btn{
	display: flex;
	justify-content: center;
	align-items: center;
	height: ;
	width: ;
	border-radius: 100vh;
	background-color: #fff;
	box-shadow: 0 0 15px 0 #c1c1c1;
}

main .btn:hover{
	-webkit-transform: translateY(5px);
	transform: translateY(5px);
	box-shadow: none;
}

main i{
	font-size: 2.5rem;
	line-height:2.1;
}

main .fa-instagram{
	background: linear-gradient(55deg, #ffbb32 30.25%, #ff0303 44.54%, #cc2fff 67.65%, #7854ff);
	-webkit-background-clip: text;
	color: transparent;
}

main .fa-line{
	object-position: 0 2.5px;
	padding: 10px;
}

main .fa-youtube{
	background: red;
	-webkit-background-clip: text;
	color: transparent;
}


.btn-text{
	position: relative;
}

.btn-text:after{
	content: "";
	background: url(images/arrow-right.png) no-repeat;
	background-size: contain;
	width: 20px;
	height: 25px;
	position: absolute;
	top: 0.5px;
	right: -30px;
}



@font-face {
	font-family:"font-all";
	src: url("fonts/BIZUDMincho-Regular.ttf") format("truetype");
}

@font-face {
	font-family:"menu-font";
	src: url("fonts/NotoSansJP-ExtraBold.ttf") format("truetype");
}

/*ここからsp版*/
@media screen and (max-width:870px){
	h3{
		font-size:3rem;
	}
	
}


/*-------------------------------------------
セクション1
-------------------------------------------*/
.top-title{
	text-align: center;
	font-family:menu-font;
	font-size: 50px;
	margin-top: 250px;
}

.sub-title h2{
	text-align: center;
	font-family:menu-font;
	font-size: 45px;
	margin-top: 150px;
}

.flow-pc{
	display:block;
	margin: 100px 0;
	padding: 0 110px;
}

.flow-sp{
	display:none;
}

.flow-top{
	display:flex;
	justify-content: space-evenly;
    align-items: center;
}

.flow-bottom{
	display:flex;
	justify-content: space-evenly;
	margin-top: 100px;
}

.flow-pc img{
	width: 350px;
}

.flow-1 img{
	width: 300px;
}

.flow-4 img{
	width: 300px;
}

.flow-pc p{
	margin-top: 20px;
	text-align:center;
	font-size: 20px;
}

/*ここからsp版*/
@media screen and (max-width:870px){
	.top-title{
		margin-top: 200px;
	}
	
	.sub-title h2{
		font-size: 20px;
		margin-top: 100px;
	}
	
	.flow-pc{
		display:none;
	}
	
	.flow-sp{
		display:block;
	}
	
	.flow-sp img{
		position: relative;
		right: -1%;
		top: 40px;
	}
}


/*-------------------------------------------
セクション2
-------------------------------------------*/
.puppet-1{
	width:150px;
	position: relative;
    right: -15%;
    top:70px;
}


.contact-2 {
	background: #fff;
	border-radius: 100px;
	width: 960px;
	margin: 0 auto;
	padding: 7%;
}

.contact-ttl {
	font-family:"neko-font";
	font-size:5rem;
	font-weight: bold;
	margin-bottom: 40px;
	text-align: center;
}

.contact-table {
	width: 100%;
	margin-bottom: 20px;
	border: 1px solid #ccc;
}

.contact-item,
.contact-body {
	padding: 20px;
	border: 1px solid #ccc;
}

.contact-item {
	font-family:'ヒラギノ角ゴシック','Hiragino Sans','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','ＭＳ ゴシック',sans-serif;
	font-size: 1.1rem;
	line-height: 2;
	text-align: center;
	background-color: #eee;
}

.re{
	color:red;
	font-size: 0.9rem;
}

.sub{
	font-size: 0.8rem;
}

.contact-body {
	width: 70%;
}

.form-text {
	width: 100%;
	padding: 10px;
	border-radius: 5px;
	border: 1px solid #ccc;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	max-width: 400px;
}

.contact-select + .contact-select {
	margin-left: 10px;
}

.contact-select-txt {
	display: inline-block;
	margin-left: 5px;
}

.select-body{
	line-height: 2.6;
}

.form-textarea {
	width: 100%;
	padding: 10px;
	height: 200px;
	border-radius: 5px;
	border: 1px solid #ccc;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

.contact-submit {
	display: block;
	background-color: #333;
	text-align: center;
	color: #fff;
	font-weight: bold;
	font-size: 16px;
	margin: 0 auto;
	padding: 15px;
	width: 150px;
	border-radius: 100vh;
	border: none;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	cursor: pointer;
}


/*ここからsp版*/
@media screen and (max-width:870px){
	#sec2{
		margin-top: 80px;
	}
	
	.puppet-1{
		width:60px;
		position: relative;
		right: -5%;
		top:20px;
	}
	
	
	.contact-2 {
		border-radius: 5vh;
		width: 380px;
		padding: 3%;
	}
	
	.contact-ttl {
		font-size:3rem;
		margin-bottom: 20px;
	}
	
	.contact-item {
		font-size: 0.85rem;
		line-height: 2;
	}
	
	.re{
		font-size: 0.7rem;
	}
	
	.sub{
		font-size: 0.6rem;
	}
	
	.small{
		font-size: 0.7rem;
	}
	
	.contact-select + .contact-select {
		margin-left: 40px;
	}
}

/*-------------------------------------------
セクション3
-------------------------------------------*/
#sec3{
	margin-top: 50px;
}

.big-summary{
	display:flex;
	justify-content:space-between;
}

.small-summary{
	display: flex;
	align-items: center;
    position: relative;
    right: -52%;
}

.small-summary img{
	width: 65%;
    height: 85%;
}

.small-summary p{
	font-family:menu-font;
	font-size: 20px;
	position: absolute;
    top: 33%;
    right: 47%;
}

.puppet-2{
	width:150px;
	position: relative;
    right: 15%;
    top:60px;
}

.contact-3 {
	background: #fff;
	border-radius: 20vh;
	width: 960px;
	height: 200px;
	margin: 0 auto;
	padding: 4%;
}

.contact-sns{
	display:flex;
	justify-content:space-around;
	width:58vw;
}

.contact-sns .btn{
	display: flex;
    justify-content: center;
    align-items: center;
    height: 70px;
    width: 70px;
}

/*ここからsp版*/
@media screen and (max-width:870px){
	.big-summary{
		display:flex;
		justify-content:space-between;
	}
	
	.small-summary{
		right: -25%;
		top: -10px;
	}
	
	.small-summary img{
		width: 170px;
		height: 80px;
	}
	
	.small-summary p{
		font-family:menu-font;
		font-size: 8px;
		position: absolute;
		top: 40%;
		right: 25%;
	}
	
	.puppet-2{
		width:65px;
		position: relative;
		right: 15%;
		top:30px;
	}

	.contact-3 {
		border-radius: 5vh;
		width: 350px;
		padding: 16% 10%;
	}
	
	.contact-sns{
		justify-content: space-between;
		width:70vw;
	}
	
	.contact-sns .fa-line{
		padding: 10px;
	}
	
}