@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru:wght@400;500&display=swap');

@font-face {
font-family: "utsukushi";
  src: url("./Dup/img/utsukushi.otf") format("otf"),url("./Dup/img/utsukushi.woff") format("woff"),url("./Dup/img/utsukushi.woff2") format("woff2");}
  
:root{--font_utu: "utsukushi", "YuMincho", "MS PMincho","Hiragino Mincho Pro", "Sawarabi Mincho", "serif";}
:root{--font_zenkaku: 'Kiwi Maru', "Yu Gothic Medium", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, "MS PGothic", sans-serif !important;}


.con1_title,.intro_title, #contents .con_title,h3,h2,h4,h5,h6,.font_shippori{font-family:var(--font_utu);}
body, .font_sans-serif{font-family:var(--font_zenkaku) !important;}

p.intro_txt {line-height: 1.8;}

/* color ---------------------------------------------------------------------------------------------*/
:root{
    --color1:#f5d4d4;
    --color1_bg:#e8b9b9;
    --color2:#e5efe1;
    --color3:#ecc6a5;
    --color4:#f7f6f2;
    --color5:#f5d4d4;    
    --white:#FCFBF7;
    --black:#938677;
    --gray:#9b968f;
    --green:#cee5cd;
}

body,.txt_color_nomal,.hvr_txt_color_nomal:hover{color: var(--black);}
.txt_white,.hvr_txt_white:hover{color: var(--white);}
.txt_color1,.hvr_txt_color1:hover{color: var(--black);} /* メインカラー */
.txt_color2,.hvr_txt_color2:hover{color: var(--color3);} /* サブカラー */
.txt_color3,.hvr_txt_color3:hover{color: var(--color3);} /* アクセントカラー1 */
.txt_color4,.hvr_txt_color4:hover{color: var(--black);} /* アクセントカラー2 */
.txt_color5,.hvr_txt_color5:hover{color: var(--color5);} /* アクセントカラー2 */

.txt_color1_bg {
    color: #a87070;
    border-bottom: dotted 1px var(--color1_bg);
    margin-bottom: 30px;
}
/* background-color */
.bg_white,.hvr_bg_white:hover{background-color: var(--white)} /* 白背景 */
.bg_black,.hvr_bg_black:hover{background-color: var(--black);} /* 黒背景 */
.bg_color1,.hvr_bg_color1:hover{background-color: var(--color1_bg);} /* メインカラー */
.bg_color2,.hvr_bg_color2:hover{background-color: var(--color2);} /* サブカラー */
.bg_color3,.hvr_bg_color3:hover{background-color: var(--color1_bg);} /* アクセントカラー1 */
.bg_color4,.hvr_bg_color4:hover{background-color: var(--color4);} /* アクセントカラー2 */
.bg_color5,.hvr_bg_color5:hover{background-color: var(--color3);} /* アクセントカラー2 */
.bg_color_clear,.hvr_bg_color_clear:hover{background-color: transparent!important;}
/* border-color ※!important */
.border_white,.hvr_border_white:hover{border-color: var(--white);}
.hvr_border_black:hover{border-color: var(--black);}
.border_black{border-color: var(--gray);}
.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);}
.border_color5,.hvr_border_color5:hover{border-color: var(--color5);}

.linkStyle{color: var(--color1_bg);
          border-bottom:solid 1px;
}
body#body {
    background: var(--white);
}
/* color ---------------------------------------------------------------------------------------------*/

/*装飾に便利なposi_rel*/
#contents_box,#contents1,#contents2,#contents3,#contents,.con1_outer, .con2_outer, .con3_outer,.img5, .img6, .img7,div#left,div#right,div#intro_wrap,#contents2_wrap{position: relative;}
/*装飾に便利なposi_rel*/
/*装飾に便利な疑似クラス設定*/
#main_img::before, #main_img::after, #contents_box::before, .con1_outer::after, #attach::before, .con2_outer::before,.con2_outer::after,.con3_outer::before,.con3_outer::after,#page_title .title_img::after,article .width_1280-max::before,div#contents1::before,div#contents1::after,div#contents3::before,#contents2::before,div#contents2::after,#page_title .title_img::after,#contents::before,.img5::before, .img6::before, .img7::before,div#left::before,div#right::before,div#intro_wrap::before,div#intro_wrap::after,#contents2_wrap::before{
    content: '';
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    z-index: 1;
}
/*装飾に便利な疑似クラス設定*/


/*border-radius----------------------------------------------------------------*/
.normal_img img, .rectangle_img, square_img,.box_wrap, ul.pager li a,section#page10 ul li a,#contact_mail a,#contact_tel a { border-radius: 5px;}
ul.cate_list li a,.contact_bt a,.more a,.foot_tel_bt a,.free_bt a{border-radius: 5px;}
/*border-radius----------------------------------------------------------------*/

/*top■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
span.catch img {
    max-width: 600px;
    position: absolute;
    bottom: 10%;
    left: 5%;
    transform: translate(6%,-16%);
    z-index: 2;
}
span.item01 img {
    max-width: 300px;
    width: 50%;
    position: absolute;
    transform: translate(6%,-16%) rotate(356deg);
    z-index: 2;
    bottom: 13%;
    left: -11%;
}
span.item02 img {
    max-width: 280px;
    position: absolute;
    bottom: 0%;
    left: 50%;
    transform: translate(-75%,1%) rotate(345deg);
    z-index: 2;
    opacity: 0.5;
}

span.item03 img {
    max-width: 280px;
    position: absolute;
    top: -5%;
    right: 40%;
    transform: translate(50%,0%);
    z-index: 2;
    opacity: 0.8;
}

#intro span.bg_box {
    background-color: transparent;
    background-image: url(dup/img/item05.png);
    background-repeat: no-repeat;
    max-width: 300px;
    height: 21%;
    width: 17%;
    background-size: contain;
    top: 11%;
    left: 1%;
    opacity: 0.7;}

#pc_nav {z-index: 2;}

#top_cms1 .top_cms_title h3, #top_cms2 .top_cms_title h3 {
    z-index: 2;
    transform: inherit;
    color: var(--black);
    font-size: 28px;
}
#contents_links .box_wrap .box a h4 {
    position: relative;
    background-color: rgba(255,255,255,0.7);
    padding: 10px 25px 14px;
    border-radius: 5px;
}
#top_cms1 .top_cms_title p, #top_cms2 .top_cms_title p {
    opacity: 0.8;
    color: var(--color2);
    font-size: 0;
    background-image: url(dup/img/item03.png);
    max-width: 180px;
    height: 100%;
    width: 50%;
    max-height: 180px;
    background-size: contain;
    padding: 50px 0;
    top: 50%;
    transform: translate(-50%, -50%);
    background-repeat: no-repeat;
}

/*拡大----------------------------------------*/
#contents_links span.bg_box {
    height: calc(100% + 400px);
    top: -150px;
    right: -50%;
    border-radius: 51% 49% 48% 40% / 46% 44% 35% 40%;
    width: 85%;
}

#contents_links span.bg_box {
animation:scale 15s linear infinite;
}

@keyframes scale {

 0% {transform:scale(1);}
 50% {transform:scale(1.1);}
 100% {transform:scale(1);}
}

}
/*拡大----------------------------------------*/

/*上下に揺らす----------------------------------------*/

#intro span.bg_box{
  animation: img_box_9955 4s linear infinite;
  transform-origin: 50% 50%;
  margin: 1rem 0 !important;}

 
@keyframes img_box_9955 {
  0% { transform: translateY(0) }
  33.33333% { transform: translateY(-8px) }
  66.66667% { transform: translateY(0) }
  100% { transform: translateY(0) }}



span.item01 img{
  animation: img_box_9954 10s linear infinite;
  transform-origin: 50% 50%;
  margin: 1rem 0 !important;}

 
@keyframes img_box_9954 {
  0% { transform:  translate(6%,-16%) rotate(356deg)}
  33.33333% { transform:  translate(6%,-12%) rotate(356deg) }
  66.66667% { transform:  translate(6%,-16%) rotate(356deg) }
  100% { transform:  translate(6%,-16%) rotate(356deg) }}


span.item02 img{
  animation: img_box_9953 10s linear infinite;
  transform-origin: 50% 50%;
  margin: 1rem 0 !important;}

 
@keyframes img_box_9953 {
  0% { transform: translate(-75%,1%) rotate(345deg);}
  33.33333% { transform: translate(-75%,-3%) rotate(345deg); }
  66.66667% { transform: translate(-75%,1%) rotate(345deg); }
  100% { transform: translate(-75%,1%) rotate(345deg);}}



span.item03 img{
  animation: img_box_9952 10s linear infinite;
  transform-origin: 50% 50%;
  margin: 1rem 0 !important;}

 
@keyframes img_box_9952 {
  0% {transform: translate(50%,0%);}
  33.33333% { transform: translate(50%,-5%); }
  66.66667% { transform: translate(50%,0%); }
  100% { transform: translate(50%,0%);}}

/*上下に揺らす----------------------------------------*/




/*top■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

/*all■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

.shop_link {
    box-sizing: border-box;
    border: solid 2px #f0e8e4;}
footer .bg_box {
    height: 400px;
    display: none;
}

footer {
    margin-top: 50px;
}

.bottom_wrap {
    background: var(--black);
}

.map {
    margin-bottom: -13px;
}
p#page-top a {
    color: var(--color1_bg);
}
/*all■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

/*sub■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

p.privacy2 a {color: var(--black);}
#page_title h2 span.font_anim {line-height: 0.7;}

 /* 丸み・やさしさ */
 /* 【背景色のみ】*/
section#cms_2-f .cate {
    background: var(--color4);
    border: solid 2px #f0e8e4;
    border-radius: 5px;
}

 /* 丸み・やさしさ */
section#cms_2-b .cate_title,section#cms_3-b .cate_title {
    background-color: var(--color1_bg) !important;
    color: var(--white);
    border-radius: 5px;
    border:solid 0px #f0e8e4;
    padding-left:15px;}
section#cms_2-b .cate_box,.cms_2-b .cate_box,section#cms_3-b .cate_box {
    background: var(--color4);
    border:solid 2px #f0e8e4;
    border-radius: 5px;}
section#cms_2-b h3.box_title1,section#cms_3-b h3.box_title1 {border-bottom: dotted 2px var(--color1);}

#cms_3-b .box_title2{color:var(--black);}
.cms_3-b .cate_box,#cms_3-b .cate_box,.cms_2-b .cate_box,#cms_2-b .cate_box {padding: 20px;}
.cms_3-b .cate_box .box_txt1,#cms_3-b .cate_box .box_txt1, .cms_2-b .cate_box .box_txt1,#cms_2-b .cate_box .box_txt1{margin-bottom: 0;}

.cms_2-b .cate_box {
    margin: 10px !important;
    width: calc(25% - 20px) !important;
}
#cms_5-f .cate_box .open_bt .box_title1::before, .cms_5-f .cate_box .open_bt .box_title1::before { color: var(--black);}
#cms_5-f .cate_box .box_txt1, .cms_5-f .cate_box .box_txt1{background:var(--color4);}

#cms_5-f .cate_box .open_bt .box_title1::before, .cms_5-f .cate_box .open_bt .box_title1::before{content:"";}
#cms_5-f .cate_box .open_bt .box_title1, .cms_5-f .cate_box .open_bt .box_title1 {margin-left: 50px;}


.tel_txt {
    background: var(--color4);
    border:solid 2px #f0e8e4;
    border-radius: 5px;    
}
.tel_txt .opacity07 {
    opacity: 1;
}




@media screen and (max-width: 1280px){
span.catch img {
    max-width: 400px;
    width: 50%;
    position: absolute;
    bottom: 23%;
    left: 6%;
    transform: translate(6%,-16%);
    z-index: 2;
}
}


/*タブレット*/
@media screen and (max-width: 768px){
span.catch img {
    max-width: 300px;
    width: 50%;
    position: absolute;
    bottom: 8%;
    left: 1%;
    transform: translate(6%,-16%);
    z-index: 2;
}

span.item01 img {
    max-width: 100px;
    width: 50%;
    position: absolute;
    transform: translate(6%,-16%) rotate(356deg);
    z-index: 2;
    bottom: 13%;
    left: -8%;
}

span.item02 img {
    max-width: 120px;
    position: absolute;
    bottom: -6%;
    left: 51%;
    transform: translate(-75%,1%) rotate(345deg);
    z-index: 2;
    opacity: 0.5;
}

span.item03 img {
    max-width: 200px;
    position: absolute;
    top: -10%;
    right: 35%;
    transform: translate(50%,0%);
    z-index: 2;
    opacity: 0.8;
}

.button_container, .shop_link {
    height: 95px;
    width: 95px;}
    
#intro span.bg_box {
    background-color: transparent;
    background-image: url(dup/img/item05.png);
    background-repeat: no-repeat;
    max-width: 300px;
    height: 15%;
    width: 20%;
    background-size: contain;
    top: 3%;
    left: 2%;
    opacity: 0.7;}
    
#contents_links span.bg_box {
    height: calc(50% + 400px);
    top: 100px;
    right: -40%;
    border-radius: 51% 49% 48% 40% / 46% 44% 35% 40%;
    width: 85%;}
.map {margin-bottom: 0px;}
section#page_title {padding: 120px 0;}
}


/*スマホ*/
@media screen and (max-width: 667px){
.button_container, .shop_link {
    height: 68px;
    width: 71px;}
.shop_link {
    box-sizing: border-box;
    border: solid 2px #f0e8e4;
    background: var(--color4) !important;}
.shop_link a{color: var(--black) !important;}
h1#logo {padding: 15px 20px;}
section#page_title {padding: 80px 0;}
.map {margin-bottom: -8px;}
.overlay .menu_box {
    padding-top: 68px;
    padding-left: 35px;
    position: relative;
    width: 101vw;
    max-width: 101vw;
    margin-left: auto;
    backdrop-filter: inherit;
    background-color: rgb(252 251 247 / 90%);}
.menu_box p.linehight_2 {
    opacity: 0.9;
    margin-bottom: 20px;}
#top_cms1 .top_cms_title h3, #top_cms2 .top_cms_title h3 {
    font-size: 20px;
    letter-spacing: 1.5px;
    margin-bottom: 50px;}
#top_cms1 .top_cms_title p, #top_cms2 .top_cms_title p {
    background-image: url(dup/img/item03.png);
    max-width: 120px;
    height: 100%;
    width: 50%;
    max-height: 120px;
    background-size: contain;
    padding: 35px 0;}
h2.intro_title {
    font-size: 20px;
    letter-spacing: 1.5px;}    
    
span.item01 img {
    max-width: 50px;
    width: 50%;
    position: absolute;
    transform: translate(6%,-16%) rotate(356deg);
    bottom: 17%;
    left: -9%;}
span.catch img {
    max-width: 150px;
    width: 50%;
    position: absolute;
    bottom: 1%;
    left: 1%;
    transform: translate(6%,-16%);
    z-index: 2;
}
span.item02 img {
    max-width: 70px;
    position: absolute;
    bottom: -11%;
    left: 54%;
    transform: translate(-75%,1%) rotate(345deg);
    z-index: 2;
    opacity: 0.5;
}
span.item03 img {
    max-width: 90px;
    position: absolute;
    top: -13%;
    right: 38%;
    transform: translate(50%,0%);
    z-index: 2;
    opacity: 0.8;
}

footer {
    margin-top: 20px;
}
#page_title h2 span.font_anim {
    line-height: 1;
}

.txt_color1_bg {
    color: #a87070;
    border-bottom: dotted 1px var(--color1_bg);
    margin-bottom: 20px;
    font-size: 14px !important;
    padding: 0 0 5px;
    letter-spacing: 0px;
}
}


/*sub■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

/* フォントサイズ */

html {font-size: 17px;}

.font_10{font-size: 11px;}.font_11{font-size: 12px;}.font_12{font-size: 13px;}.font_13{font-size: 14px;}
.font_14{font-size: 16px;}.font_15{font-size: 17px;}.font_16{font-size: 18px;}.font_17{font-size: 18px;}
.font_18{font-size: 19px;}.font_19{font-size: 20px;}.font_20{font-size: 21px;}.font_21{font-size: 22px;}
/* フォントサイズ 基準値から+- */
.font_100per{font-size:-webkit-calc(1rem + 1px);font-size : calc(1rem + 1px);}
.font_200per{font-size:-webkit-calc(2rem + 1px);font-size : calc(2rem + 1px);}
.font_2up{font-size:-webkit-calc(1rem + 3px);font-size : calc(1rem + 3px);}
.font_4up{font-size:-webkit-calc(1rem + 5px);font-size : calc(1rem + 5px);}
/*タブレット*/
@media screen and (max-width: 768px){
/* フォントサイズ　タブレット */
.font_10_tb{font-size: 11px;}.font_11_tb{font-size: 12px;}.font_12_tb{font-size: 13px;}.font_13_tb{font-size: 14px;}
.font_14_tb{font-size: 15px;}.font_15_tb{font-size: 16px;}.font_16_tb{font-size: 17px;}.font_17_tb{font-size: 18px;}
.font_18_tb{font-size: 19px;}.font_19_tb{font-size: 20px;}.font_20_tb{font-size: 21px;}.font_21_tb{font-size: 22px;}
/* フォントサイズ 基準値から+- */
.font_100per_tb{font-size:-webkit-calc(1rem + 1px);font-size : calc(1rem + 1px);}
.font_200per_tb{font-size:-webkit-calc(2rem + 1px);font-size : calc(2rem + 1px);}
.font_2up_tb{font-size:-webkit-calc(1rem + 3px);font-size : calc(1rem + 3px);}
.font_4up_tb{font-size:-webkit-calc(1rem + 5px);font-size : calc(1rem + 5px);}
}
/*スマホ*/
@media screen and (max-width: 667px){
/* フォントサイズ　スマホ */
.font_10_sp{font-size: 11px;}.font_11_sp{font-size: 12px;}.font_12_sp{font-size: 13px;}.font_13_sp{font-size: 15px;}
.font_14_sp{font-size: 14px;}.font_15_sp{font-size: 16px;}.font_16_sp{font-size: 17px;}.font_17_sp{font-size: 18px;}
/* フォントサイズ 基準値から+- */
.font_100per_sp{font-size:-webkit-calc(1rem + 1px);font-size : calc(1rem + 1px);}
.font_200per_sp{font-size:-webkit-calc(2rem + 1px);font-size : calc(2rem + 1px);}
.font_2up_sp{font-size:-webkit-calc(1rem + 3px);font-size : calc(1rem + 3px);}

}




/*2023/02/17*/
.btn_container {
    margin-top: 20px;
    border-radius: 5px;
}



/*20230221-----------------------------------------------------*/
video {
    object-fit: cover;
    width: calc(100% - 300px) !important;
    height: calc(100vh - 200px) !important;
    box-sizing: border-box;
    top: 50%;
    position: absolute !important;
    transform: translate(-50%, -50%);
    left: 50%;
    min-width: inherit;
    min-height: inherit;
    border-radius: 15px;
}

span.catch img {
    max-width:32vw;
    position: absolute;
    bottom: 3%;
    left: 1%;
    transform: translate(6%,-16%);
    z-index: 2;
    /*filter: drop-shadow(2px 2px 0px var(--white));*/
}

span.item02 img {
    max-width: 200px;}



/*1400*/
@media screen and (max-width: 1400px){
    
span.catch img {bottom: 14%;}

video {
    object-fit: cover;
    width: calc(100% - 100px) !important;
    height: calc(100vh - 100px) !important;}
}

/*768*/
@media screen and (max-width: 768px){

video {
    box-sizing: border-box;
    top: 50% !important;
    position: absolute !important;
    transform: translate(-50%, -50%) !important;
    left: 50% !important;
    min-width: inherit !important;
    min-height: inherit !important;
    border-radius: 15px;
    object-fit: cover;
    width: calc(100% - 80px) !important;
    height: calc(430px - 80px) !important;
}

.video_wrap {
    width: inherit !important;
    height: inherit !important;
    min-width: inherit !important;
}

span.item02 img {
    max-width: 80px;
}
span.item03 img {
    max-width: 150px;}
    
span.catch img {
    max-width: 35vw;
    position: absolute;
    bottom: 10%;
    left: 1%;
    transform: translate(6%,-16%);
    z-index: 2;
    /*filter: drop-shadow(1px 0px 0px var(--white));*/
}
}

/*667*/
@media screen and (max-width: 667px){
video {
    box-sizing: border-box;
    top: 50% !important;
    position: absolute !important;
    transform: translate(-50%, -50%) !important;
    left: 50% !important;
    min-width: inherit !important;
    min-height: inherit !important;
    border-radius: 0px;
    object-fit: cover;
    width: calc(100% - 0px) !important;
    height: calc(210px - 0px) !important;
}

span.item03 img {
    max-width: 80px;
    top: -22%;
    right: 43%;
}
span.item02 img {
    max-width: 51px;
}

span.catch img {
    max-width: 43vw;
    position: absolute;
    bottom: 3%;
    left: 1%;
    transform: translate(6%,-16%);
    z-index: 2;
    /*filter: drop-shadow(0px 1px 0px var(--white));*/
}
}