﻿/* ======================================================================================
　　all
======================================================================================== */
.load_logo {top: 48%;}
#wrap {opacity: 0;transition: all 5s;}
body {line-height: 1.8;font-family: 'Shippori Mincho B1', serif;}
.font_600 {font-weight: 600}
.font_16 {
    font-size: 15px;
}
.title_style {
    font-size: 30px;
    line-height: 1.7;
    letter-spacing: 17px;
}
.all_bg {
	z-index: -1;
	background-image: url("../dup/img/bg2.jpg");
	background-attachment: fixed;
	overflow: hidden;
}

/*--- mouse ------------------------------------*/
.cursor {
	width: 100px;
    height: 100px;
	z-index: 10001;
	position: fixed;
	top: 0;
	left: 0;
	pointer-events: none;
	transition: 0.8s opacity,;
	transition-property: opacity,background,width,height,transform;
	background-size: 100%;
	transform: scale(0.8);
	opacity: 0;
}
.cursor.active {
	transform: scale(1.8);
	opacity: 1;
}
.cursor.active.imo1{background-image: url("../dup/img/imo1_hover.png");}
.cursor.active.imo2{background-image: url("../dup/img/imo2_hover.png");}
.cursor.active.imo3{background-image: url("../dup/img/imo3_hover.png");}
.cursor.active.imo4{background-image: url("../dup/img/imo4_hover.png");}


/* ---------- header ---------- */
header {
	position: absolute;
    width: 100%;
    top: 0;
}
#header {
    max-width: 100%;
    padding: 40px 50px 0;
}
header #header #header_menu li a .jp, .index_header #header .tel a, .index_header #header .contact a, .top_cms1, .index_header #header .txt_color1 {
	color: #fff;
}
#header, #fix_bnr, .line_icon {
  opacity: 0;
  animation: header 0.8s ease-in-out 6.0s forwards;
}
#header.all {
    opacity: 1;
    animation: none;
}
@keyframes header{
  0% {
    opacity: 0;
    -ms-filter: blur(6px);
    filter: blur(6px);
  }
  100% {
    opacity: 1;
    -ms-filter: blur(0);
    filter: blur(0);
  }
}
header #header_menu {
	width: auto!important;
}
header #header #header_menu li a .jp {
    height: auto;
}
.index_header #header {
    justify-content: space-between;
}
.index_header #header #logo{
    width: 16.66667%!important;
    transform: translateX(10px);
    min-width: 202px;
    max-width: 250px;
}
.is-show .index_header #header #logo {
    width: 13.66667%!important;
    transform: none;
    min-width: 190px;
    max-width: 190px;
}
.index_header #header #header_menu li {
	max-height: 100%;
}
.header_info {
	margin-left: 0;
	width: auto!important;
}

.header_info .contact {
	padding-left: 29px;
}
.header_info .contact i {
	display: none;
}
.top_cms1{
	display: none;
}
.clone-nav .header_info {
    width: 62%!important;
}
.is-show{
	background-color: rgba(241,237,234,0.65);
}
.drawer-open .is-show {
    background-color: transparent!important;
}
.is-show #header {
    padding: 10px 50px 13px;
}
.is-show #header .tel a, .is-show #header .txt_color1, .is-show #header .contact a {
    color: #282828;
    border-color: #424242;
}
.all_header #header .menu_bt .bg_color1, .is-show .menu_bt .bg_color1, .is-show .drawer-hamburger-icon::after, .is-show .drawer-hamburger-icon::before, .drawer-hamburger-icon::after, .drawer-hamburger-icon::before {
    background-color: #242424!important;
}
.is-show .logo {
    padding: 10px 0;
    width: 48%!important;
}

.drawer-open .drawer-hamburger-icon, .all_header #header .drawer-hamburger-icon {
    background-color: transparent!important;
}
.drawer-open .is-show .drawer-hamburger-icon, .is-show .drawer-open .drawer-hamburger-icon{background-color: transparent!important;}
.drawer-open .drawer-hamburger-icon:before, .drawer-open .drawer-hamburger-icon::after{background-color: #333!important;}
.drawer-open a, .drawer-open #header .txt_color1{
	color: #333333!important;
}
.drawer-open #logo img, .is-show #logo img {
	opacity: 0;
}
.drawer-open #logo, .is-show #logo{
	background: url( "../dup/img/logo2.png" ) center / auto 100% no-repeat
}
.drawer-nav {
	height: 100%!important;
    margin-top: 0!important;
    background-color: rgb(241 239 237 / 92%);
}
.drawer-menu li a:hover {
	transition: all .5s;
}
.drawer-menu li a:hover {
	opacity: 0.6
}

/* ---------- footer ---------- */
#info .txt_color1 {color: #333333}
.sns_links img {height: 97%!important;}


/* ======================================================================================
　　top
======================================================================================== */
/* ---------- main_img ---------- */
#movie{
	height: 100%;
	width: 100%;
	z-index: 999999;
	top: 0;
	left: 0;
}
#movie video{
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}
.catch_wrap {
	z-index: 101;
    top: 52%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: all .5s;
}
.catch {
	display: block;
    color: #fff;
    font-size: 34px;
    line-height: 0;
    letter-spacing: 17px;
	text-shadow: 1px 1px 20px rgba(0,0,0,0.5);
}

#main_visual::before, #video::before {
	display: inline-block;
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
}
/*#wrap {
	background: url( "../dup/img/bg2.jpg" ) center / cover no-repeat;
	background-attachment: fixed;
}*/
#main_visual::before {
	z-index: 3;
	background: rgb(34 34 34 / 21%);
}
.main_item1_box  {
	opacity: 0;
	transition: all .8s;
	z-index: 2;
	width: 100%;
	height: 100%;
	background: url( "../dup/img/main_img_item1.png" ) center / auto 100% no-repeat;
}
.main_item2_box {
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    background: url(../dup/img/main_img_item2.jpg) center / cover no-repeat;
    position: absolute;
    margin: auto;
}
.line_icon {
    z-index: 99;
    bottom: 32px;
    right: 32px;
    width: 68px;
}
.line_icon.active img{
	-webkit-filter: invert(100%);
    filter: invert(100%);
}
.line_icon .line_more_txt {
    bottom: 16px;
    right: 79px;
    display: flex;
    align-items: center;
    height: 100%;
    text-align: right;
    white-space: nowrap;
    opacity: 1;
    /*transform: translateY(20px);
    transition: 0.5s cubic-bezier(0.22,0.61,0.36,1);*/
    font-size: 14px;
    letter-spacing: 3px;
}
/*.line_icon a:hover .line_more_txt {
    opacity: 1;
    transform: translateY(0);
}*/
.line_icon a {transition: 0.5s cubic-bezier(0.22,0.61,0.36,1);}
.line_icon a:hover{opacity: 0.5;}

/* ---------- contents ---------- */
#sec_con1 #video{
  width: 100%;
  height: 111vh;
  background: url(../dup/img/bg1.jpg) center center / cover no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: -1;
}
#sec_con1 #video video{
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
#sec_con1 {
    z-index: 3;
    height: 111vh;
    width: 100vw;
    overflow: hidden;
}
#video::before {
	background: rgba(0,0,0,0.4);
	z-index: 2;
}
#sec_con1 .title_wrap {
    z-index: 3;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
	box-sizing: border-box;
}
#main_visual .grad {
    left: 0;
    bottom: -1px;
    height: 61vh;
    background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(14,14,14,1));
    z-index: 10;
    opacity: 0.5;
}
#sec_con1 .grad {
    left: 0;
    top: -1px;
    height: 137px;
    background: linear-gradient(to top, rgba(0,0,0,0), rgba(14,14,14,1));
    z-index: 10;
	opacity: 0
}

#intro {
    height: 100%;
    max-height: 100%;
    padding-top: 83px;
    margin-bottom: 154px;
    margin-top: 0;
}
.intro_wrap {
    display: flex;
    justify-content: center;
    padding-bottom: 114px;
    max-width: 100%;
    padding-left: 7%;
}
#intro #intro_txt {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    -webkit-text-orientation: inherit;
    text-orientation: inherit;
}
#intro #intro_txt h2, #contents h2{
    font-size: 30px;
    letter-spacing: 5px;
    line-height: 1.6;
    font-weight: 600;
    position: relative;
}
#contents h2 {
	line-height: 1.8;
    color: #fff;
    margin-right: 0;
    -webkit-text-orientation: inherit;
    text-orientation: inherit;
}
#contents h2 .svg_box {display: none;}
.contents_box_wrap .con_box .img_txt {width: 191px;padding: 15px 0;}
.contents_box_wrap .con_box:nth-of-type(3) .img_txt {width: 220px;}

#intro #intro_txt h2::before {
    content: '';
    display: inline-block;
    width: 30vw;
    height: 30vh;
    background-image: url(../dup/img/item2.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    top: -46px;
    z-index: -1;
}
#intro #intro_txt p {
    height: 329px;
    line-height: 2.9;
    padding-top: 55px;
}
.intro_img1 {
    width: calc(100% - 30vw);
    margin: auto;
}
.con_btn a {
    border-bottom: 1px solid;
    color: #333333;
    padding: 20px 20px 15px;
    line-height: 1;
    width: 100%;
    text-align: center;
    max-width: 300px;
    border-radius: 0;
    box-sizing: border-box;
    transform: translateY(-95px);
    font-size: 16px;
}
.con_btn a:hover {
    opacity: 0.6;
}
.con_btn a i{transform: translateY(1px) rotate(90deg);}

#contents .back_color2::after {background: rgba(58,58,58,0.33)!important;}
#contents .back_color2::after {background: rgb(32 32 32 / 48%)!important;}
#contents .item1 {
	bottom: 0;
	right: 0;
	width: 39%;
	z-index: 2;
	pointer-events: none;
}
#contents .con_box {
    position: relative;
}
#contents .con_box:nth-of-type(2) {
    z-index: 2;
}
#contents .con_box:nth-of-type(3) {
    margin-top: -50px;
    z-index: 1;
}
.cms_title {
    background-image: none!important;
	margin-bottom: 25px;
}
.cms_title .bg-mask, .cms_title .title_box {
    background-color: transparent!important;
}
.cms_title .title_box {
	padding: 100px 0 50px!important;
}
.cms_title .title_box h2 {
    color: #333333;
    max-height: 100%!important;
    font-size: 30px;
	webkit-writing-mode: horizontal-tb!important;
    writing-mode: horizontal-tb!important;
	font-weight: 600;
}
.cms_bg {
    background: url(../dup/img/imo_bg_img.jpg) center / 800px repeat;
    padding-bottom: 100px;
    margin-top: 200px;
    margin-bottom: 24px;
}

/* ---------- top modal ---------- */
html.modalset{
	overflow: hidden;
}
.modal{
	display: none;
	width: 100%;
	height: 100vh;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 999999;
}
.modal-wrap {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	text-align: center;
	padding: 20px;
	overflow: hidden;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: none;
	overflow: -moz-scrollbars-none;
}
.modal-wrap::-webkit-scrollbar {
	display: none;
}
.modal-wrap:after {
	content: '';
	display: inline-block;
	vertical-align: middle;
	width: 1px;
	height: 100%;
}
.modal-bg{
	position: absolute;
	left: 0;
	top: 0;
	background: rgba(0,0,0,0.3);
	width: 100%;
	height: 100%;
}
.modal-box{
	width: 90%;
	box-sizing: border-box;
	display: inline-block;
	vertical-align: middle;
	position: relative;
}
.modal-box:before{
	content: "";
	display: block;
	background-color: #fff;
	box-sizing: border-box;
	width: 100%;
	height: 10%;
	position: absolute;
	bottom: 0;
	left: 50%;
	-ms-transform: translate(-50%,0);
	-webkit-transform: translate(-50%,0);
	transform: translate(-50%,0);
	z-index: 1;
}
.modal-box .inner{
	background: #fff;
	max-height: 500px;
    overflow: auto;
	-ms-overflow-style: none;
}
.modal-box .inner::-webkit-scrollbar {
	display:none;
}
.modal-box .inner > :first-child {
	margin-top: 0;
}

.modal-box .modal-close{
	cursor: pointer;
	position: absolute;
    top: 0;
    right: 0;
}
.modal-box .modal-close span{
	display: block;
	width: 50px;/*枠の大きさ*/
	height: 50px;/*枠の大きさ*/
	position: relative;
}

.modal-box .modal-close span::before, .modal-box .modal-close span::after{
	content: "";
	display: block;
	width: 100%;/*バツ線の長さ*/
	height: 2px;/*バツ線の太さ*/
	background: #000;
	transform: rotate(45deg);
	transform-origin:0% 50%;
	position: absolute;
	top: calc(14% - 1px);
	left: 14%;
}

.modal-box .modal-close span::after{
	transform: rotate(-45deg);
	transform-origin:100% 50%;
	left: auto;
	right: 14%;
}
.modal-open span{cursor: pointer;}



/* ---------- more ---------- */
.more_wrap {
    display: inline-block;
    transform: translateX(80px);
	cursor: pointer;
}
.cms_btn_wrap .more_wrap {
    transform: none;
}
.more_btn {
	width: 239px;
    text-align: right;
    line-height: 1;
	margin: auto;
	font-size: 14px;
}
#sec_con1 .more_btn {
	width: 382px;
}
.cms_btn_wrap .more_btn {
    width: 328px;
}
.more_btn span::before, .more_btn span::after {
    content: "";
    height: 1px;
    position: absolute;
    background: #fff;
}
.cms_btn_wrap .more_btn span::before, .cms_btn_wrap .more_btn span::after {
    background: #747474;
}
.more_btn span::before {
    top: 12px;
    left: 0px;
	width: 170px;
}
.more_btn span::after {
    width: 12px;
    height: 1px;
    top: 12px;
	left: 170px;
    -webkit-transform-origin: 0px 0.5px;
    transform-origin: 0px 0.5px;
    -webkit-transform: rotate(-150deg);
    transform: rotate(-150deg);
}
.more_btn:hover span::before {
    -webkit-animation: more_btn-before 0.8s ease forwards 0s;
    animation: more_btn-before  0.8s ease forwards 0s;
}
.more_btn:hover span::after {
    -webkit-animation: more_btn-after 0.8s ease forwards 0s;
    animation: more_btn-after 0.8s ease forwards 0s;
}
@-webkit-keyframes more_btn-before {
  from {
    width: 0;
    opacity: 0; }
  to {
    width: 170px;
    opacity: 1; } }

@keyframes more_btn-before {
  from {
    width: 0;
    opacity: 0; }
  to {
    width: 170px;
    opacity: 1; } }

@-webkit-keyframes more_btn-after {
  from {
    left: 0;
    opacity: 0; }
  to {
    left: 170px;
    opacity: 1; } }

@keyframes more_btn-after {
  from {
    left: 0;
    opacity: 0; }
  to {
    left: 170px;
    opacity: 1; } }

@-webkit-keyframes more_btn-before_sp {
  from {
    width: 0;
    opacity: 0; }
  to {
    width: 75px;
    opacity: 1; } }

@keyframes more_btn-before_sp {
  from {
    width: 0;
    opacity: 0; }
  to {
    width: 75px;
    opacity: 1; } }

@-webkit-keyframes more_btn-after_sp {
  from {
    left: 0;
    opacity: 0; }
  to {
    left: 75px;
    opacity: 1; } }

@keyframes more_btn-after_sp {
  from {
    left: 0;
    opacity: 0; }
  to {
    left: 75px;
    opacity: 1; } }


.txt_anim span{
	display: inline-block;
	opacity: 0;
	-webkit-transform: translateY(20px);
	-ms-transform: translateY(20px);
	transform: translateY(20px);
	transition:transform 0.1s ease;
}
.txt_anim span.start{
	opacity: 1;
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);
}

/* ======================================================================================
　　under
======================================================================================== */

.all main {
    padding-top: 0;
}
#page_title {
    height: 508px;
}
#page_title h2 {
    max-height: 100%;
    padding-top: 115px;
    padding-bottom: 20px;
    color: #fff;
    font-size: 23px;
} 
#page_title .back_color {
    background: transparent;
}
#page_title .back_color2{
    background-color: rgba(51,51,51,0.44)!important;
}
.cate_list li a {
    background-color: #dbd6cf;
}

/* ---------- cms1 ---------- */
.topcms_news_type2 .cate_box {
	width: 46.33333%!important;
	margin-right: 1.5%;
	margin-left: 1.5%;
	cursor: pointer;
	border-bottom: 1px solid #666;
	margin-bottom: 30px;
	box-shadow: 0 6px 12px rgb(0 0 0 / 0);
	/* padding: 20px; */
	/* border-radius: 20px; */
	/* background-color: #f5f5f5; */
}
.topcms_news_type2 .cate_box:hover {
	transform: translateY(-5px);
}
.topcms_news_type2 .cate_box .box_item {
	cursor: pointer;
}
.topcms_news_type2 .txt_height {
	height: 5em
}
.topcms_news_type2 .box_img1 {
	border-radius: 5px;
	background-color: #f9f7f6;
}
@media screen and (max-width: 768px){
.topcms_news_type2 .cate_box {width: 100%!important;}
.topcms_news_type2 .txt_height {height: 3em}
}


/* ---------- cms2 ---------- */
.cate img, .cate_box img {box-shadow: 0 2px 4px rgba(0,0,0,0)!important}

.top_cms_imo .cate_box {
	padding: 0 30px;
}
.top_cms_imo .img_box {
	padding-top: 144%;
}
.top_cms_imo .bg_color {
    background-color: #f3f1ee;
	background: url( "../dup/img/imo_bg_img.jpg" ) center / cover no-repeat;
    width: 80%;
    right: 0;
    top: 0;
}
.top_cms_imo .bg_color img {
	object-fit: cover;
    max-width: initial;
}
.top_cms_imo .imo_img {
    width: 75%;
    bottom: 15%;
    left: -2%;
    pointer-events: none;
}
.top_cms_imo .cate_box:nth-of-type(2) .imo_img {
    width: 65%;
}
.top_cms_imo .cate_box:nth-of-type(3) .imo_img {
    width: 70%;
}
.top_cms_imo .cate_box:nth-of-type(4) .imo_img {
    width: 70%;
}
.top_cms_imo .imo_title {
    top: -25px;
    right: 20px;
    font-size: 19px;
}
.top_cms_imo .imo_title span{
    background-color: transparent;
    padding: 8px 1px;
	transition: 0.8s cubic-bezier(0.77, 0, 0.18, 1) background-color;
}
.top_cms_imo .imo_txt {
    right: -8%;
    bottom: 8%;
	color: #c8b49d;
	font-size: 1.272222vw;
	line-height: 1.7;
}
.top_cms_imo .imo_motion {
	-webkit-transition: 0.8s cubic-bezier(0.77, 0, 0.18, 1) width, 0.8s cubic-bezier(0.77, 0, 0.18, 1) opacity;
    transition: 0.8s cubic-bezier(0.77, 0, 0.18, 1) width, 0.8s cubic-bezier(0.77, 0, 0.18, 1) opacity;
}
.top_cms_imo .img_box:hover .bg_color {
	width: 100%;
}
.top_cms_imo .img_box:hover .bg_color img {
    width: 100%;
    opacity: 1;
    -ms-filter: "alpha(opacity=100)";
    filter: alpha(opacity=100);
}
.top_cms_imo .img_box:hover .imo_hver_opa0 {
	opacity: 0
}
.top_cms_imo .img_box:hover .imo_title span {
	background-color: #e5ded6;
}

.promotion_video {
    background: url("../dup/img/loop_bg.png") repeat-x;
	background-size: 900px;
    background-position: 0 50%;
    -webkit-animation: bgroop 40s linear infinite;
    animation: bgroop 40s linear infinite;
}
@-webkit-keyframes bgroop {
    from {
        background-position: 0 50%;
    }
    to {
        background-position: -1956px 50%;
    }
}
@keyframes bgroop {
    from {
        background-position: 0 50% ;
    }
    to {
        background-position: -1956px 50%;
    }
}
.promotion_video .video_sample {
    width: 80%;
    max-width: 1000px;
    margin: auto;
}

/* ---------- cms3 ---------- */
#cms_3-c .box_txt1 {
    padding: 15px;
    background-color: rgb(226 219 211 / 56%);
}

/* ---------- cms4 ---------- */
main{
    overflow: hidden;
}
.about_type2 .cate_title {
	line-height: 1.7;
	position: relative;
}
.about_type2 .cate_title:before {
	content: '';
    position: absolute;
    display: inline-block;
    width: 80px;
    height: 1px;
    bottom: 10px;
    left: 5px;
    background-color: #333;
    z-index: -1;
}
.about_type2 .cate_box{
	position: relative;
}
.about_type2 .cate_box:nth-of-type(even){
	flex-direction: row-reverse;
}
.about_type2 .cate_box:before {
	content: '';
    position: absolute;
    display: inline-block;
    background-color: #e6dfd8;
    background: url(../dup/img/imo_bg_img.jpg) center / 781px repeat;
    width: 80vw;
    height: 90%;
    bottom: 10px;
    margin: 0 calc(50% - 50vw);
    z-index: -1;
}
.about_type2 .cate_box:nth-of-type(odd):before {	       
    left: 0px;    
}
.about_type2 .cate_box:nth-of-type(even):before {	        
    right: 0px;    
}
/* ----------mobile_sp ---------- */
@media screen and (max-width: 667px){
.about_type2 .cate_box:before {
    height: 95%;
    bottom: auto;
    top: 15px;
}
}


/* ======================================================================================
　　animation
======================================================================================== */

/* ---------- loading ---------- */
.load-blurTrigger,
.blurTrigger{
    opacity: 0;
}
.load-blur,
.blur{
  animation-fill-mode:forwards;
}
.load-blur{
    animation-duration: 5s;
    animation-name:load-blurAnime;    
}
.blur{
    animation-duration: 1s;
    animation-name:blurAnime; 
}
@keyframes load-blurAnime{
  from {
  filter: blur(10px);
  transform: translate(-50%,-50%) scale(1.05);
  opacity: 0;
  }

  to {
  filter: blur(0);
  transform: translate(-50%,-50%) scale(1);
  opacity: 1;
  }
}
@keyframes blurAnime{
  from {
  filter: blur(10px);
  transform: scale(1.02);
  opacity: 0;
  }

  to {
  filter: blur(0);
  transform: scale(1);
  opacity: 1;
  }
}

/* ---------- txt ---------- */
.catch .catch_txt, .txt_anim span{
	opacity: 0
}
.catch .catch_txt:nth-child(1), .txt_anim.start span:nth-child(1) {
  animation: blur 0.8s ease-in-out 0s forwards;
}
.catch .catch_txt:nth-child(2), .txt_anim.start span:nth-child(2) {
  animation: blur 0.8s ease-in-out 0.3s forwards;
}
.catch .catch_txt:nth-child(3), .txt_anim.start span:nth-child(3) {
  animation: blur 0.8s ease-in-out 0.6s forwards;
}
.catch .catch_txt:nth-child(4), .txt_anim.start span:nth-child(4) {
  animation: blur 0.8s ease-in-out 0.9s forwards;
}
.catch .catch_txt:nth-child(5), .txt_anim.start span:nth-child(5) {
  animation: blur 0.8s ease-in-out 1.2s forwards;
}
.catch .catch_txt:nth-child(6), .txt_anim.start span:nth-child(6) {
  animation: blur 0.8s ease-in-out 1.5s forwards;
}
.catch .catch_txt:nth-child(7), .txt_anim.start span:nth-child(7) {
  animation: blur 0.8s ease-in-out 1.8s forwards;
}
.catch .catch_txt:nth-child(8), .txt_anim.start span:nth-child(8) {
  animation: blur 0.8s ease-in-out 2.1s forwards;
}
.catch .catch_txt:nth-child(9), .txt_anim.start span:nth-child(9) {
  animation: blur 0.8s ease-in-out 2.4s forwards;
}
.catch .catch_txt:nth-child(10), .txt_anim.start span:nth-child(10) {
  animation: blur 0.8s ease-in-out 2.7s forwards;
}


/* ---------- scroll ---------- */
.js_anim_blur{
	opacity: 0;
}
.js_anim_blur.start {
    animation: blur 1s ease-in-out 0s forwards;
}
.intro_img1.js_anim_blur.start {
    animation-delay: 1s;
}
#contents .con_box:nth-of-type(1).js_anim_blur.start {
    animation-delay: 0s;
}
#contents .con_box:nth-of-type(2).js_anim_blur.start {
    animation-delay: 0.5s;
}
#contents .con_box:nth-of-type(3).js_anim_blur.start {
    animation-delay: 1s;
}

@keyframes blur {
  0% {
    opacity: 0;
    filter: blur(6px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

/* ======================================================================================
　　img clip
======================================================================================== */
:root{
    --grunge: polygon(0% 0%,2.1% 0.25%,5.22% 0.15%,7.94% -0.04%,11.24% 0.15%,14.2% 0.14%,16.55% 0.15%,18.29% 0.29%,19.88% 0.16%,22.68% -0.11%,25.54% 0.16%,28.52% 0.2%,31.78% 0.29%,37.26% 0.15%,41.43% -0.05%,45.1% 0.04%,49.09% 0.05%,53.92% 0.05%,59.51% 0.21%,62.76% -0.09%,66.35% 0.18%,69.08% -0.07%,71.63% 0.17%,75.19% 0.28%,79.54% 0.08%,85.57% 0.07%,89.88% 0.13%,94.3% 0.35%,99.89% 0.5%,100% 5.9%,100% 9.04%,99.89% 13.18%,99.78% 17.58%,99.89% 22.1%,99.89% 25.61%,99.99% 31.26%,99.9% 36.53%,99.78% 46.45%,99.79% 52.48%,99.9% 59.5%,100% 70.68%,99.9% 79.46%,99.9% 87.87%,100% 92.64%,100% 95.65%,100% 97.29%,100% 97.29%,100% 99.62%,94.44% 99.76%,88.17% 99.89%,83.49% 99.81%,80.9% 99.77%,77.57% 99.88%,74.71% 99.75%,70.7% 99.94%,66.66% 99.87%,60.44% 99.92%,54.6% 99.77%,50.27% 99.77%,46.19% 99.82%,41.05% 99.97%,38.16% 100.06%,35.48% 99.8%,32.54% 99.78%,29.5% 99.97%,25.42% 99.8%,20.72% 99.77%,17.36% 100.07%,13.09% 100.11%,7.11% 99.72%,3.56% 100.02%,0.35% 100.09%,0.18% 98.84%,0.05% 92.44%,0% 87.49%,0.01% 80.51%,0.09% 76.01%,0.05% 70.04%,0.1% 66.26%,0.1% 61.17%,0.05% 56.81%,0.11% 48.74%,0.2% 40.25%,0% 36.72%,0.15% 30.61%,0% 21.51%,0.1% 14.93%,0.1% 7.51%);
    --grunge-no-right: polygon(0% 0%,2.1% 0.25%,5.22% 0.15%,8.26% 0.11%,11.24% 0.13%,14.2% 0.09%,16.55% 0.12%,18.29% 0.1%,20.73% 0.12%,22.36% 0.1%,24.79% 0.04%,27.77% 0.2%,31.25% 0.04%,37.26% 0.15%,41.43% 0.45%,45.31% 0.29%,49.09% 0.3%,53.07% 0.3%,59.51% 0.21%,63.4% 0.29%,66.35% 0.18%,68.76% 0.56%,70.99% 0.3%,73.59% 0.28%,78.26% 0.58%,84.29% 0.45%,90.31% 0.51%,94.3% 0.35%,100% 0%,100% 100%,95.94% 100.01%,90.95% 100.02%,84.99% 100.06%,81.86% 100.02%,78.85% 100.25%,75.57% 100%,71.67% 100.19%,66.34% 99.87%,60.44% 100.17%,53.96% 99.9%,49.2% 100.15%,44.05% 100.07%,41.05% 99.97%,37.63% 100.06%,34.63% 100.05%,31.68% 100.15%,28.86% 99.97%,23.82% 99.8%,20.72% 99.77%,17.36% 100.07%,13.09% 99.98%,9.48% 100.02%,6.23% 99.89%,2.95% 100.09%,0% 100.12%,0.1% 94.35%,0.22% 89.96%,0% 87.2%,0.11% 82.17%,0.11% 76.65%,-0.11% 72.76%,0.1% 63.47%,0.1% 56.06%,0.21% 48.41%,0% 38.86%,0.11% 31.33%,0.11% 21.8%,0% 14.76%,0% 10.37%,0% 4.72%);
    --grunge-no-left: polygon(0% 0%,2.1% 0.25%,5.22% 0.15%,7.94% -0.04%,11.24% 0.15%,14.2% 0.14%,16.55% 0.15%,18.29% 0.29%,19.88% 0.16%,22.68% -0.11%,25.54% 0.16%,28.52% 0.2%,31.78% 0.29%,37.26% 0.15%,41.43% -0.05%,45.1% 0.04%,49.09% 0.05%,53.92% 0.05%,59.51% 0.21%,62.76% -0.09%,66.35% 0.18%,69.08% -0.07%,71.63% 0.17%,75.19% 0.28%,79.54% 0.08%,85.57% 0.07%,89.88% 0.13%,94.3% 0.35%,99.89% 0.5%,100% 5.9%,100% 9.04%,99.89% 13.18%,99.78% 17.58%,99.89% 22.1%,99.89% 25.61%,99.99% 31.26%,99.9% 36.53%,99.78% 46.45%,99.79% 52.48%,99.9% 59.5%,100% 70.68%,99.9% 79.46%,99.9% 87.87%,100% 92.64%,100% 95.65%,100% 97.29%,100% 97.29%,100% 99.62%,94.44% 99.76%,88.17% 99.89%,83.49% 99.81%,80.9% 99.77%,77.57% 99.88%,74.71% 99.75%,70.7% 99.94%,66.66% 99.87%,60.44% 99.92%,54.6% 99.77%,50.27% 99.77%,46.19% 99.82%,41.05% 99.97%,38.16% 100.06%,35.48% 99.8%,32.54% 99.78%,29.5% 99.97%,25.42% 99.8%,20.72% 99.77%,17.36% 100.07%,13.09% 100.11%,9.91% 100.02%,5.7% 100.02%,2.95% 100.09%,0% 100%);
    --grunge-bottom: polygon(0% 0%,100% 0%,100% 100%,97.3% 99.95%,94.87% 99.99%,91.79% 99.92%,88.15% 99.86%,84.55% 99.93%,81.8% 99.98%,77.82% 99.95%,74.41% 100.02%,71.63% 99.97%,68.43% 99.93%,65.97% 99.9%,63.59% 99.99%,61.3% 100.08%,59.25% 99.89%,56.77% 99.82%,54.12% 99.9%,51.61% 99.91%,47.98% 99.99%,43.87% 99.98%,40.18% 99.81%,37.13% 100%,33.76% 99.9%,30.74% 99.9%,28.24% 99.91%,25.72% 99.8%,23.43% 99.9%,21.07% 99.9%,18.34% 99.82%,15.95% 99.82%,12.5% 99.91%,8.65% 99.89%,5.53% 99.9%,3.18% 99.99%,0% 100%);
}

.gra_clip{
    -webkit-clip-path: var(--grunge);
    clip-path: var(--grunge);
}
.gra_clip_bottom {
    -webkit-clip-path: var(--grunge-bottom);
    clip-path: var(--grunge-bottom);
}
.gra_clip_no-right {
    -webkit-clip-path: var(--grunge-no-right);
    clip-path: var(--grunge-no-right);
}
.gra_clip_no-left {
    -webkit-clip-path: var(--grunge-no-left);
    clip-path: var(--grunge-no-left);
}




/* ======================================================================================
　　window size
======================================================================================== */

/* ---------- 1350px ---------- */
@media screen and (max-width: 1350px){
.intro_img1 {
    width: calc(100% - 17vw);
}
#contents .con_box:nth-of-type(1).js_anim_blur.start {
    padding-bottom: 44px;
}
.contents_box_wrap .con_box .img_txt {
    width: 171px;
}
#contents .con_box:nth-of-type(3) {
    margin-top: 0;
}
.contents_box_wrap .con_box:nth-of-type(3) .img_txt {
    width: 199px;
}
}
/* ---------- 1268px ---------- */
@media screen and (max-width: 1268px){
#intro #intro_txt {
    width: 84%;
}
#main_visual, #movie {
	max-height: 700px;
}
#movie.all{
    max-height: 100%;
}
#movie video {
	position: fixed
}
}
/* ---------- 1196px ---------- */
@media screen and (max-width: 1196px){
#intro #intro_txt h2 {
    margin-left: 20px;
}
#intro #intro_txt p {
	line-height: 2.3;
}
}
/* ---------- 1000px ---------- */
@media screen and (max-width: 1000px){
#header {
    padding: 40px 20px 0;
}
.index_header #header #logo {
    min-width: 167px;
}
.catch {
    font-size: 30px;
}
#contents .con_box:nth-of-type(2).js_anim_blur.start {
    padding-bottom: 20px;
}
.contents_box_wrap .con_box .img_txt {
    width: 162px;
}
.contents_box_wrap .con_box:nth-of-type(3) .img_txt {
    width: 182px;
}
}

/* ---------- 856px ---------- */
@media screen and (max-width: 856px){
html{
	font-size: 15px;
}
#intro #intro_txt p {
    line-height: 1.9;
}
}
/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
.font_2dw_tb {font-size: 14px;}
.all_bg {background-attachment: scroll;}
.cursor {display: none;}
#header {padding: 25px 20px 0;}
#intro #intro_txt p {line-height: 1.8;}

#main_visual, #movie {
    max-height: 509px;
}
.catch_wrap {
	top: 56%;
}	

.catch , #sec_con1 .title_wrap .title, #intro #intro_txt h2, #contents h2, .cms_title .title_box h2 {
    font-size: 22px;
}
#sec_con1 .title_wrap {
    padding: 100px 10px;
    width: 90%;
    margin: auto;
}
#sec_con1, #sec_con1 .title_wrap, #sec_con1 #video {
	height: 100%;
}
#intro {
    margin-bottom: 110px;
}
#intro #intro_txt h2::before {
    left: -61px;
}
.con_btn a {
    max-width: 203px;
    transform: translateY(-30px);
    font-size: 15px;
    margin-bottom: 50px;
}
.contents_box_wrap .con_box .img_txt {width: 150px;}
.modal_title_wrap{left: -35px;}
	
.cms_title {margin-bottom: 20px;}
.cms_title .title_box {padding: 70px 0 50px!important;}
.drawer-hamburger-icon, .drawer-hamburger-icon:after, .drawer-hamburger-icon:before {background-color: #ffffff!important;}

.promotion_video {background: none!important;}

/* cms */
.top_cms_imo .img_box {
    padding-top: 114%;
}
.top_cms_imo .bg_color {
    width: 90%;
}
.top_cms_imo .imo_img {
    left: 0%;
}
.top_cms_imo .imo_txt {
    font-size: 16px;
}
.top_cms_imo .img_box:hover .bg_color {
    width: 90%;
}
}


/* ---------- スマホ ---------- */
@media screen and (max-width: 667px){
html {
    font-size: 14px;
}
#header {
    padding: 8px 0px 0;
}
.is-show #header {
    padding: 3px 0px 8px;
}
.index_header #header #logo {
    min-width: 100px;
    max-width: 100px;
    width: auto!important;
    transform: none;
}
.logo img {
    width: 100%!important;
}
.drawer-menu {
	width: 90%;
    -webkit-writing-mode: horizontal-tb;
    -moz-writing-mode: horizontal-tb;
    -ms-writing-mode: horizontal-tb;
    writing-mode: horizontal-tb;
    text-align: center;
}
.header_info .contact {
    display: none;
}
.header_info, .clone-nav .header_info {
    margin-left: 0;
    width: 50%!important;
}
.index_header #header .tel {
    margin: 0;
}

.line_icon {
    z-index: 99;
    bottom: 23px;
    right: 23px;
    width: 49px;
}
.line_icon .line_more_txt {
    bottom: 13px;
    right: 59px;
    opacity: 1;
    transform: none;
    font-size: 12px;
    letter-spacing: 2px;
}

#movie {
    max-height: 100vh;
}
#movie video {
    position: absolute;
    height: 100vh;
    left: 0;
    top: 0;
    transform: none;
}
.catch_wrap {
    top: 49%;
}
#main_visual {
    max-height: 328px;
}
#main_visual .catch_wrap {
    top: 51%;
    width: 100%;
    text-align: center;
}
#main_visual .catch {
    letter-spacing: 8px;
    transform: translateX(15px);
}
.catch, .title_style{
	letter-spacing: 14px;
}
.catch, #sec_con1 .title_wrap .title, #intro #intro_txt h2, #contents h2, .cms_title .title_box h2 {
    font-size: 20px;
}
#intro {
    margin-bottom: 78px;
    padding-top: 35px;
}
#intro #intro_txt h2::before {
    left: -11px;
}
.intro_wrap {
    display: block;
    padding-bottom: 5px;
    padding-left: 0;
}
#intro #intro_txt {
	display: block;
    margin: auto;
    width: 95%;
    box-sizing: border-box;
}
#intro #intro_txt h2 {
    margin-left: 0;
}
#intro #intro_txt p {
    height: 100%;
    padding-top: 10px;
}
.intro_img1 {
    width: calc(100% - 11vw);
    margin-left: auto;
    margin-bottom: 46px;
}
.con_btn a {
    transform: translateY(-36px);
    margin-bottom: 30px;
}

.modal-box{width: 100%;top: 5%;}
.modal-box:before{height: 5%;}
.modal_title_wrap{left: -20px;}

.more_wrap {
    transform: none;
}
#sec_con1 .more_btn {
    width: 260px;
}
.cms_btn_wrap .more_btn {
    width: 193px;
}
#contents .back_color2 .contents_box_wrap {
    width: 90%!important;
    margin: auto;
}
.contents_box_wrap .con_box .img_txt {
    width: 128px;
}
.contents_box_wrap .con_box:nth-of-type(3) .img_txt {
    width: 152px;
}
#contents h2 {
    margin-bottom: 50px;
    position: relative;
    padding-bottom: 20px;
    text-align: center;
    font-size: 20px;
}
#contents h2::before {
    position: absolute;
    content: "";
    width: 77px;
    height: 2px;
    left: 0;
	right: 0;
    bottom: -1px;
    background-color: #974a76;
    margin: auto;
}
.contents_box_wrap .con_box {
    opacity: 0;
    padding: 12px;
    margin-bottom: 30px;
}
#contents .item1 {
    width: 53%;
}
	
.more_btn {
    width: 135px;
    font-size: 13px;
}
.more_btn span::before {
    width: 72px;
}
.more_btn span::after {
    left: 72px;
}
.more_btn:hover span::before {
    -webkit-animation: more_btn-before_sp 0.8s ease forwards 0s;
    animation: more_btn-before_sp  0.8s ease forwards 0s;
}
.more_btn:hover span::after {
    -webkit-animation: more_btn-after_sp 0.8s ease forwards 0s;
    animation: more_btn-after_sp 0.8s ease forwards 0s;
}

#top_cms {padding: 0 20px;}
.cms_bg {background-size: 300px;margin-top: 113px;padding-bottom: 40px;}
.about_type2 .cate_box:before {background-size: 300px;}
.cms_title { margin-bottom: 10px;}
.cms_title .title_box {padding: 50px 0 50px!important;}
.promotion_video .video_sample {width: 90%;}

#page_title {height: 450px;}
#page_title h2 {padding-top: 36px;font-size: 19px;}

/* cms */
.top_cms_imo .img_box {
    padding-top: 150%;
}
.top_cms_imo .bg_color::before {
    display: inline-block;
    content: "more";
    position: absolute;
    bottom: 30px;
    right: 0;
    left: 0;
    margin: auto;
    color: #fff;
    text-align: center;
    z-index: 2;
    opacity: 0;
}
.top_cms_imo .img_box:hover .bg_color::before {
    opacity: 1;
}
.top_cms_imo .imo_title {
    font-size: 16px;
    right: 12px;
}
.top_cms_imo .imo_img {
    bottom: 26%;
}
.top_cms_imo .cate_box {
    padding: 0px 10px;
}
.top_cms_imo .imo_txt {
    font-size: 13px;
}

#cms_3-c .box_title1, #cms_3-c .box_title2, .cms_3-c .box_title1, .cms_3-c .box_title2 {
    font-size: 15px;
}
#cms_3-c .box_txt1, .cms_3-c .box_txt1 {
    padding: 5px;
    margin-top: 9px;
    font-size: 13px;
}
}


/* fix_bnr */
#fix_bnr {
    bottom: 32px;
    left: 31px;
    width: 33%;
    width: 361px;
    transition: 0.5s;
	z-index: 99;
}
@media screen and (max-width: 768px){
#fix_bnr {width: 50%!important;}
#fix_bnr.close{transform: translateX(-111%);}
}
@media screen and (max-width: 667px){
#fix_bnr {
    width: 73%!important;
    left: 11px;
    bottom: 10px;
}
}

.all_bg {
    z-index: -1;
    background-image: url(../dup/img/bg2.jpg);
    background-attachment: scroll;
    overflow: hidden;
    /* position: relative; */
    background-repeat: repeat;
    background-size: 100% auto;
    height: 100000000px;
    left: 0;
    top: 0;
}

/* YouTube */
.video_cms{
	padding-bottom: 56.25%;
	height: 0;
}
@media screen and (max-width: 667px){
.video_cms {padding-bottom: 56.25%;}
}