@charset "UTF-8";

/*==== tablet タブレット用css ===*/
@media screen and (max-width: 1024px){
}
/*==== mobile スマフォ横〜用css ===*/
@media screen and (max-width: 896px){
}
/*==== mobile スマフォ縦用css ===*/
@media screen and (max-width: 480px){
}

:root {
    --space: 50px;
}
/*==== mobile スマフォ横〜用css ===*/
@media screen and (max-width: 896px){
    :root {
        --space: 60px;
    }
}
/*==== mobile スマフォ縦用css ===*/
@media screen and (max-width: 480px){
    :root {
        --space: 40px;
    }
}

/*******************************
hero Css
*******************************/
#hero{
    position: relative;
}

.mainimg{
	position: relative;
}
.mainimg .img span{
    display: block;
    width: 100%;
    /*height: 100vh;*/
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.mainimg .img img{
    max-width: none;
    width: 100%;
}
.mainimg .img .show-sp{
    display: none;
}

.mainimg .video-wrap{
    height: 100%;
    position: relative;
    overflow: hidden;
}

.mainimg .video {
    padding: 21.5% 0;
    position: relative;
    overflow: hidden;
}
.mainimg .video video {
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.mainimg .video-wrap .btn-modal{
    position: absolute;
    bottom: 20px;
    right: 20px;
	max-width: 70px;
}
.mainimg .video-wrap .btn-modal:hover{
    opacity: .8;
}


.mainimg .cover-txt{
	max-width: 38%;
	position: absolute;
	bottom: 5%;
	right: 2%;
	z-index: 1;
}

/*==== mobile スマフォ横〜用css ===*/
@media screen and (max-width: 896px){
    .mainimg .img .show-pc{
        display: none;
    }
    .mainimg .img .show-sp{
        display: block;
    }
	
	.mainimg .video {
		padding: 0;
	}
	.mainimg .video-wrap .btn-modal{
		position: absolute;
		bottom: 20%;
		right: 0;
		left: 0;
		margin: 0 auto;
	}
	
	.mainimg .cover-txt{
		max-width: 42%;
	}
}


/*information style*/
.information{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    max-width: 496px;
    padding: 35px 30px;
    border-radius: 0 10px 0 0;
    background: var(--gry);
    text-align: var(--left);
}
.information h4{
    margin-bottom: 15px;
    letter-spacing: var(--letterspace);
}
.information h4 a{
    color: var(--yellow);
}
.information a{
    position: relative;
    align-items: baseline;
    color: var(--white);
    overflow: hidden;
}
.information a:hover{
    color: var(--hover);
}
.information time{
    width: 23%;
    font-size: 70%;
    font-style: italic;
    padding-right: 5px;
    position: relative;
}
.information time:after{
    content: "";
    width: 1px;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    margin-right: 5px;
    background: var(--white);
}
.information .ttl{
    width: 77%;
    font-size: 85%;
    font-weight: bold;
    white-space: nowrap;
    position: relative;
    padding-right: 22px;
}
.information .ttl:after{
    content: "";
    position: absolute;
    right: 0;
    top: 2px;
    width: 17px;
    height: 16px;
    background: var(--gry) url(../img/common/sprite@2x.png) no-repeat;
    background-size: 254px auto;
    background-position: -36px 0;
}
/*==== tablet タブレット用css ===*/
@media screen and (max-width: 1024px){
    .information time{
        display: block;
    }
}
/*==== mobile スマフォ横〜用css ===*/
@media screen and (max-width: 896px){
    .information{
        position: static;
        border-radius: 0;
        max-width: none;
    }
    .information time{
        width: 100%; 
    }
    .information time:after{
        display: none;
    }
    .information .ttl{
        width: auto; 
    }
}


/*******************************
block-bnr Css
*******************************/
.block-bnr{
    margin-top: 60px;
}
.block-bnr ul{
    margin-right: -40px;
    justify-content: center;
}
.block-bnr li{
    width: 50%;
    padding-right: 40px;
    margin-bottom: 25px;
}
.block-bnr li p{
    font-size: 90%;
}
/*==== mobile スマフォ横〜用css ===*/
@media screen and (max-width: 896px){
    .block-bnr ul{
        margin-right: -20px;
    }
    .block-bnr li{
        padding-right: 20px;
    }
}
/*==== mobile スマフォ縦用css ===*/
@media screen and (max-width: 480px){
    .block-bnr{
        margin-top: 40px;
    }
    .block-bnr li{
        width: 100%;
    }
    /*.block-bnr li:nth-last-child(1){
        margin-bottom: 0;
    }*/
}

/*******************************
sec-concept Css
*******************************/
.sec-concept{
    margin: 120px 0;
}
.sec-concept .lead{
    display: inline-block;
    font-size: 300%;
    font-weight: bold;
    text-align: center;
    border-bottom: solid 4px;
    margin: 30px 0;
}
.sec-concept p{
line-height:  var(--lineheight);
}
/*==== tablet タブレット用css ===*/
@media screen and (max-width: 1024px){
    .sec-concept .lead {
        font-size: 260%;
    }
}
/*==== mobile スマフォ横〜用css ===*/
@media screen and (max-width: 896px){
    .sec-concept{
        margin: 70px 0;
    }
    .sec-concept .lead {
        font-size: 200%;
    }
}
/*==== mobile スマフォ縦用css ===*/
@media screen and (max-width: 480px){
    .sec-concept .lead {
        font-size: 120%;
        margin: 30px 0;
        border-bottom: solid 2px;
    }
    .sec-concept p{
        text-align: left;
    }
}


/*******************************
block-floor Css
*******************************/
.block-floor{
    max-width: 1680px;
    margin: auto;
    text-align: left;
}
.block-floor section{
    margin-bottom: 10vh;
}
.block-floor .img,
.block-floor .txt{
    width: 60%;
}
.block-floor .txt{
    position: relative;
}
.block-floor .txt h2{
    margin: 30px 0 20px;
    font-size: 190%;
    font-weight: bold;
    letter-spacing: var(--letterspace);
}
.block-floor .txt h2 span{
    font-size: 60%;
}
.block-floor .txt .num{
    margin: 30px 0 20px;
    font-size: 160%;
    font-weight: bold;
	padding-left: 32px;
	position: relative;
}
.block-floor .txt .num:before{
	content: "";
	position: absolute;
	left: 0;
    top: 14px;
    width: 21px;
    height: 17px;
	background: url("../img/common/ico-arrow.png") no-repeat;
	background-size: 42px auto;
	background-position: left top;
}
.block-floor .txt .num.east:before{
	background-position: right top;
}
.block-floor .txt .num span{
    font-size: 75%;
    font-weight: normal;
}

.block-floor .logo{
    text-align: center;
}
.block-floor .label-blu{
    min-width: 238px;
    margin: 20px 0;
}
.block-floor .link{
    display: inline-block;
    font-weight: bold;
    font-size: 108%;
    margin: 30px 0;
}
.block-floor .smile{
    position: absolute;
    z-index: -1;
}

/*==== mobile スマフォ横〜用css ===*/
@media screen and (max-width: 896px){
    .block-floor section{
        margin-bottom: 40px;
    }
	
	.block-floor .txt{
		width: 100%;
	}
	
    .block-floor .logo {
        margin: 30px auto 0;
    }
}
/*==== mobile スマフォ縦用css ===*/
@media screen and (max-width: 480px){
    .block-floor .logo {
        margin: 20px auto 0;
    }
    .block-floor .txt h2,
    .block-floor .txt .num{
        margin: 20px 0 10px;
        font-size: 140%;
    }
	.block-floor .txt .num:before{
		top: 6px;
	}
    .block-floor .label-blu{
        margin-bottom: 0;
    }
}

/*park style*/
.sec-park{
    align-items: center;
}
.sec-park .img{
    position: relative;
    padding-right: var(--space);
}
.sec-park .txt{
    padding: 0 var(--space);
}
.sec-park .smile{
    right: 0;
    bottom: 30%;
}
/*==== mobile スマフォ横〜用css ===*/
@media screen and (max-width: 896px){
    .sec-park .img{
        padding-right: 0;
    }
    .sec-park .txt{
		padding: 0 20px;
    }
}
/*==== mobile スマフォ縦用css ===*/
@media screen and (max-width: 480px){
    .sec-park .logo img{
        max-width: 90px;
    }
    .sec-park .smile{
        bottom: 0;
    }
}


/*food style*/
.sec-food{
    justify-content: flex-end;
    align-items: flex-end;
    margin-top: -28%;
    padding-right: var(--space);
}
.sec-food .logo{
    order: 1;
    margin: 0 var(--space) 20px 0;
}
.sec-food .img{
    order: 2;
    width: 35%;
}
.sec-food .txt{
    order: 3;
}
.sec-food .txt .btn{
	max-width: 420px;
}
.sec-food .smile{
    left: -28%;
    bottom: -5%;
}
/*==== mobile スマフォ横〜用css ===*/
@media screen and (max-width: 896px){
    .sec-food{
        margin-top: 0;
        padding-right: 0;
        justify-content: space-between;
        align-items: center;
        
    }
    .sec-food .logo{
        margin: 0;
        width: 35%;
    }
    .sec-food .img{
        width: 60%;
    }
}
/*==== mobile スマフォ縦用css ===*/
@media screen and (max-width: 480px){
    .sec-food .txt{
        padding-right: var(--space);
    }
}


/*library style*/
.sec-library{
    align-items: center;
}
.sec-library .img{
    padding-right: var(--space);
}
.sec-library .txt{
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    padding: 0 var(--space);
}
/*==== mobile スマフォ横〜用css ===*/
@media screen and (max-width: 896px){
    .sec-library .img{
        padding-right: 0;
    }
    .sec-library .txt{
        padding-left: 0;
    }
}
/*==== mobile スマフォ縦用css ===*/
@media screen and (max-width: 480px){
    .sec-library .logo img{
        width: 119px;
    }
}

/*studio style*/
.sec-studio{
    justify-content: flex-end;
    align-items: flex-end;
    padding-right: var(--space);
}
.sec-studio .logo{
    order: 1;
    width: 40%;
    padding: 0 var(--space) var(--space); 
}
.sec-studio .img{
    order: 2;
}
.sec-studio .txt{
    order: 3;
    width: 100%;
    max-width: 1024px;
    margin: auto;
}
.sec-studio .smile{
    right: -10%;
    bottom: -30%;
}
/*==== tablet タブレット用css ===*/
@media screen and (max-width: 1024px){
    .sec-studio .txt{
        padding-left: var(--space);
    }
}
/*==== mobile スマフォ横〜用css ===*/
@media screen and (max-width: 896px){
    .sec-studio{
        padding-right: 0;
    }
    .sec-studio .img {
        order: 1;
    }
    .sec-studio .logo{
        order: 2;
        padding: 30px 20px 0;
    }
    .sec-studio .txt{
        padding: 0 var(--space) 0 0;
    }
}
/*==== mobile スマフォ縦用css ===*/
@media screen and (max-width: 480px){
    .sec-studio .logo{
        margin: 0 auto;
    }
}
 

/*farm style*/
.sec-farm{
    justify-content: flex-end;
    align-items:center;
    padding-right: var(--space);
}
.sec-farm .img{
    order: 2;
    width: 40%;
}
.sec-farm .txt{
    order: 1;
    padding:0 var(--space);
}
/*==== mobile スマフォ横〜用css ===*/
@media screen and (max-width: 896px){
    .sec-farm .img{
        order: 1;
        width: 100%;
    }
    .sec-farm .txt{
        order: 2;
        padding:0 var(--space) 0 0;
    }
}
/*==== mobile スマフォ縦用css ===*/
@media screen and (max-width: 480px){
    .sec-farm .txt{
        padding:0;
    }
}


/*toyoichi style*/
.sec-toyoichi{
    justify-content: flex-end;
    align-items: flex-end;
    padding-right: var(--space);
}
.sec-toyoichi .logo{
    order: 2;
    width: 40%;
    padding: 0 var(--space) 0; 
	text-align: left;
}
.sec-toyoichi .logo img{
	width: 100%;
	max-width: 146px;
}
.sec-toyoichi .img{
    order: 1;
}
.sec-toyoichi .txt{
    order: 3;
    width: 100%;
    max-width: 1024px;
    margin: auto;
}
.sec-toyoichi .smile{
	max-width: 391px;
    left: -10%;
    bottom: -30%;
}
/*==== tablet タブレット用css ===*/
@media screen and (max-width: 1024px){
    .sec-toyoichi .txt{
        padding-left: var(--space);
    }
}
/*==== mobile スマフォ横〜用css ===*/
@media screen and (max-width: 896px){
    .sec-toyoichi{
        padding-right: 0;
    }
    .sec-toyoichi .img {
        order: 1;
    }
    .sec-toyoichi .logo{
        order: 2;
        padding: 30px 30px 0;
    }
    .sec-toyoichi .txt{
        padding: 0 var(--space) 0 0;
    }
}
/*==== mobile スマフォ縦用css ===*/
@media screen and (max-width: 480px){
    .sec-toyoichi .logo{
        margin: 0 auto;
    }
}


/*share_house style*/
.sec-share_house{
    justify-content: flex-end;
    align-items:center;
    padding-right: var(--space);
}
.sec-share_house .img{
    order: 1;
    width: 50%;
}
.sec-share_house .txt{
	width: 50%;
    order: 2;
    padding:0 var(--space);
}
/*==== mobile スマフォ横〜用css ===*/
@media screen and (max-width: 896px){
    .sec-share_house .img{
        order: 1;
        width: 100%;
    }
    .sec-share_house .txt{
        order: 2;
        padding:0;
		width: 100%;
    }
}
/*==== mobile スマフォ縦用css ===*/
@media screen and (max-width: 480px){
    .sec-share_house .txt{
        padding:0;
    }
}


/*consept-west style*/
.consept-west{
	padding-top: 50px;
	margin-bottom: 100px;
	text-align: center;
	padding-right: var(--space);
}


/*******************************
floorguide Css
*******************************/
.floorguide{
    margin-top: 80px;
}
.floorguide h2{
    font-size: 220%;
    font-style: italic;
    margin-bottom: 40px;
    text-decoration: underline;
}


/*******************************
btn-shop Css
*******************************/
.btn-shop{
    display: block;
    border:solid 1px #000;
    font-weight: bold;
    text-align: left;
    margin-bottom: 100px;
    padding: 5% 5% 4.5%;
    position: relative;
    overflow: hidden;
}
.btn-shop:before{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    width: 200%;
    height: 100%;
    background: rgb(67,126,150);
    background: -moz-linear-gradient(90deg, rgba(67,126,150,1) 0%, rgba(67,126,150,1) 50%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(67,126,150,1) 0%, rgba(67,126,150,1) 50%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
    background: linear-gradient(90deg, rgba(67,126,150,1) 0%, rgba(67,126,150,1) 50%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#437e96",endColorstr="#3c3c3c",GradientType=1);
    transition: .3s;
}
.btn-shop:after{
    content: "";
    position: absolute;
    right: 40px;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 40px;
    height: 41px;
    background: url(../img/common/sprite@2x.png) no-repeat;
    background-size: 254px auto;
    background-position: -129px 0;
}
.btn-shop:hover{
    color: #fff;
}
.btn-shop:hover:before{
    right: -100%;
}
.btn-shop:hover:after{
    background-position: -171px -83px;
}
.btn-shop span{
    vertical-align: middle;
}
.btn-shop .font-en{
    font-size: 250%;
    margin-right: 30px;
}
/*==== mobile スマフォ横〜用css ===*/
@media screen and (max-width: 896px){
    .btn-shop .font-en{
        display: block;
    }
}
/*==== mobile スマフォ縦用css ===*/
@media screen and (max-width: 480px){
    .btn-shop{
        margin-bottom: 50px;
    }
    .btn-shop .font-en {
        font-size: 150%;
    }
    .btn-shop:after{
        right: 10px;
        width: 21px;
        height: 21px;
        background-size: 130px auto;
        background-position: -66px 0;
    }
}

/*******************************
block-event Css
*******************************/
.block-event{
    background: var(--yellow);
}
.block-event .ttl{
    margin: 0 0 50px;
    font-size: 180%;
    font-weight: bold;
    letter-spacing: var(--letterspace);
}
.block-event .ttl span{
    font-size: 55%;
    font-weight: normal;
    margin-left: 30px;
    color: var(--blue);
}


/*******************************
bnr-digital Css
*******************************/
.bnr-digital{
	margin-top: 70px;
}


/*******************************
block-access Css
*******************************/
.block-access{
    position: relative;
    margin-top: 68px;
}
.block-access .map{
    position: relative;
    padding-bottom: 42%;
    padding-top: 30px;
    width: 100%;
    height: 0;
    overflow: hidden;
}
.block-access .map iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.block-access .info{
    position: absolute;
    top: 0;
    right: 0;
    width: 28%;
    height: 100%;
    color: var(--white);
    background:rgba(67,126,150,.92)
}
.block-access .info .inner{
    padding: 30px;
}
.block-access .info address{
    margin: 15px 0;
}
.block-access .info b{
    border-bottom: solid 1px;
    display: block;
    padding-bottom: 5px;
    margin-bottom: 10px;
}
.block-access .info dl{
    font-size: 80%;
    text-align: left;
}
.block-access .info dt,
.block-access .info dd{
    display: inline-block;
    vertical-align: top;
    margin-bottom: 5px;
}
.block-access .info dt{
    width: 20%;
}
.block-access .info dd{
    width: 78%;
}

.btn-access{
    display: inline-block;
    width: 100%;
    max-width: 340px;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    margin: 20px 0 0;
    padding: 15px 20px;
    position: relative;
    overflow: hidden;
    border: solid 1px var(--gry);
    background: var(--gry);
    color: var(--yellow);
}
.btn-access:before,
.btn-access span{
    display: inline-block;
    vertical-align: middle;
}
.btn-access:before{
    content: "";
    width: 16px;
    height: 21px;
    background: url("../img/top/access_ico.png") no-repeat;
    background-size: 16px auto;
    background-position: -1px -1px;
    margin-right: 15px;
}
.btn-access:hover{
    background: var(--white);
    color: var(--gry);
}
.btn-access:hover:before{
    background-position: -1px -22px;
}
/*==== tablet タブレット用css ===*/
@media screen and (max-width: 1024px){
    .block-access .info .inner {
        padding: 20px;
        font-size: 78%;
    }
    .btn-access{
        font-size: 14px;
        margin: 20px 0 0;
        padding: 15px 30px;
    }
}
/*==== mobile スマフォ横〜用css ===*/
@media screen and (max-width: 896px){
    .block-access .map{
        padding-bottom: 52%;
    }
    .block-access .info{
        position: static;
        width: 100%;
    }
    .block-access .info .inner {
        padding: 30px;
    }
}

/*-----------------------------
modal
-----------------------------*/
.mfp-auto-cursor .mfp-content{
    text-align: center;
}
#modal{
    display: inline-block;
    width: auto;
    max-width: 90%;
    overflow: hidden;
    background: #fff;
    border: solid 5px #e5de0c;
    margin: auto;
    padding: 40px;
    border-radius: 0;
}

#modal strong.close{
    text-decoration: line-through;
}

#modal .icon{
    justify-content: center;
    margin-top: 20px;
}
#modal .icon li{
    padding: 0 10px;
}


/* start state */
.my-mfp-zoom-in .zoom-anim-dialog {
    opacity: 0;
    -webkit-transition: all 0.2s ease-in-out; 
    -moz-transition: all 0.2s ease-in-out; 
    -o-transition: all 0.2s ease-in-out; 
    transition: all 0.2s ease-in-out; 
    -webkit-transform: scale(0.8); 
    -moz-transform: scale(0.8); 
    -ms-transform: scale(0.8); 
    -o-transform: scale(0.8); 
    transform: scale(0.8); 
}

/* animate in */
.my-mfp-zoom-in.mfp-ready .zoom-anim-dialog {
    opacity: 1;
    -webkit-transform: scale(1); 
    -moz-transform: scale(1); 
    -ms-transform: scale(1); 
    -o-transform: scale(1); 
    transform: scale(1); 
}

/* animate out */
.my-mfp-zoom-in.mfp-removing .zoom-anim-dialog {
    -webkit-transform: scale(0.8); 
    -moz-transform: scale(0.8); 
    -ms-transform: scale(0.8); 
    -o-transform: scale(0.8); 
    transform: scale(0.8); 
    opacity: 0;
}

/* Dark overlay, start state */
.my-mfp-zoom-in.mfp-bg {
    opacity: 0;
    -webkit-transition: opacity 0.3s ease-out; 
    -moz-transition: opacity 0.3s ease-out; 
    -o-transition: opacity 0.3s ease-out; 
    transition: opacity 0.3s ease-out;
}
/* animate in */
.my-mfp-zoom-in.mfp-ready.mfp-bg {
    opacity: 0.8;
}
/* animate out */
.my-mfp-zoom-in.mfp-removing.mfp-bg {
    opacity: 0;
}

/*
/*==== mobile スマフォ縦用css ===*/
@media screen and (max-width: 480px){
    #modal {
        padding: 40px 20px;
    }

}