@charset "utf-8";
/* -----------------------------------------------------------
    共通
-------------------------------------------------------------- */
.txt{
    line-height: 2.0;
    font-size: 1.8rem;
}

.logo{
	position: absolute;
	width: 102px;
	top: 30px;
	left: 30px;
	z-index: 1;
}

@media screen and (max-width:768px){
    .txt{
        font-size: 1.6rem;
    }
	
	.logo{
		width: 52px;
		top: 10px;
		left: 10px;
	}
}

/* -----------------------------
	mv-area
-------------------------------- */
.mv-greeting-bg{
	/*background: rgb(250,242,221);
	background: linear-gradient(180deg, rgba(250,242,221,1) 0%, rgba(250,243,224,1) 80%, rgba(255,255,255,0) 100%);*/
	background: url("../img/body_bg.png") repeat center top;
	position: relative;
}
/*.mv-greeting-bg::before{
	content: '';
	position: absolute;
	display: block;
	background: url("../img/mv_red.png") no-repeat left top;
	aspect-ratio: 1619 / 1134;
	width: 100%;
	height: 100%;
	top: -370px;
	left: 50%;
	mix-blend-mode: multiply;
}*/
.mv-area{
	width: 100%;
	/*height: 100vh;*/
	min-height: 900px;
	position: relative;
}

.uma{
	position: absolute;
	top: -150px;
	left: 47%;
	z-index: 1;
	width: 1450px;
}

.obj img{
	position: absolute;
}
.obj00 img{
	top: -370px;
	left: 50%;
}
.obj01 img{
	top: 50px;
	right: 0;
}
.obj02 img{
	top: -130px;
	left: 24%;
	width: 380px;
}
.obj03 img{
	top: 740px;
	left: 0;
}

.mv-txt img{
	position: absolute;
	top: 230px;
	/*left: calc((100% - 1300px) / 2);*/
	left: 8%;
	z-index: 2;
}

/*.kasa{
	margin: 0 auto 0 600px;
}
#kasa{
  animation:10s linear infinite rotation1;
	background: url("../img/mv-kasa.png") no-repeat bottom / contain;
	width: 716px;
	height: 716px;
}

@keyframes rotation1{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}
@keyframes rotation2{
  0%{ transform:rotateX(0);}
  100%{ transform:rotateX(360deg); }
}
@keyframes rotation3{
  0%{ transform:rotateY(0);}
  100%{ transform:rotateY(360deg); }
}*/

/*#uma {
	margin: 80px auto 0;
	animation: fluffy 3s infinite;
	background: url("../img/uma.png") no-repeat bottom / contain;
	aspect-ratio: 1493 / 1130;
	width: 100%;
	height: auto;
	position: absolute;
	top: 0;
	z-index: 1;
}

@keyframes fluffy {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}*/



@media screen and (max-width: 768px){
	.mv-greeting-bg{
	}
	/*.mv-greeting-bg::before{
		width: 100%;
		height: 100%;
		top: auto;
		bottom: 0;
		left: 0;
		background-size: contain;
	}*/
	
	.mv-area{
		min-height: inherit;
		padding: 0 30px 40px;
	}

	.uma{
		position: relative;
		top: -40px;
		left: -30px;
		width: 650px;
	}

	.obj img{
	}
	.obj00 img{
		top: auto;
		bottom: 110px;
		left: 30px;
		width: 700px;
	}
	.obj01 img{
		top: 0;
		right: -20px;
		width: 320px;
		z-index: 0;
	}
	.obj02 img{
		top: -40px;
		left: auto;
		right: 0;
		width: 160px;
	}
	.obj03 img{
		top: auto;
		bottom: 10px;
		left: 0;
		width: 260px;
	}

	
	.mv-txt{
		text-align: center;
		padding: 90px 0 0;
		position: relative;
		z-index: 1;
	}
	.mv-txt img{
		position: static;
		top: auto;
		left: auto;
		width: 100%;
	}
	
	
}

/* -----------------------------------------------------------
    greeting-area
-------------------------------------------------------------- */
.greeting-area{
	padding: 200px 0 300px;
	position: relative;
}

.greeting-area .inner{
}

.greeting-area .txt-box{
	margin: 64px 0 0 0;
	height: max-content;
	height: 480px;
	margin: 0 auto;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	text-orientation: upright;
	position: relative;
	text-align: left;
	display: block;
	width: 800px;
}
.greeting-area .txt{
	margin: 0 0 0 0;
	color: #BC8018;
	display: inline;
	position: absolute;
	writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	height: 480px;
	font-family: "Shippori Mincho", serif;
	line-height: 2.2;
}
.combine {
	-ms-text-combine-horizontal: all;
	-webkit-text-combine: horizontal;
	text-combine-upright: all;
}


.greet_obj img{
	position: absolute;
}
.greet_obj00 img{
	top: -50px;
	right: -300px;
}
.greet_obj01 img{
	bottom: 0;
	left: -150px;
}
.greet_obj02 img{
	bottom: -20px;
	right: -300px;

}


@media screen and (max-width:768px){
    .greeting-area{
        padding: 0 30px 120px;
    }
		
    .greeting-area .inner{
        -ms-writing-mode: lr-tb;
        writing-mode: horizontal-tb;
    }
    .greeting-area .inner::after{
        bottom: -110px;
    }
    .greeting-area h1 img{
        width: 100%;
        margin: 0px 0 10px 0;
    }
    .greeting-area .ic-fuji{
        margin: 0;
        text-align: center;
    }
    .greeting-area .ic-fuji img{
        width: 40px;
        margin: 0;
    }
    .greeting-area .txt-box{
        margin: 0 0 0 0;
		    writing-mode: initial;
		height: auto;
		width: 100%;
    }
    .greeting-area .txt{
        margin: 0 0 0  ;
		    writing-mode: initial;
		width: 100%;
		position: initial;
		height: auto;
		line-height: 1.8;
		font-size: 1.6rem;
    }
	.greeting-area .txt span.title{
		display: block;
		font-size: 2rem;
	}
    .greeting-area .inner::after{
        bottom: -170px;
        left: auto;
        right: -60px;
        background-size: 120px;
        background-repeat: no-repeat;
        opacity: 0.8;
        display: none;
    }
	
	.greet_obj img{
	}
	.greet_obj00 img{
		top: -170px;
		right: -100px;
		width: 260px;
	}
	.greet_obj01 img{
		bottom: -100px;
		left: -70px;
		width: 180px;
		z-index: 1;
	}
	.greet_obj02 img{
		bottom: 0;
		right: -20px;
		width: 400px;

	}
	
}



/* -----------------------------
	works-area
-------------------------------- */
.works-area{
	position: relative;
	padding: 0;
	background: url("../img/gold_bg3.png") repeat top center;
	font-family: "Shippori Mincho", serif;
}
.works-area::before{
	content: '';
	position: absolute;
	display: block;
	background: url("../img/line.jpg") no-repeat left top / cover;
	aspect-ratio: 2076 / 4;
	width: 100%;
	height: 5px;
	top: 0;
}


.works-area .inner{
	position: relative;
}

.works-area .bottom-txt-box{
	text-align: left!important;
	width: 600px;
	/*text-shadow: 2px 2px 2px rgba(255, 255, 255, 1);*/
	padding: 80px;
	background:rgba(255,255,255,.95);
}
.works-area .bottom-txt-box .works-title{
	font-size: 5rem;
	letter-spacing: .05em;
	font-weight: 600;
	line-height: 1.4;
}
.works-area .bottom-txt-box .works-list-title{
	font-size: 2.8rem;
	letter-spacing: .05em;
	padding: 20px 0 0;
	font-weight: 600;
}
.works-area .bottom-txt-box .works-list-title span{
	font-size: 1.8rem;
}

.works-area .bottom-txt-box .txt{
	padding: 20px 0 0;
}
.works-area .btn{
    width: 300px;
    margin: 50px 0 0;
	position: relative;
	z-index: 3;
	display: block;
}
.works-area .btn a{
    border: none;
    font-size: 1.8rem;
    font-weight: 600;
    margin: 0 auto;
    padding: 0 50px;
    display: block;
    transition: .3s;
	height: 80px;
	line-height: 80px;
	letter-spacing: 0.05em;
	position: relative;
	text-align: center;
	/*color: #2f2f2f;
	background: #fff;*/
	
	color: #fff;
	background: #A50000;
	box-shadow: 0 5px 30px rgba(0,0,0,.2);
}
.works-area .btn a:hover{
	opacity: 1;
	color: #fff;

}
.works-area .btn a:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}
.works-area .btn a::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #CFA635;
  transform: scaleX(0);
  transform-origin: right;
  transition: all 0.5s ease;
  transition-property: transform;
}
.works-area .btn .txt {
	position: relative;
	z-index: 3;
}


@media screen and (max-width: 768px){
	.works-area{
		position: relative;
		padding: 40px 0 0;
	}
	
	.works-area::before{
		top: 0;
	}

	
	.works-area .bottom-txt-box{
		padding: 30px 30px 80px;
		width: 100%;
		text-shadow: none;
		background: none;
	}
	.works-area .bottom-txt-box .works-title{
		font-size: 3.6rem;
	}
	.works-area .bottom-txt-box .works-list-title{
		font-size: 2rem;
		padding: 20px 0 0;
	}
	.works-area .bottom-txt-box .works-list-title span{
		font-size: 1.3rem;
	}
	
	.works-area .bottom-txt-box .txt{
		padding: 20px 0 0;
		line-height: 1.8;
	}
	
	.works-area .btn{
		width: 240px;
		margin: 30px auto 0;

	}
	.works-area .btn a{
		height: 60px;
		line-height: 60px;
		font-size: 1.6rem;
		padding: 0 10px;
	}


}



/* -----------------------------
	service-area
-------------------------------- */
.service-campaign-bg{
	position: relative;
	background: url("../img/body_bg.png") repeat center top;
	margin: -70vh 0 0;
}
.service-campaign-bg::before{
	content: '';
	position: absolute;
	display: block;
	background: url("../img/line.jpg") no-repeat left top / cover;
	aspect-ratio: 2076 / 4;
	width: 100%;
	height: 5px;
	top: 0;
}

.service-area{
	position: relative;
	font-family: "Shippori Mincho", serif;

}

.service-area .ttl-box{
	padding: 130px 0 0;
}
.service-area h4{
	font-size: 4rem;
	text-align: center;
	letter-spacing: .05em;
}
.service-area h4 span{
}
.service-list{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 100px 0 0;
	position: relative;
}
.service-list li{
	width: calc((100% / 3) - 20px);
	background: url("../img/red_icon01.png") no-repeat center center / contain;
	aspect-ratio: 373 / 373;
	height: 373px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #fff;
}
.service-list li:nth-child(n + 4){
	margin: 50px 0 0;
}
.service-list li h5{
	font-size: 4rem;
	letter-spacing: .15em;
	font-weight: 500;
	color: #E8C565;
	line-height: 1;
}
.service-list li p{
	font-size: 2rem;
	padding: 20px 0 0;
	line-height: 1.8;
}

.service_obj img{
	position: absolute;
}
.service_obj00 img{
	top: -100px;
	right: -150px;
	width: 480px;
}
.service_obj01 img{
	top: -100px;
	left: -270px;
}



@media screen and (max-width: 768px){
	
	.service-campaign-bg{
		margin: 0;
	}

	.service-campaign-bg::before{
		top: 0;
	}
	
	.service-area{
		padding: 0 13px;
	}

	.service-area .ttl-box{
		padding: 90px 0 0;
	}
	.service-area h4{
		font-size: 2.5rem;
		line-height: 1.56;
		position: relative;
	}
	.service-list{
		padding: 20px 0 0;
	}
	.service-list li{
		width: calc((100% / 2) - 5px);
		height: 100%;
        padding: 0;
        min-height: 170px;
	}
	.service-list li:nth-child(n + 3){
		margin: 10px 0 0;
	}
	.service-list li:nth-child(n + 4){
		margin: 10px 0 0;
	}
	.service-list li h5{
		font-size: 1.8rem;
	}
	.service-list li p{
		font-size: 1.4rem;
		line-height: 1.5;
		padding: 10px 20px 0;
	}
	
	.service_obj img{
	}
	.service_obj00 img{
		top: -80px;
		right: -80px;
		width: 180px;
	}
	.service_obj01 img{
		top: -70px;
		left: -70px;
		width: 200px;
	}


}


/* -----------------------------------------------------------
    campaign-area
-------------------------------------------------------------- */
.campaign-area{
	padding: 250px 0 100px;
	position: relative;
	text-align: center;
}

.campaign_obj img{
	position: absolute;
}
.campaign_obj00 img{
	top: 50px;
	right: -220px;
	width: 700px;
}
.campaign_obj01 img{
	bottom: -130px;
	left: -150px;
	width: 700px;
}


@media screen and (max-width:768px){
    .campaign-area{
        margin: 0;
        padding: 60px 20px 0;
    }
	
	.campaign-area img{
		width: 100%;
    }
	
	.campaign_obj00 img{
		top: 50px;
		right: -220px;
		width: 700px;
		
		display: none;
	}
	.campaign_obj01 img{
		bottom: -150px;
		left: -150px;
		width: 700px;
		
		display: none;
	}
	
}

/*    社内スライダー
-------------------------------------------------------------- */
.slide-area{
	margin: 150px 0 0;
}
.slide-bg {
}
.office-img{
    padding: 152px 0 147px 0;
    display: block;
    background: url("../img/slide.png") repeat-x top left;
    -webkit-animation: bgscroll 120s linear infinite, fadein 5s linear 0s 1;
    animation: bgscroll 120s linear infinite, fadein 5s linear 0s 1;
}

/*--------- 左側へ無限流し ---------*/

@-webkit-keyframes bgscroll {
	0% {background-position:center 0;}
	100% {background-position:2430px 0;}
}

@keyframes bgscroll {
	0% {background-position:center 0;}
	100% {background-position:2430px 0;}
}

@media screen and (max-width: 768px){  
	.slide-area{
		margin: 65px 0 0;	
	}
    .office-img{
        padding: 90px 0 50px 0;
        background-size: 1130px;
        margin: 0;
    }
}

/* -----------------------------------------------------------
    photo-slide
-------------------------------------------------------------- */
.photo-slide{
    position: relative;
    width: 100%;
    height: 206px;
    background-image: url(../img/about_slide_img.jpg);
    background-repeat: repeat-x;
    background-size: cover;
    background-position: 0 0;
    animation-name: slide_img;
    animation-duration: 200s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.photo-slide img{
	/* width: 100%; */
    /* height: 206px;
	background-image: url(img/about_slide_img.jpg); */
}
@keyframes slide_img {
    100% {
        background-position: -10000px 0;
        }
    }

@media screen and (max-width:768px){
    .photo-slide{
        height: 120px;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }
    .photo-slide p {
        display: block;
    }
    .photo-slide img {
        width: auto;
        height: 120px;
    }
}