﻿

/*
#loader{
    display:none;
}
*/



/*--all page---------------------------
-------------------------------------*/
.linkStyle{
    color:#bf9d74;
    transition:all 0.3s;
    text-decoration:underline;
}
.linkStyle:hover{
    opacity:0.7;
}

body{
    overflow:hidden;
}
.border_rad20{
    border-radius:20px;
}
.bg_dot {
    background-image: radial-gradient(rgba(248,251,251,0.25) 4%, transparent 5.5%);
    background-position: -100px -100px;
    background-size: 11px 11px;
}
header .head_fix .inner{
    border-radius: 12px;
}

/*--top page---------------------------
-------------------------------------*/
#main_img::before{
    background-image: linear-gradient(to top,#6f86d6  0%, #48c6ef 100%);
}
.main_catch {
    z-index: 2;
    width: 50vw;
    max-width: 950px;
    top: 28%;
    left: 7%;
}
/*ローディング後にフェードイン*/
.load-fade {opacity : 0; transition : all 3s/*処理にかかる時間*/;}
.load-fade.done{opacity : 0.3; transform : translate(0, 0);}
#main_img .txt{
    text-shadow: 0 0 30px rgb(94 137 175);
}
#intro{
    border-radius: 50px;
    margin-top: -50px;
}
.intro_sub_title{
    width: 65%;
    margin-left: -40px;
}
#contents1{
    margin-top:-50px;
}
.con1_sub_title{
    width: 60%;
    margin-left: -40px;    
}
#contents1 .img_box{
    border-radius: 0 20px 20px 0;
    overflow: hidden;
}
#contents2 .cate_box{
    padding: 100px;
}
.con2_sub_title{
    width: 20%;
    margin:20px auto;    
}

/*--under page---------------------------
-------------------------------------*/
.v_type2 .demo_box {padding-top: 70px}
.v_type2 {counter-reset: number 0;}
.v_type2 .cate_box {padding: 50px 20px 30px;}
.v_type2 .cate_box:before {
    counter-increment: number 1;
    content: "0" counter(number);
    display: inline-block;
    position: absolute;
    top: -20px;
    left: -5px;
    z-index: 1;
    font-size: 40px;
    font-weight: 100;
    /* font-style: italic; */
    color: #4b9fce;
    background-color: #fff;
    line-height: 1;
    padding: 0 25px 0 0;
}

.other_contact a{
    border-radius:50px;
}


/* ---------- responshive ---------- */
@media screen and (max-width: 1536px){
.bg_dot{
    background-image: radial-gradient(rgba(248, 251, 251, 0.55) 4%, transparent 7.5%);    
    background-size: 16px 16px;
}
}


@media screen and (max-width: 1366px){

#intro {
    border-radius: 30px;
    margin-top: -30px;
}
.intro_sub_title,
.con1_sub_title{
    margin-left: -20px;
}
}


/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
.bg_dot{
    background-size: 20px 20px;
}
#main_img{
    background-position: 68%;
}
.main_catch {
    width: 70vw;
    top: 45%;
    left: 1%;
}
#main_img .txt{
    top:70%;
}
#contents1 .img_box {
    border-radius: 20px;
}
.con1_sub_title {
    width: 90%;
}
#contents2 .cate_box {
    padding: 50px;
}
.con2_sub_title {
    width: 42%;
}
#sp_nav a.active{
    border-bottom: 1px solid #f5cd40;
}
#cms_2-g .cate_title {
    line-height: 1.5;
    font-size: 2em;
}
.other_contact a{
    color:#fff;
}
}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
.bg_dot {
    background-image: radial-gradient(rgba(248, 251, 251, 0.55) 4%, transparent 6.5%);
    background-size: 15px 15px;
}
#main_img {
    height: 92vh;
    background-position: 70%;
}
#main_img .txt {
    top: 60%;
}
#contents1 {
    margin-top: 0;
}
#contents2 .cate_box {
    padding: 15px;
}
.v_type2 .cate_box{padding: 42px 25px 25px;}
.v_type2 .cate_box:before{top: -31px;font-size: 48px;}


#cms_2-g .cate_title{
    font-size: 1.5em;
}
}




