@import url('https://fonts.googleapis.com/css2?family=Alata&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Corinthia:wght@400;700&display=swap');


/*
#page-top{
    position:absolute;
}
*/


.font1,
#top_cms .more a,
.cate_list::before{
    font-family: 'Alata', sans-serif;
}
.font2 {
    font-family: 'Corinthia', cursive;
    letter-spacing: 0;
    line-height: 1.3;
}



.linkStyle{
    color:#bf9d74;
}
.linkStyle:hover{
    transition:all 0.3s;
    opacity:0.7;
    text-decoration:underline;
}

body{
    overflow:hidden;
}

header.transform{
    background-color:rgba(255,255,255,0.7);
}


/*--top page---------------------------
-------------------------------------*/

.catch {
    top: 18%;
    left: 14%;
    z-index: 2;
}
.policy{
    font-size: 9rem;
    transform: rotate(-8deg);
    font-style: italic;
    margin-left:-80px;
}
.catch1{
    font-size: 3.2rem;
    font-weight: 700;
    letter-spacing: 3px;
}
.catch2 {
    font-size: 1.5rem;
    letter-spacing: 2px;
    font-weight: 600;
    margin-bottom: 50px;
}

#main_img .scroll_bar {
    transform: rotate(-90deg);
    transform-origin: bottom left;
    left: 100px;
    bottom: 0;
    z-index: 1;
    cursor: pointer;
}
#main_img .scroll_bar span {
    width: 80px;
    height: 1px;
    top: 0;
    bottom: 3px;
    left: 0;
    margin: auto;
    background-color: rgba(0,0,0,0.4);
}
#main_img .scroll_bar span::before {
    position: absolute;
    content: "";
    display: block;
    pointer-events: none;
    height: 1px;
    top: 0;
    background-color: #fff;
    animation: bartrans 3s cubic-bezier(.68,.01,.2,1) infinite;
}
@keyframes bartrans{
    0%	{
		right: 0;
		left: 100%;
		width: 0
    }
    25%	{
		right: 0;
		left: 0;
		width: 100%
    }
    50%{
		right: 100%;
		left: 0;
		width: 0
    }
    100%{
		right: 100%;
		left: 0;
		width: 0
    }
}

#contents1 .con_img img{
    height: auto!important;
    width: 100%!important;
}

    

#contents1 .con1_sub_title{
    font-size: 5rem;
}
/*modal*/
.modal_bt,
.close_bt{
    cursor: pointer;
    border-radius:50px;
}

.modal_bg{
     top: 0;left: 0;
     background-color: rgba(0,0,0,0.8);
     z-index: 10;
}
.modal_box{
     max-height: 95%;
     overflow-y: auto;
     z-index: 11;
}


#contents .con_no {
    font-size: 4rem;
    margin-bottom: 0;
    line-height: 1.7;
}
#contents .con_title{
    margin-bottom:50px;
}

/*--under page---------------------------
-------------------------------------*/

#cms_5-d .circle:before, .cms_5-d .circle:before{
    top: 50px;
}
#cms_5-d .circle:after, .cms_5-d .circle:after{
    display:none;
}



/* ---------- responshive ---------- */
@media screen and (max-width: 1550px){
.catch {
    left: 10%;
}
.policy {
    font-size: 8rem;
}
.catch1 {
    font-size: 2.5rem;
}

}



/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){

.catch {
    top: 23%;
    left: 6%;
}
.policy {
    font-size: 6rem;
    margin-left: -20px    
}
.catch1 {
    font-size: 1.7rem;
    letter-spacing: 1px;
}
.catch2 {
    font-size: 1.2rem;
    letter-spacing: 1px;
    margin-bottom: 0;
}
.catch3{
    display:none;
}
#contents1 .con1_sub_title {
    font-size: 4rem;
}
#contents .con_no {
    font-size: 3rem;
}
.top_cms_box .cms_title {
    margin-bottom: 30px;
}
.drawer--left .drawer-nav{
    padding-top:100px;
}

}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
header {top: auto;}
header.transform {top: 0;}
header #logo .logo {
    width: 80%;
    margin: 0 20px 0 0;
}
.catch {
    top: 41%;
    left: 7%;
}
.policy {
    font-size: 3rem;
    margin-left: -20px;
}
.catch1 {
    font-size: 1rem;
}
.catch2 {
    font-size: 0.8rem;
}
#contents1 .con1_sub_title {
    font-size: 3rem;
}
#contents .con_no {
    font-size: 2rem;
}
}