﻿/*===========================================================*/
/* 個別 */
/*===========================================================*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&family=Noto+Sans+JP:wght@500&display=swap');
body{
        font-family: 'Montserrat',"Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif!important;
        font-weight: 500;
}
#fakeloader .fl{max-width: 150px!important;}
#logo2 {
    max-width: 150px;
}
#wrap{overflow: hidden;}
header{padding-bottom: 5%;}
.index_header #logo{max-width: 150px;}
#header .nav_box .inner{width: 100%!important;}
#main_img{
    left: 340px;
    width: 98%;
}
.index_header .nav_box{padding: 30px 100px 10% 3%;}
#catch .catch_txt h2 span, #contents2 .contents_txt h2 span{background-color: #d6bba9;opacity: 1;}
.num{
    color: rgba(69,143,157,0.5);
    color: rgba(30,144,255,0.5)!important;
}
#contents2 .num{color: #fff;}
.more{z-index: 1;}
.sample{
    position: absolute;
    font-size: 2rem;
    z-index: 2;
    letter-spacing: 3px;
    bottom: 15vw;
    left: 5vw;
    color: #fff;
    display: block;
    margin-bottom: 20px;
    text-shadow: 1px 2px 10px #1e90ff;
}
.hamburger.head_fix{background-color: #1e90ff;}
/*===========================================================*/
/* catch */
/*===========================================================*/
.catch {
    font-size: 4rem;
    z-index: 2;
    letter-spacing: 3px;
    bottom: 10vw;
    left: 5vw;
    color: #fff;
    text-shadow: 2px 3px 10px #1e90ff;
}
.main_fade1 {
    opacity: 0;
    transform: translateX(-20px);
}
.main_fade1.fadetrans {
    opacity: 1;
    transform: none;
    transition: 0.7s;
}

/*===========================================================*/
/* cms_6-a */
/*===========================================================*/
.cms_6-a .cate_box:first-of-type {
    flex-direction: row-reverse;
}
.cms_6-a .cate_box:first-of-type.bg_color2{background-color: rgba(69,143,157,0.4);}
.cms_6-a .cate_box:last-of-type.bg_color2{background-color: rgba(214,187,169,0.5);}
.cms_6-a .cate_box figure.hover{transform: scale(1.1);}
.cms_6-a .cate_box a{transition: 0.7s;}

/*===========================================================*/
/* item */
/*===========================================================*/
.item{
    position: absolute;
    max-width: 300px;
}
.item01{bottom: 0;right: 0;}
.item05{
    bottom: -50px;
    left: -30px;
    z-index: 1;
    width: 20%;
    max-width: 270px;
}
.item06,.item07{
    bottom: 0;
    right: 10vw;
    z-index: 1;
}
.item07{right: inherit;left: 10vw;}
/*#catch .catch_txt .num,#contents .num,#contents2 .num{
    padding-top: 100px;
    background-image: url(Dup/img/item02.png);
    background-repeat: no-repeat;
    background-size: 50px;
    background-position: center;
}
#contents2 .num{
    background-position: center left 80px;
    background-image: url(Dup/img/item03.png);
}
#catch .catch_txt .num{
    background-image: url(Dup/img/item04.png);
    background-position: center left 80px;
}*/
/*===========================================================*/
/* 下層 */
/*===========================================================*/
#logo{max-width: 100px;}
#page_title .page_title_img{height: 400px;}



/*===========================================================*/
/* タブレット */
/*===========================================================*/
@media screen and (max-width: 768px){
#main_img{height: 46vw!important;left: 230px;width: 70%;}
.catch{font-size: 2rem;}
#catch .catch_txt .num,#contents2 .contents_txt .num{padding-bottom: 20px;}
#catch .catch_txt .num,#contents2 .contents_txt .num{
    padding-top: 110px;
    background-position: center left 80px;
}
.all_header #global-nav ul li{padding: 0;}
#page_title .page_title_img{height: 350px;}
header{padding-bottom: 0;}

.cms_6-a .cate_box:first-of-type .d_table-cell{background-color: rgba(69,143,157,0.4);}
.cms_6-a .cate_box:last-of-type .d_table-cell{background-color: rgba(214,187,169,0.5);}

.item01{width: 35%;}
.item05{bottom: 0;left: 0;}
.item06, .item07{width: 35%;}
.item06{right: -40px;}
.item07{left: -40px;}
}



/*===========================================================*/
/* スマホ */
/*===========================================================*/
@media screen and (max-width: 667px){
.index_header #logo{max-width: 80px;margin-bottom: 20px;}
.index_header .nav_box, .nav_box{padding: 15px 10px 15px 15px;}
#main_img{height: 70vw!important;width: 100%;padding-top: 0!important;}
#page8 .contact_wrap{padding: 0;border: none;}
#logo{max-width: 80px;margin-bottom: 20px;}
#header .nav_box{position: static;}
#page_title .page_title_img{height: 200px;}
.hamburger__icon{margin-top: 12px;}

#catch .catch_txt .num, #contents2 .contents_txt .num{background-position: center left 60px;}
.catch{font-size: 20px;}



}


/*===========================================================*/
/* IE */
/*===========================================================*/
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none){
.more a{padding: 7px 10px 7px!important;}
.contact_box .header_contact_link a{padding: 4px 25px 4px!important;}
#page2 .pager li a .posi_center{transform: translate(-50%,-50%)!important;}
#cms_2-a .cate .cate_title,#cms_6-a .cate .cate_title{padding-top: 10px!important;}
#cms_5-a .cate .cate_title span:last-of-type{padding-top: 0!important;}
#page9 .box_wrap .box a{padding: 3px 10px 3px!important;}
.hamburger.head_fix{background-color: rgba(69, 143, 157, 1)!important;}
.cms_6-a .cate_box{
    align-items: center!important;
  }


}


/*2023_0413*/
.index_header #logo {
    max-width: 200px;
}
#fakeloader .fl {
    max-width: 250px!important;
}
#logo2 {
    max-width: 240px;
}
#logo {
    max-width: 200px;
}
@media screen and (max-width: 768px){
    .index_header #logo{width: 100%!important;}
    #logo{width: 30.66667%!important;}
}

@media screen and (max-width: 667px){
    .index_header #logo {
    max-width: 150px;
}
}