@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');

:root{--font_Roboto: 'Roboto','Zen Kaku Gothic New', "Yu Gothic Medium", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, "MS PGothic", sans-serif;}
:root{--font_zenkaku: 'Zen Kaku Gothic New', "Yu Gothic Medium", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, "MS PGothic", sans-serif;}

.font_mon_l,.font_mon{font-family:var(--font_Roboto);}
body, .font_sans-serif,.con1_title,.intro_title, #contents .con_title,h3,h2,h4,h5,h6{font-family:var(--font_zenkaku);}
/*font ---------------------------------------------------------------------------------------------*/


/* color ---------------------------------------------------------------------------------------------*/
:root{
    --color1:#0d0d0d;
    --color2:#0d0d0d;
    --color3:#0d0d0d;
    --color4:#1c1103;
    --color5:#0d0d0d;    
    --white:#f2f2f2;
    --black:#0d0d0d;
    --gray:#e6e9ed;
    --blue:#0f5aef;
    --skyblue:#45b8c8;
    --red:#c91116;    
}

body,.txt_color_nomal,.hvr_txt_color_nomal:hover{color: var(--black) !important;}
.txt_white,.hvr_txt_white:hover{color: var(--white);}
.txt_color1,.hvr_txt_color1:hover{color: var(--color1);} /* メインカラー */
.txt_color2,.hvr_txt_color2:hover{color: var(--color1);} /* サブカラー */
.txt_color3,.hvr_txt_color3:hover{color: var(--color1);} /* アクセントカラー1 */
.txt_color4,.hvr_txt_color4:hover{color: var(--color1);} /* アクセントカラー2 */
.txt_color5,.hvr_txt_color5:hover{color: var(--gray);} /* アクセントカラー2 */
/* background-color */
.bg_white,.hvr_bg_white:hover{background-color: var(--white)} /* 白背景 */
.bg_black,.hvr_bg_black:hover{background-color: var(--black);} /* 黒背景 */
.bg_color1,.hvr_bg_color1:hover{background-color: var(--color1);} /* メインカラー */
.bg_color2,.hvr_bg_color2:hover{background-color: var(--color2);} /* サブカラー */
.bg_color3,.hvr_bg_color3:hover{background-color: var(--color5);} /* アクセントカラー1 */
.bg_color4,.hvr_bg_color4:hover{background-color: var(--color4);} /* アクセントカラー2 */
.bg_color5,.hvr_bg_color5:hover{background-color: var(--color3);} /* アクセントカラー2 */
.bg_color_clear,.hvr_bg_color_clear:hover{background-color: transparent!important;}
/* border-color ※!important */
.border_white,.hvr_border_white:hover{border-color: var(--white);}
.hvr_border_black:hover{border-color: var(--black);}
.border_black{border-color: var(--gray);}
.border_color1,.hvr_border_color1:hover{border-color: var(--color1);}
.border_color2,.hvr_border_color2:hover{border-color: var(--color2);}
.border_color3,.hvr_border_color3:hover{border-color: var(--color3);}
.border_color4,.hvr_border_color4:hover{border-color: var(--color4);}
.border_color5,.hvr_border_color5:hover{border-color: var(--color5);}

.linkStyle{color: var(--blue);
           border-bottom:solid 1px;}
           
body#body,#wrap {background: var(--gray);}
.header_tel, .con2_txt_wrap h3, .con2_txt_wrap p ,#header a,#top_contents1 h3,#top_contents1 p,#top_contents3 h3,#top_contents3 p{color: var(--white) !important;}

/* color ---------------------------------------------------------------------------------------------*/


/*装飾に便利なposi_rel*/
#contents_box,#contents1,#contents2,#contents3,#contents,.con1_outer, .con2_outer, .con3_outer,.img5, .img6, .img7,div#left,div#right,div#intro_wrap,#contents2_wrap,#page_title .title_img{position: relative;}
/*装飾に便利なposi_rel*/
/*装飾に便利な疑似クラス設定*/
#main_img::before, #main_img::after, #contents_box::before, .con1_outer::after, #attach::before, .con2_outer::before,.con2_outer::after,.con3_outer::before,.con3_outer::after,#page_title .title_img::after,article .width_1280-max::before,div#contents1::before,div#contents1::after,div#contents3::before,#contents2::before,div#contents2::after,#page_title .title_img::after,#contents::before,.img5::before, .img6::before, .img7::before,div#left::before,div#right::before,div#intro_wrap::before,div#intro_wrap::after,#contents2_wrap::before{
    content: '';
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    z-index: 1;
}
/*装飾に便利な疑似クラス設定*/
/*top■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
header {
    background: transparent;
    position: fixed !important;
    z-index: 2;
    width: 100%;
}
.topimg01 {
    object-fit: cover;
    width: calc(100% - 100px);
    height: calc(95vh - 100px);
    box-sizing: border-box;
    top: 50%;
    position: absolute !important;
    transform: translate(-50%, -50%);
    left: 50%;
    padding: 40px 20px 20px;
    z-index: 0;
}

#main_img {
    height: 105vh;
    background: var(--black);
}


#main_img::before {
    width: calc(100% - 90px);
    height: calc(95vh - 90px);
    background-image: url(dup/img/item02.png),url(dup/img/item03.png),url(dup/img/item04.png),url(dup/img/item01_a.png),url(dup/img/item01_b.png),url(dup/img/tab.png);
    background-position: bottom 0px left 0px,top 40% left 5px,bottom -30px right 0px,bottom 5px left 5px,bottom 5px right 5px,top 4px left 23px;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    background-size: 10%,auto 40%,10% ,8%,8%,auto 30px;
}

#main_img::after {
    width: calc(100% - 140px);
    height: calc(95vh - 140px);
    top: calc(50% + 10px);
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    border-bottom: solid 1px var(--white);
    box-shadow: 0px -20px 0px -1px var(--white);
}

.catch img {
    max-width: 800px;
    width: 50%;
    position: absolute;
    top: 50%;
    right: calc(70px + 4%);
    transform: translate(0%,-60%);
    mix-blend-mode: screen;
}
#top_contents1 {
    margin: 0;
    background: var(--black);
    padding: 100px 0;
}
#top_contents1 .info_title {
    top: -50px;
    left: -7%;
    width:80%;
}
.con1_txt_wrap {
    padding-right: 130px;
    padding-left: 130px;
}
span.con2_bg {
    opacity: 0.4;
}

.passing.move .box_txt1 {
    padding: 0;
    margin-left: 5px;
}
/*top■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

/*sub■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

#top_about .cms_title h3{
    position: relative;
    z-index: 1;
}
#top_about .cms_title p{
    width: 300px;
    margin: -110px auto;
}
#top_about .box_txt1 span {
  position: relative;
  z-index: 1;
  color:var(--white);
}

#top_about .cms_box_wrap {
    margin-top: 150px;
}
#top_about .cate_box figure {
    text-align: center;
}


/*コード集about-------------------------------------------*/
.passing .passing-bar {
    position: relative;
    display: inline-block;
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.passing .passing-bar:before {
    content: '';
    display: inline-block;
    width: 0;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    background: var(--white);
}
.passing.move .passing-bar:before {
    -webkit-animation: passing-bar 1s ease 0s 1 normal forwards;
    animation: passing-bar 1s ease 0s 1 normal forwards;
}
.passing .passing-txt {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
	padding: 5px 15px;
}
.passing.move .passing-txt {
    -webkit-animation: passing-txt 0s ease .5s 1 normal forwards;
    animation: passing-txt 0s ease .5s 1 normal forwards;
    background-color: var(--black);
    color: var(--white);
}
@-webkit-keyframes passing-bar{
	0% {left: 0;right: auto;width: 0;}
	50% {left: 0;right: auto;width: 100%;}
	51% {left: auto;right: 0;width: 100%;}
	100% {left: auto;right: 0;width: 0;}
}
@keyframes passing-bar{
	0% {left: 0;width: 0;}
	50% {left: 0;width: 100%;}
	51% {left: 0;width: 100%;}
	100% {left: 100%;width: 0;}
}
@-webkit-keyframes passing-txt{
	0% { opacity: 0; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes passing-txt{
	0% { opacity:0; }
	50% { opacity:0; }
	100% { opacity:1; }
}
/*コード集about-------------------------------------------*/



#cms_2-g .cate_title_wrap::before{
    content: '';
    display: none;}

#cms_2-g .sub_cate_title_wrap::before{
    content: '';
    position: absolute;
    display: inline-block;
    width: 1px;
    height: 100%;
    top: 20px;
    left: 0px;
    background-color: currentColor;
    opacity: 0.15;
    z-index: -1;
}

.title_wrap {
    max-width: inherit;
}
.sub_title {
    width: 50%;
    max-width: 300px;
    margin: -60px auto 30px;
}

.sub_img02 {
    width: 100%;
    max-width: 800px;
    margin: -150px auto 30px;
}

.sub_img03 {
    width: 50%;
    max-width: 800px;
    margin: -90px auto 30px;
}

.sub_img04 {
    width: 50%;
    max-width: 300px;
    margin: -83px auto 30px;
}
.sub_img05 {
    width: 50%;
    max-width: 300px;
    margin: -69px auto 30px;
}

.sub_img06 {
    width: 50%;
    max-width: 680px;
    margin: -77px auto 30px;
}
.sub_img07{
    max-width: 350px;
    margin: -60px auto 30px;}

.sub_img08{
    max-width: 550px;
    margin: -108px auto 30px;}

.sub_img09 {
    max-width: 400px;
    margin: -63px auto 30px;}
.sub_cate_title_wrap {
    position: relative;}
#cms_2-g .sub_cate_title_wrap .cate_txt2::before {
    content: '';
    position: absolute;
    display: inline-block;
    width: 1px;
    height: 100%;
    top: 20px;
    left: 0px;
    background-color: var(--black);
    opacity: 0.15;
    z-index: 0;}

#page_title .title_img::after {
    background: var(--black);
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0.3;}

.tel_wrap .txt_color1, .tel_wrap p, .tel_wrap a, .tel_wrap h3, .tel_wrap .border_so1-b, .tel_wrap .border_so1-r {
    color: var(--white);
    border-color: var(--white);
}

a.line_bnr {background: #6a6b6c;}
/*sub■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

/*all■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.logo_wrap {max-width: 250px;}
header { padding: 0px !important;}
header::before{display:none;}
div#header {
    padding-top: 10px;
    padding-bottom: 10px;}
body#body, #wrap {
    background: var(--black);
    background-color: #e6e9ed;
    opacity: 1;
    background-image: linear-gradient(#d8dce1 1px, transparent 1px), linear-gradient(to right, #d8dce1 1px, #e6e9ed 1px);
    background-size: 75px 75px;}
header{    transition: all 0.3s ease;}
header.scr_header {
    background-color: rgb(13 13 13 / 70%);
    transition: all 0.3s ease;}
div#bottom_tel .txt_color5 {
    color: var(--blue);}
p.footer_txt {color: var(--white);}
.footer_tel a {
    z-index: 0;
    position: relative;}
.time{display: none;}
#footer_info .info_title {
    opacity: 0.8;
    top: -5%;}

#pc_nav li a.active::before {bottom: -2px;}

ul.cate_list a {color: var(--white);}


/*bottom_tel*/
#bottom_tel .bottom_box{
vertical-align: middle;
    display: table-cell;
    width: 300px;    
    border:1px solid;
    border-color:var(--color1);    
}
#bottom_tel .bottom_box a:first-of-type{
    border-bottom: 1px solid;
    padding: 6px 0 15px;
    font-size: calc(1rem + 1px);
}
#bottom_tel .bottom_box a:last-of-type{
    padding-top: 10px;
    padding: 11px 0 9px;
}
#bottom_tel a {
    height: 24px;
    background-color: #f9f9f9;}
/*-------------------------------------------------------
				ローディング画面
-------------------------------------------------------*/

#loading{
	position: fixed;
	height: 100%;
	width: 100%;
	z-index: 999999;
	background-color: var(--black);
    top:0;
}


#loading img{width: 80%;max-width: 200px;z-index: 1;}

/*-------------------------------------------------------
				ローディング画面
-------------------------------------------------------*/


@media screen and (max-width: 768px){



.topimg01 {
    object-fit: cover;
    width: calc(100% - 50px);
    height: calc(65vh - 50px);
    box-sizing: border-box;
    top: 50%;
    position: absolute !important;
    transform: translate(-50%, -45%);
    left: 50%;
    padding: 20px 10px 10px;
    z-index: 0;
}

#main_img {
    height: calc(75vh + 150px);
    background: var(--black);
}



#main_img::before {
    width: calc(100% - 45px);
    height: calc(65vh - 45px);
    background-image: url(dup/img/item02.png),url(dup/img/item03.png),url(dup/img/item04.png),url(dup/img/item01_a.png),url(dup/img/item01_b.png),url(dup/img/tab.png);
    background-position: bottom 0px left 0px,top 20% left 2.5px,bottom -15px right 0px,bottom 2.5px left 2.5px,bottom 2.5px right 2.5px,top 2px left 11.5px;
    transform: translate(-50%, -45%);
    left: 50%;
    top: 50%;
    background-size: 10%,auto 40%,10% ,8%,8%,auto 15px;
}

#main_img::after {
    width: calc(100% - 70px);
    height: calc(65vh - 70px);
    top: calc(50% + 5px);
    left: 50%;
    transform: translate(-50%, -45%);
    z-index: 0;
    border-bottom: solid 1px var(--white);
    box-shadow: 0px -10px 0px -0.5px var(--white);
}

.catch img {
    max-width: 800px;
    width: 60%;
    position: absolute;
    top: 50%;
    right: calc(50px + 0%);
    transform: translate(0%,-30%);
    mix-blend-mode: screen;
}


header.scr_header {background-color: transparent !important; }
.scr_header #header {
    background-color: rgb(13 13 13 / 70%) !important;
    transition: all 0.3s ease !important;}
#header{
    padding-top: 20px;
    padding-bottom: 10px;}
.con1_txt_wrap {
    padding-right: 50px;
    padding-left: 50px;}
#top_contents1 .info_title {
    top: -75px;
    left: 50%;
    transform: translateX(-50%);
}

.passing .passing-txt {padding: 5px 8px;}

#top_contents3 h3 {
    font-size: 22px;
    letter-spacing: 2px;
}

#footer_info .info_title {
    opacity: 0.2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -85%);
}

/*bottom_tel*/
#bottom_tel .bottom_box a:first-of-type {
    border-bottom: inherit;
    padding: inherit;
    font-size: inherit;}
#bottom_tel .bottom_box a:last-of-type {
    padding-top: inherit;
     padding: inherit; }
#bottom_tel .bottom_box{
    display: flex;
    width: 400px;
    height:48px;}
#bottom_tel a{
    height:  inherit;
    width:200px;
    line-height: 50px;}
#bottom_tel a:first-of-type{
    border-right:1px solid;
    border-color:var(--color_blue);}
#bottom_tel .bottom_box a:last-of-type{padding-top: 0;}

.footer_item {padding: 11px 30px;}
.sub_img02 {
    width: 100%;
    max-width: 600px;
    margin: -98px auto 30px;}
.sub_img03 {
    width: 77%;
    max-width: 800px;
    margin: -60px auto 40px;
}

.sub_img04 {
    width: 50%;
    max-width: 250px;
    margin: -70px auto 45px;
}
.sub_img05 {
    width: 50%;
    max-width: 280px;
    margin: -75px auto 48px;
}
div#cms_2-g .box_item_img {margin-bottom: 30px;}
.sub_img06 {
    width: 75%;
    max-width: 680px;
    margin: -60px auto 36px;}

.sub_img07 {
    max-width: 350px;
    margin: -60px auto 38px;}
.sub_img08 {
    max-width: 550px;
    margin: -90px auto 40px;
    width: 60%;}
    
.sub_img09 {
    max-width: 350px;
    margin: -55px auto 45px;
}
}

@media screen and (max-width: 667px){

#bottom_tel .bottom_box{width: 100%;}
#bottom_tel .bottom_box a:first-of-type{font-size:1rem;}
#bottom_tel .bottom_box a:first-of-type {font-size: 13px;}

#loading img {
    width: 50%;
    max-width: 100px;
    z-index: 1;
}

#footer_info .info_title {
    opacity: 0.2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -85%);
    position: absolute;
    width: 85%;
}

.sub_title {margin: -55px auto 20px;}
.sub_img09 {
    margin: -42px auto 20px;
    width: 65%;}
.sub_img08 {margin: -64px auto 20px;}

.sub_img07 {
    max-width: 300px;
    margin: -57px auto 20px;
    width: 70%;}
    
.menu_stick {
    top: 11px;
    color: var(--white) !important;}
    
.sub_img06 {
    width: 80%;
    margin: -33px auto 20px;}
.sub_img03 {
    margin: -28px auto 20px;
    width: 80%;}
.sub_img02 {
    width: 90%;
    margin: -64px auto 20px;}
.sub_img01 {width: 55%;}

.sub_img08 {
    margin: -65px auto 20px;
    width: 80%;
}


.topimg01 {
    object-fit: cover;
    width: calc(100% - 25px);
    height: calc(55vh - 25px);
    box-sizing: border-box;
    top: 50%;
    position: absolute !important;
    transform: translate(-50%, -45%);
    left: 50%;
    padding: 10px 5px 5px;
    z-index: 0;
}

#main_img {
    height: 65vh;
    background: var(--black);
	padding-top:50px;
}

#main_img::before {
    width: calc(100% - 22.5px);
    height: calc(55vh - 22.5px);
    background-image: url(dup/img/item02.png),url(dup/img/item03.png),url(dup/img/item04.png),url(dup/img/item01_a.png),url(dup/img/item01_b.png),url(dup/img/tab.png);
    background-position: bottom 0px left 0px,top 10% left 1.25px,bottom -7.5px right 0px,bottom 1.25px left 1.25px,bottom 1.25px right 1.25px,top 1px left 5.75px;
    transform: translate(-50%, -45%);
    left: 50%;
    top: 50%;
    background-size: 5%,auto 20%,5% ,4%,4%,auto 7.5px;
}

#main_img::after {
    width: calc(100% - 35px);
    height: calc(55vh - 35px);
    top: calc(50% + 0.5px);
    left: 50%;
    transform: translate(-50%, -44%);
    z-index: 0;
    border-bottom: solid 1px var(--white);
    box-shadow: 0px -5px 0px -0.25px var(--white);
}
.catch img {right: calc(50px - 6%);}
#top_contents1 {padding: 50px 0;}
#top_contents1 .info_title {
    top: -75px;
    left: 50%;
    transform: translateX(-50%);}
    
.con1_txt_wrap {
    padding-right: 20px;
    padding-left: 20px;}
#top_contents1 h3 {
    font-size: 23px;
    margin-top: 40px;
}
#top_contents1 .con1_img {
    margin-bottom: 50px;
}

#top_about .cms_title img {
    width: 80%;
    margin-top: 10%;
}
p.passing-txt {
    font-size: 16px;
}

#top_about h4.box_title1 {
    font-size: 20px;
}
nav#sp_nav a {
    color: var(--white);
}
#header_sns {
    background: var(--black);
}
}



/*20230210------------------------------------------------*/

#top_youtube .cms_title h3{
    position: relative;
    z-index: 1;}
#top_youtube .cms_title p {
    width: 335px;
    margin: -83px auto -115px;
}
#top_youtube .box_txt1 span {
  position: relative;
  z-index: 1;
  color:var(--white);}
#top_youtube .cms_box_wrap {
    margin-top: 150px;}
#top_youtube .cate_box figure {
    text-align: center;}

section#top_about .cms_box {margin-bottom: 150px;}

/* YouTube */
.yt {
    width: 100%;
    max-width: 1280px;
    margin-bottom: 150px;
    margin-top: 200px;
}
.video_cms {
    padding-bottom: 56.5%;
    height: 0 !important;
    width: 100% !important;
}
/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
/* YouTube */
.yt {
    width: 85%;
    max-width: 1280px;
    margin-bottom: 150px;
    margin-top: 175px;
}

section#top_about .cms_box {
    margin-bottom: 115px;
}

.video_cms {
    padding-bottom: 56.5%;
    height: 0 !important;
    width: 100% !important;
}
#top_youtube .cms_title p {
    width: 300px;
    margin: -75px auto -115px;}
}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
/* YouTube */
.video_cms {padding-bottom: 56.25%;}

.yt {
    width: 90%;
    max-width: 1280px;
    margin-bottom: 130px;
    margin-top: 165px;
}

section#top_about .cms_box {
    margin-bottom: 110px;
}
}