/* --------------------------------------------------- */
#mainvisual {
	max-width: 1500px;
	width: 100%;
	margin: 90px auto 300px;
	position: relative;
	display: flex;
	justify-content: space-between;
}
#mainvisual .img1,
#mainvisual .img3 {
	position: relative;
	z-index: 0;
}
#mainvisual .img1 {
	width: 35%;
	transform: rotate(6deg);
	margin-left: -5%;
}
#mainvisual .img2 {
	width: 49%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-10deg);
	z-index: 1;
}
#mainvisual .img3 {
	width: 33%;
	transform: rotate(10deg);
	margin-right: -5%;
}
#mainvisual .img2 img {
	transition-delay: .2s;
}
#mainvisual .img3 img {
	transition-delay: .1s;
}
#mainvisual .mv-ttl {
	max-width: 900px;
	width: 80%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
}
#mainvisual .mv-ttl img {
	transition-delay: .4s;
}
@media only screen and (max-width: 980px) {
	#mainvisual {
        margin: 90px auto 200px;
    }
}
@media only screen and (max-width: 680px) {
	#mainvisual {
        margin: 90px auto 150px;
    }
}
/* --------------------------------------------------- */
#area1 {
	max-width: 1500px;
	width: 90%;
	margin: 0 auto 150px;
	position: relative;
}
#area1 .back {
	display: block;
	width: 140%;
	height: auto;
	position: absolute;
	top: -100px;
	bottom: -50px;
	left: 50%;
	z-index: 0;
	background: url("../images/common/back01.png") center;
	background-size: 300px auto;
	clip-path: polygon(33% 0, 100% 20%, 100% 90%, 0 100%, 0 12%);
	transform: translate(-50%, 0%);
}
#area1 .ttl-style01 {
	position: relative;
	z-index: 1;
	margin-bottom: 20px;
}
#area1 .block {
	display: flex;
	justify-content: space-between;
	clear: both;
	position: relative;
	z-index: 1;
}
#area1 .block .block-in {
	width: 45%;
	padding: 7% 0;
}
#area1 .block .block-in .ttl {
	font-size: 1.5em;
	font-weight: 700;
	line-height: 180%;
	margin-bottom: 25px;
}
#area1 .block .block-in p {
}
#area1 .ph {
	width: 50%;
	position: relative;
}
#area1 .ph span {
	display: block;
}
#area1 .ph span.ph1,
#area1 .ph span.ph3,
#area1 .ph span.ph5 {
	max-width: 720px;
	width: 95%;
}
#area1 .ph span.ph2,
#area1 .ph span.ph4,
#area1 .ph span.ph6 {
	max-width: 360px;
	width: 40%;
}
#area1 .ph span.ph1 {
	transform: rotate(-10deg);
	margin-left: -10%;
}
#area1 .ph span.ph2 {
	transform: rotate(12deg);
	position: absolute;
	right: 0;
	bottom: 0;
}
#area1 .ph span.ph3 {
	transform: rotate(10deg);
	margin-right: -15%;
}
#area1 .ph span.ph4 {
	transform: rotate(-12deg);
	position: absolute;
	left: 0;
	bottom: 0;
}
#area1 .ph span.ph5 {
	transform: rotate(-8deg);
	margin-left: -10%;
}
#area1 .ph span.ph6 {
	transform: rotate(-5deg);
	position: absolute;
	right: 0;
	bottom: 0;
}
#area1 .block.block-even {
	display: block;
}
#area1 .block.block-even .ph {
	float: right;
}
#area1 .block.block-even .block-in {
	float: left;
}
@media only screen and (max-width: 980px) {
	#area1 {
        margin: 0 auto 100px;
    }
	#area1 .block {
		margin-bottom: 80px;
	}
	#area1 .block:last-child {
		margin-bottom: 0px;
		padding-top: 80px;
	}
	#area1 .block .block-in {
        width: 55%;
        padding: 0 0;
    }
    #area1 .block .block-in .ttl {
        font-size: 1.3em;
        font-weight: 700;
        line-height: 180%;
        margin-bottom: 25px;
    }
	#area1 .block .block-in .ttl br {
		display: none;
	}
    #area1 .block .block-in p {
    }
    #area1 .ph {
        width: 40%;
    }
	#area1 .ph span.ph2,
    #area1 .ph span.ph6 {
        width: 60%;
    }
}
@media only screen and (max-width: 680px) {
	#area1 {
        margin: 0 auto 50px;
    }
	#area1 .back {
        top: -100px;
        bottom: -50px;
        clip-path: polygon(33% 0, 100% 11%, 100% 90%, 0 100%, 0 6%);
    }
	#area1 .block.block-even {
        display: block;
    }
    #area1 .block.block-even .ph {
        float: none;
    }
    #area1 .block.block-even .block-in {
        float: none;
    }
	#area1 .block:last-child {
		padding-top: 0px;
	}
	#area1 .block,
	#area1 .block:last-child{
		display: block;
		margin-bottom: 40px;
	}
	#area1 .block .block-in {
        width: 100%;
        padding: 0 0;
    }
    #area1 .block .block-in .ttl {
        font-size: 1.2em;
        margin-bottom: 20px;
    }
    #area1 .ph {
        width: 95%;
		margin: 0 auto 25px;
    }
	
}
/* --------------------------------------------------- */
#area2 {
	width: 100%;
	margin-bottom: 200px;
	position: relative;
	z-index: 1;
}
#area2 .center {
    margin: 0 0 80px;
    padding: 0;
	width: 100%;
	box-sizing: border-box;
}
#area2 .center div a {
	display: block;
	margin: 0 20px;
}
#area2 .inner {
	max-width: 1300px;
	width: 90%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}
#area2 .news {
	width: 60%;
}
#area2 .news ul {
	border-top: #444 1px solid;
	margin-bottom: 20px;
}
#area2 .news li {
	border-bottom: #444 1px dashed;
	padding: 10px 0;
}
#area2 .news li p {
}
#area2 .news li p span {
	display: inline-block;
}
#area2 .news li p .day {
	font-size: 10px;
	margin-right: 15px;
}
#area2 .news li p .category {
	font-size: 12px;
	background-color: #F2DE06;
	padding: 1px 10px 2px;
	border-radius: 6px;
	line-height: 150%;
}
#area2 .news li a {
}
#area2 .dm {
	width: 35%;
}
#area2 .dm-in {
	background-color: #F2DE06;
	padding: 30px;
}
#area2 .dm .ttl {
	font-size: 1.1em;
	text-align: center;
	margin-bottom: 15px;
	font-weight: 600;
	line-height: 140%;
}
#area2 .dm .ttl span {
	display: block;
	text-align: center;
	font-size: 8px;
}
#area2 .dm a {
	display: block;
	max-width: 260px;
	width: 90%;
	margin: 0 auto;
	position: relative;
	box-shadow: 0px 0px 16px -6px rgba(0,0,0,0);
}
#area2 .dm a .btn_balloon {
  position: absolute;
  display: inline-block;
  top: 0.8em;
  right: -50px;
  width: 5em;
  height: 5em;
  line-height: 120%;
	padding-top: 1.4em;
  text-align: center;
  color: #fff;
  font-size: 80%;
  font-weight: bold;
  background: #3bb4e5;
  border-radius: 50%;
  box-sizing: border-box;
  transform: rotate(-10deg);
}

#area2 .dm a .btn_balloon::before {
  position: absolute;
  content: "";
  bottom: -5px;
  left: -10px;
  border: 9px solid transparent;
  border-right: 15px solid #3bb4e5;
  z-index: 0;
  transform: rotate(-45deg);
}
#area2 .dm a:hover {
	box-shadow: 0px 0px 16px -6px rgba(0,0,0,0.6);
}
@media only screen and (max-width: 980px) {
	#area2 {
        margin-bottom: 150px;
    }
	#area2 .center div a {
        margin: 0 15px;
    }
}
@media only screen and (max-width: 680px) {
	#area2 {
        margin-bottom: 80px;
    }
	#area2 .center {
        margin: 0 0 50px;
    }
	#area2 .center div a {
        margin: 0 10px;
    }
	#area2 .inner {
        display: block;
    }
    #area2 .news {
        width: 100%;
		margin-bottom: 50px;
    }
    #area2 .dm {
		max-width: 500px;
        width: 90%;
		margin: 0 auto;
    }
}
/* --------------------------------------------------- */
#area3 {
	padding-bottom: 130px;
	position: relative;
	z-index: 0;
}
#area3 .back {
	display: block;
	position: absolute;
	z-index: 0;
	background: url("../images/common/back02.png") center;
	background-size: 300px auto;
	clip-path: polygon(3% 21%, 31% 3%, 100% 82%, 100% 100%, 0 100%, 0% 50%);
	top: -50%;
	left: 0;
	right: 0;
	bottom: 0;
}
#area3 .back2 {
	display: block;
	position: absolute;
	z-index: 1;
	background: url("../images/common/back01.png") center;
	background-size: 400px auto;
	clip-path: polygon(100% 19%, 100% 100%, 35% 100%, 65% 0);
	top: -10%;
	left: 4%;
	right: 0;
	bottom: 0;
}
#area3 .inner {
	max-width: 1500px;
	width: 90%;
	margin: 0 auto;
	position: relative;
	z-index: 2;
}
#area3 .inner .ttl-style01 {
	margin-bottom: 30px;
}
#area3 .work-list {
	max-width: 1300px;
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
}
#area3 .work-list .box {
	width: 23%;
	margin-right: 2.66%;
	font-size: 14px;
	line-height: 150%;
	margin-bottom: 30px;
}
#area3 .work-list .box:nth-child(4) {
	margin-right: 0;
}
#area3 .work-list .box a {
	display: block;
	position: relative;
    width: 100%;
    padding-top: 70%;
    margin: 0 0 10px;
	text-decoration:none;
}
#area3 .work-list .box a img{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    object-fit: cover;
}

#area3 .work-list .box a::before{
  content:"";
  display:block;
  width:100%;
  height:100%;
  position:absolute;
  z-index:2;
  background:#000;
  opacity:0;
  transition:0.3s;
	position: absolute;
	top: 0;
	left: 0;
}
#area3 .work-list .box a::after{
  content:"READ MORE";
  display:block;
  color:#fff;
  line-height:48px;
  width:140px;
  border:solid 1px #fff;
  border-radius:5px;
  text-align:center;
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-2.5em;
  margin-left:-70px;
  opacity:0;
  z-index:3;
  transition:0.3s;
  font-weight:500;
  letter-spacing:0.2em;
	font-size: 12px;
}
#area3 .work-list .box a:hover::before{
  opacity:0.5;
}
#area3 .work-list .box a:hover::after{
  opacity:1;
  margin-top:-1.8em;
}

#area3 .work-list .box strong {
	display: inline-block;
	font-size: 12px;
	background-color: #F2DE06;
	padding: 1px 10px 2px;
	border-radius: 6px;
	line-height: 150%;
	border: #fff 1px solid;
}
#area3 .work-list .box span {
	display: inline-block;
	font-size: 12px;
}
#area3 .work-list .box span::before {
	content: "＜";
}
#area3 .work-list .box span::after {
	content: "＞";
}
#area3 .work-list .box p {
}
@media only screen and (max-width: 980px) {
	#area3 .back {
        top: 0%;
        left: 0;
        right: 0;
        bottom: 0;
    }
    #area3 .back2 {
        top: 50%;
        left: 3%;
        right: 0;
        bottom: 0;
    }
	#area3 .work-list .box {
        width: 47.5%;
        margin-right: 5%;
        margin-bottom: 30px;
    }
    #area3 .work-list .box:nth-child(2n) {
        margin-right: 0;
    }
}
@media only screen and (max-width: 680px) {
	#area3 {
        padding-bottom: 50px;
    }
	#area3 .work-list .box a::after{
        line-height:36px;
        width:100px;
        margin-top:-2.8em;
        margin-left:-50px;
        letter-spacing:0.1em;
        font-size: 11px;
    }
    #area3 .work-list .box a:hover::after{
        opacity:1;
        margin-top:-1.7em;
    }
}
/* --------------------------------------------------- */
#area4 {
	width: 100%;
	height: 700px;
	background: url("../images/top/ph07.jpg") no-repeat center;
	background-size: cover;
	position: relative;
}
#area4 ul {
	max-width: 600px;
	width: 90%;
	display: flex;
	justify-content: space-between;
	position: absolute;
	top: 45%;
	left: 50%;
	transform: translate(-50%, -50%);
}
#area4 li {
	width: 47.5%;
}
#area4 li a {
	display: block;
	text-align: center;
	background: url("../images/common/back01.png") center;
	background-size: 300px auto;
	font-size: 1.2em;
	font-weight: 500;
	width: 100%;
	height: 100%;
	padding: 50px 5px;
}
#area4 li a br {
	display: none;
}
#area4 li:nth-child(1) a {
	clip-path: polygon(81% 5%, 100% 7%, 100% 89%, 75% 100%, 0 96%, 2% 0, 82% 0);
}
#area4 li:nth-child(2) a {
	clip-path: polygon(24% 4%, 36% 0, 100% 2%, 100% 98%, 70% 100%, 0 98%, 2% 70%, 0 5%);

}
#area4 li a img {
	display: block;
	width: 80px;
	margin: 0 auto;
}
#area4 li a:hover {
}
@media only screen and (max-width: 980px) {
	#area4 {
        height: 600px;
    }
}
@media only screen and (max-width: 680px) {
	#area4 {
        height: 350px;
    }
	#area4 li a {
		font-size: 1.1em;
		line-height: 140%;
		padding: 30px 5px;
	}
	#area4 li a br {
		display: block;
	}
	#area4 li a img {
        width: 60px;
    }
}
/* --------------------------------------------------- */

/* --------------------------------------------------- */

/* --------------------------------------------------- */