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


/*--------------------------------
  Main Layout 
--------------------------------*/

#main{
	width:100%;
	
	position:relative;

    animation-name: main_anime;
	animation-duration: 2s;
	animation-timing-function: ease-in;
	animation-fill-mode:forwards;
}
.main_area{
	width:100%;
	height:70vh;
    overflow: hidden;
    position: relative;
	
}
@keyframes main_anime {
  0% {
	  opacity: 0;
  }
  100% {
	  opacity: 1;
  }
}
.main_area .main_inner{
	/*margin:0 auto;
	width:100%;*/
    heighth:100%;
}
.main__item {
  bottom: 0;
  height: 100%!important;
  position: absolute;
  width: 100%;
}

.main_area .copy_block{
	position: absolute;
	text-align: center;
	top: 50%;
	left: 50%;
    transform: translate(-50%, -50%);
	margin: auto;
    z-index:10!important;
    width:100%!important;
}
.main_area .copy_block h2{
	font-family: "Noto Serif JP", system-ui;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
	font-size: 2.868vw;
    
    color:#FFF;
    text-shadow: 2px 1px 2px rgba(0,0,0,0.8);
	
}


/* ------ slide image ------- */
.main__img {
  animation-duration: 15s;
  animation-iteration-count: infinite;
  animation-name: slideAnime;
  animation-timing-function: ease;
  display: block;
  min-height: 70vh;
  object-fit: cover;
  opacity: 0;
}

.main__item:nth-of-type(1) .main__img {
  animation-delay: 0s;
}

.main__item:nth-of-type(2) .main__img {
  animation-delay: 5s;
}

.main__item:nth-of-type(3) .main__img {
  animation-delay: 10s;
}

@keyframes slideAnime {
  0% {
    opacity: 0;
  }

  16% {
    opacity: 1;
  }

  33% {
    opacity: 1;
  }

  49% {
    opacity: 0;
  }

  100% {
    opacity: 0;
    /*transform: translateX(-10%);*/
  }
}


@media screen and (max-width:767px) {
    #main{
    }
    .main_area{
    }
    .main_area .main_inner{
        margin:0 auto;
        width:100%;
        heighth:100%;
    }
    .main__item {
        top: 0;
        bottom:initial;
        height: 100%!important;
        position: absolute;
        width: 100%;
    }
    .main_area .copy_block{
        width:90%!important;
    }
    .main_area .copy_block h2{
        font-family: "Noto Serif JP", system-ui;
        font-optical-sizing: auto;
        font-weight: 200;
        font-style: normal;
        font-size: 5.882vw;

        color:#FFF;
        text-shadow: 2px 1px 2px rgba(0,0,0,0.8);

    }
}


/*--------------------------------
  Contents Layout 
--------------------------------*/
#container_top{
    padding:7.692vw 0 6.154vw;
    margin:0;
}
.top_bk{
    background:url("/common/image/bk.jpg") repeat-y;
    background-position:left 22.794vw top!important;
    background-size:100%;
    overflow:hidden;
}
.top_grey{
    background: linear-gradient(180deg,rgba(255,255,255,0)  0%, rgba(255,255,255,0)  35%, rgba(138,138,138,1.0) 35%, rgba(138,138,138,1.0) 100%);
    padding-bottom:45px;
}
.contents_block{
    padding-bottom:50px;
    align-items:flex-end!important;
}
.contents_block .cont_1way{
	width:100%;
}

.contents_block .block01_cont_2way_left{
	width:45%;
}
.contents_block .block01_cont_2way_right{
	width:55%;
}

.block01_left{
    text-align:right;
}
.block01_right{
    width:100%;
    background: linear-gradient(90deg,rgba(255,255,255,0)  0%, rgba(255,255,255,0)  80%, rgba(138,138,138,1.0) 80%, rgba(138,138,138,1.0) 100%);
    background-color:var(--maincolor); 
    padding-bottom:45px;
    overflow: hidden;
}

.contents_block .block02_cont_2way_left{
	width:55%;
    margin-top:3.846vw;
}
.contents_block .block02_cont_2way_right{
	width:45%;
    margin-top:3.846vw;
}
.block02_left{
    width:100%;
    background: linear-gradient(90deg,rgba(138,138,138,1.0)  0%, rgba(138,138,138,1.0)  20%, rgba(255,255,255,0) 20%, rgba(255,255,255,0) 100%);
    background-color:var(--maincolor); 
    padding-bottom:45px;
    overflow: hidden;
}
.block02_right{
    text-align:left;
}
@media screen and (max-width:767px) {
    #container_top{
    }
    .top_bk{
        background-position:left 24.155vw top!important;
    }
    .top_grey{
        background: linear-gradient(180deg,rgba(255,255,255,0)  0%, rgba(255,255,255,0)  35%, rgba(138,138,138,1.0) 35%, rgba(138,138,138,1.0) 100%);
        padding-bottom:45px;
    }
    .contents_block{
        width:100%!important;
        padding-bottom:20px;
    }
    .contents_block .cont_1way{
        width:100%;
    }
    .contents_block .block01_cont_2way_left{
        width:90%!important;
        margin:0 auto;
    }
    .contents_block .block01_cont_2way_right{
        width:90%!important;
        margin:0 auto;
    }
    .block01_left{
       text-align:left;
    }
    .block01_right{
        width:100%;
        background-color:initial; 
        padding-bottom:0;
    }
    .contents_block .block02_cont_2way_left{
        width:90%!important;
        margin:0 auto;
    }
    .contents_block .block02_cont_2way_right{
        width:90%!important;
        margin:0 auto;
    }
    .block02_left{
        width:100%;
        padding:0;
        overflow: hidden;
        background-color:initial;
    }
    .block02_right{
        text-align:left;
    }
}


.block01_left .copy_block{
    display:inline-block;
    width:36.923vw;
    
    text-align:left;
    margin:0 0 0 auto!important;
}

.block01_left .copy_block h2,
.block02_right .copy_block h2{
	font-family: "Cormorant Garamond", system-ui;
    font-weight: 300;
    font-style: normal;
	font-size:clamp(3.5rem, 2.227rem + 6.36vw, 7rem);
    line-height:1.0;
    letter-spacing:0;
    margin-bottom:1.538vw;
}
.block02_right .copy_block h2{
    padding-left:3.462vw;
}
.copy_block .box{
	background-color: var(--maincolor); 
    
    display:block;
    
	padding:5.385vw 3.462vw;
}

.copy_block .box h3{
    display:block;
    font-family: "Shippori Mincho", system-ui;
    font-weight: 400;
    font-style: normal;
    font-size:clamp(1.3rem, 0.755rem + 2.73vw, 2.8rem);
    color:#FFF;
    padding-bottom:2.308vw;
}
.copy_block .box span{
    display:block;
    font-family: "Noto Sans JP", system-ui;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-size:clamp(0.9rem, 0.682rem + 1.09vw, 1.5rem);
    color:#FFF;
    line-height:1.83;
}
.block02_right .copy_block .box span,
.block02_right .copy_block .box .links{
    width:36.846vw!important;
}

.copy_block .box .links{
	width:100%;
    margin:2.308vw 0 0;
	
	display:block;
	
	font-size:clamp(0.8rem, 0.545rem + 1.27vw, 1.5rem);
	
	text-align:center;
}
.copy_block .box .links a{
	display:block;
	padding:15px 0;
	
	color:#e4c57c;
	
	border:solid 1px var(--subcolor);
}
.copy_block .box .links a:hover{
	color:#FFF;
	background:var(--subcolor);
	border:solid 1px var(--subcolor);
    text-decoration: none;
}

@media screen and (max-width:767px) {
	.block01_left .copy_block{
        width:100%;
    }
    .block02_right{
        order:1!important;
    }
    .block02_left{
        order:2!important;
    }
    .block01_left .copy_block h2,
    .block02_right .copy_block h2{
        display:block;
        margin-bottom:1.538vw;
    }
    .block02_right .copy_block h2{
        padding-left:initial;
    }
    .copy_block .box{
        width:100%;
        padding:5.385vw;
    }
    .copy_block .box h3{
        display:block;
        letter-spacing: initial;
        margin:0 auto;
    }
    .copy_block .box span{
        display:block;
        line-height:1.7;
        margin:0 auto;
    }
    .block02_right .copy_block .box span,
    .block02_right .copy_block .box .links{
        width:100%!important;
    }

    .copy_block .box .links{
        width:100%;
        margin:2.308vw 0 0;
    }
    .copy_block .box .links a{
        padding:7px 0;
    }
    .copy_block .box .links a:hover{
        color:#FFF;
        background:var(--subcolor);
        border:solid 1px var(--subcolor);
        text-decoration: none;
    }
}