@charset "utf-8";
/* 1536 , 1530 × 735 ,1366 *//* 上記画面幅でも崩れていないか確認 */

/* 修正した場合→各項目の一番下に日付をコメントアウトして追記 */





/*■■　ALL　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic&display=swap');

:root {
    --color1: #FF9E03;
    --color2: #f2e9e2;
    --color3: #999999;
    --color4: #eeeeee;
    --color6: #594436;
    --normal: #333333;
    --black: black;
    --gray: #ccc;
    --red: red;
    --linkStyle: #e87d00;
}

.txt_color6{
    color: var(--color6);
}

.linkStyle{
	color:var(--color1);
}
.linkStyle:hover{
	color:var(--color1);
	opacity: 0.7;
	transition: all 0.5s;
}

.point_no{
    pointer-events: none;
}
.overlay.open {
    background-image: url('/Files/img/menu_bg.jpg');
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center center;
}

.overlay.open .menu-box .menu_list li.tel_bt,.tel_bt{
    display: none;
}
.overlay .menu-box{
        font-size: 16px;
    }
    
.zen, .title h2, .top_cms_title h2 {
  font-family: "Zen Maru Gothic", sans-serif;
}
#logo{
    border-radius: 0 0 20px 0;
        width: 200px;
    height: 200px;
}

/*fix_bnr*/
#fix_bnr {
    bottom: 10px;
    right: 110px;
    z-index: 10;
    width: 330px;
}


/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
    .overlay {
        top: 0px;
        padding-top: 100px;
    }
        .overlay nav {
        top: calc(50% - 30px);
    }
    #logo h1.logo {
        max-width: 100px;
    }
    #logo {
        height: 76px;
    }
}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
    .overlay nav {
        top: calc(50% + 70px);
    }
        
        #fix_menu {
        padding: 30px 0 35px;
    }
    #loading_logo {
        width: 30%;
    }
    
    #fix_bnr{width: 250px;
        right: auto;
        left: 50%;
        transform: translate(-50%,0);
    }
}



/*■■　FV　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

#main_img{
      height: 100vh;
      background-image: url('/Files/img/main_bg.png');
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center center;
}

.main_item1{
    left: 50%;
    bottom: 0;
    width: 124vh;
    z-index: 2;
     transform: translate(-50%, 0);
}

.main_item2{
    width: 30%;
    max-width: 350px;
    bottom: 20px;
    left: 0;
    z-index: 2;
}
.main_item3{
    right: 0;
    z-index: 1;
    top: 50%;
    transform: translate(0, -50%);
        width: 27%;
}

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
    #main_img{
      height: 63vh;
    }
    .main_item1 {
        width: 95%;
    }
.main_item2 {
    width: 33%;
}
.main_item3 {
    top: 62%;
}
}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
    #main_img{
    height: 150vw;
      background-image: url('/Files/img/main_bg_sp.png');
    }
    .main_item1_sp{
        bottom: 0;
        left: 50%;
        transform: translate(-50%,0);
        width: 100%;
    }
   .main_item2_sp{
               top: 80px;
        left: 50%;
        transform: translate(-50%,0);
        width: 100%;
    }
    .main_item2 {
        width: 200px;
        bottom: 10px;
    }

}



/*■■　TOP　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

.title h2{
    line-height: 1.3;
}

#top_contents1{
    background-image: url('/Files/img/con_bg.png');
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center center;
}

.con_item1{
       bottom: 0;
    left: 50px;
    width: 20%;
    max-width: 200px;
    opacity: 0.4;
}

.top_cms_box{
    max-width: 1200px;
    margin-right: auto;
    margin-left: auto;
}

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
#top_contents1 {
        padding: 100px 50px 150px;
    }
}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
#top_contents1 {
        padding: 50px 30px 80px;
    }
    .con_item1{
            left: 50%;
    transform: translate(-50%, 0);
    }
}



/*■■　下層ページ　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


.title_box h2{
    font-size: 26px;
}


#page_title::before {
    background: transparent;
}

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
.title_box h2{
    font-size: 22px;
}
}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
.title_box h2{
    font-size: 18px;
}
}