@charset "utf-8";
/* css Document */

/* メインコンテンツ */
.ph_main{
	background: url("/img/ph_main.jpg") no-repeat top center;
	height: 700px;
 width: 100%;
 display: table;
}
.ph_main h2{
 width: 1080px;
 margin: 0 auto ;
 position: relative;
 top:40px;
 text-align: right;
}
.ph_main h2 img{
 width: 700px;
}

/* メッセージ */
.cont_message{
 text-align: center;
	background: url("/img/ph_cont.jpg") no-repeat top center;
 width: 100%;
 display: table;
 padding: 50px;
}
.logo_cont{
 width: 900px;
 margin: 0 auto;
 padding: 50px;
 background:rgba(0,0,0,0.8);
}
.logo_cont img{
 width: 182px;
 margin-bottom: 40px;
}
.logo_cont p{
 font-weight: 500;
 color: #fff;
}

/* パームツリーのご案内 */
.cont_guidance {
 display: flex;
 display: -webkit-flex;
 justify-content:space-between;
 flex-wrap: wrap;
}
.cont_guidance li{
 width: 46%;
 margin-bottom: 8%;
 }
.cont_guidance li a p,
.cont_guidance li a span,
.cont_guidance li a:hover p,
.cont_guidance li a:hover span,
.cont_guidance span::after,
.cont_guidance li a:hover span::after{
 transition:all 1s;
}
.cont_guidance .cont_g_img{
 width: 100%;
 margin-top: -70px;
 overflow:hidden;
}
.cont_guidance .cont_g_txt{
 position: relative;
}
.cont_guidance p{
	font-size: 2rem;
 color: #fff;
 background:rgba(121,151,85,0.8);
 width: 240px;
 height: 120px;
 padding: 20px;
 line-height: 1.0;
 white-space: nowrap;
}
.cont_guidance span{
 position: absolute;
	font-size: 1rem;
 font-weight: 500;
 line-height: 1.0;
 right: 0;
 top: 20px;
 }
.cont_guidance li a:hover p{
 transform:translateX(20px) ;
 background:rgb(0,0,0,1);
}
.cont_guidance a span::after{
	content: url(/common/img/icon_arrow_01.svg);
 filter: invert(66%) sepia(12%) saturate(1436%) hue-rotate(45deg) brightness(82%) contrast(78%);
 width: 6px;
 margin: 0 0 0 5px;
 display: inline-block;
 transition:all 1s;
}
.cont_guidance a:hover span::after{
 filter: brightness(1) invert(0);
 transition:all 1s;
}
.cont_guidance li a:hover span{
 transform:translateX(-20px) ;
}


/* 1080px以下（タブレット対応） */
@media (max-width: 1079px) {
.ph_main{
-moz-box-sizing: border-box;
 box-sizing: border-box;
 background-size: cover;
	height: 400px;
 display: table;
}
.ph_main h2{
 width: 100%;
 margin: auto ;
 top:10px;
}
.ph_main h2 img{
 max-width: 50%;
 margin-right: 10px;
}

/* メッセージ */
.cont_message{
	max-height: 300px;
 width: 100%;
 display: table;
 padding: 20px;
}
.logo_cont{
 width: 100%;
 margin: 0;
}
.logo_cont img{
 width: 30%;
 margin-bottom: 20px;
}
.logo_cont p{
}
 
/* パームツリーのご案内 */
.cont_guidance li{
 width: 48%;
 }
.cont_guidance .cont_g_img{
 margin-top: -100px;
}
.cont_guidance p{
	font-size: 1.4rem;
 width: 86%;
 max-height: 150px;
 padding: 10px;
}
.cont_guidance span{
	font-size: 0.8rem;
 left: 10px;
 right: inherit;
 top: 40px;
 color: #fff;
 }
.cont_guidance a span::after{
 -webkit-filter: brightness(0) invert(1);
filter: brightness(0) invert(1);
 }
.cont_guidance li a:hover span{
 transform:translateX(20px) ;
}
.cont_guidance a:hover span::after{
 filter: brightness(0) invert(1);
}
}

/* 600px以下（スマホ対応） */
@media (max-width: 599px) {
.ph_main{
 height: 200px;
}
 
/* メッセージ */
.logo_cont p{
 text-align: left;
 font-size: 1rem;
}
 
/* パームツリーのご案内 */
.cont_guidance p{
	font-size: 1.2rem;
 max-height: 80px;
}
.cont_guidance .cont_g_img{
 margin-top: -80px;
}
 
}