/********** font **********/

@import url('https://fonts.googleapis.com/css2?family=Prata&family=Shippori+Mincho+B1:wght@500&family=Zen+Antique&display=swap');

:root{
    --font-jp: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
    --font-jp2: 'Shippori Mincho B1', "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";
    --font-jp3: 'Zen Antique', "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";
    --font-en: 'Prata', 'Shippori Mincho B1', "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";
}
body, .font_sans-serif{
    font-family: var(--font-jp);
}
.font_jp{
    font-family: var(--font-jp2);
}
.font_jp3{
    font-family: var(--font-jp3);
}
.font_en, .date, a[href^="tel:"], a[href^="mailto:"]{
    font-family: var(--font-en);
}

/********** color **********/

:root{
    --color1: #937521;
    --color2: #f7f7f7;
    --color3: #ceb35d;
    --color4: #e1d9cf;
    --black: #222222;
}

/********** all **********/

header{
    padding-top: 0!important;
    background-image: url('./Dup/img/bg_img.jpg');
}
header #logo{
    padding: 0;
}
header .head_box {
    font-family: var(--font-jp2);
}
header .head_box a, footer .grid_5 p, footer .grid_5 a{
    font-family: var(--font-jp3);
}

#top_cms .cms_title h2, #page_title h2{
    font-family: var(--font-jp2);
    font-size: 18px;
    color: var(--color1);
    margin-bottom: 10px;
}
#top_cms .cms_title p, #page_title p{
    font-family: var(--font-en);
    font-size: 40px;
    letter-spacing: 5px;
    color: var(--black);
    padding-bottom: 15px;
    border-bottom: none;
    background-image: linear-gradient(to bottom, currentColor, currentColor);
    background-size: 50px 1px;
    background-position: bottom;
    background-repeat: no-repeat;
}

.button{
    transition: all .5s;
    border: solid 1px var(--color4);
    border-left: solid 1px;
    border-right: solid 1px;
    background-color: transparent;
    color: var(--black);
}
header .button{
    border-left: none!important;
    border-right: none!important;
    border-bottom: none!important;
}
.button::after {
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    -webkit-transform: none;
    transform: none;
    transition: all .5s cubic-bezier(0,1,.4,1);
    box-shadow: none!important;
    background-color: var(--color1);
}
.button:hover{
    border-color: var(--color1);
    color: #fff;
}
.button:hover::after{
    top: 0;
}
.button2{
    box-shadow: none!important;
}

footer h2.logo img{
    max-width: 300px;
}

/********** top **********/

#main_img {
    max-height: inherit;
    min-height: inherit;
}

.con_no{
    font-family: var(--font-en);
}

#contents3 h3, #contents3 p{
    padding-left: 10px;
    padding-right: 10px;
}
#contents3 .con_no{
    margin-top: -40px;
    font-size: 50px;
    letter-spacing: 0;
}
#contents3 .con_no::before{
    display: none;
}

/********** under_page **********/

#cms_5-e .number:before, .cms_5-e .number:before{
    font-family: var(--font-en);
    font-weight: normal;
    color: var(--color1);
}

.cate_title, .box_title, .box_title1, .box_title2{
    font-family: var(--font-jp2);
}


/********** tablet 780 **********/
@media screen and (max-width: 768px){
header{
    padding-bottom: 0!important;
    background-size: 700px;
}
header #logo {
    max-width: 224px;
}
}

/********** mobile 750 **********/
@media screen and (max-width: 667px){
header #logo{
    max-width: 180px;
}

#top_cms .cms_title p, #page_title p{
    font-size: 30px;
}
footer .logo{
    text-align: center;
}
}