﻿@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Shippori+Mincho+B1&display=swap');

/* 1536 , 1530 × 735 ,1366 *//* 上記画面幅でも崩れていないか確認 */

/* 修正した場合→各項目の一番下に日付をコメントアウトして追記 */




/*■■　ALL　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


/* color */
.txt_color_nomal, .hvr_txt_color_nomal:hover{color: var(--black);}
:root{
    --color1: #d63434; 
    --color2: #fff4e6; 
    --color3: #e87c7c; 
    --color4: #ddd3ab; 
    --color5:#bcaf7a;
    --black: #49261d; 
    --jp: "Shippori Mincho B1","游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif",  sans-serif;
    --en: "Jost", sans-serif;
    --linkStyle:#aa1818;
}

.txt_red, .hvr_txt_red:hover{color: #C12326;}
.txt_gray, .hvr_txt_gray:hover{color: #ccc}
.txt_color1, .hvr_txt_color1:hover{color: var(--color1)} /* メインカラー */
.txt_color2, .hvr_txt_color2:hover{color: var(--color2)} /* サブカラー */
.txt_color3, .hvr_txt_color3:hover{color: var(--color3)} /* アクセントカラー1 */
.txt_color4, .hvr_txt_color4:hover{color: var(--color4)} /* アクセントカラー2 */

/* background-color */
.bg_black, .hvr_bg_black:hover{background-color: var(--black)} /* 黒背景 */
.bg_gray, .hvr_bg_gray:hover{background-color: #ccc}
.bg_color1, .hvr_bg_color1:hover{background-color: var(--color1)} /* メインカラー */
.bg_color2, .hvr_bg_color2:hover{background-color: var(--color2)} /* サブカラー */
.bg_color3, .hvr_bg_color3:hover{background-color: var(--color3)} /* アクセントカラー1 */
.bg_color4, .hvr_bg_color4:hover{background-color: var(--color4)} /* アクセントカラー2 */
.bg_color_clear, .hvr_bg_color_clear:hover{background-color: transparent!important}

/* border-color ※!important */
.border_black, .hvr_border_black:hover{border-color: var(--black)}
.border_gray, .hvr_border_gray:hover{border-color: #ccc}
.border_color1, .hvr_border_color1:hover{border-color: var(--color1)}
.border_color2, .hvr_border_color2:hover{border-color: var(--color2)}
.border_color3, .hvr_border_color3:hover{border-color: var(--color3)}
.border_color4, .hvr_border_color4:hover{border-color: var(--color4)}


.linkStyle{
	color:var(--color1);
}
.linkStyle:hover{
	color:var(--color1);
	opacity: 0.7;
	transition: all 0.5s;
}

.point_no{
    pointer-events: none;
}

.liana, .patrima ,.en  {
  font-family:var(--en);
}

.jp{
    font-family: var(--jp);
}

/*白反転*/

.blur {
    background: rgba(255, 244, 230, 0.8);
}
.txt_white{
    color:var(--black);
}

#scroll .txt_white{
    color: #fff;
}

/*load*/
#loading_logo {
    max-width: 120px;
}
.progressbar-text {
    font-family: var(--en) !important;
}

/*header*/
#header #logo{
    margin-left: 35px;
}
#header #logo .width_300-max{
    max-width: 70px;
}

.menu-trigger-bar {
    background-color: var(--color1) !important;
}
.overlay div.overlay-nav {
    padding-top: 50px;
}
.overlay .overlay-nav .top .en {
    font-size: 20px !important;
    font-family: var(--jp);
}
.overlay .overlay-nav .en {
    font-family: var(--jp) !important;
}
.overlay .overlay-nav .middle .jp {
    font-family: var(--en);
}

.overlay .overlay-nav > ul .bg_black{
    background-color: var(--color1);
}
.overlay .overlay-nav > ul .bg_black:hover{
    background-color: var(--black);
}

#pc_nav li a::after, #footer_nav li a::after {
        background: var(--color3);
}
#pc_nav {
    opacity: 0;              
    visibility: hidden;     
    transition: all 0.5s;
    pointer-events: none;
}

/* --- スクロール時：headerにscr_headerがついたら表示 --- */
header.scr_header #pc_nav {
    opacity: 1;             
    visibility: visible;
    pointer-events: auto !important; 

}


/*footer*/
.tel_bt{
    display: none;
}
.info_btn_wrap.flex_space-between{
        justify-content: center;
}

.contact_bt .txt_white ,#copyright.txt_white ,#copyright .txt_white{
    color: #fff;
}
#footer_info .info_txt{
    margin-bottom: 10px;
}

#footer_info #logo2 .width_300-max {
        max-width: 100px;
        margin-top: 20px;
}

.map{
    display: none;
}

#page-top .scr{
    color: #fff;
}

/* fix_bnr ---------------------------------------------------------------------------------------------*/
#fix_bnr {
    bottom: 10px;
    right: 50px;
    z-index: 10;
    width: 37%;
    max-width: 330px;
    margin: auto;
    transition: opacity 0.8s, transform 0.8s;
    opacity: 0;
    transform: translateY(20px); 
    pointer-events: none; 
}

.is-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important; 
}

#fix_bnr a:hover{
    opacity: 0.7;
}


/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){

/*header*/
#header #logo .width_300-max {
    max-width: 60px;
}
.menu-trigger, .close-trigger{
    top: 56% !important;
}
.overlay .overlay-nav .top .en {
    font-size: 16px !important;
}

/*footer*/
#footer_info .map{
    padding-left: 10px;
}
}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
    /*header*/
#header #logo {
    margin-left: 10px;
}
#header #logo .width_300-max {
    max-width: 50px;
}
.menu-trigger, .close-trigger{
    top: 60% !important;
}

/*footer*/
#footer_info .map{
    padding-left: 0;
}
/* fix_bnr ---------------------------------------------------------------------------------------------*/
#fix_bnr {
        width: 70%;
        right: 0;
        left: 0;
}

}



/*■■　FV　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

#main_img:before {
        background-color: rgba(255, 255, 255, 0);
}
#main_img div:first-child{
    width: 80%;
    max-width: 800px;
    top: 47%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.sns_links li {
    width: 30%;
}
/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
#main_img div:first-child{
    width: 90%;
}
    .sns_links {
        left: 0;
    }
    .sns_links li{
        width: 20%;
    }
}



/*■■　TOP　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


/*画像の演出無効*/
.filter{
    display: none;
}

.fadein{
	transform: translateY(20px);
	transition: transform 1.5s ease, opacity 2s;
	transition-property: opacity,transform;
	opacity: 0;
}
.fadein.start{transform: translateY(0);opacity: 1;}

/*modal無効*/
.modal-open.more{
    display: none;
}

/*色反転*/


.top_cms_box{
    border-color: var(--color1);
}

.cms_title .txt_color4{
    color: var(--color1);
    font-family: var(--en);
}

.more .more_item:hover {
    border-color: var(--color3);
}
.more .more_item:hover .icon-right.after:after{
    color: var(--color3);
}

.top_title .txt_white{
    color: #bcaf7a;
}
.top_title h2 > span {
    padding-top: 120px;
}

.top_title h2 > span:before {
    background-color:#bcaf7a;
}

/*content*/

.intro_title.txt_color2{
    color:var(--color1);
    font-family: var(--jp);
    font-size: 36px;
}

#contents .con_title {
    font-size: 46px;
    margin-bottom: 20px;
}

.con_title .liana{
        font-family: var(--jp);
}

.cms_title .liana{
    font-family: var(--jp);
    font-size: 30px;
    margin-bottom: 5px;
}

.con_title_sub{
    color: var(--color5);
    font-size: 24px;
    margin-bottom: 10px;
}
/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
    #intro .intro_right {
        width: 100%;
    }
    .con_txt{
            margin-bottom: 20px;
    }
    .con_title_sub{
            margin-top: 20px;
    }
}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
.intro_title.txt_color2{
    font-size: 26px;
}
#contents .con_title {
    font-size: 26px;
    margin-bottom: 10px;
}
.cms_title .liana {
    font-size: 26px;
}

.con_title_sub{
    font-size: 20px;

    margin-bottom: 0;
}
}



/*■■　下層ページ　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

.cate_list li a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 10px 30px 10px 10px;
}

#page_title .en{
    font-family: var(--jp);
    font-size: 70px;
    top: 10px;
}
#page_title .jp{
    font-family: var(--en);
}

.cate_list .txt_white{
    color: #fff;
}

#page_title .en:before {
        background-color: #bcaf7a;
}

.big_cate_title.txt_white{
    color: #fff;
}

/*お知らせ*/
.blog_list .border_color2, .blog_wrap .border_color2{
    border-color: var(--color3);
}
/*ご利用の流れ*/
#cms_2-c .border_color2{
    border-color: var(--color1);
}

/*会社概要*/
#info_wrap .border_color2{
    border-color: var(--color3);
}

/*お問い合わせ*/
#form_bt #submit .txt_white{
    color: #fff;
    border-color: var(--color4);
}

/*サイトマップ*/
#page10 .hgs{
    font-family: var(--jp);
}
#page10 .width_600-max {
    max-width: 1000px;
}
#page10 .border_white{
    border-color: var(--color3);
}
/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
#page_title .en {
        font-size: 50px;
}
}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
#page_title .en {
        font-size: 30px;
}
#page_title .rotate_txt{
    display: none;
}
}


