﻿body,.en_font {
    /* font-family: lemonde-sans, "Noto Sans JP","游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; */
    /* font-family: 'Noto Serif JP', serif; */
}
h1, h2, h3, h4, h5, h6,.page10 .more a,footer .entry.more a{
        /* font-family: "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif"!important; */
}

/* ======================================================================================
　　color
======================================================================================== */
.linkStyle{color: #160a0a;transition: opacity .3s;text-decoration: underline;}
.linkStyle:hover{opacity: 0.7}

:root {
    --normal_color: #333333;
    --color1: #ec881f; /* メインカラー */
    --color2: #ededed; /* サブカラー */
    --color3: #f8cc09; /* アクセントカラー1*/
    --color4: #c9baa9; /* アクセントカラー2*/
}
.txt{
	color: var(--normal_color);
}

.bg_color1 {
    background: linear-gradient(to right, #1e90ff , #46d2be);
    background: linear-gradient(92deg, rgb(30 144 255) 14%, rgb(60 160 255) 28%, hsl(188deg 90% 61%)53%, rgb(70 210 190)93%);
    background: linear-gradient(to right, #ec881f 0%,#f8cc09 31%,#ec881f 57%,#ec881f 100%);
}
#loading_line{
    background: none;
    background-color: var(--color1);
}
.bg_color3 {
    background-color: #eeeeee;
    color: #191a1f;
}
.border_color4 {
    border-color: #505050;
}


/* ----------　all　---------- */
.linkStyle{
	color:#f8da18;
}
.linkStyle:hover{
	color:#f8da18;
	opacity: 0.7;
	transition: all 0.5s;
}
body, .txt_color_nomal {
    color: #191a1f;
}
#page-top p{
    position: relative;
}
.footer_cms,.footer_txt li a,.footer_txt p.font_4dw ,#copyright{
    color: #fff;
}



/* ======================================================================================
　　all
======================================================================================== */
.font_18up {
    font-size: -webkit-calc(1rem + 18px);
    font-size: calc(1rem + 18px);
}

#main .flex_column {
    flex-direction: unset;
}
#main .sns_link{
    width: 100%;
    justify-content: flex-end;
    top: 25px;
    right: 87px;
    transform: none;
}
#main .sns_link li{
    width: 50px!important;
}
#main .sns_link li img{
    width: 100%!important;
}

.g-menu .menu-content-nav .font_25up{
    font-size: 35px;
}
.g-menu-btn .dot span{
    background: #fff;
}
.g-menu-btn:after {
    border: 1px solid #fff;
    background: #1c1c1c;
}
#header {
    /* background: linear-gradient(to right, rgba(0, 122 ,229 ,0.65) , rgba(70, 210, 190 ,0.75)); */
    /* background: linear-gradient(21deg, rgb(70 210 190 / 83%) 17%, rgb(146 235 239 / 88%) 30%, rgb(30 144 255 / 75%)104%); */
    padding-top: 10px;
    padding-bottom: 10px;
    background: rgb(236 136 31 / 92%);
}
shop_info .info,.shop_info .contact,.cate_list p span{
    background: none!important;
    background-color: #0c0c0c!important;
}
footer.bg_color1 {
    background-image: url(./Dup/img/footer.jpg)!important;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
footer:before {
    content: "";
    display: block;
    position: absolute;
    background: rgb(12 12 12 / 78%);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
footer .f_info_wrap{
    width: 80%;
    align-items: flex-start;
}
footer .f_info_wrap .logo{
    margin-top: 10px;
}
.footer_txt .footer_nav li{
     border-right: 1px solid #ffffff;
}

footer .entry.more a {
    background: linear-gradient(to right, #ec881f 0%,#f8cc09 31%,#ec881f 57%,#ec881f 100%);
    color: #fff;
}
footer .entry.more a:after {
    background-color: #eeeeee;
}
.footer_txt .footer_nav li:last-child {
    border-right: none;
}



/* ======================================================================================
　　top
======================================================================================== */
#main .sns_link,#main .main_box{z-index: 2;}
#main{position: relative;}
#main:before, #main:after {
    content: "";
    display: block;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    background-image: url(./Dup/img/main1.png);
    background-size: 100%;
    width: 26vw;
    height: 42vw;
    z-index: 1;
    opacity: 0.5;
}
#main:after {
    bottom: 0;
    right: 0;
    transform: scale(-1, -1);
}
.main_txt{
    z-index: 1;
    max-width: 1000px;
    width: 80%;
}

.top_catch{
    bottom: 238px;
    left: 50px;
    transition: 1s;
    transition-property: color;
    z-index: 2;
}
.top_catch p{
    color: transparent;
    transition-delay: 0.5s;
}
.top_catch.active p{
    color: #fff;
    background-color: #1c1c1c;
}
.top_catch p::before{
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-color: #fff;
    top: 0;
    left: -100%;
}
.top_catch.active p::before{
    animation: txtAnim 1s cubic-bezier(.9,0,.1,1);
}
@keyframes txtAnim {
    0% {
        left: -100%;
    }
    50% {
        left: 0;
    }
    100% {
        left: 100%;
    }
}

h1.logo.top {
    width: 50%;
    max-width: 320px;
    top: 5%;
    left: 4%;
    z-index: 2;
}
#main .entry.more{
    z-index: 2;
}
#main .sns_link li{
    background-color: #0f487f;
}

.back_color {
    position: relative;
    background: linear-gradient(rgb(255 255 255 / 0%) 0%, rgb(238 238 238 / 0%) 20%, rgba(238 ,238 ,238 ,0.85) 80%,rgba(255 ,255 ,255 ,0.55) 100%);
}
.back_color::before {
    display: inline-block;
    content: "";
    background-color: rgb(255 255 255 / 20%);
    background-image: radial-gradient(#ffffff00 10%, transparent 20%), radial-gradient(rgb(238 238 238 / 97%) 10%, transparent 20%);
    background-position: 0 0, 10px 10px;
    background-size: 5px 5px;
    z-index: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
    left: 0;
}
#main .main_box {
    max-width: 600px;
    width: 70%;
}

#main .main_box .logo img{
    filter: drop-shadow(0px 4px 15px rgba(25, 26, 31 ,0.5));
}
.main_dec{
    position: absolute;
    bottom: -20px;
    right: 0;
    max-width: 550px;
    width: 50%;
}
#catch .catch_txt {
    background-color: rgb(255 255 255 / 90%);
    color: #1c1c1c;
}
#catch .catch_txt h2{
    font-size: -webkit-calc(1rem + 15px);
    font-size: calc(1rem + 15px);
    text-align: center;
    margin-bottom: 40px;
    line-height: 1.7;
}
#catch .catch_txt h2 span {
    border-bottom: 4px solid var(--color1);
    color: var(--color1);
}
.catch_txt h3 {
    font-size: 44px;
    letter-spacing: 2px;
    line-height: 1.0;
    position: absolute;
    left: 0;
    right: 0;
    top: -25px;
    margin: auto;
    text-align: center;
    color: #1c1c1c;
}

#contents .box .no .en_font,.cms_title::before{
    font-style: italic;
}
#contents .box .no .en_font{
    font-size: -webkit-calc(1rem + 20px);
    font-size: calc(1rem + 20px);
}
#contents .box .no .en_font span{
    font-size: -webkit-calc(1rem + 100px);
    font-size: calc(1rem + 100px);
}
#contents .box .box_item:after {
    background: linear-gradient(to bottom left, rgba(255,255,255,0) 50%, #ec881f 50.5%) no-repeat top left/100% 100%;
    background: linear-gradient(to bottom left, rgba(255,255,255,0) 50%, #ec881f 50.5%) no-repeat top left/100% 100%;
    background: linear-gradient(to bottom left, rgba(255,255,255,0) 50%, #ec881f 50.5%) no-repeat top left/100% 100%;
}
#contents .box .box_item:before{
    background-color: rgb(20 20 20 / 48%);
}
#contents h2 {
    display: inline-block;
    border-bottom: 5px solid var(--color1);
    font-size: 29px;
}
.top_cms_box {
    background-color: rgba(250, 250 ,250 ,0.75);
    box-shadow: 0 5px 10px rgba(188 ,222, 218 ,0.25);
    border-radius: 5px;
}
#top_cms .cms_title p span{
    color: var(--color1);
}




/* ======================================================================================
　　under
======================================================================================== */

.all_page main{
    background: none!important;
    background-color: #eeeeee!important;
}
#page_title:after {
    background: linear-gradient(135deg,rgb(20 20 20 / 58%), rgb(96 96 96 / 62%));
}
#page_title:before{
    background: linear-gradient(to bottom right, rgba(255,255,255,0) 50%, #f0f0f0 50.5%) no-repeat top left/100% 100%;
}
#page_title .page_title_box p.font_30up{
        color: #fff;
}
#page_title .page_title_box p.font_9up span {
    color: #ffffff;
}
.cate_title::first-letter, .cate_title h3::first-letter {
  font-size: 150%;
  color: var(--color1);
  letter-spacing: 4px;
}


#cms_6-a .cate_title {
    background-color: var(--color2);
    background: no-repeat;
    background-color: var(--color2);
    color: #111;
    border-color: var(--color1);
}

.page7 #map iframe:first-child {
    margin-bottom: 30px;
}
.page10 .more{
        width: 27%!important;
}
.page10 .more a {
    background: linear-gradient(to right, #0063c3 0%,#42a2ff 31%,#0c7be7 57%,#0077eb 100%);
    font-size: 16px;
}
#page_title .sns_link li{
    background-color: #0f487f;
}
.more a:hover:after{
    transform: scaleX(0.5);
}

.page9 a {
    background: none;
    background-color: #111;
    border: none;
}


/* ---------- cms4 ---------- */
.member .cate_box {
    margin: 30px 0px;
}
#page5 section#cms_2-b .cate_title{
    margin-bottom:0 !important;
}
.member {
    gap: 5%;
    justify-content: flex-start;
    padding: 0 30px;
    align-items: flex-start;
}
.member .cate_box, .cms_2-b .cate_box {
    position: relative;
}
.member .cate_box span.alata {
    position: absolute;
    top: -28px;
    color: black;
    left: 5px;
    font-size: 20px;
}
.member h3.box_title1, .member h3.box_title1 {
    border-bottom: 3px solid var(--color3);
    color: #191a1f;
    /* display: inline-block; */
    /* padding: 0 40px; */
    /* border: 0; */
    /* font-weight: normal; */
}
p.Zen {
    line-height: 24px;
}
.yakusyoku::before {
    width: 7px;
    height: 7px;
    content: "";
    background: #004eb5;
    position: absolute;
    left: 0;
    top: 38%;
}
.Zen {
    /* font-family: 'Zen Kurenaido', sans-serif; */
    /* color: black; */
    font-weight: bold;
}
.yakusyoku {
    padding-left: 15px;
    position: relative;
}






/* ======================================================================================
　　window size
======================================================================================== */

/* ----------　タブレット　---------- */
@media screen and (max-width: 768px){
.g-menu .menu-content-nav .font_25up {
    font-size: 22px;
}
.main_txt {
    width: 64%;
}
footer .f_info_wrap {
    width: 100%;
}
#main .main_box {
    top: 30%;
}
#main .main_box h1 {
    max-width: 600px;
}  
.main_dec {
    width: 60%;
}

#main:before, #main:after{
    width: 37vw;
    height: 65vw;
}
.top_catch {
    bottom: 237px;
    left: 0;
    transition: 1s;
    transition-property: color;
    z-index: 2;
}

#contents .box .no .en_font {
    font-size: -webkit-calc(1rem + 10px);
    font-size: calc(1rem + 10px);
        line-height: 1;
    padding: 20px 0;
}
#contents .box .no .en_font span {
    font-size: -webkit-calc(1rem + 40px);
    font-size: calc(1rem + 40px);
}
#contents .box .box_item {
    padding: 80px 50px 50px;
}
#contents h2 {
    font-size: 20px;
}

#page_title .page_title_box p.font_30up {
    font-size: 30px;
}
.page10 .more {
    width: 100%!important;
}
}


/* ----------　スマホ　---------- */
@media screen and (max-width: 667px){
.back_color::before {
    background-color: rgb(255 255 255 / 36%);
}
.sp_back{opacity: 1!important;}
.g-menu .menu-content-nav .font_25up {
    font-size: 18px;
}
#main .sns_link{
    display: none;
}
h1.logo.top {
    width: 37%;
}
#main .main_box {
    width: 80%;
}
#main:before, #main:after {
    width: 51vw;
    height: 93vw;
}
.top_catch {
    bottom: 145px;
    font-size: 23px;
}

#catch .catch_txt h2 {
    font-size: -webkit-calc(1rem + 9px);
    font-size: calc(1rem + 9px);
}
#catch .catch_txt {
    margin-top: 57px;
}
.catch_txt h3{
    font-size: 34px;
}
#contents .box .box_item {
    padding: 80px 30px 50px;
}    
#contents .box .box_item h2{
    font-size: 23px;
}
#contents .no.bg_color1{
    background: linear-gradient(180deg, #ec881f 0%,#f8cc09 31%,#ec881f 57%,#ec881f 100%);
}
#contents .box .box_item:after{
    background: linear-gradient(to top left, rgba(255,255,255,0) 50%, #ec881f 50.5%) no-repeat bottom left/100% 100%;
}
.shop_info .info,.shop_info .contact {
    padding: 100px 0;
}
.shop_info h2{
    width: 70%;
}
.shop_info.more a.info_box:after{
    display: none;
}

#page_title .page_title_box p.font_30up span {
    font-size: -webkit-calc(1rem + 5px);
    font-size: calc(1rem + 5px);
    letter-spacing: 0;
}

.member {
    padding: 0;
}

#page_title .page_title_box p.font_30up {
    font-size: 30px;
}
footer .logo {
    text-align: center;
}
.page8 #tel_contact .tel a {
        font-size: -webkit-calc(1rem);
    font-size: calc(1rem);
}
.page10 .more a{
    font-size: 14px;
}
.page10 .more a:after {
    right: 0px;
    width: 8%;
}
}


/* fix_banner -------------------------------------- */
.fix_banner{
	max-width: 369px;
	position: fixed;
	bottom: 0;
	right: 28px;
	z-index: 10;
	transition: 0.5s;
}
.fix_banner.active{
    max-width: 262px;
}
.fix_banner .close_bt {
    position: absolute;
    top: -2px;
    right: -7px;
    display: block;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    transition: 0.5s;
    background-color: #fff;
    border: solid 2px #191a1f;
    z-index: 11;
    cursor: pointer;
}
.fix_banner .close_bt:hover{opacity: 0.7;}
.fix_banner .close_bt span{
	position: relative;
	display: block;
	width: 23px;
	height: 23px;
}
.fix_banner .close_bt span:before,.fix_banner .close_bt span:after{
	content: "";
	display: block;
	background-color: #231815;
	height: 4px;
	width: 20px;
	position: absolute;
	top:50%;
	left: 50%;
}
.fix_banner .close_bt span:before{
	-ms-transform: translate(-50%,-50%) rotate(-45deg);
	-webkit-transform: translate(-50%,-50%) rotate(-45deg);
	transform: translate(-50%,-50%) rotate(-45deg);
}
.fix_banner .close_bt span:after{
	-ms-transform: translate(-50%,-50%) rotate(45deg);
	-webkit-transform: translate(-50%,-50%) rotate(45deg);
	transform: translate(-50%,-50%) rotate(45deg);
}
.fix_banner.close{right: -450px;}
.fix_banner.close2{right: -450px;}
@media  screen and (max-width: 768px){
.fix_banner{max-width: 213px;}
.fix_banner .close_bt {
    /* bottom: 109px; */
    /* right: 277px; */
}
}
@media  screen and (max-width: 667px){
.fix_banner{max-width: 131px;}
.fix_banner .close_bt {
    width: 20px;
    height: 20px;
    top: -18px;
    right: -14px;
}
.fix_banner .close_bt span {
    width: 20px;
    height: 20px;
}
.fix_banner.active {
    max-width: 131px;
}
}
/* fix_banner end -------------------------------------- */
