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



/************************************************
#areaFrontgate
***********************************************/

#areaFrontgate{
height:100vh;
background:#000;
color:#fff;
position:relative;
}

#areaFrontgate .blockText{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
display:flex;
flex-direction:row-reverse;
font-size:2.15em;
z-index:10;
}

#areaFrontgate .blockText p{
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: vertical-rl;
writing-mode: vertical-rl;
}
#areaFrontgate .blockText p.gr01{
font-size:1.3em;
text-align:right;
}
#areaFrontgate .blockText p.gr02{
font-weight:300;
padding-top:1.0em;
text-align:right;
}



#areaFrontgate .blockText p span.textcross{
-webkit-writing-mode: horizontal-tb;
-ms-writing-mode: horizontal-tb;
writing-mode: horizontal-tb;
}
#areaFrontgate .blockText p span.space{
margin-bottom:2.0em;
}


#frontgate_01,#frontgate_02{
background:url(css_img/areaFrontgate_parts01.png) repeat-y left top;
background-size:100%;
position:absolute;
top:0;
height:100%;
width:150px;
opacity:0.8;
}
#frontgate_01{
left:0;
transform:translateX(-50%);
}
#frontgate_02{
right:0;
transform:translateX(50%);
}


#frontgate_03{
position: absolute;
left: 50%;
left: -webkit-calc(50% + 100px);
left: calc(50% + 100px);
bottom: 100px;
transform: translate(-50%,0);
width: 200px;
z-index:5;
}

#frontgate_04{
position:absolute;
left:50%;
left : -webkit-calc(50% - 120px);
left : calc(50% - 120px);
top:20px;
transform:translate(-50%,0);
width:131px;
z-index:5;
}


#frontgate_05{
position: absolute;
left: 50%;
left: -webkit-calc(50% - 151px);
left: calc(50% - 151px);
top: -59px;
transform: translate(-50%,0);
width: 470px;
opacity: 0.7;
}

#frontgate_06{
position: absolute;
    left: -119px;
    bottom: 71px;
    width: 432px;
}

#frontgate_07{
position:absolute;
left:50%;
left : -webkit-calc(50% + 300px);
left : calc(50% + 300px);
bottom:110px;
transform:translate(-50%,0);
width:570px;
opacity:0.2;
}

#frontgate_08{
position:absolute;
left:50%;
left : -webkit-calc(50% + 270px);
left : calc(50% + 270px);
top:50px;
transform:translate(-50%,0);
width:764px;
opacity:0.7;
}

@media screen and ( min-width:768px ){

#areaFrontgate .blockText{
font-size:3.1em;
}

#frontgate_01,#frontgate_02{
width:350px;
}
#frontgate_01{
left:0;
transform:translateX(0);
}
#frontgate_02{
right:0;
transform:translateX(0);
}

#frontgate_03{
left : -webkit-calc(50% + 200px);
left : calc(50% + 200px);
bottom:400px;
width:200px;
}

#frontgate_04{
left : -webkit-calc(50% - 120px);
left : calc(50% - 120px);
top:80px;
width:100px;
}

#frontgate_05{
left : -webkit-calc(50% - 300px);
left : calc(50% - 300px);
top:50px;
transform:translate(-50%,0);
width:510px;
}

#frontgate_06{
left:50%;
left : -webkit-calc(50% - 300px);
left : calc(50% - 300px);
bottom:110px;
transform:translate(-50%,0);
width:680px;
}

}



/************************************************
#areaNews
***********************************************/

#areaNews{
position:relative;
padding:1.1em 0.8em;
}

#areaNews h2{
margin-bottom:0.5em;
padding:0;
}

#areaNews .frame dl{
padding:0 0 1.0em 3.1em;
border-bottom:#888181 1px dashed;
margin-bottom:1.0em;
position:relative;
}
#areaNews .frame dl:last-child{
margin-bottom:0;
}
#areaNews .frame dl::before{
    content: "";
    left: 20px;
    top: 3px;
    width: 15px;
    height: 15px;
    border-radius: 15px;        /* CSS3草案 */
    -webkit-border-radius: 15px;    /* Safari,Google Chrome用 */
    -moz-border-radius: 15px;   /* Firefox用 */
    border:solid 2px #fff;
    display: block;
    background: #7d8e7a;
    position: absolute;
    box-shadow:0 0 10px #00000033;
}

@media screen and ( min-width:768px ){

#areaNews{
padding:0;
}

	#areaNews .boxNews{
	position:absolute;
	width:630px;
	right:50px;
	top:50%;
	top:-webkit-calc(50% - 10px) ;
	top:calc(50% - 10px) ;
	transform:translateY(-50%);
	z-index:10;
	}
	
	#areaNews h2{
	margin-bottom:0;
	color:#fff;
	}
	
	#areaNews .frame{
	padding:23px 60px;
	padding:40px 35px;
	height:180px;
	overflow:scroll;
	}
	#areaNews .frame::-webkit-scrollbar{
display: none;
-webkit-appearance: none;
}
	
	#areaNews .frame dl{
	padding:0 0 20px 45px;
	margin-bottom:20px;
	display:flex;
	flex-wrap: wrap;
	}
	
	#areaNews .frame dl::before{
	left: 0;
	top: 3px;
	}
	
	#areaNews .frame dt{
	width:130px;
	}
	#areaNews .frame dd{
	width:130px;
	width : -webkit-calc(100% - 130px) ;
	width : calc(100% - 130px) ;
	}

}







/************************************************
#areaIntroduction（テキスト解説）
***********************************************/

#areaIntroduction{
background:var(--brown-color01) url(css_img/bgIntroduction.png) no-repeat left top;
background-size:cover;
padding:8.5em 0.5em;
}

#areaIntroduction .item{
position:relative;
margin-bottom: 10.5em;
}
#areaIntroduction .item:last-child{
margin-bottom: 0;
}

#areaIntroduction .item .boxText{
position: relative;
padding: 1.5em 2.3em;
background: var(--brown-color02);
margin-bottom: 2.2em;
}

#areaIntroduction .item .boxText::before{
content: "";
display: block;
left: -40px;
top: -42px;
position: absolute;
width: 120px;
height: 122px;
background: url(css_img/partsFrontIntroductiionItm.svg) no-repeat center top;
background-size: 100%;
}

#areaIntroduction .item .boxText::after{
content:"";
display:block;
right:0;
top:0;
position:absolute;
width:120px;
height:160px;
background:url(css_img/partsFrontIntntroductonSwr01.svg) no-repeat center top;
background-size:100%;
}
#areaIntroduction .item:nth-child(even) .boxText::after{
background-image:url(css_img/partsFrontIntntroductonSwr02.svg);
height:185px;
}

#areaIntroduction .item .boxText h3,
#areaIntroduction .item .boxText p{
z-index: 10;
position: relative;
}
#areaIntroduction .item .boxText h3{
font-size: 1.2rem;
font-weight:bold;
}
#areaIntroduction .item .boxText p{
margin-bottom:0;
}


#areaIntroduction .item .photo{
position:relative;
padding:75% 0 0 0;
height:0;
overflow:hidden;
}
#areaIntroduction .item .photo img{
min-width:110%;
min-height:110%;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%)
}


/* ウィンドウ幅が768px〜の場合に適用するCSS */
@media screen and ( min-width:768px ){

	#areaIntroduction{
	padding:210px 0.5em;
	}

	#areaIntroduction .item{
	display:flex;
	flex-wrap: wrap;
	margin-bottom: 10.5em;
	flex-direction: row-reverse;
	}
	#areaIntroduction .item:nth-child(even){
	transform:translateX(100px);
	}
	
	#areaIntroduction .item .boxText{
	position: absolute;
	left:0;
	bottom:20px;
	width:900px;
	padding: 1.5em 2.3em;
	margin-bottom:0;
	z-index:5;
	}
	
	#areaIntroduction .item .boxText::before{
	left: -110px;
	top: -98px;
	width: 200px;
	height: 198px;
	}
	
	#areaIntroduction .item .boxText::before{
	left: -110px;
	top: -98px;
	width: 200px;
	height: 198px;
	}
	
	#areaIntroduction .item .boxText::after{
	right:25px;
	top:-60px;
	width:161px;
	height:120px;
	}
	
	#areaIntroduction .item:nth-child(even) .boxText::after{
	right:35px;
	top:-60px;
	width:155px;
	height:168px;
	}
	
	#areaIntroduction .item .boxText h3{
	font-size: 1.75em;
	margin-bottom:15px;
	}
	
	#areaIntroduction .item .boxText p{
	font-size:1.27em;
	margin-bottom:0;
	}

	#areaIntroduction .item .photo{
	position:relative;
	padding:375px 0 0 0;
	width:465px;
	}

}






/************************************************
#areaSodanCate（相談内容のカテゴリー）
***********************************************/

#areaSodanCate,
#areaSodanCate250710{
padding:4.5em 0.5em;
background:url(css_img/bgSodanCate.png) repeat-y center top;
background-size:100%;
}

#areaSodanCate .listSodancate{
position:relative;
padding-bottom:5.5em;
}
#areaSodanCate .listSodancate:after{
content:"";
display:block;
width: 168px;
height: 124px;
background:url(css_img/partsFrontSwalwSodancatebt.svg) no-repeat center top;
background-size:100%;
position:absolute;
right:0;
bottom:-20px;
}

#areaSodanCate .item{
border:solid 2px #fff;
box-shadow:0 0 15px #00000055;
position:relative;
margin-bottom:3.0em;
}

#areaSodanCate .item a{
color:#000;
}

#areaSodanCate .item h3{
position:absolute;
left:0;
bottom:0;
width:100%;
font-size:1.2em;
text-align:center;
padding:0.6em 0.2em;
background:#ffffffcc;
z-index:10;
}
#areaSodanCate .item h3{
left:50%;
top:50%;
bottom:auto;
transform:translate(-50%,-50%);
font-size:1.4em;
padding:0.6em 1.6em;
}

#areaSodanCate .item .photo{
position:relative;
padding:100% 0 0 0;
height:0;
overflow:hidden;
}
#areaSodanCate .item .photo img{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
min-width:110%;
min-height:110%;
transition-property:min-width,min-height;
transition-duration:0.3s;
transition-timing-function:ease-in-out;
transition-delay:0s;
}

#areaSodanCate .item a:hover .photo img{
min-width:120%;
min-height:120%;
}


/* ウィンドウ幅が768px〜の場合に適用するCSS */
@media screen and ( min-width:768px ){

	#areaSodanCate .listSodancate{
	display:flex;
	flex-wrap: wrap;
	justify-content: center;
	padding-bottom:20px;
	}
	
	#areaSodanCate .item{
	margin-bottom:3.0em;
	width:260px;
	margin:0 20px 55px;
	}
	
	#areaSodanCate .listSodancate:after{
	width: 215px;
	height: 164px;
	right:auto;
	left:-180px;
	bottom:0;
	}

}




/************************************************
#areaSodanCate250710（相談内容のカテゴリー）
***********************************************/


#areaSodanCate250710 .listSodancate .item{
color:#000;
position:relative;
display:block;
border:solid 2px #6EB286;
background:#fff url(css_img/iconArchiveTax.svg) no-repeat left top;
background-size:70px;
font-size:1.5em;
margin-bottom:2.5em;
padding:1.5em 2.5em;
line-height:1.5em;
transition-property:background, color;
transition-duration:0.3s;
transition-timing-function:ease-in-out;
transition-delay:0s;
}
#areaSodanCate250710 .listSodancate .item:hover{
background-color:#aaa;
color:#fff;
}
#areaSodanCate250710 .listSodancate .item:after{
content:"";
position:absolute;
display:block;
right:0.5em;
top:50%;
width:15px;
height:36px;
background:url(css_img/cursorListArcTax.svg) no-repeat center center;
background-size:100%;
transform:translate(0,-50%);
}


/* ウィンドウ幅が768px〜の場合に適用するCSS */
@media screen and ( min-width:768px ){

#areaSodanCate250710 .listSodancate{
display:flex;
flex-wrap: wrap;
justify-content: space-around;
}


#areaSodanCate250710 .listSodancate .item{
background-size:110px;
font-size:1.7em;
margin-bottom:2.5em;
padding:0;
width:50%;
width:-webkit-calc(50% - 50px);
width:calc(50% - 50px);
height:150px;
}
#areaSodanCate250710 .listSodancate .item span{
position:absolute;
width:60%;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}


}



/************************************************
#areaMessage（相談所からのメッセージ）
***********************************************/

#areaMessage{
background:var(--green-color03) ;
padding:4.0em 0.5em;
position:relative;
}

#areaMessage::before{
content:"";
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
background:url(css_img/bgMessage.png);
opacity:0.3;
z-index:1;
}
#areaMessage .wideFrame{
position:relative;
z-index:5;
}

#areaMessage h2{
color:#fff;
border-bottom:solid 1px #fff;
margin-bottom:3.1em;
}

#areaMessage .frame .boxText p:last-child{
margin-bottom:0;
}

#areaMessage .photo{
margin-bottom:2.5em;
}

#areaMessage .frame{
position:relative;
}

#areaMessage .frame .boxMain{
font-weight:bold;
font-size:1.1em;
border-bottom:solid 1px #000;
padding-bottom:1.5em;
margin-bottom:1.5em;
}
#areaMessage .frame .boxMain *{
font-weight:bold!important;
}
#areaMessage .frame h3{
padding-bottom:0em;
margin-bottom:1.5em;
}
#areaMessage .frame .boxMain p{
margin-bottom:0;
}

#areaMessage .frame::before{
content:"";
position:absolute;
right:0;
bottom:0;
width:180px;
height:224px;
background:url(css_img/partsBgSwallowMessage.svg) no-repeat center center;
background-size:100%;
z-index:1;
}

#areaMessage .frame .boxText{
position:relative;
z-index:5;
}


/* ウィンドウ幅が768px〜の場合に適用するCSS */
@media screen and ( min-width:768px ){

#areaMessage{
padding:55px 0;
}

#areaMessage h2{
margin-bottom:110px;
}

#areaMessage .frame h3{
font-size:1.4em;
padding-bottom:0;
margin-bottom:10px;
}

#areaMessage .frame{
display:flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-end;
}


#areaMessage .photo{
margin-bottom:0;
width:310px;
}

#areaMessage .frame .boxText{
width:-webkit-calc(100% - 350px);
width:calc(100% - 350px);
}

#areaMessage .frame .boxText p{
font-size:1.1em;
}

#areaMessage .frame::before{
right:25px;
top:12px;
bottom:auto;
width:146px;
height:180px;
}

}






/************************************************
#areaDiary（記事項目）
***********************************************/

#areaDiary{
background:var(--brown-color01);
padding: 4em 0.5em;
position: relative;
}

#areaDiary h2{
border-bottom:solid 1px #000;
margin-bottom:3.1em;
}

#areaDiary .frame{
margin-bottom:3.2em;
}

#areaDiary .frame .item{
margin-bottom:2.8em;
}
#areaDiary .frame .item:last-child{
margin-bottom:0;
}

#areaDiary .frame .item a{
color:#000;
display:flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
}

#areaDiary .item.new .boxText .date::after{
content: "NEW!";
color: #fff;
font-size: 0.75em;
display: inline-block;
padding: 0.05em 0.5em;
margin-left: 0.8em;
background: #000;
}

#areaDiary .frame .item .photo{
width:100px;
height:100px;
position:relative;
background:#ccc;
overflow:hidden;
}
#areaDiary .frame .item .photo img{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
min-width:100%;
min-height:100%;
transition-property:min-width,min-height;
transition-duration:0.3s;
transition-timing-function:ease-in-out;
transition-delay:0s;
}
#areaDiary .frame .item a:hover .photo img{
min-width:120%;
min-height:120%;
}

#areaDiary .frame .item .boxText{
width : -webkit-calc(100% - 120px) ;
width : calc(100% - 120px) ;
}
#areaDiary .frame .item .boxText h3{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

#areaDiary .item .boxText .date{
margin-bottom:0.5em;
}

#areaDiary .boxBtm{
display:flex;
justify-content: center;
}


/* ウィンドウ幅が768px〜の場合に適用するCSS */
@media screen and ( min-width:768px ){

#areaDiary .frame{
display:flex;
flex-wrap: wrap;
justify-content: space-between;
}

#areaDiary .frame .item{
margin-bottom:2.8em;
width:48%;
width : -webkit-calc(50% - 10px) ;
width : calc(50% - 10px) ;
}

#areaDiary .frame .item .boxText{
width : -webkit-calc(100% - 180px) ;
width : calc(100% - 180px) ;
font-size:1.2em;
padding-bottom:1.2em;
}

#areaDiary .frame .item .photo{
width:145px;
height:145px;
}
#areaDiary .frame .item:nth-last-child(2){
margin-bottom:0;
}

}






/************************************************
#areaBtomBnrlst（バナー一覧項目）
***********************************************/

#areaBtomBnrlst{
padding:3.5em 0 7.5em;
}

#areaBtomBnrlst .slideBner .item{
padding:0 0.53em;
font-size:0.9em;
}

#areaBtomBnrlst .slideBner .item .image{
border:solid 1px #000;
margin-bottom:1.0em;
}





/************************************************
#areaZoomConsultationSession（「ZOOM相談会」項目）
***********************************************/


#areaZoomConsultationSession{
background:var(--brown-color01);
background:#000;
padding:2.0em 0.5em;
text-align:center;
}

#areaZoomConsultationSession a{
display:block;
text-align:center;
margin-bottom:1.0em;
}

#areaZoomConsultationSession a img{
border:solid 1px #fff;
width:100%;
background:#fff;
transition-property:opacity;
transition-duration:0.3s;
transition-timing-function:ease-in-out;
transition-delay:0s;
}
#areaZoomConsultationSession a:hover img{
opacity:0.6;
}


#areaZoomConsultationSession .text{
color:#fff;
border:solid 1px #fff;
font-size:0.8em;
padding:0.5em 0.8em;
}


/* ウィンドウ幅が768px〜の場合に適用するCSS */
@media screen and ( min-width:768px ){

#areaZoomConsultationSession a{
margin-bottom:45px;
}

#areaZoomConsultationSession .text{
font-size:1.1em;
padding:25px 60px;
}

}