/*--------------------------------------------
 色 ・　文字
----------------------------------------------*/
:root{
    --color1: #003f8d;
    --color2: #ecfaff;
    --color3: #003f8d;
    --color4: #c1e0ff;
	--text: #111111;
	--black: #111111;
	--red: #C12326;
    --base: #ffffff;
    
    --font1: 16px;
    --font-jp: 'Noto Sans JP', "游ゴシック Medium", sans-serif;
    
    --wpc:50vw;/*動画の幅*/
    --wtb:70vw;/*動画の幅*/
    --wsp:90vw;/*動画の幅*/
    
    --btnw: 83px;/*ボタンの横幅*/
}
body a{
    transition: all 0.3s;
}
body a:hover{
    opacity: 0.7;
}

/* --------------------------------------------
 コンテンツ01～03
---------------------------------------------*/
#contents_wrap .con_txt P{
    max-height: 500px;
    letter-spacing: 0em;
}
/* タブレット */
@media screen and (max-width: 768px){
    #contents_wrap .con_txt P{
        max-height: 100%;
        overflow: scroll;
    }
}

/* --------------------------------------------
 動く文字
---------------------------------------------*/
.movefont::before {
	position: absolute;
	content: "";
    background-image: url("../dup/img/top_bg.png");
}

/* --------------------------------------------
 動画 イントロダクション
---------------------------------------------*/
.video_wrap{
    width: var(--wpc);
    height: calc(var(--wpc) * 0.61);
}
video{width: 100%;}

#intro .modal_box{padding: 50px 70px 30px;}
#intro .modal_box .over_box p{padding-bottom: 30px;}
#intro .modal_box .over_box{padding: 0px;}
#intro .modal_box .over_box_wrap::after{
    bottom: -1px;
    z-index: 1;
}

/* タブレット */
@media screen and (max-width: 768px){
    #intro .left{order:2;}
    #intro .right{order:1;}
    #intro .txt_wrap{padding: 70px 12% 0px;}
    .video_wrap{
        width: var(--wtb);
        height: calc(var(--wtb) * 0.61);
        margin: 0 auto;
    }
    
}
/* スマホ */
@media screen and (max-width: 667px){
    .video_wrap{
        width: var(--wsp);
        height: calc(var(--wsp) * 0.61);
    }
    #intro .right{
        width: 100%!important;
        margin: 0 auto;
    }
    #intro .modal_box{padding: 50px 30px 50px;}
}
/* --------------------------------------------
 メインイメージ 
---------------------------------------------*/
.catch {
    z-index: 2;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);/* X横 Y縦 始点が要素の中心になる */
    width: min(30%,850px);
}
.main_1{
    z-index: 2;
    bottom: 0%;
    left: 50%;
    transform: translate(-50%, 0%);/* X横 Y縦 始点が要素の中心になる */
    /*width: min(50%,900px);*/
    width: 100vw;
    height: 400px;
}
.main_1::before {
	position: absolute;
	content: "";
	left: 0;
	top: 0;
	width: 100%;
	height: 400px;
	background-image: url("../dup/img/main_1.png");
	background-size: auto 100%;
	background-position-y: 0;
	background-position-x: 0;
	background-repeat: repeat-x;
	animation: loop 30s linear infinite;
}
@keyframes loop {
	0% {background-position-x: 0;}
	100% {background-position-x: calc(-1 * 400px * 3);}
}
#pc_nav{
    /*z-index: 3;*/
    display: none;
}
/* タブレット */
@media screen and (max-width: 768px){
    #main_img{
        height: 100vh!important;
    }
    .catch {
        width: 37%;
    }
    .main_1{
        bottom: auto;
        top: 50%;
        /*width: 68%;*/
    }
}
/* スマホ */
@media screen and (max-width: 667px){
    .catch{
        width: 61%;
        top: 22%;
        left: 51%;
    }
    
    .main_1::before {
        height: 40vh;
        animation: loop 30s linear infinite;
    }
    @keyframes loop {
    	0% {background-position-x: 0;}
    	100% {background-position-x: calc(-1 * 40vh * 3);}
    }
}


/*--------------------------------------------
 背景にテクスチャ
----------------------------------------------*/
#contents_wrap .bg_container{
    background-image: url(./Dup/img/bg1.jpg);
    background-size: cover;
    background-position: top center;
}

/*--------------------------------------------
 幾何学模様の動き
----------------------------------------------*/
html,body{
	height: 100%;/*高さを100%にして描画エリアをとる*/
}

#particles-js{ 
	position:fixed;/*描画固定*/
	z-index:-1;/*描画を一番下に*/
	width: 100%;
	height: 100%;
	background-color:#fff;/*背景色*/
	/*background-image: url(./Dup/img/bg4.jpg);*/
	/*background-repeat: no-repeat;*/
 /*   background-size: contain;*/
 /*   background-position: bottom center;*/
}
/*#particles-js.under{*/
/*    background-image: none;*/
/*}*/
#wrapper{
	position: relative;/*描画を#particles-jsよりも上にするためposition:relative;を指定*/
	z-index: 1;/*z-indexの数字を大きくすることで描画を#particles-jsよりも上に*/
	width:100%;
	height: 100%;
}


/*--------------------------------------------
 フロー
----------------------------------------------*/
.flow_type3 .cate_box:nth-child(1){margin-top: 0px;}
.flow_type3 .cate{counter-reset: box;}
.flow_type3 .cate_box{counter-increment: box;}
.flow_type3 .box_item{padding-top: 60px;}
.flow_type3 .box_title1{z-index: 0}
.flow_type3 .box_title1::before, .flow_type3 .box_title1::after{
	position: absolute;
	content: "";
	display: block;
	pointer-events: none
}
.flow_type3 .box_title1{
    color: var(--color1);
}
.flow_type3 .box_title1::before {
	content: "0"counter(box);
	font-size: 86px;
	color: var(--color4);;
	left: 0;
	top: -70px;
	z-index: -1;
}
.flow_type3 .box_title1::after{
	width: 100%;
	height: 1px;
	bottom: 0;
	left: 0;
	background-color: #222
}
/*-------- スマートフォン --------*/
@media screen and (max-width: 667px){
.flow_type3 .box_title1::before{
	left: auto;
	right: 0;
	top: -50px
}
.flow_type3 .box_item {
    padding-top: 36px;
}
}
/*--------------------------------------------
 色 ・　文字
----------------------------------------------*/
html,body,.font_10,.font_11,.font_12,.font_13,.font_14,.font_15{font-size: var(--font1);}
.font_2up{font-size: max(calc(var(--font1) + 2px), calc(1rem  + 2px));}
.font_4up{font-size: max(calc(var(--font1) + 4px), calc(1rem  + 4px));}
.font_2dw{font-size: max(calc(var(--font1) - 2px), calc(1rem  - 2px));}
.font_4dw{font-size: max(calc(var(--font1) - 4px), calc(1rem  - 4px));}
.font_6dw{font-size: max(calc(var(--font1) - 6px), calc(1rem  - 6px));}

.linkStyle{
	color: var(--color1);
	text-decoration: underline;
	transition: all 0.3s;
}
.linkStyle:hover{
	opacity: 0.7;
	text-decoration: none;
}
.button_container span{
    background: var(--color1);
}
.button_container, .shop_link{
    width: 130px;
}
.shop_link a p{
    letter-spacing: 0em;
    width: 100%;
}
span.bg_box{
    background-color: transparent;
}
#intro,.page,.cms_1-g{
    background-color: rgba(255,255,255,0.8);
}
#top_cms1 .top_cms_title p, #top_cms2 .top_cms_title p{
    bottom: 20px;
}
/*.cms_1-g .date{max-width: 140px;}*/
#contents_links span.bg_box{
    background-color: transparent;
}

#contents_wrap .contents_inner{padding: 0 0% 0 10%;}

#page_title{
    background: none!important;
}
#page_title::before{
    background: transparent;
}
#cms_2-g .cate_title{
    color: var(--color1);
}
#contact_tel_wrap a{
    width: 310px;
    margin: 0 auto;
    color: var(--color1);
}

/* タブレット */
@media screen and (max-width: 768px){
    #intro .modal_bt{margin: 50px auto 0;}
    #contents_wrap .bg_container{
        padding: 0px 0 150px;
    }
    #contents_wrap .contents_inner{padding: 0 5%;}
}
/* スマホ */
@media screen and (max-width: 667px){
    #header #logo{width:calc(100% - var(--btnw) * 2)!important;    padding: 0 30px;}
    #header #nav_menu{width: calc(var(--btnw) * 2)!important;}
    #header #nav_menu .shop_link,.button_container{width: var(--btnw);}
    
    #top_cms1 .top_cms_title p, #top_cms2 .top_cms_title p{
        font-size: 45px;
    }
    .menu_box p{
        letter-spacing: 0em;
    }
    #contact_tel_wrap a{    width: 270px;}
}


/* color */
body, .txt_color_nomal, .hvr_txt_color_nomal:hover{color: var(--text);}
.linkStyle{transition: 0.5s;color: var(--text)}
.linkStyle:hover{opacity: 0.7}

.txt_white, .hvr_txt_white:hover{color: white;}
.txt_red, .hvr_txt_red:hover{color: var(--red);}
.txt_color1, .hvr_txt_color1:hover{color: var(--color1)} /* メインカラー */
.txt_color2, .hvr_txt_color2:hover{color: var(--color2)} /* サブカラー */
.txt_color3, .hvr_txt_color3:hover{color: var(--color3)} /* アクセントカラー1 */
.txt_color4, .hvr_txt_color4:hover{color: var(--color4)} /* アクセントカラー2 */

/* background-color */
.bg_white, .hvr_bg_white:hover{background-color: 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(--color3)} /* アクセントカラー1 */
.bg_color4, .hvr_bg_color4:hover{background-color: var(--color4)} /* アクセントカラー2 */
.bg_color_clear, .hvr_bg_color_clear:hover{background-color: transparent!important}


/* border-color ※!important */
.border_white, .hvr_border_white:hover{border-color: white}
.border_black, .hvr_border_black:hover{border-color: var(--black)}
.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)}