@charset "utf-8";

/*========================

pc.css

========================*/
html { font-size: 62.5%; }
body {
background-color:var(--beige);
color:#515151;
font-size: 1.3rem;
}

.sp { display:none; }
.pc { display:flex; }

/*---------------------------------------------
header
---------------------------------------------*/
#header {
position:fixed;
right:0;
top:0;
z-index:10;
}
#header #header_cont {
align-items:center;
align-content:center;
display:flex;
justify-content:flex-end;
}

#header #header_cont ul {
background-color:var(--white);
border-radius:0 0 0 20px;
display:flex;
justify-content:flex-end;
margin-left:30px;
padding-right:5vw;
}
#header #header_cont ul li {
background-color:var(--white);
border-right:1px solid #eee;
padding:0 20px 10px;
width:150px;
}
#header #header_cont ul li:first-child {
border-radius:0 0 0 20px;
}
#header #header_cont ul li:hover {
cursor:pointer;
}
#header #header_cont ul li a,
#header #header_cont ul li label {
display:block;
}
#header #header_cont ul li dl {
align-items:center;
display:flex;
flex-direction:column;
justify-content:center;
}
#header #header_cont ul li dl dt {
align-items:center;
display:flex;
height:60px;
justify-content:center;
}
#header #header_cont ul li dl dt img {
height:50px;
width:auto;
}
#header #header_cont ul li:nth-child(2) dl dt img {
height:37px;
width:auto;
}
#header #header_cont ul li dl dd {
color:var(--gray);
font-size:1.2rem;
font-weight:600;
margin-top:2px;
}

@media screen and (max-width:1080px) {
#header #header_cont ul {
padding-right:3vw;
}
}

/*---------------------------------------------
bread_crumb
---------------------------------------------*/
.bread_crumb {
background-color:var(--white);
}
.bread_crumb ol {
display:flex;
column-gap:25px;
padding:25px 25px 25px 5vw;
}
.bread_crumb ol li {
display:flex;
position:relative;
}
.bread_crumb ol li:after {
color:var(--light_gray);
content:"\f054";
font-family:var(--icon);
font-weight:600;
left:-15px;
margin-top:-6px;
top:50%;
position:absolute;
font-size:1rem;
z-index:3; 
}
.bread_crumb ol li:first-child:after {
content:none;
} 
.bread_crumb ol li a {
font-size:1.4rem;
}
.bread_crumb ol li a i {
font-size:1.4rem;
line-height:1;
padding-right:3px;
}
.bread_crumb ol li span {
font-size:1.4rem;
}
.bread_crumb ol li a:hover i,
.bread_crumb ol li a:hover span {
color:var(--green);
}

/*---------------------------------------------
main
---------------------------------------------*/
#main {
position:relative;
}

/*---------------------------------------------
main_visual
---------------------------------------------*/
#main_visual {
display:flex;
justify-content:flex-end;
margin-bottom:30px;
position:relative;
}
#main_visual #main_visual_left {
background-color:var(--white);
border-radius:0 0 30px 0;
display: flex;
height:calc(100% - 50px);
flex-direction:column;
justify-content:space-between;
margin:0;
padding:30px 30px 40px 5vw;
position:absolute;
left:0;
width:35vw;
z-index:3;
}
#main_visual #main_visual_left h1 {
align-items:start;
align-content:center;
display: flex;
flex-direction:column;
justify-content:center;
}
#main_visual #main_visual_left h1 a {
align-items:center;
align-content:center;
display: flex;
flex-direction:column;
justify-content:center;
}

#main_visual #main_visual_left h1 img {
height:auto;
max-width:170px;
width:100%;
}
#main_visual #main_visual_left h1 span {
font-size:1.0rem;
text-align:center;
}
#main_visual #main_visual_left h2 {
bottom: auto;
left:5vw;
margin-left:-10px;
position:absolute;
top:170px;
width:55vw;
}
#main_visual #main_visual_left h2 img {
height:auto;
max-width:500px;
width:100%;
}
#main_visual #main_visual_left h3 {
align-items:center;
align-content:center;
display: flex;
flex-direction:column;
justify-content:center;
}
#main_visual #main_visual_left h3 span {
display:block;
line-height:1.6;
padding-bottom:25px;
}
#main_visual #main_visual_left h3 span.illust {
display:block;
padding-bottom:0;
}
#main_visual #main_visual_left h3 span.illust img {
height:auto;
max-width:230px;
opacity:0;
-webkit-transition:opacity 3s;
transition:opacity 3s;
}
#main_visual #main_visual_left h3 span.illust img.lazyloaded {
opacity:1;
}
#main_visual #main_visual_right {
display:flex;
flex-direction:column;
justify-content:flex-end;
margin-top:100px;
width:70vw;
height:541px;
text-align:right;
position:relative;
z-index:2;
}
#main_visual_slide {
display:flex;
flex-direction:column;
height:100%;
justify-content:flex-end;
width:70vw;
}
#main_visual_slide ol {
height:100%;
overflow:hidden;
text-align:right;
}
#main_visual_slide ol li img {
border-radius:0 0 0 30px;
object-fit:cover;
height:541px;
max-width:100%;
}
#main_visual_slide ol li span {
font-size:1.1rem;
position:absolute;
left:25px;
bottom:20px;
color:var(--white);
z-index:2;
}
#thumbnail {
position:absolute;
bottom:0;
right:0;
z-index:2001;
}
#thumbnail #number {
background-color:var(--white);
border-radius:10px 0 0 0;
display:flex;
}
#thumbnail #number li {
font-size:1.5rem;
padding:15px 30px;
position:relative;
}
#thumbnail #number li:after {
background-color:var(--light_gray);
content:" ";
height:5px;
position:absolute;
bottom:0;
left:50%;
margin-left:-21px;
width:42px;
}
#thumbnail #number li.slick-current:after {
background-color:var(--green);
}
#thumbnail #number li:hover {
cursor:pointer;
}
#thumbnail #number li:hover:after {
background-color:var(--green);
}

#thumbnail #number .slick-track {
transform:none !important;
}

/*---------------------------------------------
nav
---------------------------------------------*/
nav {
position:relative;
width:100%;
}
#nav {
background-color:var(--white);
display:flex;
justify-content:center;
position:relative;
}
#nav:after {
background-color:var(--middle_beige);
content:" ";
height:5px;
position:absolute;
bottom:0;
width:100%;
}
#nav ol {
display:flex;
justify-content:center;
flex:1;
margin:0 auto;
max-width:1280px;
padding:0 50px;
position:relative;
}
#nav ol li {
display:flex;
position:relative;
text-align:center;
flex:0 0 20%;
}
#nav ol li:after {
background-color:var(--light_gray);
content:" ";
height:30px;
margin-top:-15px;
position:absolute;
top:50%;
width:1px;
}
#nav ol li:last-child:before {
background-color:var(--light_gray);
content:" ";
height:30px;
margin-top:-15px;
position:absolute;
top:50%;
right:0;
width:1px;
}
#nav ol li a {
align-items:center;
color:var(--gray);
display:flex;
font-weight:600;
justify-content:center;
font-size:1.6rem;
line-height:1.6;
padding:30px 15px;
position:relative;
width:100%;
}
#nav ol li a:before {
content:"\f078";
color:var(--light_gray);
font-family:var(--icon);
font-weight:600;
right:20px;
top:50%;
margin-top:-8px;
position:absolute;
font-size:1.0rem;
}
#nav ol li a:hover {
color:var(--green);
}
#nav ol li a:hover:before {
color:var(--green);
}
#nav ol li a:after {
transform: scale(0, 0);
transform-origin: left top;
}
#nav ol li a:hover:after {
background-color:var(--green);
content:" ";
height:5px;
position:absolute;
bottom:0;
width:100%;
z-index:2;
transition: all .6s;
transform: scale(1, 1);
transform-origin: left top;
}
#nav ol li.selected a {
color:var(--green);
position:relative;
}
#nav ol li.selected a:before {
color:var(--green);
}
#nav ol li.selected a:after,
#nav ol li.selected a:hover:after {
background-color: var(--green);
content: " ";
height:5px;
position:absolute;
bottom:0;
left:0;
transform: scale(1, 1);
width:100%;
z-index:2;
}

#nav_bottom {
display:none;
}

@media screen and (max-width:1080px) {
#nav ol li a {
font-size:1.4rem;
}
#nav ol li a:before {
top:auto;
right:auto;
bottom:10px;
margin-right:-5px;
}
}

/*---------------------------------------------
section（common）
---------------------------------------------*/
.section {
display:flex;
flex-direction:column;
justify-content:center;
}
.section h2.title {
color:var(--gray);
display:flex;
justify-content:center;
font-size:3.2rem;
font-weight:600;
padding:0 5vw 80px;
position:relative;
text-align:center;
}
.section h2.title span {
/*color:var(--wood);*/
display:inline-block;
padding:0 0 20px;
position:relative;
}
.section h2.title span:before {
content:" ";
width:100%;
height:2px;
background-color:var(--middle_beige);
display:block;
position:absolute;
left:0;
bottom:-6px;
}
.section h2.title span:after {
content:" ";
width:80px;
height:2px;
background-color:var(--brown);
display:block;
position:absolute;
left:0;
bottom:-6px;
}
.section_title {
display:flex;
justify-content:space-between;
position:relative;
}
.section_title .section_title_wrap {
align-items:center;
align-content:center;
display:flex;
flex-direction:column;
justify-content:center;
max-width:300px;
position:relative;
z-index:2;
}
.section_title_cont {
align-items:center;
align-content:center;
background-color:var(--white);
display:flex;
flex-direction:column;
justify-content:center;
padding:60px 50px;
}
.section_title_cont dl dt {
font-size:2.6rem;
font-weight:600;
line-height:1.6;
}
.section_title_cont dl dd {
align-items:center;
align-content:center;
display:flex;
flex-direction:column;
justify-content:center;
}
.section_title_cont dl dd span {
display:block;
flex:0 0 100%;
font-size:0.9rem;
margin-top:15px;
margin-bottom:15px;
padding-bottom:15px;
position:relative;
}
.section_title_cont dl dd span:after {
background-color:var(--light_gray);
content:" ";
height:1px;
position:absolute;
bottom:0;
left:50%;
margin-left:-35px;
width:70px;
}
.section_title_cont dl dd img {
height:50px;
width:auto;
}
.section_title_cont h5 {
display:flex;
flex:1;
font-size:1.9rem;
font-weight:600;
justify-content:center;
margin-top:25px;
width:100%;
}
.section_title_cont h5 span {
display:block;
line-height:1.6;
text-align:left;
}
.section_title_cont h6 {
font-size:1.5rem;
margin-top:15px;
line-height:2.0;
}
.section_title .pic {
opacity:0;
-webkit-transition:opacity 3s;
transition:opacity 3s;
position:relative;
width:75vw;
height:500px;
}
.section_title .pic.lazyloaded {
opacity:1;
}
.section_title .pic img:first-child {
object-fit:cover;
height:500px;
width:100%;
}
.section_title .pic img {
opacity:0;
-webkit-transition:opacity 3s;
transition:opacity 3s;
}
.section_title .pic img.lazyloaded {
opacity:1;
}
.section_title.right {
padding-right:5vw;
}
.section_title .section_title_wrap .section_title_cont {
margin-left:-10vw;
}
.section_title.left {
padding-left:5vw;
}

/*---------------------------------------------
.section_cont（common）
---------------------------------------------*/
.section_cont {
padding-top:70px;
position:relative;
}

/*---------------------------------------------
character
---------------------------------------------*/
#character {
padding:80px 0 0;
}
#character .section_title .pic img:nth-child(2) {
position:absolute;
left:10vw;
height:auto;
top:-60px;
max-width:162px;
z-index:2;
}
#character .section_cont {
display: flex;
justify-content:space-between;
overflow:hidden;
}
#character .section_cont .left_image {
flex:0 0 10vw;
}
#character .section_cont .left_image ul {
display:flex;
height:100%;
flex-direction:column;
}
#character .section_cont .left_image ul li {
flex:1 0 33.3%;
}
#character .section_cont .left_image ul li img {
opacity:0;
-webkit-transition:opacity 3s;
transition:opacity 3s;
object-fit:cover;
max-width:100%;
}
#character .section_cont .left_image ul li img.lazyloaded {
opacity:1;
}
#character .section_cont .right_image {
flex:0 0 10vw;
}
#character .section_cont .right_image ul {
display:flex;
height:100%;
flex-direction:column;
}
#character .section_cont .right_image ul li {
flex:1 0 33.3%;
}
#character .section_cont .right_image ul li img {
opacity:0;
-webkit-transition:opacity 3s;
transition:opacity 3s;
object-fit:cover;
}
#character .section_cont .right_image ul li img.lazyloaded {
opacity:1;
}
#character .section_cont > ul {
background-color:var(--white);
display:flex;
flex:1;
flex-direction:column;
row-gap:20px;
padding:50px;
}
#character .section_cont ul li {
display:flex;
justify-content:start;
flex-wrap:wrap;
margin:0;
}
#character .section_cont ul li:first-child {
margin-top:0;
}
#character .section_cont ul li .pic { 
flex:0 0 313px;
margin-bottom:15px;
}
#character .section_cont ul li .pic img {
height:auto;
width:313px;
object-fit:cover;
opacity:0;
-webkit-transition:opacity 3s;
transition:opacity 3s;
}
#character .section_cont ul li .pic img.lazyloaded {
opacity:1;
}
#character .section_cont dl {
align-items:center;
align-content:center;
display:flex;
flex-wrap:wrap;
justify-content:start;
padding-left:50px;
flex:1 1 20vw;
max-width:35vw;
}
#character .section_cont dl dt {
align-items:center;
align-content:center;
display:flex;
justify-content:start;
font-size:2.8rem;
font-weight:600;
line-height:1.6;
}
#character .section_cont dl dd {
font-size:1.6rem;
line-height:2.0;
margin-top:20px;
}

/*---------------------------------------------
best_agent
---------------------------------------------*/
#best_agent {
background-image:url(../img/bg_bestagent.png);
background-repeat:no-repeat;
background-position:3vw 45px;
background-size:346px 400px;
display:flex;
flex-direction:column;
padding:80px 0 0;
position:relative;
overflow:hidden;
opacity:0;
-webkit-transition:opacity 3s;
transition:opacity 3s;
}
#best_agent.lazyloaded {
opacity:1;
}
#best_agent.lazyloaded:before {
content:" ";
background-image:url(../img/illust_05.png);
background-repeat:no-repeat;
background-position:right top;
background-size:288px 125px;
position:absolute;
left:8vw;
top:17vw;
height:125px;
width:288px;
}
#best_agent.lazyloaded:after {
content:" ";
background-image:url(../img/bg_bestagent_right.png);
background-repeat:no-repeat;
background-position:right top;
background-size:400px 400px;
position:absolute;
right:-5%;
top:50px;
height:400px;
width:400px;
}
#best_agent h2 {
font-size:3.2rem;
font-weight:600;
padding-bottom:70px;
position:relative;
text-align:center;
}
#best_agent h2 span {
display:inline-block;
padding:0 0 20px;
position:relative;
}
#best_agent h2 span:before {
content:" ";
width:100%;
height:2px;
background-color:var(--middle_beige);
display:block;
position:absolute;
left:0;
bottom:-6px;
}
#best_agent h2 span:after {
content:" ";
width:80px;
height:2px;
background-color:var(--brown);
display:block;
position:absolute;
left:0;
bottom:-6px;
}
#best_agent #best_agent_cont {
padding:0 10vw;
opacity:0;
position:relative;
-webkit-transition:opacity 3s;
transition:opacity 3s;
}
#best_agent #best_agent_cont.lazyloaded {
opacity:1;
}
#best_agent #best_agent_cont.lazyloaded:before {
content:" ";
background-image:url(../img/illust_07.png);
background-repeat:no-repeat;
background-position:right top;
background-size:120px 185px;
position:absolute;
right:13vw;
top:-40px;
height:185px;
width:120px;
}
#best_agent #best_agent_cont #best_agent_lead {
display:flex;
flex-direction:column;
justify-content:center;
padding:0;
position:relative;
}

#best_agent #best_agent_cont #best_agent_lead h2:before {
content:" ";
background-color:var(--white);
height: calc(tan(60deg) * 60px / 2);
width:60px;
clip-path: polygon(50% 0, 100% 100%, 0 100%);
position:absolute;
width:100%;
height:100%; 
bottom:0;
left:0;
z-index:-1;
}
#best_agent #best_agent_cont #best_agent_lead h2 {
font-size:3.0rem;
font-weight:600;
line-height:1.6;
position:relative;
text-align:center;
padding:130px 0 20px;
z-index:2;
}
#best_agent #best_agent_cont #best_agent_lead dl {
padding:0;
position:relative;
z-index:2;
}
#best_agent #best_agent_cont #best_agent_lead dl dd {
background-color:var(--white);
font-size:1.6rem;
line-height:1.8;
padding-top:20px;
text-align:center;
}
#best_agent #best_agent_cont #best_agent_detail {
background-color:var(--white);
padding:40px 70px 50px;
}
#best_agent #best_agent_cont #best_agent_detail > ul {
column-gap:80px;
display:flex;
justify-content:space-between;
}
#best_agent #best_agent_cont #best_agent_detail > ul > li {
display:flex;
flex:0 1 50%;
flex-direction:column;
justify-content:start;
}
#best_agent #best_agent_cont #best_agent_detail > ul li h3 {
background-color:var(--green);
color:var(--white);
flex-basis:0;
font-size:1.8rem;
font-weight:600;
line-height:1;
padding:25px;
text-align:center;
}
#best_agent #best_agent_cont #best_agent_detail > ul li ul {
align-items:center;
display:flex;
justify-content:center;
padding:50px 0 0;
}
#best_agent #best_agent_cont #best_agent_detail > ul li ul li {
margin-left:30px;
}
#best_agent #best_agent_cont #best_agent_detail > ul li ul li:first-child {
margin-left:0;
max-width:132px;
} 
#best_agent #best_agent_cont #best_agent_detail > ul li ul li img {
height:auto;
width:100%;
}
#best_agent #best_agent_cont #best_agent_detail > ul li ul li i {
font-size:1.6rem;
}
#best_agent #best_agent_cont #best_agent_detail > ul li ul li span {
font-size:2.0rem;
font-weight:600;
}

#best_agent #best_agent_cont #best_agent_detail > ul li h4 {
flex-basis:0;
font-size:2.3rem;
font-weight:600;
line-height:1.6;
margin-top:50px;
text-align:center;
}
#best_agent #best_agent_cont #best_agent_detail > ul li h5 {
flex-basis:0;
flex:1;
font-size:1.4rem;
line-height:2.0;
margin-top:20px;
}  
#best_agent #best_agent_cont #best_agent_detail > ul li .pic {
align-items:center;
align-content:center;
display:flex;
flex-basis:0;
justify-content:center;
margin-top:25px;
}
#best_agent #best_agent_cont #best_agent_detail > ul li .pic img {
max-width:433px;
width:100%;
height:auto;
object-fit:cover;
}
#best_agent #best_agent_cont .note {
color:var(--brown);
margin-top:20px;
font-size:1.4rem;
line-height:1.8;
}


@media screen and (max-width:1080px) {
#best_agent #best_agent_cont {
padding:0 5vw;
}
}

/*---------------------------------------------
architects_builders
---------------------------------------------*/
#architects_builders {
padding:80px 0 0;
}

#architects_builders .section_cont {
position:relative;
}
#architects_builders .section_cont h5 {
color:var(--gray);
display:flex;
font-size:2.3rem;
font-weight:600;
justify-content:center;
line-height:1.8;
text-align:center;
}
#architects_builders .section_cont #architects_builders_detail {
margin:50px auto 0;
padding:0 10vw 80px;
background-image:url(../img/bg_architects_builders_01.png);
background-repeat:no-repeat;
background-position:-360px bottom;
background-size:42% auto;
position:relative;
opacity:0;
-webkit-transition:opacity 3s;
transition:opacity 3s;
}
#architects_builders .section_cont #architects_builders_detail.lazyloaded {
opacity:1;
}
#architects_builders .section_cont #architects_builders_detail > img {
height:auto;
position:absolute;
right:0;
bottom:0;
width:20vw;
}
#architects_builders .section_cont #architects_builders_detail > img.lazyloaded {
opacity:1;
}
#architects_builders .section_cont #architects_builders_detail > ul {
background-color:var(--white);
column-gap:50px;
display:flex;
justify-content:space-between;
max-width:1080px;
margin:0 auto;
padding:50px;
}
#architects_builders .section_cont #architects_builders_detail > ul > li {
flex:0 1 50%;
flex-direction:column;
}
#architects_builders .section_cont #architects_builders_detail > ul > li > dl {
align-items:start;
display:flex;
flex:2;
height:calc(100% - 206px);
min-height:0%;
flex-wrap:wrap;
justify-content:start;
}
#architects_builders .section_cont #architects_builders_detail > ul > li > dl > dt {
align-items:center;
align-content:center;
display:flex;
flex:0 0 100%;
justify-content:center;
}
#architects_builders .section_cont #architects_builders_detail > ul > li > dl > dt img {
height:243px;
margin-left:-30px;
width:auto;
}
#architects_builders .section_cont #architects_builders_detail > ul > li > dl  > dd {
align-items:start;
display:flex;
height:100%;
flex:0 0 100%;
margin-top:50px;
}
#architects_builders .section_cont #architects_builders_detail > ul > li > dl dd ul {
display:flex; 
flex-wrap:wrap;
justify-content:center;
row-gap:20px;
column-gap:10px;
}
#architects_builders .section_cont #architects_builders_detail > ul > li > dl dd ul li {
flex:0 0 80px;
}
#architects_builders .section_cont #architects_builders_detail > ul > li > dl dd ul li img {
height:auto;
max-width:80px;
opacity:0;
-webkit-transition:opacity 3s;
transition:opacity 3s;
width:100%;
}
#architects_builders .section_cont #architects_builders_detail > ul > li > dl dd ul li img.lazyloaded {
opacity:1;
}
#architects_builders .section_cont #architects_builders_detail > ul > li .professional {
max-height: 166px;
}
#architects_builders .section_cont #architects_builders_detail > ul > li .professional dl {
margin-top:30px;
}
#architects_builders .section_cont #architects_builders_detail > ul > li .professional dl dt {
align-items:center;
align-content:center;
display:flex;
flex:0 0 100%;
justify-content:center;
}
#architects_builders .section_cont #architects_builders_detail > ul > li .professional dl dt img {
height:80px;
width:auto;
}
#architects_builders .section_cont #architects_builders_detail > ul > li .professional dl dd {
display:flex;
flex:0 0 100%;
font-size:1.6rem;
justify-content:center;
line-height:1.8;
margin-top:30px;
}
.works {
display:flex;
overflow:hidden;
position:relative;
}
.works#builders_work {
margin-top:60px;
}

.works:before {
background-color:var(--white);
content:" ";
height:100%;
position:absolute;
width:60%;
z-index:-1;
}
.works .works_title {
display:flex;
flex:0 0 40%;
flex-wrap:wrap;
justify-content:space-between;
padding:100px 20px 120px 10vw; 
position:relative;
z-index:2;
}
.works .works_title h6 {
flex:0 0 100%;
font-size:2.8rem;
font-weight:600;
line-height:1.6;
position:relative;
}
.works .works_title div h6:before {
background-image:url(../img/i_architects.png);
background-repeat:no-repeat;
background-size:cover;
content:" ";
max-height:100%;
right:0;
top:-70px;
position:absolute;
max-width:151px;
}
.works .works_title div span {
color:var(--middle_gray);
display:block;
flex:0 0 100%;
font-family:Yu Mincho, '游明朝';
margin-top:10px;
margin-bottom:60px;
}
.works .works_title .icon {
margin-right:20px;
margin-bottom:30px;
padding-left:30px;
max-width:120px; 
}
.works .works_title .icon {
opacity:0;
-webkit-transition:opacity 3s;
transition:opacity 3s;
}
.works .works_title .icon.lazyloaded {
opacity:1;
}
.works .works_title .icon img {
height:auto;
width:100%;
max-width:90px;
}
.works .works_title .icon img.lazyloaded {
opacity:1;
}
.works .works_title p {
font-size:1.4rem;
line-height:2.0;
}
.works .works_title .btn {
margin-top:30px;
min-width:200px;
}
.works .works_title .btn a {
font-size:1.5rem;
display:flex;
justify-content:center;
text-align:center;
}
.works .works_detail {
align-items:center;
align-content:center;
display:flex;
flex:0 0 65%;
position:relative;
z-index:2;
overflow-x: scroll;
}
.works .works_detail ul {
display:flex;
padding-right:5vw;
position:absolute;
}
.works .works_detail ul li {
background-color:var(--white);
margin-right:50px;
width:248px;
}
.works .works_detail ul li dl {
border-color:var(--light_gray);
border-style:solid;
border-width:1px;
display:flex;
flex-direction:column;
height:100%;
justify-content:space-between;
}
.works .works_detail ul li dl dt {
height:164px;
overflow:hidden;
position:relative;
opacity:0;
-webkit-transition:opacity 3s;
transition:opacity 3s;
}
.works .works_detail ul li dl dt.lazyloaded {
opacity:1;
}
.works .works_detail ul li dl dt img {
animation: change-img-anim 15s infinite ease-out; 
opacity: 0;
object-fit:cover;
object-position:center center;
position:absolute;
width:100%;
height:164px;
}
.works .works_detail ul li dl dt img.lazyloaded {
opacity:1;
}
.works .works_detail ul li dl dt img:first-child {
animation-delay: 0s;
}
.works .works_detail ul li dl dt img:nth-child(2) {
animation-delay: 5s;
}
.works .works_detail ul li dl dt img:nth-child(3) {
animation-delay: 10s;
}
@keyframes change-img-anim { 
0%{ opacity:0; }
5%{ opacity:1; }
27%{ opacity:1; }
30%{ opacity:0; }
100%{ opacity:0; } 
}

.works .works_detail ul li dl dd {
display:flex;
flex-direction:column;
flex:1;
min-height:0;
justify-content:space-between;
padding:20px;
}
.works .works_detail ul li dl dd div:first-child {
flex:1;
}
.works .works_detail ul li dl dd > div:nth-child(2) {
flex:1;
padding-top:30px;
}
.works .works_detail ul li dl dd div:first-child span:first-child {
display:block;
flex:0 0 100%;
}
.works .works_detail ul li dl dd div:first-child span:nth-child(2) {
display:block;
flex:0 0 100%;
font-size:1.6rem;
font-weight:600;
line-height:1.6;
margin-top:10px;
}
.works .works_detail ul li dl dd div:nth-child(2) > span {
color:var(--middle_gray);
display:block;
flex:0 0 100%;
font-size:1.0rem;
}
.works .works_detail ul li dl dd div:nth-child(2) .btn {
flex:0 0 100%;
margin-top:15px;
}
.works .works_detail ul li dl dd div:nth-child(2) .btn a {
min-width:200px;
}

/*------ scrol ------*/
.scroll_nav {
position: absolute;
left:70%;
bottom:15px;
padding-right: 52px;
z-index: 201;
transform-origin:left center;
}
.scroll_nav_line {
position: absolute;
right:0;
top:50%;
width:44px;
height:0px;
margin-top:-1px;
}
.scroll_nav_line:after {
content:" ";
display: block;
width: 100%;
height: 0;
border-color:var(--brown);
border-bottom-width:2px;
border-style:solid;
transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0s linear 0.5s;
transform-origin:left center ;
transform: scale(0.001, 1);
opacity: 0;
}
.scroll_nav_text {
color:var(--brown);
font-size: 1.1rem;
font-weight:400;
line-height:1;
overflow: hidden;
}
.scroll_nav_text span {
display: block;
transform: translate3d(0, 100%, 0);
transition: transform 1.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.scroll_nav.is-active.is-inview .scroll_nav_text {
animation: bounce 2.5s infinite;
}
.scroll_nav.is-active.is-inview .scroll_nav_text span {
transform: none;
}
.scroll_nav.is-active.is-inview .scroll_nav_line {
animation: scroll_nav-line 2.5s infinite 851ms;
}
.scroll_nav.is-active.is-inview .scroll_nav_line:before {
content:" ";
width: 0;
height: 0;
border-top-width:5px;
border-top-style: solid;
border-bottom-width:5px;
border-top-color:transparent;
border-bottom-style: solid;
border-bottom-color:transparent;
border-left-width:9px;
border-left-style: solid;
border-left-color:var(--brown);
border-right:none;
right:-1px;
top:50%;
margin-top:-4px;
position:absolute;
z-index:3; 
}
.scroll_nav.is-active.is-inview .scroll_nav_line:after {
transform: none;
opacity: 1;
transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1), opacity 0s linear;
}
.is-body-touch .scroll_nav {
display:none;
}
@keyframes scroll_nav-line {
0% {
transform-origin: 0% 50%;
transform: scale(1, 1); }
20% {
transform-origin: 100% 50%;
transform: scale(0.9, 1); }
20.01% {
transform-origin: 100% 50%; }
38% {
transform-origin: 100% 0%;
transform: scale(0, 1); }
}

@keyframes bounce {
0%, 15%, 38%, 60%, 75% {
transform: translateX(0); }
30% {
transform: translateX(-10px); }
45% {
transform: translateX(-5px); }
}

/*---------------------------------------------
#planning
---------------------------------------------*/
#planning {
padding:100px 0 0;
}
#planning .section_cont {
display:flex;
flex-wrap:wrap;
justify-content:space-between;
margin:50px auto 0;
padding:0 10vw;
}
#planning .section_cont ul li .pic {
align-items:center;
align-content:center;
display:flex;
justify-content:center;
flex:1 1 40%;
margin-top:20px;
position:relative;
}
#planning .section_cont ul li .pic img {
width:100%;
height:auto;
max-width:158px;
}
#planning .section_title .pic img:nth-child(2) {
position:absolute;
left:10vw;
height:auto;
top:-60px;
max-width:162px;
z-index:2;
}
#planning .section_title .pic span {
color:var(--brown);
position:absolute;
left:10vw;
bottom:5vw;
line-height:1.8;
}
#simulator_plan {
overflow:hidden;
flex-wrap:wrap;
display:flex;
}
#simulator_plan ul {
display:flex;
flex-wrap:wrap;
column-gap:4%;
justify-content:space-between;
}
#simulator_plan ul li {
flex:0 1 48%;
}
#simulator_plan ul li dl {
display:flex;
flex-direction:column;
justify-content:space-between;
height:100%;
}
#simulator_plan ul li dl dt {
color:var(--brown);
font-size:2.5rem;
font-weight:600;
line-height:1.6;
padding-bottom:30px;
position:relative;
text-align:center;
}
#simulator_plan ul li dl dt:after {
background-image:url(../img/bg_t_planning.png);
background-repeat:no-repeat;
content:" ";
height:23px;
position:absolute;
bottom:0;
left:50%;
margin-left:-172px;
max-width:345px;
width:100%;
}
#simulator_plan ul li dl dd {
background-color:var(--white);
display:flex;
flex-direction:column;
justify-content:space-between;
flex:1;
margin-top:15px;
padding:15px;
}
#simulator_plan ul li dl dd .simulator_plan_detail {
border-width:2px;
border-style:dotted;
border-color:var(--brown);
display:flex;
justify-content:space-between;
flex-wrap:wrap;
padding:35px 3vw 45px;
height:100%;
}
#simulator_plan ul li dl dd .simulator_plan_detail .title_area {
display:flex;
flex:1;
flex-direction:column;
justify-content:space-between;
}
#simulator_plan ul li dl dd .simulator_plan_detail .title_area h2 {
color:var(--brown);
font-size:1.7rem;
font-weight:600;
line-height:1.6;
}
#simulator_plan ul li dl dd .simulator_plan_detail .title_area h3 {
color:var(--brown);
font-size:3.0rem;
font-weight:600;
flex:1;
line-height:1.4;
margin-top:10px;
}
#simulator_plan ul li dl dd .simulator_plan_detail > p {
font-size:1.5rem;
line-height:1.8;
margin-top:15px;
}
#simulator_plan ul li dl dd .simulator_plan_detail .simulator_plan_detail_bottom {
display:flex;
flex:0 0 100%;
flex-wrap:wrap;
justify-content:space-between;
}
#simulator_plan ul li dl dd .btn_area {
align-items:center;
align-content:center;
display:flex;
flex:1 0 260px;
justify-content:center;
margin-top:30px;
}
#simulator_plan ul li dl dd .btn_area .btn {
flex:0 1 260px;
min-width:260px;
margin-right:0px;
}
#simulator_plan ul li dl dd .btn_area .btn a {
border-radius:50px;
display:flex;
justify-content:center;
text-align:center;
}
#simulator_plan ul li dl dd .btn_area img {
width:100%;
height:auto;
max-width:158px;
}
#simulator_plan .note {
color:var(--brown);
margin-top:15px;
font-size:1.3rem;
line-height:1.8;
}
#builders_3d_plan {
flex:0 0 100%;
margin-top:50px;
}
#builders_3d_plan > dl {
display:flex;
flex-direction:column;
justify-content:space-between;
height:100%;
}
#builders_3d_plan > dl > dt {
color:var(--brown);
font-size:2.5rem;
font-weight:600;
line-height:1.6;
padding-bottom:30px;
position:relative;
text-align:center;
}
#builders_3d_plan > dl > dt:after {
background-image:url(../img/bg_t_planning.png);
background-repeat:no-repeat;
content:" ";
height:23px;
position:absolute;
bottom:0;
left:50%;
margin-left:-172px;
width:345px;
}
#builders_3d_plan > dl > dd {
background-color:var(--white);
display:flex;
flex-direction:column;
justify-content:space-between;
flex:1;
margin-top:15px;
padding:25px;
}
#builders_3d_plan > dl > dd .simulator_plan_detail {
border-width:2px;
border-style:dotted;
border-color:var(--brown);
display:flex;
justify-content:space-between;
padding:45px 3vw;
}
#builders_3d_plan dl dd .simulator_plan_detail #builders_3d_plan_left {
display:flex;
flex-wrap:wrap;
flex:0 1 65%;
justify-content:space-between;
}
#builders_3d_plan dl dd .simulator_plan_detail #builders_3d_plan_left .title_area {
flex:1 1 60%;
}
#builders_3d_plan dl dd .simulator_plan_detail #builders_3d_plan_left .title_area h2 {
color:var(--brown);
font-size:1.7rem;
font-weight:600;
line-height:1.6;
}
#builders_3d_plan dl dd .simulator_plan_detail #builders_3d_plan_left .title_area h3 {
color:var(--brown);
font-size:3.0rem;
font-weight:600;
flex:1;
line-height:1.4;
margin-top:10px;
}
#builders_3d_plan dl dd .simulator_plan_detail #builders_3d_plan_left .icon {
margin-left:20px;
width:151px;
}
#builders_3d_plan dl dd .simulator_plan_detail #builders_3d_plan_left .icon img {
width:100%;
height:auto;
max-width:151px;
}
#builders_3d_plan dl dd .simulator_plan_detail #builders_3d_plan_left p {
font-size:1.5rem;
line-height:1.6;
margin-top:15px;
}
#builders_3d_plan dl dd .simulator_plan_detail #builders_3d_plan_left .btn_area {
align-items:center;
align-content:center;
display:flex;
justify-content:space-between;
margin-top:30px;
}
#builders_3d_plan dl dd .simulator_plan_detail #builders_3d_plan_left .btn_area .btn {
flex:0 1 300px;
max-width:300px;
margin-right:30px;
}
#builders_3d_plan dl dd .simulator_plan_detail #builders_3d_plan_left .btn_area .btn a {
display:flex;
justify-content:center;
text-align:center;
}
#builders_3d_plan dl dd .simulator_plan_detail #builders_3d_plan_right {
align-items:center;
align-content:center;
border-color:var(--light_gray);
border-style:solid;
border-width:1px;
display:flex;
flex:1 0 40%;
flex-direction:column;
margin-left:40px;
}
#builders_3d_plan dl dd .simulator_plan_detail #builders_3d_plan_right .cont  {
align-items:center;
align-content:center;
display:flex;
flex-wrap:wrap;
flex:3;
width:100%;
}

#builders_3d_plan dl dd .simulator_plan_detail #builders_3d_plan_right .cont dl {
display:flex; 
flex-direction:column;
text-align:center;
flex:0 1 50%;
justify-content:center;
padding:10px;
}
#builders_3d_plan dl dd .simulator_plan_detail #builders_3d_plan_right dl dt {
vertical-align:top;
margin-right:0;
flex:0 0 70px;
text-align:center;
}
#builders_3d_plan dl dd .simulator_plan_detail #builders_3d_plan_right dl dt img {
width:60px;
height:60px;
border-radius:30px;
object-fit: cover;
margin:0 auto;
text-align:center;
}
#builders_3d_plan dl dd .simulator_plan_detail #builders_3d_plan_right dl dt span {
color:#333;
display:block;
font-size:1rem;
text-align:center;
line-height:1.3;
margin-top:7px;
}
#builders_3d_plan dl dd .simulator_plan_detail #builders_3d_plan_right dl dd {
flex:1;
}
#builders_3d_plan dl dd .simulator_plan_detail #builders_3d_plan_right dl dd.notes {
display:inline-block;
width:100%;
margin-top:7px;
vertical-align:middle;
}
#builders_3d_plan dl dd .simulator_plan_detail #builders_3d_plan_right dl dd.notes > span:first-child {
background-color:#98948f;
color:#fff;
font-size:1rem;
line-height:1.4;
padding: 3px 6px;
border-radius:2px;
display:inline-block;
}
#builders_3d_plan dl dd .simulator_plan_detail #builders_3d_plan_right dl dd.notes > span.plan1{
background-color:#87ac39;
}
#builders_3d_plan dl dd .simulator_plan_detail #builders_3d_plan_right .info {
border-top:1px dotted #ccc;
display:flex;
padding:15px 10px 15px 15px;
text-align:right;
width:100%;
}
#builders_3d_plan dl dd .simulator_plan_detail #builders_3d_plan_right .info .area {
display:inline-block;
margin-top:0;
text-align:left;
flex:0 0 50%;
vertical-align:bottom;
}
#builders_3d_plan dl dd .simulator_plan_detail #builders_3d_plan_right .info .area span {
color:#666;
display:inline-block;
font-size:1rem;
line-height:1.4;
text-align:left;
}
#builders_3d_plan dl dd .simulator_plan_detail #builders_3d_plan_right .info .cost {
display:inline-block; letter-spacing:normal; vertical-align:middle; width:50%;
}
#builders_3d_plan dl dd .simulator_plan_detail #builders_3d_plan_right .info .cost span:first-child {
display:inline-block;
letter-spacing:normal;
vertical-align:baseline;
font-size:1.8rem;
font-weight:600;
font-family: 'Open Sans', sans-serif; font-family: 'Roboto Condensed', sans-serif;
}
#builders_3d_plan dl dd .simulator_plan_detail #builders_3d_plan_right .info .cost span:nth-child(2) {
color:#666;
display:inline-block;
vertical-align:baseline;
font-size:1.4rem;
font-weight:600;
}
#builders_3d_plan dl dd .simulator_plan_detail #builders_3d_plan_right .info .cost span:nth-child(3) {
color:#666;
font-size:1rem;
display:inline-block;
font-weight:400;
line-height:1.2;
}
#builders_3d_plan dl dd .simulator_plan_detail #builders_3d_plan_right .image {
align-items:center;
align-content:center;
display:flex;
flex-wrap:wrap;
flex:1;
padding:15px 0;
justify-content:center;
position:relative;
}
#builders_3d_plan dl dd .simulator_plan_detail #builders_3d_plan_right .image img {
width:100%;
height:auto;
max-width:200px;
}
#builders_3d_plan dl dd .simulator_plan_detail #builders_3d_plan_right .image span {
color:var(--brown);
letter-spacing:normal;
display:block;
flex:0 0 100%;
font-size:1rem;
margin-top:5px;
text-align:center;
}

@media screen and (max-width:1080px) {
#planning .section_cont {
padding:0 5vw;
}
#simulator_plan ul {
row-gap:5vw;
}
#simulator_plan ul li {
flex:1 1 100%;
}
#simulator_plan ul li dl dd .simulator_plan_detail .title_area h2 {
text-align:center;
}
#simulator_plan ul li dl dd .simulator_plan_detail .title_area h3 {
text-align:center;
}
#builders_3d_plan dl dd .simulator_plan_detail #builders_3d_plan_left .icon {
padding:15px 0 0;
}
#builders_3d_plan dl dd .simulator_plan_detail #builders_3d_plan_right .cont dl {
flex:0 0 100%;
padding:30px 10px 0;
}
}

/*---------------------------------------------
#forestyle_member
---------------------------------------------*/
#forestyle_member {
padding:80px 0 0;
}

#forestyle_member .section_title .pic {
position:relative;
}
#forestyle_member .section_title .pic img:nth-child(2) {
position:absolute;
left:10vw;
height:auto;
top:50%;
margin-top:-186px;
max-width:303px;
z-index:2;
}
#forestyle_member .section_title .pic span {
color:var(--white);
position:absolute;
left:10vw;
bottom:20px;
line-height:1.8;
}
#forestyle_member .section_cont {
display: flex;
flex-wrap:wrap;
justify-content: space-between;
margin: 50px auto 0;
padding: 0 10vw;

}
#forestyle_member .section_cont p.lead {
color:var(--gray);
flex:0 0 100%;
font-size:2.2rem;
font-weight:600;
line-height:2.0;
text-align:center;
}
#forestyle_member #member {
align-items:center;
align-content:center;
background-color:var(--white);
background-image:url(../img/mypage_image.png);
background-repeat:no-repeat;
background-position:98% bottom;
display:flex;
flex:0 0 100%;
justify-content:space-between;
margin-top:50px;
padding:60px 100px;
opacity:0;
-webkit-transition:opacity 3s;
transition:opacity 3s;
}
#forestyle_member #member.lazyloaded {
opacity:1;
}
#forestyle_member #member .logo_mark {
flex:0 0 15%;
}
#forestyle_member #member .logo_mark img {
width:100%;
height:auto;
max-width:100px;
}
#forestyle_member #member #member_cont {
align-items:center;
align-content:center;
display:flex;
flex:1;
flex-direction:column;
justify-content:space-between;
}
#forestyle_member #member #member_cont {
}
#forestyle_member #member #member_cont h2 {
color:var(--green);
font-size:3.0rem;
font-weight:600;
line-height:1.8;
}
#forestyle_member #member #member_cont .btn {
margin-top:30px;
}
#forestyle_member #member #member_cont .link {
margin-top:50px;
}
#forestyle_member #member #member_cont .link label {
color:var(--link_color);
}
#forestyle_member #member #member_cont .link label span {
font-size:1.5rem;
padding-right:10px;
}
#forestyle_member #member #member_cont .link label:hover {
cursor:pointer;
text-decoration:underline;
}
#forestyle_member #member #member_cont .link label:hover span {
cursor:pointer;
}
#forestyle_member #member div:nth-child(3) {
flex:0 0 15%;
}

@media screen and (max-width:1080px) {
#forestyle_member .section_cont {
padding:0 5vw;
}
}

/*--- member prize ---*/
#member_prize {
flex:0 0 100%;
padding:100px 0 0;
}
#member_prize h4 {
}
#member_prize > p {
color:var(--gray);
font-size:1.6rem;
line-height:1.8;
text-align:center;
}
#member_prize #member_prize_cont {
display:flex;
justify-content:center;
}
#member_prize #member_prize_cont > ul {
display:grid;
grid-column-gap: 20px;
grid-row-gap: 20px;
flex:0 0 100%;
margin-top:30px;
height:100%;
width:100%;
}
#member_prize #member_prize_cont > ul > li {
position:relative;
}
#member_prize #member_prize_cont ul li#mypage {
background-color:var(--white);
min-height:0;
padding:50px 20px 0px 50px;
grid-area: 1 / 1 / 2 / 2;
}
#member_prize #member_prize_cont ul li#point {
background-color:var(--white);
min-height:0;
padding:50px 20px 30px 50px;
grid-area: 1 / 2 / 2 / 3;
}
#member_prize #member_prize_cont ul li#wood {
background-color:var(--white);
min-height:0;
padding:50px 50px 30px 50px;
grid-area: 3 / 1 / 4 / 3;
}
#member_prize #member_prize_cont ul li#tour {
background-color:var(--white);
min-height:0;
padding:50px 20px 30px 50px;
grid-area: 2 / 1 / 3 / 2;
}
#member_prize #member_prize_cont ul li#tour .detail .body {
justify-content:flex-end;
padding-top:0;
}
#member_prize #member_prize_cont ul li#simulator {
background-color:var(--white);
min-height:0;
padding:50px 20px 30px 50px;
grid-area: 2 / 2 / 3 / 3;
}
#member_prize #member_prize_cont ul li .detail {
display:flex;
flex:1;
height:100%;
justify-content:space-between;
width:100%;
}
#member_prize #member_prize_cont ul li .detail .head h5 {
color:var(--white);
}
#member_prize #member_prize_cont ul li .detail .head p {
color:var(--gray);
display:block;
}
#member_prize #member_prize_cont ul li .detail .body {
color:var(--gray);
}
#member_prize #member_prize_cont ul li .detail .pic {
display: flex;
align-content: flex-end;
align-items: flex-end;
flex:0 1 150px;
opacity:0;
-webkit-transition:opacity 3s;
transition:opacity 3s;
}
#member_prize #member_prize_cont ul li .detail .pic.lazyloaded {
opacity:1;
}
#member_prize #member_prize_cont ul li .detail .pic img.lazyloaded {
height:auto;
opacity:1;
}
#member_prize #member_prize_cont ul li#mypage .detail .pic {
justify-content:center;
}
#member_prize #member_prize_cont ul li#point .detail .pic {
flex:0 1 200px;
}
#member_prize #member_prize_cont ul li#tour .detail .pic {
display:none;
}
#member_prize #member_prize_cont ul li#simulator .detail .pic {
display:none;
}
#member_prize #member_prize_cont ul li#wood .detail {
height:auto;
justify-content:start;
}
#member_prize #member_prize_cont ul li#wood .detail .pic {
}
#member_prize #member_prize_cont ul li#wood .detail h3 {
align-items:center;
color:var(--gray);
display:flex;
font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
font-size:3.0rem;
font-weight:600;
flex:0 0 100%;
line-height:1.5;
margin-left:30px;
}
#member_prize #member_prize_cont ul li .detail .cont {
display:flex;
flex:1;
flex-direction:column;
justify-content:space-between;
}
#member_prize #member_prize_cont ul li .detail .cont .head {
align-items:center;
align-content:center;
display:flex;
flex-wrap:wrap;
flex:1;
}
#member_prize #member_prize_cont ul li .detail .cont .head h3 {
color:var(--gray);
flex:0 0 100%;
font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
font-size:3rem;
font-weight:600;
line-height:1.5;
}
#member_prize #member_prize_cont ul li .detail .cont .head p {
display:block;
font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
margin-top:15px;
}
#member_prize #member_prize_cont ul li .detail .cont .body {
align-items:flex-end;
display:flex;
flex-basis:0;
justify-content:space-between;
line-height:1.8;
padding-top:0;
padding-bottom:30px;
}
#member_prize #member_prize_cont ul li .detail .cont .body p {
font-size:1.6rem;
}

#member_prize #member_prize_cont ul li#mypage .detail .cont .body {
padding-top:30px;
}
#member_prize #member_prize_cont ul li#mypage .detail .cont .body p {
margin-right:30px;
}
#member_prize #member_prize_cont ul li#point .detail .cont .body {
margin-right:30px;
padding-bottom:0;
}
#member_prize #member_prize_cont ul li label {
color:var(--white);
display:flex;
justify-content:start;
position:absolute;
top:0;
left:0;
width:100px;
}
#member_prize #member_prize_cont ul li label span {
color:var(--white);
font-weight:600;
line-height:1.3;
padding-top:10px;
padding-left:10px;
position:relative;
z-index:2;
}
#member_prize #member_prize_cont ul li > div label:after {
content: " ";
background-color: var(--green);
height: calc(tan(-60deg) * 100px / 2);
width:100px;
height:100px;
clip-path: polygon(0 0, 100% 0, 0 100%);
position:absolute;
top:0;
left:0;
z-index:1;
}

@media screen and (max-width:1080px) {
#member_prize #member_prize_cont ul li .detail .pic {
flex:0 0 100px;
}
}

/*--- member_plus ---*/
#forestyle_member #member_plus {
display:flex;
flex-wrap:wrap;
justify-content:center;
padding:80px 0 0;
}
#forestyle_member #member_plus > h2 {
color: var(--brown);
justify-content:center;
flex:0 0 100%;
font-size: 2.5rem;
font-weight: 600;
line-height: 1.6;
padding-bottom: 30px;
text-align: center;
position:relative;
}
#forestyle_member #member_plus > h2:after {
background-image: url(../img/bg_t_member_plus.png);
background-repeat: no-repeat;
content: " ";
height: 23px;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -332px;
width:664px;
}
#forestyle_member #member_plus h2 span {
display:inline-block;
text-align:center;
}
#forestyle_member #member_plus #member_plus_cont {
align-items:center;
align-content:center;
background-color:var(--white);
display:flex;
flex-direction:column;
flex:0 0 100%;
justify-content:center;
margin-top:50px;
padding:80px 50px;
}
#forestyle_member #member_plus #member_plus_cont #member_plus_head {
align-items:center;
align-content:center;
display:flex;
justify-content:space-between;
}
#forestyle_member #member_plus #member_plus_cont #member_plus_head .logo_mark,
#forestyle_member #member_plus #member_plus_cont #member_plus_head > div:last-child {
flex:0 0 15%;
}
#forestyle_member #member_plus #member_plus_cont #member_plus_head img {
width:100%;
height:auto;
max-width:100px;
}
#forestyle_member #member_plus #member_plus_cont #member_plus_head .member_plus_title {
flex:1;
display:flex;
flex-wrap:wrap;
justify-content:center;
}
#forestyle_member #member_plus #member_plus_cont #member_plus_head .member_plus_title h2 {
display:flex;
justify-content:center;
position:relative;
}
#forestyle_member #member_plus #member_plus_cont #member_plus_head .member_plus_title h2:after {
background-image:url(../img/i_member_plus.png);
background-repeat:no-repeat;
background-size:contain;
content:"";
position:absolute;
top:-20px;
right:-70px;
height:43px;
width:59px;
}

#forestyle_member #member_plus #member_plus_cont #member_plus_head .member_plus_title h2 sup {
color:var(--green);
font-weight:600;
font-size:1.2rem;
position:absolute;
right:2.2rem;
top:-1.0rem;
}
#forestyle_member #member_plus #member_plus_cont #member_plus_head .member_plus_title h2 span {
color:var(--green);
display:block;
font-size:3.2rem;
font-weight:600;
line-height:1.4;
}
#forestyle_member #member_plus #member_plus_cont #member_plus_head .member_plus_title h2 img {

}
#forestyle_member #member_plus #member_plus_cont #member_plus_head .member_plus_title p {
flex:0 0 100%;
font-size:1.6rem;
margin-top:10px;
line-height:1.6;
text-align:center;
}

#forestyle_member #member_plus #member_plus_cont > ul {
display:flex;
justify-content:space-between;
column-gap:50px;
row-gap:20px;
margin-top:60px;
width:100%;
}
#forestyle_member #member_plus #member_plus_cont > ul > li {
border-width:1px;
border-style:dotted;
border-color:var(--brown);
flex:0 1 100%;
}
#forestyle_member #member_plus #member_plus_cont ul li dl {
display:flex;
flex-wrap:wrap;
height:100%;
justify-content:start;
}
#forestyle_member #member_plus #member_plus_cont ul li dl dt {
align-content:start;
background-color:var(--pale_green);
display:flex;
flex:1 0 140px;
height:140px;
justify-content:center;
}
#forestyle_member #member_plus #member_plus_cont ul li dl dt img {
object-fit:cover;
height:140px;
min-width:140px;
}
#forestyle_member #member_plus #member_plus_cont ul li dl dd {
align-items:center;
align-content:center;
display:flex;
color:var(--brown);
flex:1 1 100%;
font-size:1.6rem;
font-weight:600;
line-height:1.8;
min-height:96px;
padding:20px;
}
#forestyle_member #member_plus #member_plus_cont .note {
color:var(--brown);
font-size:1.3rem;
line-height:1.8;
margin-top:20px;
}
#forestyle_member #member_plus #member_plus_cont .link_area {
display:flex;
margin-top:50px;
}
#forestyle_member #member_plus #member_plus_cont .link_area ul {
column-gap:40px;
display:flex;
justify-content:flex-end;
}
#forestyle_member #member_plus #member_plus_cont .link_area ul li {
border:none;
flex:0 1 auto;
}
#forestyle_member #member_plus #member_plus_cont .link_area ul li label {
align-items:center;
align-content:center;
color:var(--link_color);
display:flex;
justify-content:start;
}
#forestyle_member #member_plus #member_plus_cont .link_area ul li label:hover {
cursor:pointer;
text-decoration:underline;
}
#forestyle_member #member_plus #member_plus_cont .link_area ul li label span {
font-size:1.4rem;
padding-right:10px;
}
#forestyle_member #member_plus #member_plus_cont .link_area ul li label i {
}

/*---------------------------------------------
hinoki
---------------------------------------------*/
#hinoki {
padding:100px 0 0;
}
#hinoki .section_title .pic {
position: relative;
width: 75vw;
opacity:0;
-webkit-transition:opacity 3s;
transition:opacity 3s;
}
#hinoki .section_title .pic.lazyloaded {
opacity:1;
}
#hinoki .section_title .pic img:nth-child(2) {
position: absolute;
left: 10vw;
height: auto;
top: -60px;
max-width: 162px;
z-index:10;
}
#hinoki .section_title .pic img.lazyloaded,
#hinoki .section_title .pic img:nth-child(2).lazyloaded {
opacity:1;
}
#hinoki .section_cont {
display:flex;
flex-wrap:wrap;
justify-content:space-between;
margin:50px auto 0;
padding:0 10vw;
}
#hinoki .section_cont #hinoki_detail {
background-color:var(--white);
padding:0 0 50px;
}
#hinoki .section_cont #hinoki_detail .chapter {
column-gap:50px;
display:flex;
padding:50px 50px 0;
}
#hinoki .section_cont #hinoki_detail .chapter dl {
align-items:start;
align-content:start;
display:flex;
flex-wrap:wrap;
justify-content:start;
flex:0 0 60%;
}
#hinoki .section_cont #hinoki_detail .chapter dl dt {
color:var(--brown);
display:flex;
flex-wrap:wrap;
font-size:2.7rem;
font-weight:600;
line-height:1.8;
}
#hinoki .section_cont #hinoki_detail .chapter dl dt img {
height:auto;
max-width:240px;
padding-bottom:30px;
}
#hinoki .section_cont #hinoki_detail .chapter dl dt span {
display:block;
margin-top:0;
}
#hinoki .section_cont #hinoki_detail .chapter dl dd {
font-size:1.5rem;
line-height:2.2;
margin-top:20px;
}
#hinoki .section_cont #hinoki_detail .chapter .pic {
opacity:0;
-webkit-transition:opacity 3s;
transition:opacity 3s;
}
#hinoki .section_cont #hinoki_detail .chapter .pic.lazyloaded {
opacity:1;
}
#hinoki .section_cont #hinoki_detail .chapter .pic img {
object-fit: cover;
height: 100%;
opacity:0;
-webkit-transition:opacity 3s;
transition:opacity 3s;
}
#hinoki .section_cont #hinoki_detail .chapter .pic img.lazyloaded{
opacity:1;
}
#hinoki .section_cont #hinoki_detail .chapter#intro {
opacity:0;
-webkit-transition:opacity 3s;
transition:opacity 3s;
}
#hinoki .section_cont #hinoki_detail .chapter#intro.lazyloaded {
background-image:url(../img/p_hinoki_01.jpg);
background-position:right top;
background-repeat:no-repeat;
background-size:contain;
opacity:1;
}

#hinoki .section_cont #hinoki_detail .chapter#intro .caption {
flex:0 1 86px;
}
#hinoki .section_cont #hinoki_detail .chapter#intro .caption img {
height:auto;
max-width:82px;
}

#hinoki .section_cont #fsc {
padding:50px 50px 0;
}
#hinoki .section_cont #fsc #fsc_cont {
align-items:center;
align-content:center;
border-width:1px;
border-style:dotted;
border-color:var(--mos_green);
display:flex;
justify-content:space-between;
padding:30px;
}
#hinoki .section_cont #fsc .mark {
flex:0 0 121px;
}
#hinoki .section_cont #fsc .mark img {
height:auto;
max-width:121px;
}
#hinoki .section_cont #fsc dl {
display:flex;
flex-wrap:wrap;
padding:0 30px;
}
#hinoki .section_cont #fsc dl dt {
color:var(--mos_green);
font-size:2.0rem;
font-weight:600;
line-height:1.8;
}
#hinoki .section_cont #fsc dl dt sup {
font-size:1.0rem;
}
#hinoki .section_cont #fsc dl dd {
column-gap:5px;
display:flex;
justify-content:start;
line-height:1.8;
margin-top:20px;
}
#hinoki .section_cont #fsc .pic {
flex:0 0 278px;
opacity:0;
-webkit-transition:opacity 3s;
transition: opacity 3s;
}
#hinoki .section_cont #fsc .pic.lazyloaded {
opacity:1;
}
#hinoki .section_cont #fsc .pic img {
height:auto;
max-width:278px;
opacity:0;
-webkit-transition:opacity 3s;
transition: opacity 3s;
width:100%;
}
#hinoki .section_cont #fsc .pic img.lazyloaded {
opacity:1;
}
#hinoki .section_cont .movie {
background-color:var(--black);
padding:50px 20vw;
width:100%;
}
#hinoki .section_cont .movie .movie_cont {
width:100%;
aspect-ratio:16 / 9;
}
#hinoki .section_cont .movie .movie_cont a {
opacity:0;
-webkit-transition:opacity 3s;
transition:opacity 3s;
}
#hinoki .section_cont .movie .movie_cont a.lazyloaded {
opacity:1;
}
#hinoki .section_cont .movie .movie_cont a img.lazyloaded {
opacity:1;
}
#hinoki .section_cont .movie iframe {
width:100%;
height:100%;
}

@media screen and (max-width:1080px) {
#hinoki .section_cont {
padding:0 5vw;
}
#hinoki .section_cont #fsc #fsc_cont {
flex-wrap:wrap;
}
#hinoki .section_cont #fsc dl {
padding:20px 0 0;
}
#hinoki .section_cont #fsc .pic {
margin-top:20px;
}
}


/*---------------------------------------------
news
---------------------------------------------*/
#news {
display:flex;
}
#news #news_cont {
flex:0 0 100%;
}
#news .section_title {
align-items:center;
padding:0 0 0 10vw;
display: flex;
justify-content: space-between;
position: relative;
}
#news .section_title dl {
padding-right:50px;
padding-bottom:70px;
padding-left:50px;
}
#news .section_title dl dt {
align-items:center;
display: flex;
justify-content: space-between;
}
#news .section_title dl dt span {
font-size:2.6rem;
font-weight:600;
}
#news .section_title dl dd {
font-size:1.4rem;
margin-top:15px;
line-height:1.6;
}
#news .section_title .pic {
flex:0 1 60vw;
height:auto;
position:relative;
min-width:50vw;
opacity:0;
-webkit-transition:opacity 3s;
transition: opacity 3s;
}
#news .section_title .pic.lazyloaded {
opacity:1;
}
#news .section_title .pic img {
object-fit: cover;
height:200px;
width:100%;
opacity:0;
-webkit-transition:opacity 3s;
transition: opacity 3s;
}
#news .section_title .pic img.lazyloaded {
opacity:1;
}
#news #news_cont {
margin-top:-50px;
padding:0 10vw;
position:relative;
z-index:1;
}
#news #news_cont ol {
background-color:var(--white);
}
#news #news_cont ol li {
border-bottom-width:1px;
border-style:dotted;
border-color:var(--light_gray);
padding:35px 50px;
}
#news #news_cont ol li dl {
}
#news #news_cont ol li dl dt {
font-size:1.5rem;
line-height:1.8;
}
#news #news_cont ol li dl dd {
font-size:1.5rem;
line-height:1.8;
margin-top:10px;
}
#news #news_cont .btn {
background-color:var(--white);
display:flex;
justify-content:flex-end;
padding:25px;
}
#news #news_cont .btn a {
font-size:1.4rem;
min-width:150px;
}

@media screen and (max-width:1080px) {
#news .section_title {
padding:0 0 0 5vw;
}
#news #news_cont {
padding:0 5vw;
}
}

/*---------------------------------------------
gallery
---------------------------------------------*/
#gallery {
padding:50px 0;
overflow:hidden;
}
#gallery ol.slideshow {
align-items:center;
column-gap:60px;
display:flex;
justify-content:space-between;
animation: loop-slide 60s infinite linear 1s both;
-webkit-animation: loop-slide 60s infinite linear 1s both;
flex:0 0 100%;
}
#gallery ol.slideshow li {
flex:0 0 auto;
width:30%;
height:auto;
}
#gallery ol.slideshow li a {
opacity:0;
-webkit-transition:opacity 3s;
transition: opacity 3s;
}
#gallery ol.slideshow li a.lazyloaded {
opacity:1;
}
#gallery ol.slideshow li.lazyloaded {
opacity:1;
}
#gallery ol.slideshow li img {
border-radius:10px;
height:auto;
width:100%;
object-fit:cover;
opacity:0;
-webkit-transition:opacity 3s;
transition: opacity 3s;
}
#gallery ol.slideshow li img.lazyloaded {
opacity:1;
}

@-webkit-keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
#gallery.slide_paused:hover ol.slideshow { -webkit-animation-play-state:paused; animation-play-state: paused; }
#gallery.slide_paused:active ol.slideshow { -webkit-animation-play-state:paused; animation-play-state:paused; }

/*---------------------------------------------
pagetop
---------------------------------------------*/
#pagetop {
position:fixed;
bottom:50px;
right:50px;
z-index:10;
}
#pagetop a {
align-items:center;
background-color:var(--green);
border-radius:60px;
flex-direction:column;
display:flex;
justify-content:center;
position:relative;
height:120px;
width:120px;
}
#pagetop a:hover {
opacity:0.8;
}
#pagetop a:after {
content:"\f077";
color:var(--white);
font-family:var(--icon);
font-weight:600;
left:50%;
margin-left:-6px;
top:25px;
position:absolute;
font-size:1rem;
z-index:3; 
}
#pagetop a span {
color:var(--white);
font-weight:600;
}

/*---------------------------------------------
footer
---------------------------------------------*/
#footer {
background-color:var(--white);
background-position:-70px -50px;
display:flex;
justify-content:center;
opacity:0;
position:relative;
-webkit-transition:opacity 3s;
transition:opacity 3s;
}
#footer.lazyloaded {
background-image:url(../img/bg_footer.png);
background-repeat:no-repeat;
background-size:42% auto;
opacity:1;
}
#footer #footer_cont {
display:flex;
flex-wrap:wrap;
justify-content:center;
padding:70px 0 0;
}
#footer #footer_cont #footer_head {
align-items: center;
display:flex;
flex-direction:column;
justify-content:center;
padding:0 15vw;
}
#footer #footer_cont #footer_head dl {
align-items:center;
display:flex;
flex-direction:column;
justify-content:center;
}
#footer #footer_cont #footer_head dl dt  img {
height:auto;
width:100px;
}
#footer #footer_cont #footer_head dl dd {
font-size:1.5rem;
line-height:1.8;
margin-top:25px;
text-align:center;
}
#footer #footer_cont #footer_head ul {
column-gap:35px;
display:flex;
justify-content:center;
margin-top:45px;
}
#footer #footer_cont #footer_head ul li {
}
#footer #footer_cont #footer_head ul li a i {
color:var(--gray2);
font-size:3.6rem;
}
#footer #footer_cont #footer_head p {
color:var(--middle_gray);
font-size:1.5rem;
line-height:2.0;
margin-top:50px;
text-align:left;
}
#footer #footer_cont #footer_conversion {
flex:0 0 100%;
margin-top:50px;
padding:0 5vw;
}
#footer #footer_cont #footer_conversion ul {
column-gap:50px;
display:flex;
justify-content:center;
}
#footer #footer_cont #footer_conversion ul li:nth-child(2) {
width:400px;
}
#footer #footer_cont #footer_conversion ul li dl {
}
#footer #footer_cont #footer_conversion ul li dl dt {
color:var(--gray);
font-size:1.8rem;
font-weight:600;
text-align:center;
}
#footer #footer_cont #footer_conversion ul li dl dd {
display:flex;
flex-wrap:wrap;
justify-content:center;
margin-top:25px;
}
#footer #footer_cont #footer_conversion ul li dl dd .tel {
}
#footer #footer_cont #footer_conversion ul li dl dd .accept_time {
align-items:center;
align-content:center;
display:flex;
flex:0 0 100%;
justify-content:center;
margin-top:15px;
}
#footer #footer_cont #footer_conversion ul li dl dd .accept_time span {
font-size:1.8rem;
}
#footer #footer_cont #footer_conversion ul li dl dd .accept_time span:first-child {
border-color:var(--light_gray);
border-style:solid;
border-width:1px;
border-radius:20px;
padding:10px 20px;
}
#footer #footer_cont #footer_conversion ul li dl dd .accept_time span:nth-child(2) {
padding-left:10px;
}
#footer #footer_cont #footer_conversion ul li dl dd .btn {
flex:1;
}
#footer #footer_cont #footer_conversion ul li dl dd .btn a {
justify-content:center;
text-align:center;
}
#footer #footer_cont #footer_conversion p {
color:var(--brown);
font-size:1.5rem;
line-height:2.0;
margin-top:35px;
padding:0 10vw;
}
#footer #footer_cont #footer_sub_link {
align-content:center;
display:flex;
flex:0 0 100%;
justify-content:center;
margin-top:80px;
padding:0 5vw 80px;
}
#footer #footer_cont #footer_sub_link ul {
column-gap:50px;
display:flex;
}
#footer #footer_cont #footer_sub_link ul li {
}
#footer #footer_cont #footer_sub_link ul li a {
align-items: center;
display:flex;
justify-content:center;
position:relative;
}
#footer #footer_cont #footer_sub_link ul li a span {
font-size:1.5rem;
padding-right:15px;
}
#footer #footer_cont #footer_sub_link ul li a i {
color:var(--middle_gray);
font-size:1.0rem;
}
#footer #footer_cont #footer_sub_link ul li a:hover span {
color:var(--green);
}
#footer #footer_cont #footer_bottom {
align-items: center;
background-color:var(--beige);
display:flex;
flex-wrap:wrap;
flex:0 0 100%;
justify-content:space-between;
padding:50px 15vw 50px 10vw;
}
#footer #footer_bottom .logo {
}
#footer #footer_bottom .logo a {
}
#footer #footer_bottom .logo a img {
}
#footer #footer_cont #footer_bottom dl {
flex:1 1 auto;
padding-left:30px;
}
#footer #footer_cont #footer_bottom dl dt {
font-size:1.3rem;
line-height:1.6;
}
#footer #footer_cont #footer_bottom dl dd {
font-size:1.3rem;
line-height:1.6;
margin-top:5px;
}
#footer #footer_cont #footer_bottom #copyright {
color:var(--middle_gray);
font-size:1.0rem;
}

@media screen and (max-width:1080px) {
#footer #footer_cont #footer_bottom #copyright {
padding-top:30px;
}
}

/*---------------------------------------------
conversion
---------------------------------------------*/
.conversion {
background-color:var(--pale_green);
flex-wrap:wrap;
padding:5vw 10vw;
}
.conversion .conversion_cont {
background-color:var(--white);
display:flex;
flex-direction:column;
padding:8vw 5vw;
}
.conversion .conversion_cont .logo_mark {
display:flex;
justify-content:center;
}
.conversion .conversion_cont h2 {
color:var(--green);
font-size:2.1rem;
font-weight:600;
margin-top:20px;
text-align:center;
}
.conversion .conversion_cont dl {
display:flex;
flex-wrap:wrap;
justify-content:center;
margin-top:30px;
}
.conversion .conversion_cont dl dt {
font-size:1.6rem;
flex:0 0 100%;
text-align:center;
}
.conversion .conversion_cont dl dd {
margin-top:15px;
}
.conversion .conversion_cont p {
font-size:1.4rem;
line-height:1.8;
margin-top:30px;
text-align:center;
}
.conversion ul {
column-gap:30px;
display:flex;
justify-content:center;
margin-top:50px;
}
.conversion ul li {
flex:0 1 300px;
text-align:center;
}
.conversion ul li a,
.conversion ul li span {
justify-content:center;
}
.conversion ul li:nth-child(2) a:before {
background-image: url(../img/i_member_plus.png);
background-repeat: no-repeat;
background-size:27px 21px;
content: " ";
height:21px;
position: absolute;
top:50%;
margin-top:-11px;
left:25px;
width:27px;
}

/*---------------------------------------------
modal
---------------------------------------------*/
.modal_box .modal_box_cont .btn {
display:flex;
justify-content:center;
margin-top:30px;
text-align:center;
}
.modal_box .modal_box_cont .btn a {
display:inline-block;
font-size:1.6rem;
min-width:300px;
text-align:center;
}
.modal_box .modal_box_cont .btn a:hover {
cursor:pointer;
}
.modal_box .modal_box_cont dl {}
.modal_box .modal_box_cont dl dt {
font-size:2.2rem;
font-weight:600;
line-height:1.6;
}
.modal_box .modal_box_cont dl dd {
font-size:1.6rem;
line-height:1.6;
margin-top:20px;
}

.modal_box .modal_box_cont p {
font-size:1.6rem;
line-height:1.8;
margin-top:15px;
}

/*--- pamphlet_window ---*/
.modal_box#pamphlet_window {
}
.modal_box#pamphlet_window .modal_box_cont  {
padding:50px;
}
.modal_box .modal_box_cont .pic {
display:inline-block;
margin-top:25px;
position:relative;
}
.modal_box .modal_box_cont .pic img {
}
.modal_box#pamphlet_window .modal_box_cont dl dd ul li {
text-align:left;
}

/*--- forestyle_member_window ---*/
.modal_box#forestyle_member_window .modal_box_cont .pic img {
height:auto;
width:80px;
}

/*--- forestyle_member_plus_window ---*/
.modal_box#forestyle_member_plus_window .modal_box_cont .pic img {
height:auto;
width:80px;
}
.modal_box#forestyle_member_plus_window .modal_box_cont .pic:after {
background-image:url(../img/i_member_plus.png);
background-repeat:no-repeat;
background-size:contain;
content:"";
position:absolute;
top:-10px;
right:-5px;
height:44px;
width:32px;
}

/*--- forestyle_point_window ---*/
.modal_box#forestyle_point_window .modal_box_cont ul {
display:flex;
justify-content:space-between;
column-gap:20px;
margin-top:30px;
}
.modal_box#forestyle_point_window .modal_box_cont ul li {

}
.modal_box#forestyle_point_window .modal_box_cont ul li img {
height:auto;
width:100%;
max-width:135px;
}

/*--- forestyle_member_prize_window ---*/
.modal_box#forestyle_member_prize_window .modal_box_cont {

}

.modal_box#forestyle_member_prize_window .modal_box_cont ul {
column-gap:2vw;
row-gap:2vw;
display:flex;
flex-wrap:wrap;
margin-top:30px;
}
.modal_box#forestyle_member_prize_window .modal_box_cont ul li {
flex:0 1 30%;
}
.modal_box#forestyle_member_prize_window .modal_box_cont ul li dl {
align-items:center;
display:flex;
flex-wrap:wrap;
justify-content:center;
}
.modal_box#forestyle_member_prize_window .modal_box_cont ul li dl dt {
align-items:center;
background-color:var(--beige);
display:flex;
flex:0 0 100px;
height:100px;
max-width:100px;
justify-content:center;
}
.modal_box#forestyle_member_prize_window .modal_box_cont ul li dl dt img {
height:auto;
max-width:100px;
object-fit:cover;
object-position:center bottom;
}
.modal_box#forestyle_member_prize_window .modal_box_cont ul li dl dd {
font-size:1.2rem;
flex:0 0 100%;
}