﻿@media  screen and (max-width: 768px){

}

@media  screen and (max-width: 667px){

}

/*メイン・キャッチコピー*/
#main .main_box.animStart h1{
    animation: heroText1 600ms 800ms both;
}
@keyframes heroText1{
0% {
    opacity: 1;
    -webkit-transform: translate(0px, 0);
    transform: translate(0px, 0);
}
100% {
    opacity: 1;
    -webkit-transform: translate(0px, 0);
    transform: translate(0px, 0);
}
}
#main .main_box.animStart h2{
    animation: heroText2 600ms 1000ms both;
}
@keyframes heroText2{
0% {
    opacity: 0;
    -webkit-transform: translate(50px, 0);
    transform: translate(50px, 0);
}
100% {
    opacity: 1;
    -webkit-transform: translate(0px, 0);
    transform: translate(0px, 0);
}
}
/*.catch {*/
/*    z-index: 3;*/
/*    position: absolute;*/
/*    top: 50%;*/
/*    left: 50%;*/
/*    transform: translate(-50%, -50%); X横 Y縦 始点が要素の中心になる */
/*    max-width: 500px;*/
/*    width: 100%;*/
/*}*/


/*ロゴ*/
#footer .logo{
    width: 50%!important;
}
@media  screen and (max-width: 667px){
#main .main_box .logo img{
    padding: 2%;
    width: 84%;
    background: rgba(223, 229, 229, 0.7);
}
#footer .logo{
    width: 90%!important;
}
}


/* 閉じるボタン付き追従バナー */
.fix_banner{
	max-width: 350px;
	position: fixed;
	bottom: 50px;
	right: 0;
	z-index: 10;
	transition: 0.5s;
}
.fix_banner .close_bt{
	position: absolute;
	bottom: 110px;
    right: 330px;
	display: block;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	transition: 0.5s;
	background-color: #fff;
	border: solid 2px #3e5152;
	z-index: 11;
	cursor: pointer;
}
.fix_banner .close_bt:hover{opacity: 0.7;}
.fix_banner .close_bt span{
	position: relative;
	display: block;
	width: 30px;
	height: 30px;
}
.fix_banner .close_bt span:before,.fix_banner .close_bt span:after{
	content: "";
	display: block;
	background-color: #0a1b7e;
	height: 4px;
	width: 20px;
	position: absolute;
	top:50%;
	left: 50%;
}
.fix_banner .close_bt span:before{
	-ms-transform: translate(-50%,-50%) rotate(-45deg);
	-webkit-transform: translate(-50%,-50%) rotate(-45deg);
	transform: translate(-50%,-50%) rotate(-45deg);
}
.fix_banner .close_bt span:after{
	-ms-transform: translate(-50%,-50%) rotate(45deg);
	-webkit-transform: translate(-50%,-50%) rotate(45deg);
	transform: translate(-50%,-50%) rotate(45deg);
}
.fix_banner.close {right: -450px;opacity:0;}
.fix_banner.close2{right: -450px;opacity:0;}

@media  screen and (max-width: 768px){
.fix_banner{max-width: 300px;}
.fix_banner .close_bt{bottom: 95px;right: 280px;}
}

@media  screen and (max-width: 667px){
.fix_banner{max-width: 190px;bottom: 30px;}
.fix_banner .close_bt{
	width: 25px;
	height: 25px;
	bottom: 55px;
	right: 175px;
}
.fix_banner .close_bt span{
	width: 25px;
	height: 25px;
}
}
/* 閉じるボタン付き追従バナー end */

/* 自動リンク設定 */
.linkStyle{
	color:#33408d;
	text-decoration: underline;
	transition: all 0.5s;
}
.linkStyle:hover{
	color:#33408d;
	opacity: 0.7;
	text-decoration: none;
}

/*-------- color ----------------*/
.page7 .box_item.bg_color1{
    background: #101c60;
}
.page7 .box_item p{
    color: #1a1a1a;
}
#tel_contact a{
    border-color: #4c5591;
    background: #111b52;
}
.cms_title h2::first-letter{
    color: #091c8f;
    font-size: 2rem;
}
#page_title p::first-letter{
    color: #091c8f;
    font-size: 2rem;
}
#page_title p.font_30up::first-letter{
    color: #091c8f;
    font-size: calc(2rem + 30px);
}

.cms_title::before{color: #091c8f;}

#contents .no{
    /*background: linear-gradient(125deg, rgb(10 27 126) 10%, rgba(26,26,26,1) 50%);*/
    background: linear-gradient(125deg, rgb(10 27 126) 10%, #0f1328 50%);
}
.g-menu{
    background:linear-gradient(125deg, rgb(10 27 126) 10%, rgba(26,26,26,1) 50%);}

/*.g-menu-btn:after{border: 2px solid #ffd600;background: rgba(13, 21, 100, .5);}*/
/*.g-menu-btn .dot span{background: #ffd600;}*/

/*.content_wrap{background-color: rgb(237 237 237);}*/
/*#header{background-color: #1b2589;}*/
/*.back_color{background: linear-gradient(rgb(13 21 100 / 50%) 0%,  rgb(13 21 100 / 90%) 20%, rgb(13 21 100 / 70%) 80%,rgb(13 21 100 / 60%) 100%);}*/
/*.top_cms_box{background-color: rgba(237,237,237, 1);}*/
/*#contents .box .box_item:before{background-color: rgba(10, 16, 64, .6);}*/
.catch_txt{background-color: transparent;}

/* メインカラー↓↓ */
#contents .box .box_item:after{background: linear-gradient(to bottom left, rgba(255,255,255,0) 50%, #0f1328 50.5%) no-repeat top left/100% 100%;}
#page_title:before{background: linear-gradient(to bottom right, rgba(255,255,255,0) 50%, #1a1a1a 50.5%) no-repeat top left/100% 100%;}
.bg_color1{background-color: #1a1a1a;}

.hvr_txt_color1:hover{color: #1a1a1a;}
.hvr_border_color1:hover{border-color: #1a1a1a;}
/* メインカラー↑↑ */

body,.txt_color_nomal{color: #000;}
.txt_white{color: #ebebeb;}
.txt_red{color: red;}
.txt_color1{color: #091c8f;}
.txt_color2{color: #fff;} /* サブカラー */
.txt_color3{color: #33408d;} /* アクセントカラー1 */
.txt_color4{color: #d6d7dd;} /* アクセントカラー2 */

/* background-color */
.bg_white{background-color: white;} /* 白背景 */
.bg_black{background-color: black;} /* 黒背景 */
.bg_color2{background-color: #fff;} /* サブカラー */
.bg_color3{background-color: #33408d;} /* アクセントカラー1 */
.bg_color4{background-color: #686d8d;} /* アクセントカラー2 */
.bg_color_clear{background-color: transparent!important;}


/* border-color ※!important */
.border_color1{border-color: #091c8f;}
.border_color2{border-color: #8f93a9;}
.border_color3{border-color: #33408d;}
.border_color4{border-color: #8e91a7;}


/* hover ------*/
/* color */
.hvr_txt_color_nomal:hover{color: #000;}
.hvr_txt_white:hover{color: white;}
.hvr_txt_red:hover{color: red;}
.hvr_txt_color2:hover{color: #fff;} /* サブカラー */
.hvr_txt_color3:hover{color: #33408d;} /* アクセントカラー1 */
.hvr_txt_color4:hover{color: #d6d7dd;} /* アクセントカラー2 */

/* background-color */
.hvr_bg_white:hover{background-color: white;} /* 白背景 */
.hvr_bg_black:hover{background-color: black;} /* 黒背景 */
.hvr_bg_color1:hover{background-color: #232f78;}
.hvr_bg_color2:hover{background-color: #fff;} /* サブカラー */
.hvr_bg_color3:hover{background-color: #33408d;} /* アクセントカラー1 */
.hvr_bg_color4:hover{background-color: #d6d7dd;} /* アクセントカラー2 */
.hvr_bg_color_clear:hover{background-color: transparent!important;}

/* border-color ※!important */
.hvr_border_color2:hover{border-color: #fff;}
.hvr_border_color3:hover{border-color: #33408d;}
.hvr_border_color4:hover{border-color: #d6d7dd;}
/*--------タブレット--------*/
@media screen and (max-width: 768px){
    #contents .no {
        background: linear-gradient(118deg, rgb(10 27 126) 10%, #0f1328 50%);
    }
}
/* スマホ ---------*/
@media screen and (max-width: 667px){
    #contents .no {background: linear-gradient(155deg, rgb(10 27 126) 10%, #0f1328 50%);}
    #contents .box .box_item:after{background:linear-gradient(to top left, rgba(255,255,255,0) 50%, #0f1328 50.5%) no-repeat bottom left/100% 100%;}
    #page_title p.font_30up::first-letter{
    color: #091c8f;
    font-size: calc(2rem + 2px);
    }
    #contents .box .box_item{padding: 50px 20px 30px;}
}

/*TOP問い合わせボタン*/
.conta{
    margin: 30px auto 0;
}
.conta a{
    display: block;
    margin: auto;
    max-width:300px;
    width: 300px;
    padding: 20px 0;
    text-align: center;
    background: #222;
    position: relative;
    box-shadow: 0px 4px 0 #323232;
    font-family: lemonde-sans, sans-serif;
    font-weight: 700;
    font-style: normal;
    transition: all 0.3s;
}
.conta a:hover{
    box-shadow: 0px 0px 0 #323232;
    transform: translateY(4px);
}

/*一日の流れ*/
.flow_type4 .box_description2{
	border-left: dotted 4px #1e2b38;
	background-color: rgba(204, 204, 204, .35);
}
.flow_type4 .box_txt1{
    color: #1a1a1a;
}
.flow_type4 .box_txt1,
.flow_type4 .box_txt2{
	padding-left:20px;
}
.flow_type4 .box_wrap{
    position: relative;
    padding-left: 30px;
}
.flow_type4 .box_wrap:before{
    content: "";
    display: inline-block;
    height: calc(100% - 30px);
    border-left: 4px dotted #1e2b38;
    position: absolute;
    top: 30px;
    left: 26px;
}
.flow_type4 .cate_box:last-of-type{
	padding-bottom: 0;
}
.flow_type4 .box_description2{
    position: relative;
    border-left: none;
    background-color: rgba(255, 255, 255, 0);
}
.flow_type4 .box_description2 span{
	position: absolute;
    display: inline-block;
    width: 68px;
    top: 5px;
    left: -38px;
}
/*--------タブレット--------*/
@media screen and (max-width: 768px){
.flow_type4 .cate_box{
	flex-direction: column-reverse;
}
.flow_type4 .box_description2 span {
	width: 61px;
	left: -34px;
}
}
/*--------スマートフォン--------*/
@media screen and (max-width: 667px){
.flow_type4 .box_wrap{
    padding-left: 23px;
}
.flow_type4 .box_wrap:before {
    left: 19px;
}
}


/* CMSマージンパディング・文字調整 */
#cms_1-a .cate_box{
    padding-bottom: 30px;
}
#cms_1-a .cate_box,
#cms_2-c .cate,
#cms_2-a .cate_list,
#cms_3-f .cate_title{
    margin-bottom: 50px;
}
#cms_2-a .cate_box{
    margin-top: 20px;
}
#cms_3-f .box_wrap{
    margin-top: 10px;
}
#cms_3-f .cate_txt1{
    margin-top: 0px;
}
#cms_3-f .cate_txt1{
    margin-bottom: 20px;
}
#cms_3-f .sub_cate{
    margin-bottom: 40px;
}
#cms_2-a .box_txt1{
    padding-bottom: 0;
}
#cms_2-a .cate_box {
    padding-bottom: 30px;
}
#cms_2-a .box_title1{
    padding-bottom: 0px;
}
#cms_2-a .box_title1,
#cms_3-c .cate_title,
#cms_3-c .box_title1{
    font-weight: 600;
}
#cms_2-a .box_item{
    padding-right: 0px;
}
#cms_2-a .box_title1{
    padding-top: 0px;
}
#cms_4-b .cate_box{
    margin: 0%;
}
#cms_4-b .box_wrap{
    display: flex;
    justify-content: space-between!important;
}
#cms_4-b .cate_txt1{
    padding: 0%;
    padding-bottom: 2%;
}


/* タブレット ------*/
@media screen and (max-width: 768px){
    /* CMSマージンパディング・文字の調整 */
    #cms_2-a .cate_box{
        padding-bottom: 0px;
    }
    #cms_3-f h4.box_title{
        width: 60%!important;
    }
    #cms_3-f p.box_txt1{
        width: 40%!important;
    }
    #page7 .box_title1{
        padding-right:0;
    }
}

/* スマホ ---------*/
@media screen and (max-width: 667px){
    /* CMSマージンパディング・文字の調整 */
    #cms_5-b .cate_box .arrow, .cms_5-b .cate_box .arrow{
        left: 0px;
    }
    #cms_5-b .cate_box .open_bt .box_title1, .cms_5-b .cate_box .open_bt .box_title1{
        margin-left: 60px;
    }
    #cms_5-b .cate_box .open_bt .box_title1::before, .cms_5-b .cate_box .open_bt .box_title1::before{
        left: -20px;
    }
    #cms_1-a .cate_box,
    #cms_2-a .cate_box,
    #cms_2-c .box_item{
        padding-bottom: 15px;
    }
    #cms_2-c .box_item,
    #cms_2-a .box_title1{
        padding-top: 0px;
    }
    #cms_2-c .box_item,
    #cms_2-a .box_item{
        padding-left: 0;
        padding-right: 0;
    }
    #cms_2-a .cate_box{
        margin-top: 0px;
    }
    #cms_2-a .cate_title{
        margin-bottom: 0px;
    }
    #cms_2-a .cate_txt1{
        margin-top: 15px;
    }

    #cms_2-a .box_img1{
        margin-top: 25px;
        margin-bottom: 0px;
    }

    #cms_2-c .cate_title,
    #cms_2-a .cate_title{
        font-size: 18px;
    }
    #cms_2-c .box_txt1,
    #cms_3-c .box_title1{
        font-size: 17px;
    }
    #page8 .contact_tel p.d_inline_b{
        font-size: 18px;
    }
    #page9 h3{
        font-size: 14px;
    }
    
    #cms_2-a .cate_title{
        padding: 10px;
    }
    #cms_3-f .cate_title span{
        font-size: 17px;
        font-weight: 600;
    }
    #cms_3-f .sub_cate_title{
        font-size: 16px;
    }
    #page9 .pd_5per_tb{
        padding: 5% 1%;
    }
    #cms_6-c .cate_box{
            margin-bottom: 50px;
    }
    #cms_6-c .arrow{
        bottom: -50px;
        height: 50px;
    }
    #contents .box_item,.cms_6-b .cate_box .box_txt2,.box_txt1,.cate_txt1,#cms_6-b .cate_box .box_txt2,.page7 .box_item p{
        letter-spacing: 0em;
    }
    #cms_5-b .cate_box,.cms_5-b .cate_box{padding:0;}
    #cms_5-b .cate_box .open_bt .arrow img, .cms_5-b .cate_box .open_bt .arrow img{
        width: 30px;
    }
    #cms_5-b .cate_box .open_bt .box_title1, .cms_5-b .cate_box .open_bt .box_title1{
        margin-left: 55px;
    }
    #cms_2-a .cate_title{
        letter-spacing: -0.03em;
    }
    #cms_2-a .cate ,.flow_type4 .cate{
        margin-bottom: 20px;
    }
    .flow_type4 .box_wrap{
        padding-top: 0px;
        margin-top: 0px;
    }
    .page6 .content_wrap{
        padding: 40px 0px;
    }
    .page7 .box_item{
        padding: 15px 5px;
    }
    .catch_txt h2,#contents h2{
        letter-spacing: 0em;
    }
    .catch_txt p{
        letter-spacing: -0.07em;
        line-height: 1.7em;
    }
    #contents p{
        letter-spacing: -0.08em;
        line-height: 1.7em;
    }

}
/*テンプレート*/
.cate_list li{margin: 0 10px;}
.cate_list li a{
    background: #939393;
    padding: 10px 5px;
}
.page7 .box_wrap{align-items: stretch}
.page10 .more a:after{display:none;}
.page10 .more{min-width: 245px;}
.page10 .more:nth-child(7){margin-bottom: 40px;}
.page10 .more:nth-child(8){margin-bottom: 40px;}
.page10 .more:nth-child(9){margin-bottom: 40px;}
.page10 .content_wrap{padding-bottom: 10px;}
#tel_contact{
    margin-bottom: 0px;
}
.box_wrap{margin-bottom: 0;}

/* タブレット ------*/
@media screen and (max-width: 768px){
    #page_title{background-attachment: scroll;}
    .pc_back{background-position:center;}
}
/* スマホ ---------*/
@media screen and (max-width: 667px){
    .cate_list li {width: 195px;}
    #page_title span{font-size: calc(1rem + 6px);}
    #tel_contact a{
        font-size: calc(1rem + 2px);
        padding: 10px 0px;
    }
    #page10 .more a:after{
        display: none;
    }
    #page10 .more.grid_10_sp{
        width: 90%!important;
        margin: 0 auto 40px;
    }
    .shop_info h2{
        font-size: calc(1rem + 7px);
        letter-spacing: 0px;
    }
    .shop_info .info,.shop_info .contact{
            padding: 80px 0;
    }
    .page9 .top_txt p{
        letter-spacing: -0.05em;
    }
    .page9 .box h3{
            letter-spacing: -0.05em;
    }
    .page9 .box p{
        letter-spacing: -0.07em;
            line-height: 1.75em;
            padding-left: 25px;
    }
}