/* all page */
/*fonts*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700;900&display=swap');
.en_font, .main_txt1, #header .header_menu li a, .catch_txt h2, #catch .box h4, #contents .box h2, #catch .square_box a p, #contents_links .catch_txt h2, #contents .contents_txt h3 span, #top_cms .top_cms_title p span, #top_cms .top_cms_title h3, #top_cms .more a span, #main_nav li a span, footer #copyright, #page_title, .cate_list li a, .cate_list li .cate_no, .cate_title, .sub_cate_title, #page10 .sub_title, #page10 .title, .box_title, .box_title1, a[href^="tel:"], a[href^="mailto:"], .pager li a {
    font-family: 'Noto Serif JP', "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";
}

/* color ---------------------------------------------------------------------------------------------*/
.linkStyle{color: #033146;text-decoration: underline;transition: opacity .3s;}
.linkStyle:hover{opacity: 0.7}
.txt_color1, .hvr_txt_color1:hover{color: #033146;} /* メインカラー */
.txt_color2, .hvr_txt_color2:hover{color: #e6e6e6} /* サブカラー */
.txt_color3, .hvr_txt_color3:hover{color: #a67c52} /* アクセントカラー1 */
.txt_color4, .hvr_txt_color4:hover{color: #c9baa9} /* アクセントカラー2 */

/* background-color */
.bg_color1, .hvr_bg_color1:hover{background-color: #033146;} /* メインカラー */
.bg_color2, .hvr_bg_color2:hover{background-color: #e6e6e6} /* サブカラー */
.bg_color3, .hvr_bg_color3:hover{background-color: #a67c52} /* アクセントカラー1 */
.bg_color4, .hvr_bg_color4:hover{background-color: #c9baa9} /* アクセントカラー2 */

/* border-color ※!important */
.border_color1, .hvr_border_color1:hover{border-color: #033146;}
.border_color2, .hvr_border_color2:hover{border-color: #e6e6e6}
.border_color3, .hvr_border_color3:hover{border-color: #a67c52}
.border_color4, .hvr_border_color4:hover{border-color: #c9baa9}

#loader_h {
    top: 0;
    left: 0;
    z-index: 9999;
}
#loader_h .loader_logo {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
}
#loader_h .loader_logo.active {
    transition: 1s;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
#loader_h .loader_logo.active.trans {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0;
}
#loader_h .main_txt1 {
    opacity: 0;
    transform: translate(-50%, 100%) scale(0.9);
}
#loader_h .main_txt1.active {
    transition-delay: 0.5s;
    transition: 1s;
    opacity: 1;
    transform: translate(-50%, 100%) scale(1);
}
#loader_h .main_txt1.active.trans {
    transition-delay: 0.5s;
    transform: translate(-50%, 100%) scale(1.1);
    opacity: 0;
}

#main .sns_link li {
    background-color: #033146;
}
.g-menu {
    background: rgba(3,49,70,0.97);
}

/* header */
#header {
    background-color: #033146;
}
#header .logo{
    max-width: 300px;
}
.clone-nav {
    z-index: 5;
}
.header_menu li:last-of-type a{
    border: 1px solid;
    padding: 5px 10px;
    border-radius: 5px;
    transition: all 0.3s;
}

/* top ----------------*/
.back_color {
    background: #ecfaec;
}

/* main img */
#main .sns_link, #main .main_box {
    z-index: 2;
}
#main .cms_img1 {
    position: relative;
}
#main .main_box {
    left: 50%;
    transform: translate(-50%,-50%);
    width: 50%;
    text-align: center;
    max-width: 850px;
}
#main .kumo_l{
    top: 0;
    left: 0;
    width: 26%;
}
#main .kumo_r{
    top: 0;
    right: 0;
    width: 30%;
}
#main .main_1{
    bottom: 0;
    left: 0;
    width: 100%;
}
#main .main_2{
    bottom: 0;
    left: 0;
    width: 100%;
}
#main .main_3{
    bottom: 0;
    left: 0;
    width: 100%;
}
#main .main_4{
    bottom: 0;
    left: 0;
    width: 90%;
}
#main .main_5{
    bottom: 0;
    left: 0;
    width: 100%;
}
#main .tree_l{
    top: 0;
    left: 0;
    width: 40%;
}
#main .tree_r{
    top: 0;
    right: 0;
    width: 40%;
}
#main .kusa_l{
    bottom: 0;
    left: 0;
    width: 50%;
}
#main .kusa_r{
    bottom: 0;
    right: 0;
    width: 50%;
}
/*アニメーション*/
.ani_fadein{
	display: none;
}
.ani {
  animation: slideIn 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1 forwards;
  animation-delay: 0.5s;
  opacity: 0;
}
.ani2 {
  animation: slideIn 2.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1 forwards;
  animation-delay: 1s;
  opacity: 0;
}
.ani3 {
  animation: slideIn 2.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1 forwards;
  animation-delay: 1.5s;
  opacity: 0;
}
.ani4 {
  animation: slideIn 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1 forwards;
  animation-delay: 2s;
  opacity: 0;
}
.ani5 {
  animation: slideIn 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1 forwards;
  animation-delay: 4s;
  opacity: 0;
}
.ani6 {
  animation: slideIn2 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1 forwards;
  animation-delay: 3s;
  opacity: 0;
}
.ani7 {
  animation: slideIn3 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1 forwards;
  animation-delay: 3.5s;
  opacity: 0;
}
.ani8 {
  animation: slideIn4 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1 forwards;
  animation-delay: 4s;
  opacity: 0;
}
.ani9 {
  animation: slideIn5 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1 forwards;
  animation-delay: 4s;
  opacity: 0;
}
@keyframes slideIn {
  0% {
    transform: translate(0,900px);
  }
  100% {
    transform: translate(0,0);
  }
  40%,100% {
    opacity: 1;
  }
}
@keyframes slideIn2 {
  0% {
    transform: translate(-100%,0);
  }
  100% {
    transform: translate(0,0);
  }
  40%,100% {
    opacity: 1;
  }
}
@keyframes slideIn3 {
  0% {
    transform: translate(100%,0);
  }
  100% {
    transform: translate(0,0);
  }
  40%,100% {
    opacity: 1;
  }
}
@keyframes slideIn4 {
  0% {
    transform: translate(-230px,280px);
  }
  100% {
    transform: translate(0,0);
  }
  40%,100% {
    opacity: 1;
  }
}
@keyframes slideIn5 {
  0% {
    transform: translate(230px,280px);
  }
  100% {
    transform: translate(0,0);
  }
  40%,100% {
    opacity: 1;
  }
}

/* main */

/* intro */
#catch{
    background: linear-gradient(190deg, rgba(159,174,230,1) 0%, rgba(118,233,214,1) 100%);
    position: relative;
}
#catch::before{
    content: "";
    background-image: url('./Dup/img/intro.png');
    background-position: top;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.catch_txt {
    background: none;
}
.catch_txt .intro_top{
    font-size: 90px;
}
#catch .intro_btn a{
    border-radius: 50px;
}
#catch .intro_btn a:hover{
    background-color: #fff;
    color: #033146;
}
#catch .intro_left{
    bottom: 0;
    left: 0;
    width: 43%;
}
#catch .intro_right{
    bottom: 0;
    right: 0;
    width: 43%;
}

/* contents */
.contents_wrap{
    padding-top: 200px;
    margin-bottom: 100px;
    background-image: url("./Dup/img/kumo2.png"), url("./Dup/img/kumo.png"), url("./Dup/img/con_bg.png");
	background-position: top left,top right,bottom center;
	background-repeat: no-repeat;
	background-size: 40%,40%,100%;
}
#contents .box{
    border-radius: 30px;
    box-shadow: #4b938d 5px 5px;
    margin-bottom: 150px;
}
#contents .box .no{
    border-radius: 30px 0 0 30px;
    overflow: hidden;
}
#contents .box .no::before{
    content: "";
    background-image: url("./Dup/img/ryu_logo.png");
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: 100%;
    width: 280px;
    height: 300px;
    position: absolute;
    bottom: -40px;
    right: -70px;
    opacity: 0.35;
}
#contents .box .box_item:before {
    background-color: #f5f5f5;
    border-radius: 0 30px 30px 0;
}
#contents .box .box_item:after{
    display: none;
}
#contents .box p{
    color: #111;
}
#contents .no .en_font{
    padding: 0 30px;
}
#contents .no01{
    top: -92px;
    left: 0;
    max-width: 150px;
}
.contents_wrap .con_ryu{
    top: 2%;
    right: 0;
    width: 19%;
}
.contents_wrap .con_ryu2{
    bottom: 5%;
    left: 0;
    width: 20%;
}
.contents_wrap .fadein_up {
    -webkit-transform: translateY(300px);
    -ms-transform: translateY(300px);
    transform: translateY(300px);
}
.contents_wrap .fadein_up.scrollin {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}

/* topcms */
#top_cms .top_cms_box {
    background-color: #ffffff;
    border-radius: 30px;
}
#top_cms .cms_5-c{
    padding: 0 30px;
}

/* cmslink */
.shop_info {
    padding-bottom: 300px;
    z-index: 2;
}

/* footer */
footer::before{
    content: "";
    background-image: url('./Dup/img/footer.png');
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    top: -259px;
    left: 0;
    width: 100%;
    height: 260px;
}
#footer .logo img{
    width: 90%!important;
}


/* under page */
.all_page main{
    background: #F6FBF6;
    padding-bottom: 200px;
}
#page_title .sns_link li {
    background-color: #033146;
}
#page_title {
    height: 450px;
    background-position: top -50px center;
    background-size: 100%;
}
#page_title:before, #page_title:after{
    display: none;
}
#page_title .under_bottom{
    bottom: 0;
    left: 0;
    width: 100%;
}
#page_title .under_bottom img{
    height: 50px;
}
#page_title .under_left{
    bottom: 0;
    left: 0;
    width: 30%;
}
#page_title .under_right{
    bottom: 0;
    right: 0;
    width: 30%;
}
.cate_list li a {
    background-color: #033146;
    color: #fff;
    padding: 10px 5px;
}
.cate_list li a:hover {
    background-color: #fff;
    color: #033146;
    z-index: 2;
}
.content_wrap {
    z-index: 2;
}

/* cms1 */

/* cms2 */

/* cms3 */

/* cms4 */

/* cms5 */

/* page7 */

/* page8 */

/* page9 */

/* page10 */


/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
    #main {
        height: 50vh;
        max-height: 50vh;
    }
    #main .main_box {
        width: 65%;
    }
    #main .main_box h1 {
        max-width: none;
    }
    #main .tree_l {
        width: 45%;
    }
    #catch .intro_left, #catch .intro_right {
        width: 50%;
    }
    .catch_txt .intro_top {
        font-size: 65px;
    }
    #contents .box .no {
        border-radius: 30px 30px 0 0;
    }
    #contents .no .en_font {
        padding: 20px 30px;
    }
    #contents .box .box_item:before {
        border-radius: 0 0 30px 30px;
    }
    #contents .no .en_font br{
        display: none;
    }
    #contents .box .no::before {
        width: 150px;
        bottom: -60px;
        right: 0;
    }
    .contents_wrap .con_ryu {
        width: 30%;
    }
    .contents_wrap .con_ryu2 {
        width: 35%;
    }
    #page_title {
        height: 240px;
        background-position: top center;
    }
    #page_title .under_bottom img {
        height: 30px;
    }
    
}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
    header .head_banner {
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 200px;
        z-index: 10;
    }
    header .head_banner a {
        border-radius: 5px 5px 0 0;
    }
    #main .main_box {
        width: 85%;
    }
    #main .sns_link{
        z-index: 3;
        right: 20px;
    }
    #main .kumo_l, #main .kumo_r {
        width: 48%;
    }
    #main .tree_l {
        width: 60%;
    }
    #main .tree_r {
        width: 50%;
    }
    #main .kusa_l {
        width: 55%;
    }
    #main .kusa_r {
        width: 55%;
    }
    .catch_txt .intro_top {
        font-size: 40px;
    }
    .contents_wrap .con_ryu {
        width: 50%;
    }
    .contents_wrap .con_ryu2 {
        width: 43%;
        bottom: -5%;
    }
    #contents .no .en_font {
        padding: 10px 25px;
    }
    #contents .box .box_item {
        padding: 30px;
    }
    .contents_wrap {
        background-size: 50%,50%,100%;
    }
    .shop_info {
        padding-bottom: 150px;
    }
    .shop_info .info, .shop_info .contact {
        padding: 100px 0;
    }
    .shop_info h2{
        font-size: calc(1rem + 10px);
    }
    #footer .logo{
        text-align: center;
        max-width: 250px;
        margin: 0 auto;
    }
    footer::before{
        background-image: url('./Dup/img/footer_sp.png');
    }
    footer{
        padding-bottom: 50px;
    }
    .all_page main {
        padding-bottom: 100px;
    }
    #page_title {
        height: 300px;
        background-size: cover;
        margin-bottom: 50px;
    }
    #page_title .under_left, #page_title .under_right {
        width: 50%;
    }
    #page_title p.font_18up_sp span{
        font-size: calc(1rem + 14px);
        letter-spacing: 1px;
    }
    
}