﻿/* all page */
/* color */
.txt_color1{color: #cca56c;} /* メインカラー */
.txt_color2{color: #f7f7f7} /* サブカラー */
.txt_color3{color: #D68834;} /* アクセントカラー1 */
.txt_color4{color: #cccccc} /* アクセントカラー2 */

/* background-color */
.bg_color1{background-color: #d6be9c;} /* メインカラー */
.bg_color2{background-color: #f7f7f7} /* サブカラー */
.bg_color3{background-color: #D68834;} /* アクセントカラー1 */
.bg_color4{background-color: #cccccc} /* アクセントカラー2 */

/* border-color ※!important */
.border_color1{border-color: #d6be9c;}
.border_color2{border-color: #f7f7f7}
.border_color3{border-color: #D68834;}
.border_color4{border-color: #cccccc}

.hvr_txt_color1:hover{color: #D68834;} /* メインカラー */
.hvr_bg_color1:hover {background-color: #cca56c;}
.hvr_bg_color3:hover{background-color: #D68834;} /* アクセントカラー1 */

.linkStyle{
    color: #722900;
    text-decoration: underline;
}

body, #intro, #contents, #top_cms, footer .footer_bg{
	background-color: #f5f5f5;
}

/* top ----------------*/

/* header */
header .nav_bg{
	border-radius: 50%;
}
header .nav_bg.trans{
	border-radius: 0;
}

/* main img */
#custom .custom_main{
	background-color: #E9E1D1;
	position: relative;
}
#custom .custom_video{
	width: 100%;
    max-width: 1450px;
    position: absolute;
    right: 0;
    top: 0;
	z-index: 3;
}
#custom .video_frame{
	width: 100.3%;
    height: 100.3%;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}
#custom .mainvisual .main_mask{
	-webkit-mask-image: url("../Dup/img/mask.png");
    mask-image: url("../Dup/img/mask.png");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: top;
    mask-position: top;
    -webkit-mask-size: 100%;
    mask-size: 100%;
    width: 100%;
}
#custom .mainvisual .main_IE{
    display: none;
}
#custom .object {
    width: 100%;
    height: auto;
    opacity: 0.4;
    z-index: 0;
    display: flex;
    flex-flow: column;
}
#custom .object img:first-child {
    width: auto;
    height: 100%;
    animation: slide1 60s -30s linear infinite;
}
#custom .object img:last-child {
    width: auto;
    height: 100%;
    animation: slide2 60s linear infinite;
}
@keyframes slide1 {
  0% {
    transform: translateY(100%);
  }
  to {
    transform: translateY(-100%);
  }
}
@keyframes slide2 {
  0% {
    transform: translateY(0);
  }
  to {
    transform: translateY(-200%);
  }
}

#custom .catch {
	width: 45%;
    bottom: 20px;
    left: 30px;
    z-index: 3;
}
#custom .main_logo {
	width: 20%;
    bottom: 20px;
    right: 30px;
    z-index: 3;
}

/* main */

/* intro */
#intro.trans .intro_left::before{
	content: "";
	background-image: url("../Dup/img/intro_nami.png");
	background-position: top right;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: calc(20% + 1px);
	height: 100%;
	position: absolute;
	top: 0;
	right: -20%;
	z-index: 5;
}

/* contents */
#contents .con_img{
	top: 0 !important;
	bottom: 0!important;
	left: 0!important;
	z-index: -1;
}
#contents .con_bg{
	width: 50% !important;
}
#contents .con_bg::before{
	content: "";
	background-image: url("../Dup/img/content_nami.png");
	background-position: top left;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: calc(20% + 1px);
	height: 100%;
	position: absolute;
	top: 0;
	left: -20%;
}
#contents2.trans .con_wrap{
	opacity: 1;
	right: 0;
}
#contents2 .con_img{
	top: 0 !important;
	bottom: 0!important;
	left: 0!important;
	z-index: -1;
}
#contents2 .con_bg{
	width: 50% !important;
}
#contents2 .con_bg::before{
	content: "";
	background-image: url("../Dup/img/content_nami.png");
	background-position: top left;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: calc(20% + 1px);
	height: 100%;
	position: absolute;
	top: 0;
	left: -20%;
}
#contents .con_box1::before{
    display: none;
}

/* topcms */
.more a{
	border-radius: 10px;
}

/* footer */
footer .footer_bg::before{
	content: "";
	background-image: url("../Dup/img/footer_nami.png");
	background-position: top left;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: calc(10% + 1px);
	height: 100%;
	position: absolute;
	top: 0;
	left: -10%;
	z-index: 3;
}
.footer_left #logo2{
    width: 250px;
}


/* under page */
#page_top{
    border-radius: 10px 10px 0 0;
}
#cms_2-b .cate_title ,#cms_2-b .cate_box ,#cms_6-a .cate_title ,#cms_6-a .box_wrap {
    border-radius: 5px;
}

/* cms1 */

/* cms2 */

/* cms3 */

/* cms4 */

/* cms5 */

/* page7 */

/* page8 */

/* page9 */

/* page10 */


/* IE */
@media all and (-ms-high-contrast: none){
    #contents2 .con_bg{
        top: 0;
    }
    #custom .mainvisual img{
        display: none;
    }
    #custom .mainvisual .main_IE{
        display: block;
    }
    
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
    #menu_stick, header .nav_bg{
        top: 10px;
        right: 10px;
    }
	#page_top{
		border-radius: 50% 0 0 0;
	}
	#custom{
		height: 600px !important;
	}
	#custom .custom_video{
		width: 95%;
	}
	#custom .catch{
		width: 55%;
	}
	#custom .main_logo {
		width: 30%;
	}
	#intro.trans .intro_left::before{
	    display: none;
	}
	#intro .intro_left::before{
		content: "";
		background-image: url("../Dup/img/intro_nami_tb.png");
		background-position: bottom;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: calc(10% + 1px);
		position: absolute;
		bottom: -10%;
		left: 0;
		z-index: 3;
	}
	#contents .con_img{
		z-index: 0;
	}
	#contents .con_bg{
		width: 100% !important;
	}
	#contents .con_bg::before{
		display: none;
	}
	#contents .con_wrap{
		position: relative;
		padding-bottom: 0;
	}
	#contents .con_wrap::before{
		content: "";
		background-image: url("../Dup/img/content_nami_tb.png");
		background-position: bottom;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: calc(10% + 1px);
		position: absolute;
		bottom: -10%;
		left: 0;
		z-index: 3;
	}
	#contents2 .con_wrap {
		transform: translate(0%,5%);
		z-index: 3;
	}
	#contents2 .con_img{
		z-index: 0;
	}
	#contents2 .con_bg{
		width: 100% !important;
	}
	#contents2 .con_bg::before{
		display: none;
	}
	#contents2 .con_wrap::before{
		content: "";
		background-image: url("../Dup/img/content_nami_tb.png");
		background-position: bottom;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: calc(10% + 1px);
		position: absolute;
		bottom: -10%;
		left: 0;
		z-index: 3;
	}
	#contents2 .con_img {
		height: 65vw;
		top: auto!important;
		bottom: -15px!important;
	}
	#contents2 .con_wrap{
		opacity: 1;
	}
	
}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
	#custom{
		height: 300px !important;
	}
	#custom .catch{
		bottom: 10px;
		left: 10px;
	}
	#custom .main_logo {
		bottom: 10px;
		right: 10px;
	}
	#intro .intro_left::before{
		height: calc(5% + 1px);
		bottom: -5%;
	}
	#contents .con_wrap::before{
		height: calc(5% + 1px);
		bottom: -5%;
	}
	#contents2 .con_wrap::before{
		height: calc(10% + 2px);
		bottom: -8%;
	}
	
}

