﻿@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
/*----- common -----*/
body,.more a::after,.cate_list li a::after,#page10 ul li a .title::after,#tel_contact > div > .d_inline_b > div p span{background-color: #fffbf5;}
body{font-family: "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif!important;}
.font_bold{font-weight: 700;}
#loader{
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 9999;
    transition: ease 0.5s;
}
#loader .loader_bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: ease 0.5s;
}
#loader .logo{
    max-width: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 2;
    transition: ease 0.5s;
}
#loader .logo img{
    transform: scale(1.5);
    transition: ease 0.5s;
    opacity: 0;
}
.pc_sc_nav{position: fixed;top: 0;left: 0;transition: ease 0.3s;transform: translateY(-100%);width: 100%;z-index: 99;}
.pc_sc_nav.sc{transform: translateY(0px);box-shadow: 0 10px 10px rgba(0,0,0,0.07);}
header{box-shadow: 0 10px 10px rgba(0,0,0,0.07);}
nav li a span{transition: ease 0.3s;}
nav li a:hover span,nav li.active a span{transform: translateY(-3px)}
footer #map iframe{width: 100%;height: 500px;}
footer .sns_links li{width: 50px;margin-left: 30px;}
.more a{
    position: relative;
    z-index: 2;
    border-radius: 10px;
}

.more a:hover{
    transform: translateY(-10px);
    color: var(--color7);
    background-color: var(--black);
}

.more a::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    border-radius: 10px;
    transition: ease 0.5s;
}
.more a:hover::after{
    transform: scale(0.7);
    opacity: 0;
}
.tel i{transform: rotate(100deg);}
#page-top{
    position: fixed;
    width: 70px;
    height: 70px;
    right: 0;
    z-index: 9;
    border-top-left-radius: 10px;
    border-top: 3px solid #fffbf5;
    border-left: 3px solid #fffbf5;
    cursor: pointer;
    transform: translateY(10px);
}
/*----- index -----*/
#main_img .slick{/* box-shadow: 0 0 15px rgba(0,0,0,0.2); */border-radius: 15px;overflow: hidden;}
#main_img .slick-nav,#main_img .slick-nav .slick-track{margin-right: 0;}
#main_img .slick-nav figure{margin-left: 30px;transition: ease 0.3s;cursor: pointer;width: 150px;box-sizing: border-box;}
#main_img .slick-nav figure:focus{outline: none;}
#main_img .slick-nav figure:not(.thumbnail-current){border-color:rgba(255,255,255,0)!important;}
#intro .intro_title{
    width: 150px;
    height: 150px;
    top: -75px;
    left: 50%;
    transform: translateX(-50%);
}
#intro .intro_title span{
    width: 100%;
    text-align: center;
    padding-left: 3px;
}

#contents1 figure{/* box-shadow: 0 0 10px rgba(0,0,0,0.07); */}
#contents1 #contents1_txt{
    /* box-shadow: 0 0 15px rgba(0,0,0,0.1); */
}
#contents1 .slick_sp{display: none;}
#contents_links h3{
    transform: translateY(-70px);
    border-radius: 100px;
    margin-bottom: -20px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
#contents2 figure{transform: translateY(-50px);box-shadow: 0 0 15px rgba(0,0,0,0.1);overflow: hidden;}
#contents2 .resize_img {
    height: 100vh!important;
    max-height: 550px;
}
#top_cms .top_cms_box{
    margin-bottom: 100px;
}
#contact_bar{box-shadow: 0 10px 10px rgba(0,0,0,0.07);position: relative;z-index: 2;}
#contact_bar a{transition: ease 0.3s;}
#contact_bar a:hover{opacity: 0.6;}
/*----- other -----*/
.pager {position: relative;z-index: 1;}
.pager li a {transition: ease 0.3s;}
.pager li a:hover {transform: translateY(-3px);opacity: 0.6;}
.pager li a span:first-of-type{z-index: 1;}
.pager li.prev a{color: #fff!important;}
.pager li.prev .bg_color1{width: 60px;height: 60px;border-radius: 50%;z-index: -1;}
.cate_list li{border-radius: 100px;overflow: hidden;}
.cate_list li a{position: relative;z-index: 1;overflow: hidden;}
.cate_list li a::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    transition: ease 0.5s;
    border-radius: 100px;
}
.cate_list li a:hover::after{
    transform: scale(0.7);
    opacity: 0;
}
#page_title{position: relative;z-index: -1;}
#page_title h2{transition: ease 0.5s;transform: translateY(-30px);opacity: 0;}
#page_title p{transition: ease 0.5s;transform: translateY(-10px);opacity: 0;}
#page_title.active h2,#page_title.active p{transform: translateY(0px);opacity: 1;}

/*
#page07 .box_wrap .box{width: 42%;margin: 0 2% 20px;padding: 20px 2%;border-bottom-style: dotted;border-bottom-width: 4px;} 
#page07 .box_wrap .box h3 span{border-radius: 100px;letter-spacing: 10px;padding:5px 7px 5px 15px; }
*/
#tel_contact > div > .d_inline_b > div{padding: 10px;}
#tel_contact > div > .d_inline_b > div p{transform: translateY(-27px);}
#tel_contact > div > .d_inline_b > div p.d_inline_b{transform: translateY(-17px);}
#tel_contact > div > .d_inline_b > div p span{padding: 10px;padding-bottom: 0;}
#page08 .form_wrap .form_box input{border-radius: 50px;}
#page08 .form_wrap #form_bt input{width: 200px;cursor: pointer;transition: ease 0.3s;}
#form_area{text-align: center;}
#page08 .form_wrap .g-recaptcha > div{display:inline-block;}
#page08 .form_wrap #form_bt .disable input{pointer-events: none;opacity:0.5;}
#page08 .form_wrap #form_bt .posi_rel:hover input{box-shadow: 0 3px 6px rgba(0,0,0,0.1);}
#page08 .form_wrap #form_bt .posi_rel{cursor: pointer;transition: ease 0.3s;border-radius: 50px;}
#page08 .form_wrap #form_bt .posi_rel:hover{transform: translateY(-5px);}
#page08 .form_wrap #form_bt .posi_rel.disable:hover{transform: translateY(0px);cursor: not-allowed}
#page08 .form_wrap #form_bt .posi_rel::after{
    content: "送信";
    font-size: 18px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-55%);
    font-weight: bold;
    color: #fff;
}
#page09 .privacy_box .no{width: 30px;height: 30px;border-radius: 50%;transform: translateY(8px)}
#page10 ul li{margin: 0 30px 100px;}
#page10 ul li a{position: relative;}
#page10 ul li a .sub_title{padding: 0 5px 1px 10px;letter-spacing: 5px;border-radius: 100px;position: absolute;top: 0;transition: ease 0.3s;margin-bottom: 10px;left: 50%;transform: translate(-50%,0);white-space: nowrap;}
#page10 ul li a:hover .sub_title{transform:  translate(-50%,-100%);top: -10px;}
#page10 ul li a .title{padding: 10px 25px;border-radius: 100px;position: relative;z-index: 1;}
#page10 ul li a .title::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    transition: ease 0.5s;
    border-radius: 100px;
}
#page10 ul li a:hover .title::after{
    transform: scale(0.7);
    opacity: 0;
}
/*----- animation -----*/
.sc_anime.top_anime.active{
	animation-name: fadein;
	animation-duration: 1.5s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}
.sc_anime.left_anime.active,#catch span.left_anime.active{
	animation-name: leftin;
	animation-duration: 1.0s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}
.sc_anime.right_anime.active,#page_title.active::after,#page_title > div.active{
	animation-name: rightin;
	animation-duration: 1.0s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}

@keyframes fadein {
	0% {opacity:0;transform: translateY(100px);}
	100% {opacity:1;transform: translateY(0px);}
}
@keyframes leftin {
	0% {opacity:0;transform: translate(-100px,0);}
	100% {opacity:1;transform: translate(0,0);}
}
@keyframes rightin {
	0% {opacity:0;transform: translate(100px,0);}
	100% {opacity:1;transform: translate(0,0);}
}
@keyframes loader1{
    0% {transform: scale(0.4);opacity: 0;}
	50% {opacity: 1;}
	100% {transform: scale(1);}
}
@keyframes loader2{
    0% {top: 100%;}
	100% {top: 0;}
}
/* ---------- PC 1280px~ ---------- */
@media screen and (max-width: 1280px){
}
 
/* ---------- IEのみ ---------- */
@media all and (-ms-high-contrast: none) {
/*----- common -----*/
    .more a{padding-top: 10px;}
    #contact_bar p,#tel_contact .tel p{padding-top: 4px;}
    #copyright{padding-top: 10px;}
/*----- index -----*/
    .more{padding-top: 4px;}
    #top_cms .top_cms_title p{padding-top: 4px;}
/*----- other -----*/
    #page_title p{padding-top: 5px;}
    .cate_list a{padding-top:9px;}
    #page07 .box_wrap .box h3 span{padding:5px 5px 5px 15px; } 
    #page08 .form_wrap #form_bt .posi_rel::after{top: 50%;}
    #page09 .privacy_box .no .posi_center{top: 47%;}
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
/*----- common -----*/
    header{box-shadow: none;}
    .menu_bt{
        width: 72px;
        height: 72px;
        font-size: 14px;
        border-radius: 3px;
        text-align: center;
    }
    .menu_bt > div{width: 100%;line-height: 1;}
    .menu_bt > div span:first-of-type{margin-bottom: 10px;display: block;}
    .menu_bt > div .bar{width: 70%;height: 3px;background-color: #fff;display: block;margin: 0 auto 6px;transition: ease 0.3s;}
    .menu_bt.active > div span:nth-child(2){width: 30px; height: 3px; transform: translate(0px,10px) rotate(45deg)}
    .menu_bt.active > div span:nth-child(3){opacity: 0;}
    .menu_bt.active > div span:nth-child(4){width: 30px; height: 3px; transform: translate(0px,-8px) rotate(-45deg)}
    .sc_menu{top: 20px;right: 20px;border: 3px solid #fffbf5;transform: translateY(-100px);transition: ease 0.3s;z-index: 999;box-shadow: 0 0 10px rgba(0,0,0,0.1)}
    .sc_menu.sc,.sc_menu.active{transform: translateY(0px);}
    footer .sns_links li{width: 40px;margin-left: 20px;}
    #menu_wrap{
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 998;
        display: none;
        overflow: auto;
        box-sizing: border-box;
    }
    #menu_wrap ul li:nth-of-type(odd) a{transform: translateX(2px);}
    #menu_wrap ul li:nth-of-type(even) a{transform: translateX(-2px);}
/*----- index -----*/
/*----- other -----*/
.pager li:not(.prev){display: none;}
#page10 ul li{margin: 0 0 100px;}
#page10 ul li a .sub_title{transform:  translate(-50%,-100%);top: -10px;}
}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
/*----- common -----*/
    .menu_bt{
        width: 52px;
        height: 52px;
        font-size: 10px;
        border-radius: 3px;
    }
    .menu_bt > div{width: 100%;line-height: 1;}
    .menu_bt > div span:first-of-type{margin-bottom: 5px;display: block;}
    .menu_bt > div .bar{width: 70%;height: 2px;background-color: #fff;display: block;margin: 0 auto 6px;transition: ease 0.3s;}
    .menu_bt.active > div span:nth-child(2){width: 30px; height: 2px; transform: translate(0px,10px) rotate(45deg)}
    .menu_bt.active > div span:nth-child(3){opacity: 0;}
    .menu_bt.active > div span:nth-child(4){width: 30px; height: 2px; transform: translate(0px,-8px) rotate(-45deg)}
    .sc_menu{top: 10px;right: 10px;border: 1px solid #fffbf5;}
    #menu_wrap{
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 998;
        display: none;
        overflow: auto;
        box-sizing: border-box;
        padding-top: 70px;
    }
    #menu_wrap ul{
        position: static;
        transform: translate(0);
    }
    #menu_wrap ul li a{padding-top: 13px;}
    #menu_wrap ul li:nth-of-type(odd) a{transform: translateX(0px);}
    #menu_wrap ul li:nth-of-type(even) a{transform: translateX(0px);}
    #menu_wrap ul li a{transform: translateX(-3px);border-color: var(--color1);}
    footer #map iframe{width: 100%;height: 300px;}
    #page-top{
        position: fixed;
        width: 50px;
        height: 50px;
        right: 0;
        z-index: 9;
        border-top-left-radius: 3px;
        border-top: 1px solid #fffbf5;
        border-left: 1px solid #fffbf5;
        cursor: pointer;
    }
    #page-top span{font-size: 8px;font-weight: normal;}  
    #copyright{padding: 10px 55px;box-sizing: border-box;}
/*----- index -----*/
#main_img .slick{border-radius: 8px;overflow: hidden;}
#main_img .slick-nav figure{margin-left: 0px;width: 30%;}
#contents1 .slick_sp{display:block;}
#contents1 .slick_sp .slick-arrow{display:none!important;}
#contents1 .slick-dots {padding: 20px 0;}
#contents1 .slick-dots button{display: none!important;}
#contents1 .slick-dots li{width: 10px;height: 10px;border-radius: 50%;overflow: hidden;margin: 0 10px;}
#contents1 .slick-dots li:not(.slick-active){opacity: 0.5;}
#contents2 figure{transform: translateY(0px);}
#top_cms .top_cms_box:last-of-type{
    margin-bottom: 50px;
}
/*----- other -----*/
#page07 .box_wrap .box{width: 80%;margin: 0 5% 20px;padding: 20px 5%;border-bottom-style: dotted;border-bottom-width: 4px;} 
#page10 ul li{margin: 0 0 80px;}
#page10 ul li:last-of-type{margin-bottom: 50px;}
}