@import url('https://fonts.googleapis.com/css2?family=Nothing+You+Could+Do&display=swap');
.font1,
#page_title span,
#page10 .more_bt2 .font_100per{
    font-family: 'Nothing You Could Do', cursive;
}

/*
#loader{
    display:none;
}
*/



/*--all page---------------------------
-------------------------------------*/
.linkStyle{
    color:#555;
    transition:all 0.3s;
    text-decoration:underline;
}
.linkStyle:hover{
    opacity:0.7;
}

body{
    overflow:hidden;
}
#logo{
    width:170px;
}
.fix_bnr{
    left:20px;
    z-index:99;
}
.fix_bnr a{
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}


/*--top page---------------------------
-------------------------------------*/
#video {
    position: relative;
    overflow: hidden;
    height: 100vh;
}
.video {
    position: absolute;
    /*top: 50%;*/
    top: 58%;
    left: 50%;
    z-index: -1;
    width: auto;
    min-width: 100%;
    height: auto;
    min-height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
}
#intro .intro_bg{
    border-radius: 0 0 150px 0;
}
#intro .grid_5{
    padding-top:50px;
}
.intro_subtitle,
.con1_subtitle{
    transform-origin: bottom;    
    transform: rotate(354deg);
    font-size: 2rem;
    margin-left: -30px;
}
#intro h2{
    font-size:2.2rem;
}
.con1_item {
    width: 20vw;
    height: 26vh;
    border-radius: 30px;
    bottom: -15%;
    right: -2%;
    z-index: 2;
}
#contents2 .cate_box{
    border-radius:30px;
}
.con2_subtitle{
    font-size:2.2rem;
}
.v_type1 .triangle {
    display: block;
    border: #555 solid 2px;
    box-shadow: 5px 5px 0 0 #e2e2e2;
    border-radius: 20px 
}
.v_type1 .triangle:before {
    content: '';
    position: absolute;
    display: block;
    z-index: 1;
    border-style: solid;
    border-color: #FFF transparent;
    border-width: 13px 13px 0 0;
    bottom: -13px;
    left: 50%;
    margin-left: -9px;
}
.v_type1 .triangle:after {
    content: '';
    position: absolute;
    display: block;
    z-index: 0;
    border-style: solid;
    border-color: #555 transparent;
    border-width: 15px 15px 0 0;
    bottom: -17px;
    left: 50%;
    margin-left: -11px;
}


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



/* ---------- responshive ---------- */
@media screen and (max-width: 1536px){

}


@media screen and (max-width: 1366px){
#main_img h2{
    font-size:3rem;
}
#intro .grid_5{
    padding-top:50px;
}
}


/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
#sp_nav a.active{
    border-bottom: 1px solid #fff;
}
#main_img{
    /*height:37vh;*/
    height:400px;
    margin-top:90px;
}
#main_img .txt {
    left: 5vw;
}
#main_img h2 {
    font-size: 2rem;
}
#video {
    height: 100%;
}
.video{
    top:53%;
}
#intro .intro_bg {
    border-radius: 0;
}
#intro .grid_5 {
    padding-top: 0;
}
#intro .grid_5, #contents1 .txt_box {
    width: 100%!important;
    padding: 0 30px;
}
#intro .grid_7{
    margin-left: auto;
}
.intro_subtitle,
.con1_subtitle{
    margin-left: -10px;
}
#intro h2,
#contents1 h2{
    font-size: 1.8rem;
}
#contents1 .img_box{
    padding-right:50px;
}
.con1_item{
    height: 13vh;
    border-radius: 30px 0 0 30px;
    bottom: -5%;
}
#footer .txt_center{
    padding-left:0;
    padding-right:0;
}

#cms_2-g .cate_title {
    line-height: 1.5;
    font-size: 2em;
}

}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
#logo {
    width: 140px;
}
#main_img{
    margin-top: 65px;
    height:250px;
}
#main_img h2 {
    font-size: 1.7rem;
}
.video{
    top:50%;
}
#intro h2, #contents1 h2 {
    font-size: 1.5rem;
}
.con1_item {
    height: 13vh;
    border-radius: 20px 0 0 20px;
    bottom: -2%;
}
#cms_2-g .cate_title{
    font-size: 1.5em;
}
.cate_list li a:hover{
    color:#fff!important;
}
.contact_tel.mail a{
    font-size:1.2rem;
}
}