﻿/*video--------------------------------------------------------------------------*/
.video_wrap {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100vh;
}
video {
	min-width: 100%;
	min-height: 100vh;
	z-index: 1;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

/*タブレット*/
@media screen and (max-width: 768px){
#main_img{
    position: relative;
    height: auto!important;
    width: 100%;
    margin-bottom: 0px;
}        
 .video_wrap {
	position: static;
	overflow: hidden;
	width: 100%;
	height: auto;
	min-width: 100%;
}
video {   
	min-width: auto;
	min-height: auto;
	width: 100%;
	z-index: 1;
	position: static;
	top: 0%;
	left: 0%;
	-webkit-transform: translate(0%, 0%); 
	-ms-transform: translate(0%, 0%);
	transform: translate(0%, 0%); 
vertical-align: bottom;
}  
}
/*video--------------------------------------------------------------------------*/


/* color ---------------------------------------------------------------------------------------------*/
.txt_color_nomal{color: #59524d;}
.txt_color1,.hvr_txt_color1:hover{color: #FF9E03} /* メインカラー */
.txt_color2,.hvr_txt_color2:hover{color: #FFD18F} /* サブカラー */
.txt_color3,.hvr_txt_color3:hover{color: #b5b1ab} /* アクセントカラー1 */
.txt_color4,.hvr_txt_color4:hover{color: #eeeeee} /* アクセントカラー2 */
/* background-color */
.bg_color1,.hvr_bg_color1:hover{background-color: #FF9E03} /* メインカラー */
.bg_color2{background-color: #fff7eb} /* サブカラー */
.bg_color3,.hvr_bg_color3:hover{background-color: #b5b1ab} /* アクセントカラー1 */
.bg_color4,.hvr_bg_color4:hover{background-color: #eeeeee} /* アクセントカラー2 */
.hvr_bg_color2:hover{background-color: #FFD18F}
/* border-color ※!important */
.border_color1,.hvr_border_color1:hover{border-color: #FF9E03 !important}
.border_color2,.hvr_border_color2:hover{border-color: #FFD18F !important}
.border_color3,.hvr_border_color3:hover{border-color: #b5b1ab !important}
.border_color4,.hvr_border_color4:hover{border-color: #eeeeee !important}
/* color ---------------------------------------------------------------------------------------------*/

/* font ---------------------------------------------------------------------------------------------*/
body {font-family: 'Zen Kaku Gothic Antique',"游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-weight: 500;}
.font_bold {font-weight: 500;}

.opacity07,.opacity08{opacity:0.9;}
/* font ---------------------------------------------------------------------------------------------*/


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ top ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

/* main_img ---------------------------------------------------------------------------------------------*/
.catch {
    z-index: 2;
    width: 33%;
    font-weight: 500;
    line-height: 1.5;
    font-size: 50px;
    left: 4%;
    top: 46%;
    transform: translateY(-50%);
}

.catch_anim_02 {color: #ffeb00;}

#main_img::before {
    content: '';
    background: rgba(175,149,118,0.15);
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
}


span.catch_line02 {padding-left: 25px;}
span.catch_line01 {margin-left: -23px;}


/* main_img ---------------------------------------------------------------------------------------------*/

/* con ---------------------------------------------------------------------------------------------*/


#main_img .main_bg, #contents1 .con1_bg {
    background: linear-gradient(to bottom right, #ff9e03, #f3d582) !important;}

.intro_img {position: relative;}


.i01 {
    width: 221px;
    height: 246px;
    position: absolute;
    z-index: 2;
    background-size: contain;
    bottom: 8%;
    right: 3%;
    transform: rotate(12deg);
}

.i02 {
    width: 113px;
    height: 246px;
    position: absolute;
    z-index: 2;
    background-size: contain;
    background-repeat: no-repeat;
    bottom: 7%;
    left: 52%;
    transform: rotate(352deg);
}


.intro_wrap {
    background-image: url(dup/img/illust03.png);
    z-index: 0;
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 100%;
    position: relative;
}
    
.intro_title span{
    background: linear-gradient(transparent 75%, #ffe7cf 0);
    border-radius: 6px;
    font-weight: 500;}

.intro_txt {
    position: relative;
    z-index: 2;
    text-shadow: #fff 1px 1px 0, #fff -1px -1px 0,/*右下、左上*/ #fff -1px 1px 0, #fff 1px -1px 0,/*右上、左下*/ #fff 0px 1px 0, #fff 0-1px 0,/*右、左*/ #fff -1px 0 0, #fff 1px 0 0;
}

.intro_txt::before {
    content: '';
    background-image: url(dup/img/cone.png);
    position: absolute;
    width: 10%;
    height: 19%;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: -1;
    bottom: -4%;
    left: -8%;
    opacity: 0.5;
}

.con2_box {
    background: #ffffff;
    color: #59524d;}
    
.con2_title {
  border-top:solid 0px;
  border-bottom: solid 3px #ffe0c2;
  position: relative;
  padding-top: 0;
  padding-bottom: 10px;
}

.con2_title:after {
  position: absolute;
  content: " ";
  display: block;
  border-top:solid 0px;
  border-bottom: solid 3px #FF9E03;
  padding-top: 0;
  padding-bottom: 10px;
  bottom: -3px;
  width: 10%;
}

.con2_title:first-letter {
    color: #FF9E03;
    font-size: 30px;
    padding-right: 2px;
}

/* con ---------------------------------------------------------------------------------------------*/

/* cms_title ---------------------------------------------------------------------------------------------*/
p.cms_sub_title {font-weight: 600;}

.txt_anim1 span{
	position: relative;
	right: 20px;
	opacity: 0;
	transition: all .8s;
}
.txt_anim1 span.start{
	right: 0;
	opacity: 1;
}


.cms_3-b .box_item {padding-right: 0;}

/* cms_title ---------------------------------------------------------------------------------------------*/

/* 拡大 */
.zoomIn{
  animation-name:zoomInAnime;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
}

@keyframes zoomInAnime{
  from {
  transform: scale(0.6);
  opacity: 0;
  }

  to {
    transform: scale(1);
  opacity: 1;
  }
}

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ top ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ cms ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
section.bg_color1.pd_t-50px.pd_r-100px.pd_l-100px.pd_b-100px.pd_50px_sp.pd_l-20px_sp.pd_r-20px_sp {background: #fff8eb !important;}
span.page_title_bg {background: #fff8eb !important;}
#page_title .page_title_gradient {background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(255,248,235,1)) !important;}

/*linkStyle*/
a.linkStyle {
    color: #7a7266;
    border-bottom:solid 1px;
    transition: 0.5s;}
a.linkStyle:hover {
    color: #7a7266;
    border-bottom:solid 1px;}

nav#pc_nav li.d_none_tb a.txt_white {color: #59524d !important;}
/*#header .top li.d_none_tb a.txt_white {color: #ffffff !important;}*/
#header.headtrans .top li.d_none_tb a.txt_white {color: #59524d !important;}


section#page_title {color: #59524d;}
h4.box_title2{color: #7a7266;}
#cms_3-b h3.cate_title,#cms_6-a h3.cate_title {border-color: #ffd48e !important;}

/*【下線のみ】*/
#cms_2-a h3.cate_title {
    padding: 0;
    font-weight: 500;
    letter-spacing: 3px;
    border-bottom: solid 2px #ff8d00;
    border-top: 0px;
}

#cms_2-a h3.cate_title:first-letter {
    color: #FF9E03;
    font-size: 30px;
    padding-right: 2px;
}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ cms ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ all ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#header.headtrans {background-color: rgba(255,255,255,1);}

ul.footer_nav {position: relative;}


ul.footer_nav li {z-index: 2;}


ul.footer_nav::before {
    content: '';
    position: absolute;
    background-image: url(dup/img/illust03_b.png);
    width: 100%;
    height: 200px;
    background-position: top center;
    bottom: 0;
    background-repeat: no-repeat;
    background-size: 190% 100%;}

footer{position:relative;}

.i04 {
    width: 306px;
    height: 151px;
    position: absolute;
    z-index: 2;
    background-size: contain;
    background-repeat: no-repeat;
    top: -25%;
    right: 5%;
    transform: rotate(5deg);
}

h1#logo a {width: 280px;}
div#logo2 {
    width: 280px;
    margin: 0px auto 20px;}
    
div#loader img {width: 250px;}

.sub a{color: #59524d !important;}
.sub span.scroll_bar{background: #FF9E03 !important;}
.sub .scroll_u{background: #59524d !important}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ all ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/



/*==================================================
ボンッ、ヒュッ
===================================*/

/* 拡大 */
.zoomIn{
  animation-name:zoomInAnime;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
}

.i02{animation-duration:1s !important;}

@keyframes zoomInAnime{
  from {
  transform: scale(0.6);
  opacity: 0;
  }

  to {
    transform: scale(1);
  opacity: 1;
  }
}
/*==================================================
ボンッ、ヒュッ
===================================*/


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 768 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*タブレット*/
@media screen and (max-width: 768px){

h1#logo a {width: 250px;}
.intro_txt::before {bottom: -88%;}
.intro_img {z-index: 2;}
.i02 {display: none;}
.i01 {
    width: 150px;
    height: 167px;
    z-index: 2;
    bottom: 2%;
    right: 1%;}
.i04 {
    width: 200px;
    height: 98.7px;
    z-index: 2;
    top: -11%;
    right: 3%;}
.cate:last-of-type {margin-bottom: 0px !important;}
.cate_wrap:last-of-type {margin-bottom: 50px;}
}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 768 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/



/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 667 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*スマホ*/
@media screen and (max-width: 667px){
    
body#body {
    overflow: hidden;
}
    h1#logo a {width: 180px;}
    div#loader img {width: 180px}
    .i04 {
        width: 150px;
        height: 74px;
        z-index: 2;
        top: -7%;
        right: 3%;}
    
    section#page09 p {
        padding-left: 13px;
        letter-spacing: 1px;}
    div#logo2 {
        width: 250px;
        margin: 0px auto 10px;}
    .i01 {
        width: 100px;
        height: 111px;
        z-index: 2;
        bottom: 2%;
        right: 0%;}
.catch {
    width: 38%;
    left: 1%;}
    #main_img::before {background: rgba(175,149,118,0.32);}
    li.contact_bt {
        margin-right: 40px;
        margin-left: 0;}
    li.contact_bt a {
        padding: 5px 15px !important;}
    h1#logo a {width: 170px;}
    ul.footer_nav::before {
        content: '';
        position: absolute;
        background-image: url(dup/img/illust03_b_sp.png);
        width: 100%;
        height: 117%;
        background-position: top center;
        bottom: 0;
        background-repeat: no-repeat;
        background-size: 190% 100%;}
    .i04 {
            width: 146px;
            height: 69px;
            z-index: 2;
            top: -4%;
            right: 2%;
            transform: rotate(6deg) !important;}
    #page04 .contents_wrap {
        padding-left: 10px !important;
        padding-right: 10px !important;}
}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 667 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■  IE  ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*IE*/
@media all and (-ms-high-contrast: none){
#pc_nav a, .cate_list a, #footer .tel_bt a, #footer .contact_bt a {padding-top: 9px !important;}
body{overflow:hideen;}
.more a span.hvr_more_span, #page10 a {padding-top: 17px !important;}
ul.footer_nav::before {left: 0px !important;}
.pager li a {line-height: 60px !important;}
#cms_3-b .cate_title {padding-top: 9px !important;}
#cms_6-a .cate .cate_title {padding-top: 8px !important;}
.entry{padding-top: 17px !important;}
#contact_tel a{padding-top: 23px !important;}
#page09 a {
    padding-top: 0px !important;
    padding-bottom: 1px !important;}
}
    
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■  IE  ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


/*2022419*/

/*h1#logo a {*/
/*    padding: 20px;*/
/*}*/

/*#header.headtrans #logo a {*/
/*    padding: 20px 20px;*/
/*}*/