@charset "UTF-8";
/* CSS Document */

/*****ここからTOPページ*****/

.mv{
	width: 100%;
	/*height: 100vh;*/
	margin-bottom: 200px;
	position: relative;
}

@media screen and (max-width: 768px){
    .mv{
        margin-bottom: 100px;
    }
}


.mv_img{
	width: 70%;
	float: left;
	position: relative;
}

@media screen and (max-width: 768px){
    .mv_img{
        width: 90%;
    }
}

.mv_ttl{
	width: 33%;
	float: right;
	color: #fff;
	font-size: 6vw;
	font-weight: bold;
	letter-spacing: 3px;
	position: absolute;
	right: 5%;
	top:38%;
	font-family: 'Playfair Display', serif;
	text-shadow: 1px 1px 3px #4D4842;
}

@media screen and (max-width: 768px){
	.mv_ttl{
		width: 42%;
		font-size: 8vw;
	}
}

.mv_ttl span{
	display: block;
	width: fit-content;
	position: relative;
}

.mv_ttl1, .mv_ttl2{
	margin-bottom: 0.3em;
}
.mv_ttl1{
	position: relative;
}



.mv_ttl1::after{
	content: '';
	display: inline-block;
	width: 1em;
	height: 1em;
	background: url("../imgs/mv_leaf1.svg") no-repeat center center;
	position: absolute;
	top:-9%;
	background-size: 100%;
}

.mv_ttl2{
	margin-left: 1em;
}

.mv_ttl3{
	font-size: 0.4em;
	position: relative;
}

.mv_ttl3::after{
	content: '';
	display: inline-block;
	width: 2.5em;
	height: 2.5em;
	background: url("../imgs/mv_leaf2.svg") no-repeat center center;
	position: absolute;
	bottom:-250%;
	left: -10%;
	background-size: 100%;
}

.ttl_en{
	font-family: 'Playfair Display', serif;
	display: inline-block;
	font-size: 50px;
	color: #4D4842;
	border-bottom: 1px solid #4D4842;
	margin-bottom: 15px;
}

@media screen and (max-width: 768px){
	.ttl_en{
		font-size: 1.5em;
		margin-bottom: 0.3em;
	}
}

.ttl_ja{
	display: block;
	color: #4D4842;
	text-align: center;
}

@media screen and (max-width: 768px){
	.ttl_ja{
		font-size: 0.75em;
	}
}


/* ボタン */
.cta {
 position: relative;
 margin: auto;
 padding: 12px 18px;
 transition: all 0.2s ease;
 border: none;
 background: none;
}



.cta:before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 display: block;
 border-radius: 50px;
 background: #EDE1D3;
 width: 45px;
 height: 45px;
 transition: all 0.3s ease;
}

.cta span {
 position: relative;
 font-family: 'Playfair Display', serif;
 font-size: 18px;
 font-weight: 500;
 letter-spacing: 0.05em;
 color: #4D4842;
}

@media screen and (max-width: 768px){
	.cta span {
		font-size: 1.2em;
	
	}
}

.cta svg {
 position: relative;
 top: 0;
 margin-left: 10px;
 fill: none;
 stroke-linecap: round;
 stroke-linejoin: round;
 stroke: #4D4842;
 stroke-width: 2;
 transform: translateX(-5px);
 transition: all 0.3s ease;
}

.cta:hover:before {
 width: 100%;
 background: #EDE1D3;
}

.cta:hover svg {
 transform: translateX(0);
}

.cta:active {
 transform: scale(0.95);
}






/*about*/

.about_sec{
	margin: 0 auto 200px;
	position: relative;
}

@media screen and (max-width: 768px){
	.about_sec{
		margin-bottom: 100px;
	}
}

.top_wave{
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}

.top_about_img{
	width: 30%;
	margin-right: 10%;
}

@media screen and (max-width: 768px){
	.top_about_img{
		margin: 0 auto;
	}
}

.about_txt_wrap{
	width: 50%;
	margin: 0 auto;	
}
@media screen and (max-width: 768px){
	.about_txt_wrap{
		width: 50%;
	}
}

.about_ttl{
	width: fit-content;
	margin-bottom: 2em;
}

@media screen and (max-width: 768px){
	.about_ttl{
		margin: 0 auto 1.5em;
	}
}


.about_txt{
	width: 65%;
	line-height: 40px;
	margin-bottom: 2em;
}

@media screen and (max-width: 768px){
	.about_txt{
		width: 100%;
		font-size: 0.9em;
		line-height: 1.8em;
	}
}

.top_about_flex{
	display: flex;
	justify-content: center;
}

@media screen and (max-width: 768px){
	.top_about_flex{
		display: block;
	}
}

.works_sec{
	margin-bottom: 200px;
	text-align: center;
}

@media screen and (max-width: 768px){
	.works_sec{
		margin-bottom: 100px;
	}
}

.works_ttl{
	text-align: center;
	padding-bottom: 100px;
}

@media screen and (max-width: 768px){
	.works_ttl{
		padding-bottom: 50px;
	}
}

.works_lists{
	width: 70%;
	max-width: 1440px;
	display: flex;
	justify-content: space-between;
	margin: 0 auto 100px;
	
}

@media screen and (max-width: 768px){
	.works_lists{
		display: block;
		margin-bottom: 50px;
	}
}

.works_list{
	width: 28%;
}

@media screen and (max-width: 768px){
	.works_list{
		width: 60%;
		margin: 0 auto;
	}
}

.works{
	display: block;
	text-align: center;
}


.contact_sec{
	margin-bottom: 200px;
}

@media screen and (max-width: 768px){
	.contact_sec{
		margin-bottom: 100px;
	}
}

.contact_ttl{
	text-align: center;
	padding-bottom: 80px;
}

@media screen and (max-width: 768px){
	.contact_ttl{
		padding-bottom: 40px;
	}
}

.contact_txt{
	text-align: center;
	padding-bottom: 30px;
}

@media screen and (max-width: 768px){
	.contact_txt{
		width: 80%;
		margin: 0 auto;
		font-size: 0.9em;
		text-align: left;
		padding-bottom: 15px;
		
	}
}


form{
	width: 70%;
	margin: 0 auto;
}

@media screen and (max-width: 768px){
	form{
		width: 80%;
	}
}
input,textarea{
	padding-left: 2em;
}

.form_item{
	margin-bottom: 50px;
}

@media screen and (max-width: 768px){
	.form_item{
		margin-bottom: 25px;
	}
}

.form_itemlabel{
	font-weight: bold;
	margin-bottom: 1em ;
}

.required{
	font-size: 1.5em;
	color: #EDE1D3;
}

.input,.textarea {
	width: 100%;
	height: 5em;
	border: none;
	border-radius: 0 40px;
	font-size: 100%;
	box-sizing: border-box;
}

@media screen and (max-width: 768px){
	.input,.textarea{
		height: 4em;
		border-radius: 0 20px;
	}
}

.textarea{
	height: 10em;
	padding-top: 1em;
}

@media screen and (max-width: 768px){
	.textarea{
		height: 7em;
	}
}


.input:focus,.textarea:focus{
	outline: none;
	border: 1px solid #DBB78D;
	box-shadow: 0 5px 5px #EDE1D3;
}

.form_btn{
	letter-spacing: 1em;
	width: 180px;
	height: 70px;
	display: block;
	margin: 0 auto;
	border-radius: 0 40px;
	border: none;
	background: #EDE1D3;
	font-family: Hiragino Sans;
	font-size: 1.2em;
	font-weight: bold;
	color: #4D4842;
}

@media screen and (max-width: 768px){
	.form_btn{
		font-size: 0.9em;
		width: 10em;
		height: 3em;
		border-radius: 0 20px;
	}
}



.dog_img{
	width: 33%;
}


/*****ここまでTOPページ*****/



/*****ここからaboutページ*****/


.about_top{
	display: block;
	width: 25%;
	margin: 200px auto 10vw;
}


.about_top::before{
	content: '';
	display: block;
	width: 30%;
	min-width: 270px;
	aspect-ratio: 16/9;
	background: url("../imgs/about_mv_img.png") no-repeat;
	background-size: 100%;
	position: absolute;
	top: 4%;
	left: 0;
	z-index: -1;
}

@media screen and (max-width: 768px){
	.about_top::before{
		min-width: 250px;
	}
}

.profile_sec{
	display: flex;
	justify-content: center;
	width: 90%;
	align-items: center;
	margin:0 auto 200px;
	position: relative;
}

@media screen and (max-width: 768px){
	.profile_sec{
		display: block;
		width: 90%;
		margin-bottom: 100px;
	}
}

.profile_bg{
	width: 100%;
	position: absolute;
	top: -13%;
	z-index: -1;
}

@media screen and (max-width: 768px){
	.profile_bg{
		display: none;
	}
}



.profile_bg1{
	display: block;
	width: 60%;
	aspect-ratio: 24/9;
	background: #fff;
	position: relative;
	top: -40%;
	z-index: 1;
	border-radius: 0 100px;
}



.profile_bg2{
	display: block;
	width: 60%;
	aspect-ratio: 24/9;
	background: #EDE1D3;
	position: absolute;
	right: 0;
	top:30%;
	z-index: 2;
	border-radius: 0 100px;
}


.profile_img{
	width: 30%;
	margin-right: 35%;
	min-width: 250px;
}

@media screen and (max-width: 768px){
	.profile_img{
		width: 60%;
		margin: 0 auto 30px;
	}
	}


.profile_txt{
	width: fit-content;
	position: absolute;
	top:50%;
	left: 50%;
	transform: translateY(-50%);
	
}

@media screen and (max-width: 768px){
	.profile_txt{
		position: unset;
		margin: 0 auto;
		transform: none;
	}
}


.profile_ttl{
	width: fit-content;
	text-align: center;
	margin: 0 auto 2em;
	font-size: 1.9em;
}

@media screen and (max-width: 768px){
	.profile_ttl{
		font-size: 1.5em;
		/*margin-bottom: 1em;
		font-size: 1.7em;*/
	}
}


.profile_ja{
	display: block;
	margin-top: 0.5em;
	font-size: 0.5em;
}



.profile_dt_ttl{
	display: inline-block;
	width: 7em;
}


@media screen and (max-width: 768px){
	.profile_dt_ttl{
		/*width: 5.5em;*/
	}
}


.kugiri{
	display: inline-block;
	margin-right: 1em;
}

.profile_dl{
	display: flex;
	flex-wrap: wrap;
	letter-spacing: 0.2em;
}

@media screen and (max-width: 768px){
	.profile_dl{
		font-size: 0.9em;
	}
}


.profile_dd{
  padding-bottom: 20px;
}

@media screen and (max-width: 768px){
	.profile_dd{
		padding-bottom: 10px;
	}
}


.favorite_sec{/*なぜか切れる*/
	width: 100%;
	margin-bottom: 200px;
	position: relative;
}

@media screen and (max-width: 768px){
	.favorite_sec{
		margin-bottom: 100px;
	}
}


.favorite_ttl{
	font-size: 1.9em;
	margin-bottom: 2em;
	text-align: center;
}

@media screen and (max-width: 768px){
	.favorite_ttl{
	font-size: 1.5em;
	margin-bottom: 1em;
}
}

.favorite_ja{
	font-size: 0.5em;
	display: block;
	margin-top: 0.5em;
}

.favorite_txt{
	text-align: center;
	line-height: 2em;
}

@media screen and (max-width: 768px){
	.favorite_txt{
	font-size: 0.9em;
	line-height: 2em;
}
}


.favorite_img{
	width: 90%;
	height: 400px;
	background: url("../imgs/about_dec2.svg") no-repeat 100% 0;
	background-size: cover;
	position: absolute;
	top: -50px;
	z-index: -1;
}

@media screen and (max-width: 768px){
	.favorite_img{
		height: 100%;
	}
}

.favorite_list{
	width: 80%;
	float: right;
	position: relative;
	margin-top: 5%;
}

@media screen and (max-width: 768px){
	.favorite_list{
		

	}
}

.favorite_list li{
	width: 20%;
	margin: 0 20px;
}


.career_sec{
	width: 100%;
	background: url("../imgs/about_dec3.svg") no-repeat;
	background-size: 98%;
	background-position: center;
	margin-bottom: 200px;
}

@media screen and (max-width: 768px){
	.career_sec{
		background: none;
		margin-bottom: 100px;
	}
}

.career_ttl{
	font-size: 1.9em;
	margin-bottom: 2em;
	text-align: center;
}

@media screen and (max-width: 768px){
	.career_ttl{
		margin-bottom: 1em;
		font-size: 1.5em;
	}
}


.career_ja{
	font-size: 0.5em;
	display: block;
	margin-top: 0.5em;
}
.career_cot{
	display: flex;
	margin-bottom: 4em;
	position: relative;
	width: 80%;
	margin: 0 auto;
}

@media screen and (max-width: 768px){
	.career_cot{
		display: block;
		font-size: 0.9em;
		width: 100%;
	}
}



.date{
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 10px 10px 3px rgba(0,0,0,0.16);
	position: relative;
	left: 3em;
}

@media screen and (max-width: 768px){
	.date{
		width: 40px;
		height: 40px;
		border-radius: 0 60%;
	}
}

.date span{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}




.date::after{
	content: '';
	display: block;
	width: 0.7em;
	height: 7em;
	background: url("../imgs/career_dots.svg") no-repeat;
	background-size: 100%;
	position: absolute;
	top: 5.5em;
	left: calc(60px / 2 - 0.35em);
}

@media screen and (max-width: 768px){
	.date::after{
		display: none;
	}
}

.career_cot:last-child .date::after{
	display: none;
}

.content{
	width: 56%;
	height: 8em;
	line-height: 2em;
	margin: 0 auto 4em;
}

@media screen and (max-width: 768px){
	.content{
		font-size: 1em;
		width: 76%;
		margin-bottom: 4em;
	}
}


.skills_sec{
	margin-bottom: 200px;
}

@media screen and (max-width: 768px){
	.skills_sec{
	margin-bottom: 100px;
	}
}

.skills_ttl{
	font-size: 1.9em;
	margin-bottom: 2em;
	text-align: center;
	color: #fff;
	position: relative;
}


@media screen and (max-width: 768px){
	.skills_ttl{
		font-size: 1.5em;
	}
}

.skills_ttl::after{
	content: '';
	display: block;
	width: 2em;
	height: 3em;
	background: url("../imgs/mv_leaf1.svg") no-repeat;
	background-size: 100%;
	position: absolute;
	top: -1%;
	left: 56%;
	
}


.skills_ja{
	font-size: 0.5em;
	display: block;
	margin-top: 0.5em;
	color: #fff;
}



.skills_flex{
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	width: 50%;
	max-width: 860px;
	margin: 0 auto 30px;
	gap: 5%;
}



@media screen and (max-width: 768px){
	.skills_flex {
		width: 70%;
}
}



.skills_exp{
	width: 60%;
	line-height: 2.5em;
	margin: 0 auto;
	text-align: center;
}

@media screen and (max-width: 768px){
	.skills_exp{
		width: 70%;
		font-size: 0.9em;
		line-height: 2em;
		text-align: left;
	}
}


.vision_sec{
	width: 100%;
	margin-bottom: 200px;
	position: relative;
}

@media screen and (max-width: 768px){
	.vision_sec{
	margin-bottom: 100px;
}
}


.vision_ttl{
	font-size: 1.9em;
	margin-bottom: 2em;
	text-align: center;
	position: relative;	
}

@media screen and (max-width: 768px){
	.vision_ttl{
		font-size: 1.5em;
	}
}

.vision_ja{
	font-size: 0.5em;
	display: block;
	margin-top: 0.5em;
}

.vision_txt{
	margin: 0 auto 1em;;
	line-height: 2.5em;
	text-align: center;
	
}

@media screen and (max-width: 768px){
	.vision_txt{
	width: 75%;
	font-size: 0.9em;
	line-height: 2em;
	margin: 0 auto;
	text-align: left;
}
}



.vision_pic{
	width: 30%;
	position: absolute;
	top: -80px;	
}

@media screen and (max-width: 768px){
	.vision_pic{
		display: none;
}
}

.vision_img{
	width: 90%;
	height: 490px;
	background: url("../imgs/vision_img.svg") no-repeat 100% 0;
	background-size: cover;
	position: absolute;
	top: 0px;
	z-index: -1;
}

@media screen and (max-width: 768px){
	.vision_img{
		height: 350px;
	}
}



/*****ここまでaboutページ*****/




/*****ここからworksページ*****/

#works{
	color: #fff;
	text-align: center;
}

#works h3{/*下線の付け方わからへん*/
	font-size: 1.5em;
	margin-bottom: 100px;
}

@media screen and (max-width: 768px){
	#works h3{/*下線の付け方わからへん*/
	font-size: 1.2em;
	margin-bottom: 50px;
}
}

#works section{
	margin-bottom: 200px;
}

@media screen and (max-width: 768px){
	#works section{
	margin-bottom: 100px;
}
}

@media screen and (max-width: 768px){
	.works_wrap{
	margin:0 auto 100px;
}
}

.works_dec2{
	width: 31%;
	position: absolute;
	left: 0;
	top: 100px;
	z-index: -1;
}

@media screen and (max-width: 768px){
	.works_dec2{
		display: none;	
	}
}

.works_top{
	display: block;
	width: 25%;
	margin: 200px auto 10vw;	
}

.works_top::after{
	content: '';
	display: block;
	width: 15%;
	min-width: 120px;
	height: 45%;
	background: url("../imgs/works_dec1.png") no-repeat;
	background-size: 100%;
	position: absolute;
	right: 13%;
	top: 0;
	z-index: -1;
}


.works_flex{
	width: 35%;
	max-width: 430px;
	margin:0 auto 100px;
	display: flex;
	justify-content: space-between;
}

@media screen and (max-width: 768px){
	.works_flex{
	width: 80%;
	margin:0 auto 50px;
	font-size: 0.8em;
}
}


.works_menu{
	width: fit-content;
	font-size: 1.5em;
}


@media screen and (max-width: 768px){
	.works_menu{
	width: 30%;
	margin-left: auto;
	margin-right: auto;
	font-size: 1.5em;
}
}

.works_menu a{
	font-size: 20px;
	letter-spacing: 2px;
	display: inline-block;

}


.works_menu::after{
	content: '';
	display: block;
	width: 1em;
	height: 1em;
	background: url("../imgs/icon_v.svg") no-repeat center center;
	margin: 0.5em auto 0;
}

@media screen and (max-width: 768px){
	.works_menu::after{
	margin: 0.2em auto 0;
}
}

.works_ctt h3::after{
	content: '';
	display: block;
	width: 2em;
	height: 1px;
	background: #fff;
	margin: 0.5em auto 0;
	
}


.web_list{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

@media screen and (max-width: 768px){
	.web_list{
		display: block;	
		width: 90%;	
		margin: 0 auto;
	}
}

.web{
	width: 40%;
	margin-bottom: 50px;
	margin-right: 40px;
}
	
@media screen and (max-width: 768px){
	.web{
	width: 100%;
	margin-bottom: 30px;
	margin-right: 20px;
}
}

.web:nth-child(2n) {
  margin-right: 0;
}

.flyer_list{

}

.flyer{
	width: 25%;
	min-width: 500px;
	margin: 0 auto;
}

@media screen and (max-width: 768px){
	.flyer{
		min-width: unset;
		width: 70%;
	}
}

@media screen and (max-width: 519px){
	.flyer{
		width: 90%;
	}
}

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

@media screen and (max-width: 768px){
	.banner_list{
		display: block;
		width: 70%;
		margin: 0 auto;
	}
}
	

.banner{
	width: 31%;
	margin-right: 130px;
}

.banner:nth-child(2n) {
  margin-right: 0;
}

@media screen and (max-width: 768px){
	.banner:nth-child(2n){
		margin: 0 auto;
	}
}

@media screen and (max-width: 768px){
	.banner{
	width: 80%;
	margin:0 auto 30px;
}
}
@media screen and (max-width: 519px){
	.banner{
	width: 90%;
}
}




/*****ここまでworksページ*****/


/*****ここから詳細ページ*****/

.works_detail_sec{
	width: 80%;
	max-width: 960px;
	margin: 0 auto;
}

@media screen and (max-width: 768px){
	.works_detail_sec{
		width: 90%;
	}
}

.works_detail_ttl{
	text-align: center;
	font-size: 1.5em;
	margin: 3em;
}
.works_detail_ttl span{
	display: block;
	font-size: 0.6em;
	margin-top: 0.8em;
}

.works_detail_mv{
	margin-bottom: 100px;
}

@media screen and (max-width: 768px){
	.works_detail_mv{
	margin-bottom: 50px;
}
}


.works_detail_comp{
	margin-bottom: 200px;
}

@media screen and (max-width: 768px){
	.works_detail_comp{
	margin-bottom: 100px;
}

}


.works_detail_txt{
	width: 60%;
	margin: 0 auto 200px;
}
@media screen and (max-width: 768px){
	.works_detail_txt{
		width: 100%;
		margin-bottom: 100px;
	}
}


.works_detail_dl{
	display: flex;
	width: 100%;
	max-width: 980px;
	line-height: 1.8em;
	margin-bottom: 3.5em;
}

.works_detail_dt{
	width: 12em;
}

.works_detail_dd{
	width: 85%;
	
}

.works_detail_dl:last-child dd{
	text-transform: none;
}

/*****ここまで詳細ページ*****/