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

/* 中身-モバイルファースト======================================================================================================== */

body{
background-image: url(../images/bg_colorful.png);
background-image: -webkit-image-set(url(../images/bg_colorful.png) 1x, url(../images/bg_colorful@2x.png) 2x);
background-repeat: no-repeat;
background-position: left top;
background-size: 200% auto;
}

#mv{
display: flex;
position: relative;
}
#mv .text{
text-align: left;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
text-orientation: upright;
display: flex;
flex-direction: column;
justify-content: center;
position: absolute;
top: 15vw;
left: 0;
z-index: 10;
white-space: nowrap;
text-shadow:0px 0px 10px #fff , 0px 0px 10px #fff , 0px 0px 10px #fff , 0px 0px 10px #fff;
}
#mv .text em{
display: block;
font-size: 4vw;
font-weight: 700;
}
#mv .text h1{
font-size: 6.5vw;
font-weight: 700;
}


#mv #main_slider{
width: 90%;
margin-left: auto;
}
#mv #main_slider img{
border-radius: 5vw 0 0 5vw;
aspect-ratio: 4 / 3;
object-fit: cover;
}

#mv .scroll{
position: fixed;
bottom: 5vw;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
margin: 0 auto;
/* transition: all 0.2s ease; */
z-index: 9999;
}
/* #mv .scroll.hidden{
bottom: -70px;
} */
#mv .scroll a{
display: block;
text-decoration: none;
width: 60px;
height: 60px;
padding-top: 10px;
border-radius: 50%;
background-color: #ea5504;
border: solid 1px #fff;
}
#mv .scroll a::before{
content: "";
display: block;
width: 1px;
height: 20px;
margin: 0 auto 5px;
background-color: #fff;
}
#mv .scroll a::after{
content: "";
display: block;
width: 15px;
height: 15px;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
position: absolute;
top: 13px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
-webkit-transform: translateX(-50%) rotate(45deg);
margin: 0 auto;
}
#mv .scroll a span{
display: block;
font-size: 10px;
line-height: 1;
color: #fff;
}



#special{
}
#special .title{
position: relative;
}
#special .title .illust{
width: 40%;
position: absolute;
top: 0;
left: -3vw;
z-index: -1;
}
#special .title h2{
color: #ea5504;
font-size: 14vw;
line-height: 1.1;
font-weight: 700;
text-align: right;
}
#special li{
margin-top: 20px;
}
#special li a{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-decoration: none;
background-image: url(../images/special_bg.png);
background-repeat: no-repeat;
background-position: left top;
background-size: 100%;
width: 100%;
aspect-ratio: 3 / 2;
color: #fff;
font-weight: 700;
text-shadow: 0px 0px 10px #000;
padding: 0 5vw;
text-align: center;
outline: solid 1px #eee;
outline-offset: -5px;
position: relative;
box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.15);
}
#special li:nth-child(1) a{ background-color: #ea5504; }
#special li:nth-child(2) a{ background-color: #ffcc00; }
#special li:nth-child(3) a{ background-color: #3db22a; }

#special li a::before{
content: "";
display: block;
width: 15%;
aspect-ratio: 1;
clip-path: polygon(0 100%,100% 0,100% 100%);
position: absolute;
right: 0;
bottom: 0;
}
#special li:nth-child(1) a::before{ background-color: #ffcc00; }
#special li:nth-child(2) a::before{ background-color: #ea5504; }
#special li:nth-child(3) a::before{ background-color: #90c31f; }

#special li a::after{
content: "CLICK";
text-shadow: none;
position: absolute;
font-size: 3vw;
line-height: 1;
right: 0;
bottom: 2.5vw;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}

#special li .new{
width: 15%;
aspect-ratio: 1;
color: #fff;
background-color: #c80000;
clip-path: polygon(0 0,100% 0,0 100%);
position: absolute;
left: 0;
top: 0;
}
#special li .new span{
text-shadow: none;
position: absolute;
font-size: 3vw;
line-height: 1;
left: 1vw;
top: 3vw;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}

#special li em{
display: block;
font-size: 8vw;
}
#special li p{
font-size: 5vw;
line-height: 1.8;
max-height: calc((5vw * 1.8) * 3);
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}



#alpha > *{
border-bottom: solid 5px #fff;
}
#alpha > *:last-child{
border-bottom: none;
}

#topics{
background-color: #fff2e6;
padding: 60px 5vw;
text-align: left;
}
#topics_inner{
height: 200px;
overflow: auto;
}
#topics li{
display: flex;
margin-bottom: 1em;
}
#topics li:last-child{
margin-bottom: 0;
}
#topics li em{
display: block;
font-weight: 700;
margin-right: 1em;
}
#topics li p{
flex: 1;
}


#forest_town a{
display: flex;
align-items: center;
text-decoration: none;
background-color: #c8d6c4;
background-image: url(../images/img_seiken.png);
background-image: -webkit-image-set(url(../images/img_seiken.png) 1x, url(../images/img_seiken@2x.png) 2x);
background-repeat: no-repeat;
background-position: 80% 80%;
background-size: 60% auto;
padding: 10vw 5vw;
text-align: left;
position: relative;
}
#forest_town h2{
display: grid;
place-items: center;
color: #fff;
font-size: 5vw;
font-weight: 700;
padding: 0 1em;
aspect-ratio: 1 / 1;
border: solid 1px #fff;
}
#forest_town .en{
color: #fff;
font-size: 14vw;
line-height: 1;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
position: absolute;
top: -1vw;
right: -2.5vw;
}


#open_house a{
display: flex;
flex-direction: column;
justify-content: center;
text-decoration: none;
background-image: url(../images/bg_openhouse.jpg);
background-image: -webkit-image-set(url(../images/bg_openhouse.jpg) 1x, url(../images/bg_openhouse@2x.jpg) 2x);
background-repeat: no-repeat;
background-position: left top;
background-size: cover;
height: 60vw;
text-align: left;
padding: 0 5vw;
position: relative;
}
#open_house .common_title{
text-align: left;
}
#open_house p{
padding-right: 50%;
font-size: 12px;
}
#open_house .illust{
width: 48%;
position: absolute;
right: 2vw;
bottom: 0;
}


#search{
background-color: #ea5504;
color: #fff;
padding: 60px 0;
position: relative;
}
#search .common_title{
text-align: right;
position: relative;
z-index: 10;
}
#search ul{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#search li{
width: calc(50% - 10px);
margin-top: 20px;
}
#search li a{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-decoration: none;
aspect-ratio: 1 / 1;
font-size: 16px;
line-height: 1.6;
font-weight: 700;
color: #ea5504;
background-color: #fff;
text-align: center;
border-radius: 50%;
}
#search li .icon{
margin-bottom: 10px;
}
#search li .icon img{
height: 50px;
}
#search .illust{
width: 40vw;
position: absolute;
top: -3vw;
left: 0;
}



#recommend{
position: relative;
}
#recommend .common_title{
position: relative;
z-index: 10;
}
#recommend .illust{
width: 40%;
position: absolute;
top: -80px;
left: 2vw;
z-index: 1;
}
#recommend .search_temp{
position: relative;
z-index: 10;
}


#beta{
}
#beta section{
border-bottom: solid 5px #fff;
overflow: hidden;
}
#beta section:last-child{
border-bottom: none;
}
#beta section a{
display: flex;
flex-direction: column;
justify-content: center;
text-decoration: none;
background-color: #eee;
height: 60vw;
text-align: left;
padding: 0 5vw;
position: relative;
}
#beta section .common_title{
text-align: left;
}
#beta section p{
padding-right: 50%;
font-size: 12px;
}
#beta section .illust{
position: absolute;
right: 2vw;
bottom: 0;
}

#beta section#sell .illust{
right: -10vw;
bottom: -3vw;
}
#beta section#sell .illust img{
max-width: 65vw;
max-height: 100%;
}

#beta section#howto .illust{
bottom: inherit;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
margin: auto 0;
}
#beta section#howto .illust img{
max-width: 40vw;
max-height: 40vw;
}

#beta section#com a{
background-color: #ea5504;
color: #fff;
}
#beta section#com .illust img{
max-width: 100%;
max-height: 50vw;
}

#beta section#blog a{
background-image: url(../images/bg_blog.jpg);
background-image: -webkit-image-set(url(../images/bg_blog.jpg) 1x, url(../images/bg_blog@2x.jpg) 2x);
background-repeat: no-repeat;
background-position: left top;
background-size: cover;
}


#beta section#blog p{
padding-right: 0;
}


#fixed_member_banner{
position: fixed;
top: 50%;
right: 0;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
margin: auto 0;
}
#fixed_member_banner a{
display: block;
text-decoration: none;
background-color: #ea5504;
color: #fff;
font-weight: 700;
padding: 10px 10px 50px;
border: solid 1px #fff;
border-right: none;
position: relative;
}
#fixed_member_banner a::before{
content: "";
display: block;
width: 40px;
aspect-ratio: 1000/778;
background-image: url(../images/img_character.svg);
background-repeat: no-repeat;
background-position: left bottom;
background-size: 100% auto;
position: absolute;
bottom: 20px;
left: 0px;
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);

}
#fixed_member_banner a::after{
content: "";
display: block;
width: 60px;
aspect-ratio: 1;
background-color: #ffcc00;
clip-path: polygon(0 100%,100% 0,100% 100%);
position: absolute;
bottom: 0;
right: 0;
z-index: 5;
}
#fixed_member_banner strong{
display: grid;
place-content: center;
width: 40px;
height: 40px;
margin: 0 auto 10px;
border-radius: 50%;
background-color: #ffcc00;
color: #ea5504;
}
#fixed_member_banner .t{
display: flex;
align-items: flex-start;
flex-direction: row-reverse;
line-height: 1;
}
#fixed_member_banner p{
font-size: 12px;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
text-orientation: upright;
margin-right: 5px;
}
#fixed_member_banner em{
font-size: 20px;
letter-spacing: .5em;
margin-right: 2px;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
text-orientation: upright;
}
#fixed_member_banner .more{
display: block;
color: #ea5504;
font-size: 10px;
line-height: 1;
position: absolute;
bottom: 8px;
right: 5px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
z-index: 10;
}

/* PCのみ======================================================================================================== */
@media print, screen and (min-width: 751px){

body{
background-position: center top;
background-size: 100% auto;
}
#contents{
padding-top: 0;
}



#mv .text{
width: 30%;
top: 60px;
text-shadow: none;
}
#mv .text em{
font-size: 2.5vw;
}
#mv .text h1{
font-size: 3.2vw;
}

#mv #main_slider{
width: 70%;
}
#mv #main_slider img{
width: 100%;
height: auto;
border-radius: 30px 0 0 30px;
aspect-ratio: 11 / 6;
}
#mv .scroll{
bottom: 2vh;
}



#special{
margin-top: -40px;
}
#special .title{
padding-left: 280px;
padding-bottom: 60px;
}
#special .title .illust{
width: auto;
top: -10px;
left: 0;
}
#special .title h2{
font-size: 80px;
text-align: left;
}
#special ul{
display: flex;
}
#special li{
margin-top: 0px;
width: 32%;
margin-right: 2%;
}
#special li:last-child{
margin-right: 0;
}
#special li a{
padding: 0 2vw;
}
#special li a:hover{
transform: scale(1.05);
}
#special li a::after{
font-size: 1vw;
bottom: 0.8vw;
}

#special li .new span{
font-size: 1vw;
left: 0.2vw;
top: 1vw;
}

#special li em{
font-size: 2.2vw;
}
#special li p{
font-size: 1.4vw;
max-height: calc((1.4 * 1.8) * 3);
}


#alpha{
display: grid;
grid-template-columns: repeat(2, 1fr);
}
#topics { grid-area: 1 / 1 / 3 / 2; }
#forest_town { grid-area: 1 / 2 / 2 / 3; }
#open_house { grid-area: 2 / 2 / 3 / 3; }
#search { grid-area: 3 / 1 / 4 / 3; }

#alpha > *{
border-bottom: solid 10px #fff;
}

#topics{
border-right: solid 10px #fff;
padding:5vw;
}
#topics_inner{
height: 20vw;
}


#forest_town a{
background-position: 80% center;
background-size: auto 80%;
padding: 0 3vw;
height: 20vw;
}
#forest_town h2{
font-size: 1.5vw;
width: auto;
}
#forest_town .en{
font-size: 70px;
top: -5px;
right: -15px;
}


#open_house a{
height: 20vw;
}
#open_house p{
padding-right: 320px;
font-size: min(1vw,16px);
}
#open_house .illust{
width: auto;
right: 20px;
}

#search{
padding: 5vw 0;
}
#search .contents_size{
display: flex;
align-items: center;
}
#search .text{
padding-right: 60px;
flex: 1;
}
#search .common_title{
text-align: left;
/* text-shadow: 0px 0px 2px #ea5504, 0px 0px 2px #ea5504; */
text-shadow:
  1px 1px 1px #ea5504,
  -1px 1px 1px #ea5504,
  -1px -1px 0 #ea5504,
  1px -1px 0 #ea5504;
}

#search ul{
width: 660px;
}
#search li{
width: 200px;
margin-top: 30px;
}
#search li a{
font-size: 20px;
}
#search li a:hover{
transform: scale(1.1);
background-color: #fff2e6;
}

#search .illust{
width: auto;
left: 0;
}



#recommend .illust{
width: auto;
top: -120px;
left: 0;
}



#beta{
display: flex;
flex-wrap: wrap;
}
#beta section{
width: 50%;
border-bottom: solid 10px #fff;
}
#beta section:nth-child(odd){
border-right: solid 5px #fff;
}
#beta section:nth-child(even){
border-left: solid 5px #fff;
}
#beta section:nth-last-child(-n+2){
border-bottom: none;
}
#beta section a{
height: 20vw;
padding: 0 5vw;
}
#beta section a:hover{
background-color: #ffcc00 !important;
}

#beta section .common_title{
margin-bottom: 1vw;
}
#beta section p{
padding-right: 0;
font-size: min(1vw,16px);
}

#beta section#sell .illust{
right: -2vw;
bottom: -.5vw;
}
#beta section#sell .illust img{
max-width: 65vw;
max-height: 19vw;
}

#beta section#howto .illust img{
max-width: 20vw;
max-height: 19vw;
}

#beta section#com a:hover{
color: #ea5504;
}
#beta section#com .illust img{
max-height: 19vw;
}


#fixed_member_banner a{
padding: 20px 20px 60px;
}
#fixed_member_banner a:hover{
padding-right: 25px;
}
#fixed_member_banner a::before{
width: 50px;
bottom: 10px;
left: 15px;
}
#fixed_member_banner strong{
width: 50px;
height: 50px;
}
#fixed_member_banner p{
font-size: 16px;
margin-right: 5px;
}
#fixed_member_banner em{
font-size: 30px;
letter-spacing: .25em;
margin-right: 2px;
}


}