@charset "UTF-8";

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

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

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

main{
	margin-top:22vh;
}

section{
	position:relative;
}

a {text-decoration:none;
	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:3rem;
	margin:5%;
}

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

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

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

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

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

.fa-youtube{
	background: red;
	-webkit-background-clip: text;
	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");
}

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

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


/*ここからSP版*/
@media screen and (max-width:870px){
	
	main{
		margin-top:15vh;
	}
	
	h3{
		font-size:1.5rem;
	}
	
}


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


.work-1{
	display: flex;
    flex-direction: column;
	align-items: flex-end;
	margin-top: 170px;
}

.which-1{
	background-color: #F9EEFD;
	border-radius: 0 0 15vh 0;
	position: absolute;
    right: 45%;
    top: -150px;
}


.doll-1{
	background-color: #EDD8F4;
	border-radius: 50px 0 0 50px;
	width: 85%;
	height: 1200px;
}

.list-container{
	display:flex;
	flex-direction: column;
	align-items: flex-end;
	margin-top: 15%;
}

.show{
	position:relative;
	right:0;
	background-color:#F9EEFD;
	display:flex;
	justify-content: space-evenly;
    align-items: center;
	border-radius: 50vh 0 0 50vh;
	width: 88%;
	height:160px;
	margin: 1.5% 0 1.5% 20px;
	transition: 0.5s;
}

.show:hover{
	right: -3%;
}

.doll-img{
	overflow: hidden;
    width: 195px;
    height: 120px;
}

.sakuhin{
	width: 460px;
}

.title{
	width: fit-content;
	margin:0 auto;
}

.story{
	width: fit-content;
	margin-left: 7%;
}

.title h3{
	font-family: subtext-font;
	font-size: 25px;
	margin: 5px 0;
}

.story p{
	font-family:text-font;
	font-size: 17px;
	line-height: 1.7;
}

.time{
	background-color: #FFF;
    border-radius: 10%;
    box-shadow: 5px 5px 5px #cccccc;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    width: 170px;
    height: 110px;
    margin-right: 3%;
}

.time p{
	font-family:menu-font;
	font-size: 20px;
}

.show-5 img{
	max-width: none;
    width: 250px;
}


/*ここからSP版*/
@media screen and (max-width:870px){
	
	.top-title{
		margin-top: 200px;
	}
	
	.work-1{
		margin-top: 100px;
	}
	
	.which-1{
		right: 30%;
		top: -45px;
	}


	.doll-1{
		width: 91%;
		height: 800px;
	}
	
	.list-container{
		margin-top: 100px;
		}
	
	.show{
		border-radius: 5vh 0 0 5vh;
		width: 99%;
		height: 120px;
		overflow: hidden;
	}
	
	.doll-img{
		position: relative;
		right: 7px;
		width: 60px;
		height: 45px;
	}
	
	.sakuhin{
		width: 170px;
	}
	
	.title h3{
		font-size: 12px;
		margin: 10px 0;
	}
	
	.story{
		margin-left: 3%;
	}
	
	.story p{
		font-size: 10px;
		line-height: 1.5;
	}
	
	.time {
		width: 100px;
		height: 65px;
		margin-right: 0;
	}
	
	.time p{
		font-size: 10px;
	}
	
	.show-5 img{
		width: 110px;
	}

}


/*-------------------------------------------
セクション2
-------------------------------------------*/
#sec2{
	margin-top: 200px;
}

.which-2{
	background-color: #F9EEFD;
	border-radius: 0 0 0 20vh;
	position: relative;
	right: -40%;
	top: -70px;
}

.doll-2{
	background-color: #EDD8F4;
	border-radius:0 50px 50px 0;
	width: 85%;
	padding-bottom: 3%;
}

.content-1 .sub-title{
	position: relative;
	top: -60px;
	background-color: #EDD8F4;
	border-radius: 30vh;
	width: 30%;
	margin: 0 auto;
	padding: 3% 7%;
}

.content-2 .sub-title{
	position: relative;
	top: -60px;
	background-color: #EDD8F4;
	border-radius: 30vh;
	width: 40%;
	margin: 0 auto;
	padding: 3% 7%;
}

.content-1{
	background-color: #F9EEFD;
	border-radius: 0 10vh 10vh 0;
	width: 85%;
	margin-top: 10%;
	padding-bottom: 5%;
}

.content-2{
	background-color: #F9EEFD;
	border-radius: 0 10vh 10vh 0;
	width: 85%;
	margin-top: 10%;
	padding-bottom: 5%;
}
.text-container{
	width: fit-content;
    margin: 0% auto 5%;
}
.sub-text{
	font-family: subtext-font;
	font-size:22px;
	letter-spacing: .3em;
}

.content-title{
	position: relative;
	left: 35%;
	background-color: #EDD8F4;
	border-radius: 30vh;
	width: 22%;
	padding: 2% 5%;
}

.list-container1{
	display:flex;
	flex-direction: column;
	padding-top: 7%;
	
}

.show1{
	background-color:#FFF7FE;
	display:flex;
	justify-content: space-evenly;
    align-items: center;
	border-radius:0 50vh 50vh 0;
	width: 88%;
	height:160px;
	margin: 1.5% 0 1.5% 0;
}

.time-1{
	width: 180px;
	height: 120px;
}


/*ここからSP版*/
@media screen and (max-width:870px){
	
	#sec2{
		margin-top: 150px;
	}
	
	.which-2{
		top: -30px;
		border-radius: 0 0 0 7vh;
		width: 240px;
	}
	
	.content-1{
		border-radius: 0 30px 30px 0;
		width: 90%;
	}
	
	.content-1 .sub-title {
		top: 10px;
		width: 35%;
		padding: 3% 7%;
	}
	
	.content-2{
		border-radius: 0 5vh 5vh 0;
		width: 90%;
	}
	
	.content-2 .sub-title{
		top: 15px;
		width: 60%;
		padding: 5% 5%;
	}
	
	.text-container {
		margin: 10% 3%;
	}
	
	.sub-text{
		font-size:15px;
	}
	
	.content-title {
		left:30%;
		width: 30%;
	}
	
	.doll-2{
		border-radius: 0 50px 50px 0;
		width: 91%;
		height: auto;
		padding-bottom: 5%;
	}
	
	.list-container1{
		padding-top: 30px;
		
	}
	
	.show1{
		border-radius: 0 30px 30px 0;
		width: 95%;
		height:130px;
		padding: 3%;
	}
	
	.time-1{
		width: 120px;
		height: 80px;
	}
	
}

/*-------------------------------------------
セクション3
-------------------------------------------*/
.back{
	display:flex;
	justify-content: space-between;
	margin-top: 200px;
}

.square{
	background-color:#EDD8F4;
	border-radius:50px 50px;
	position: relative;
    top: 50px;
	width: 400px;
    height: 400px;
}

.puppet{
	width:120px;
	position: relative;
    right: 15%;
    top: 230px;
}

.which-3{
	position: absolute;
	right: 40%;
    top: 165px;
}

.detail{
	background-color:rgb(255,255,255,0.5);
	border-radius:50px 50px;
	width: 70%;
    margin: 0 auto;
    padding: 60px;
}

.detail p{
	font-family:subtext-font;
	font-size: 22px;
	letter-spacing: .1em;
}

.square2{
	z-index: -10;
	left: 77%;
	top: -50px;width: 300px;
    height: 300px;
}


/*ここからSP版*/
@media screen and (max-width:870px){
	.back{
		margin-top: 100px;
	}
	
	.square{
		top: 0;
		right: 7%;
		width: 130px;
		height: 130px;
		border-radius: 5vh;
	}
	
	
	.puppet{
		width: 15%;
		right: 10%;
		top: 20px;
	}
	
	.which-3{
		width: 300px;
		margin: 0 auto;
		left: 7%;
		right: auto;
		top: 70px;
	}
	
	.detail{
		width: 80%;
		padding: 10%;
	}
	
	.detail p{
		font-size: 15px;
	}
	
	.square2{
		left: 50%;
		top: -45px;
	}
	
}

/*-------------------------------------------
セクション4
-------------------------------------------*/
.back-1{
	margin-top: 0;
}

.square3{
	right: -10%;
	top: 25px;
}

.which-4{
	position: absolute;
	right: 45%;
    top: 175px;
	}


/*ここからSP版*/
@media screen and (max-width:870px){
	
	.square3{
		right: -3%;
		top: 15px;
	}
	
	.which-4{
		width: 300px;
		right: 15%;
		top:75px;
	}
	
}

/*-------------------------------------------
セクション5
-------------------------------------------*/

.work-5{
	position: relative;
}

.back-2{
	margin-top: 0;
	position: relative;
    top: 50px;
}

.back-2 img{
	object-fit: cover;
	width: 320px;
    height: 320px;
    border-radius: 40px 40px;
    margin: 10%;
}

.which-5{
	width: 500px;
	position: absolute;
	right: 50%;
    top: -180px;
}

.back-bottom{
	display:flex;
	justify-content: space-evenly;
}

.square4_1{
	z-index: -10;
	top: 130px;
	width: 300px;
	height: 300px;
}

.square4{
	top: 70px;

}

.square5{
	width: 550px;
	height: 100px;
	top: -25px;
	right: -5%;
}

.which-6{
	width: 280px;
}

.back-3{
	margin: 0;
}

.back-3 p{
	position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    font-family: text-font;
    font-size: 20px;
    text-wrap: nowrap;
}

.back-bottom .puppet{
	width: 10%;
    right: 50px;
    top: -100px;
}


/*ここからSP版*/
@media screen and (max-width:870px){
	
	.back-2 img {
		width: 82%;
		height: 82%;
		border-radius: 4vh;
		margin: 10%;
	}
	
	.which-5{
		width: 300px;
		right: 20%;
		top: -15%;
	}
	
	.square5{
		width: 300px;
        height: 90px;
        top: -20px;
        right: 0%;
	}
	
	.which-6{
		width: 55%;
	}
	
	.back-3 p {
		margin: 0;
		text-align: center;
		font-size: 15px;
	}
	
	.back-bottom .puppet {
		width: 15%;
        top: -50px;
        right: 20px;
	}
}