﻿/*===========================================================*/
/* 個別 */
/*===========================================================*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&family=Noto+Sans+JP:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap');
html{font-size: 16px;}
body{
        font-family: "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif!important;
        font-weight: 500;
}
.height_100per{height: 100%;}
.z_index1{z-index: 1;}
.z_index2{z-index: 2;}
.linkStyle{color: #333;border-bottom: 1px solid;}
.video{width: 100% !important;}
.dec01{
    position: absolute;
    top: 0%;
    width: 100%;
    height: 400px;
    left: 0;
    right: 0;
    background: #cecece;
    transform: skewY(-4deg);
    z-index: -1;
}
#vegas{
    overflow: hidden;
    
}
header span.before,header span.after{opacity: 0.9;}
.catch{
    bottom: 120px;
    z-index: 2;
    max-width: 500px;
    width: 50%;
}
#header{background-color: #f7f7f7;}
#header_contact a.btn_back{background-color: rgb(255 113 0);height: 80px;}
#top_message{padding: 60px 0;}
#top_message h2,#top_contents1 h3, #top_contents2 h3 {
    border-bottom: 1px solid;
    margin-bottom: 20px;
    font-weight: bold;
}
.top_contents1_box,.top_contents2_box{
    margin: 5% auto 5% 5%;
    max-width: 800px;
    width: 38%!important;
}
.top_contents2_box{
        margin: 5% 5% 5% auto;
}
.top_contents1_img, .top_contents2_img{    background-position: top center;}
#top_contents1 div span.after, #top_contents2 div span.after{
    -webkit-transform: skewX(-16.35deg);
    transform: skewX(-16.35deg);
}
#top_message p:first-of-type,#top_contents1 h3::before, #top_contents2 h3::before{font-style: italic;}
#contents3 h2{
    font-size: -webkit-calc(1rem + 6px);
    font-size: calc(1rem + 6px);
    text-align: center;
    position: relative;
    color: #fff;
}
#contents3 .box{
    background-color: black;
    cursor: pointer;
    overflow: hidden;
}
#contents3 .box:hover .banner_bg {
    opacity: 0.2;
    transform: translate(-50%, -50%) scale(1.1);
}
#contents3 .box p{
    text-align: center;
    font-style: italic;
    font-family: "Russo One", "Noto Sans JP","Hiragino Kaku Gothic ProN", "游ゴシック体", YuGothic, "YuGothic M", meiryo, sans-serif;
    position: relative;
}
#top_contents1 h3::before, #top_contents2 h3::before,#contents3 h3::before{
        z-index: -1;
        opacity: 0.5;
}
#top_contents1 h3::before{    content: "ABOUT01";}
#top_contents2 h3::before{content: "ABOUT02";}
#contents3 h3::before{content: "ABOUT03";}
.modal_wrap{
	top: 0;
	left: 0;
	opacity: 0.95;
	z-index: 102;
}
#contents3 h3::before {
    font-family: "Russo One", "Noto Sans JP","Hiragino Kaku Gothic ProN", "游ゴシック体", YuGothic, "YuGothic M", meiryo, sans-serif;
    font-size: 97px;
    opacity: 0.4;
    color: #333333;
    position: absolute;
    top: -85px;
    left: 50%;
    font-style: italic;
    transform: translateX(-50%);
}
.modal_wrap .modal_scroll{
	overflow-y: auto;
}
.modal_wrap .close_bt{
	top: 20px;
	right: 20px;
	cursor: pointer
}
#top_cms .top_cms_sec{
    padding-left: 20px;
    padding-right: 20px;
}
#top_cms .top_cms_sec:nth-of-type(1):before {
    content: '';
    position: absolute;
    top: 0%;
    width: 100%;
    height: 400px;
    left: 0;
    right: 0;
    background: #cecece;
    transform: skewY(4deg);
    z-index: -1;
   /* background-image: url(https://www.transparenttextures.com/patterns/asfalt-dark.png);*/
}
/*===========================================================*/
/* コード集 */
/*===========================================================*/
.g_type1 > div{justify-content: space-around;}
.g_type1 .modal_bt{cursor: pointer}
.g_type1 .modal_bg{top: 0;left: 0;background-color: rgba(0,0,0,0.5);z-index: 9998;}
.g_type1 .modal_box{max-height: 80%;overflow-y: auto;z-index: 9999;}
.g_type1 .close_bt{cursor: pointer}
.g_type1 .cate_box {position: relative;width: 22.99999%!important;margin: 0 1%;margin-bottom: 20px;overflow: hidden; }

@media all and (-ms-high-contrast:none){
.g_type1 .modal_box .box_txt2 a {padding: 8px 10px 2px;}
}

@media screen and (max-width: 768px){
.g_type1 .cate_box {width: 30.99999%!important;}
}
	
@media screen and (max-width: 667px){
.g_type1 .cate_box {width: 47.99999%!important;}
}



/*===========================================================*/
/* 下層 */
/*===========================================================*/
#cms_2-g .cate_img1{max-height: inherit;}




/*===========================================================*/
/* タブレット */
/*===========================================================*/
@media screen and (max-width: 768px){
#top_message{width: 100%!important;}
.dec01 {
    top: 30%;
    transform: skewY(-33deg);
}
.video_wrap{height: 400px;}
.catch {
    bottom: 70px;
    width: 33%;
}
.top_contents1_box, .top_contents2_box{
    width: 80%!important;
    max-width: none;
    padding: 30px;
    background-color: rgba(255, 255, 255, 0.85);
    margin: 10%;
    
}

}



/*===========================================================*/
/* スマホ */
/*===========================================================*/
@media screen and (max-width: 667px){
.video_wrap {
    height: 200px;
}
.catch {
    bottom: 30px;
    width: 50%;
}
#top_contents1 h3::before, #top_contents2 h3::before{
    top: -30%;
    color: #ff7100;
}
#contents3 h3::before{font-size: 48px;top: -45px;color: #ff7100;}
#contents3 .box {
    padding: 50px 0;
}

#cms_4-b .cate_box{margin-bottom: 20px;}
.cate_list{margin-bottom: 50px;}
.cate_list li a{
    width: 270px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#page_title{margin-bottom: 50px;}


}


/*===========================================================*/
/* IE */
/*===========================================================*/
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none){



}


/*===========================================================*/
/* Firefox */
/*===========================================================*/
@-moz-document url-prefix(){

}