﻿@charset "utf-8";
/* CSS Document */
/* color */
body,.txt_color_nomal{color: #1a1a1a;}
.txt_white{color: white;}
.txt_red{color: red;}
.txt_color1{color: #f39800} /* メインカラー */
.txt_color2{color: #f7f7f7} /* サブカラー */
.txt_color3{color: #f39800} /* アクセントカラー1 */
.txt_color4{color: #cccccc} /* アクセントカラー2 */

/* background-color */
.bg_white{background-color: white} /* 白背景 */
.bg_black{background-color: black} /* 黒背景 */
.bg_color1{background-color: #f39800} /* メインカラー */
.bg_color2{background-color: #f7f7f7} /* サブカラー */
.bg_color3{background-color: #f39800} /* アクセントカラー1 */
.bg_color4{background-color: #cccccc} /* アクセントカラー2 */
.bg_color_clear{background-color: transparent!important}


/* border-color ※!important */
.border_color1{border-color: #f39800}
.border_color2{border-color: #f7f7f7}
.border_color3{border-color: #f39800}
.border_color4{border-color: #cccccc}


/* hover ---------------------------------------------------------------------------------------------*/
/* color */
.hvr_txt_color_nomal:hover{color: #1a1a1a;}
.hvr_txt_white:hover{color: white;}
.hvr_txt_red:hover{color: red;}
.hvr_txt_color1:hover{color: #ffbe08} /* メインカラー */
.hvr_txt_color2:hover{color: #f7f7f7} /* サブカラー */
.hvr_txt_color3:hover{color: #02c4b5} /* アクセントカラー1 */
.hvr_txt_color4:hover{color: #cccccc} /* アクセントカラー2 */

/* background-color */
.hvr_bg_white:hover{background-color: white} /* 白背景 */
.hvr_bg_black:hover{background-color: black} /* 黒背景 */
.hvr_bg_color1:hover{background-color: #f3980085} /* メインカラー */
.hvr_bg_color2:hover{background-color: #f3980085} /* サブカラー */
.hvr_bg_color3:hover{background-color: #f3980085} /* アクセントカラー1 */
.hvr_bg_color4:hover{background-color: #cccccc} /* アクセントカラー2 */
.hvr_bg_color_clear:hover{background-color: transparent!important}


/* border-color ※!important */
.hvr_border_color1:hover{border-color: #ffbe08}
.hvr_border_color2:hover{border-color: #f7f7f7}
.hvr_border_color3:hover{border-color: #02c4b5}
.hvr_border_color4:hover{border-color: #cccccc}

#video{height: 100vh;}
#video video{
height: 100vh;
object-fit: cover;
top: 50%;
left: 50%;
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}

/*#video::before {
	content: "";
	display: block;
	position: absolute;
	background-image: url(./Dup/img/kc01.png);
	bottom: -17vw;
	left: 27vw;
	transform: translate(-50%, -50%);
	width: 40%;
	height: 70%;
	background-size: contain; 
	background-position: 50% 50%;
	background-size: 100%;
	background-repeat: no-repeat;
    z-index:4 ;
    filter:drop-shadow(5px 5px 5px #ccc);
}*/

#video::before {
	content: "";
	display: block;
	position: absolute;
	background-image: url(./Dup/img/kc01.png);
	top: 22%;
	left: 3%;
    width: 45vw;
    height: 20vw;
	background-size: contain; 
	background-size: 100%;
	background-repeat: no-repeat;
    z-index:4 ;
}

.border{
content: "";
	display: block;
	width: 100%;
	height: 101%;
	border: 20px solid white;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	box-sizing: border-box;
}
.video_wrap::before {
	content: "";
	display: block;
	position: absolute;
	background-image: url(./Dup/img/fv1.png);
	top: 0%;
	left: 0%;
    width: 45vw;
    height: 20vw;
	background-size: contain; 
	background-size: 100%;
	background-repeat: no-repeat;
    z-index:4 ;
}

.video_wrap::after {
	content: "";
	display: block;
	position: absolute;
	background-image: url(./Dup/img/fv2.png);
	bottom: -5px;
	right: 0%;
    width: 45vw;
    height: 20vw;
	background-size: contain; 
	background-size: 100%;
	background-repeat: no-repeat;
    z-index:4 ;
}


#intro h2 ::before {
	content: "";
	display: block;
	position: absolute;
	background-image: url(./Dup/img/con_img1.png);
	top: 0vw;
	left: 35vw;
	transform: translate(-50%, -50%);
	width: 8vw;
	height: 12vw;
	background-size: contain; 
	background-position: 50% 50%;
	background-size: 100%;
	background-repeat: no-repeat;
    z-index:4 ;
}

#logo img{
    max-width: 350px;
}

#intro .intro_left .font_2up{
    font-size: calc(1rem + 42px);
    color: #f3980052;
    margin-bottom:0px;
}

#contents .con_wrap {
    padding-top:0px;
}

.cate_list_title {
    color: #f39800;
}

#contents .con_no {
    font-size: 100px;
    color: #ffffff8a;
    margin-bottom: 0px;
}

#contents .con_no h2{
    font-size: calc(1rem + 15px);
}

.intro_wrap span{
    font-size: calc(1rem + 15px);
    color: #f39800;
}

#top_cms .cms_title h3{
    font-size: calc(1rem + 25px);
    color: #f39800;
    font-weight: bold;
}

.cate span{
    font-size: calc(1rem + 15px);
}

.sub_cate_title {
    font-size: calc(1rem + 8px);
}

.tel_box a{
        background-color: #f39800;
    color: #fff;
}

.tel_box a:hover {
    opacity: 0.5;
}

.box_title1 {
    font-size: calc(1rem + 5px);
}

#cms_2-a .cate_box {
    padding-bottom: 0px;
}

#page04 .sub_cate_txt2 {
    text-align: left;
}

#pc_nav a{
    font-size: calc(1rem + 8px);
}

footer .footer_bg {
    background-color: #fdeab4;
}

/*PC小用（1200px以下）
--------------------------------------------------------------------------*/
@media  screen and (max-width: 1200px){
    
#video::before{
    height: 32vw;
}
    #intro .intro_left .font_2up{
    font-size: calc(1rem + 11px);
}

.intro_wrap span{
    font-size: calc(1rem + 0px);
}
}

/*タブレット用（768px以下）
--------------------------------------------------------------------------*/
@media  screen and (max-width: 768px){
#custom,#video{ height: 40vh!important; }
#video video{
width: 100%!important;
height: 100%;
}

.video_wrap::after{
    bottom: -4px;
}

#video::before {
width: 40vw;
height: 26vw;
}

.border{
    border: none;
}

#intro h2 ::before {
    top: 0vw;
    left: 70vw;
    width: 17vw;
    height: 22vw;
}
}

/*スマホ用（667px以下）
--------------------------------------------------------------------------*/
@media  screen and (max-width: 667px){

#custom,#video{ height: 31vh!important; }

#video::before{
    width: 55vw;
    height: 36vw;
}

.video_wrap::after{
    bottom: -1px;
}

#intro .intro_left ::before {
    top: 70vw;
    left: 86vw;
    width: 20vw;
    height: 30vw;
}

#intro .intro_left .font_2up {
    font-size: calc(1rem + 26px);
}

#intro .intro_wrap span {
    font-size: calc(1rem + 8px);
    color: #f39800;
}

#intro .intro_left ::before{
    display: none;
}

#contents .con_title {
    font-size: calc(1rem + 10px);
}

#top_cms .cms_title h3{
    font-size: calc(1rem + 15px);
}

.cate_title {
    font-size: calc(1rem + 8px);
    font-weight: bold;
}

#top_cms .cms_box {
    margin-bottom: 20px;
}

.cate_list_title {
    font-size: 35px;
    font-weight: bold;
}

#page08 .tel_box  a{
    font-size: calc(1rem + 8px);
}

#pc_nav a{
    font-size: calc(1rem + 5px);
}
}

html{font-size: 16px;}
body{-webkit-text-size-adjust: 120%;font-size: 16px;}

.font_12{font-size: 14px;}
.font_14{font-size: 16px;}
.font_16{font-size: 18px;}
.font_18{font-size: 20px;}
.font_20{font-size: 22px;}
.font_22{font-size: 24px;}
.font_24{font-size: 26px;}
.font_26{font-size: 28px;}
.font_28{font-size: 30px;}
.font_30{font-size: 32px;}
.font_100per{
font-size: -webkit-calc(1rem + 2px);
font-size: calc(1rem + 2px);
}
.font_2up{
font-size: -webkit-calc(1rem + 4px);
font-size: calc(1rem + 4px);
}
.font_4up{
font-size: -webkit-calc(1rem + 6px);
font-size: calc(1rem + 6px);
}
.font_6up{
font-size: -webkit-calc(1rem + 8px);
font-size: calc(1rem + 8px);
}
.font_8up{
font-size: -webkit-calc(1rem + 10px);
font-size: calc(1rem + 10px);
}
.font_10up{
font-size: -webkit-calc(1rem + 12px);
font-size: calc(1rem + 12px);
}
.font_2dw{
font-size: -webkit-calc(1rem);
font-size: calc(1rem);
}

#cms_3-f .cate_text span {
    font-size: -webkit-calc(1rem + 2px);
    font-size: calc(1rem + 2px);
}

@media  screen and (max-width: 768px){
.font_12_tb{font-size: 14px;}
.font_14_tb{font-size: 16px;}
.font_16_tb{font-size: 18px;}
.font_18_tb{font-size: 20px;}
.font_20_tb{font-size: 22px;}
.font_22_tb{font-size: 24px;}
.font_24_tb{font-size: 26px;}
.font_26_tb{font-size: 28px;}
.font_28_tb{font-size: 30px;}
.font_30_tb{font-size: 32px;}
.font_100per_tb{
font-size: -webkit-calc(1rem + 2px);
font-size: calc(1rem + 2px);
}
.font_2up_tb{
font-size: -webkit-calc(1rem + 4px);
font-size: calc(1rem + 4px);
}
.font_4up_tb{
font-size: -webkit-calc(1rem + 6px);
font-size: calc(1rem + 6px);
}
.font_6up_tb{
font-size: -webkit-calc(1rem + 8px);
font-size: calc(1rem + 8px);
}
.font_8up_tb{
font-size: -webkit-calc(1rem + 10px);
font-size: calc(1rem + 10px);
}
.font_10up_tb{
font-size: -webkit-calc(1rem + 12px);
font-size: calc(1rem + 12px);
}
.font_2dw_tb{
font-size: -webkit-calc(1rem);
font-size: calc(1rem);
}
}

@media  screen and (max-width: 667px){
html{font-size: 15px;}
body{-webkit-text-size-adjust: 110%;font-size: 15px;}

.font_12_sp{font-size: 13px;}
.font_14_sp{font-size: 15px;}
.font_16_sp{font-size: 17px;}
.font_18_sp{font-size: 19px;}
.font_20_sp{font-size: 21px;}
.font_22_sp{font-size: 23px;}
.font_24_sp{font-size: 25px;}
.font_26_sp{font-size: 27px;}
.font_28_sp{font-size: 29px;}
.font_30_sp{font-size: 31px;}
.font_100per_sp{
font-size: -webkit-calc(1rem + 1px);
font-size: calc(1rem + 1px);
}
.font_2up_sp{
font-size: -webkit-calc(1rem + 3px);
font-size: calc(1rem + 3px);
}
.font_4up_sp{
font-size: -webkit-calc(1rem + 5px);
font-size: calc(1rem + 5px);
}
.font_6up_sp{
font-size: -webkit-calc(1rem + 7px);
font-size: calc(1rem + 7px);
}
.font_8up_sp{
font-size: -webkit-calc(1rem + 9px);
font-size: calc(1rem + 9px);
}
.font_10up_sp{
font-size: -webkit-calc(1rem + 11px);
font-size: calc(1rem + 11px);
}
.font_2dw_sp{
font-size: -webkit-calc(1rem - 1px);
font-size: calc(1rem - 1px);
}

#cms_3-f .cate_text span {
    font-size: -webkit-calc(1rem + 1px);
    font-size: calc(1rem + 1px);
}
}