@charset "utf-8";/*文字コード指定*/

:root {/*変数定義-----------------------------------------------------------------------↓*/
    --compov_gree_pres: 15%;
    /*compov_gree_pres_copy,compov_gree_pres_imgのheight指定*/
}/*変数定義------------------------------------------------------------------------------↑*/

/*メモ帳
{{スマホを基本設計にする}}
    - 〜479px：SP縦
    - 480px〜599px：SP横
    - 600px〜959px：タブレット
    - 960px〜1279px：小型PC
    - 1280px〜：大型PC
*/

/*-------------------------------------------------------------------------------------------*/
/* ▼デフォルトCSS(ウィンドウ幅が~479pxの場合に適用)                                    */
/*-------------------------------------------------------------------------------------------*/
#kagomoto_anime_pagemove{/*デフォルトCSS-------------------OPロゴanime↓*/
    display: none;
    fill: transparent;
    height: auto;
    margin: 0 5%;
    width: 90%;
    animation: kago_pagemove 2s ease-in-out 0s forwards;
    animation-iteration-count: infinite;
    animation-play-state: paused;
}
@keyframes kago_pagemove {
    0% {
        transform: rotateY(360deg);
    }
    100% {
        transform: rotateY(0deg);
    }
}/*デフォルトCSS-------------------------------------------------------OPロゴanime↑*/

.compov_main{/*デフォルトCSS-------------------------------------compov_main↓*/
    display: none;
    float: left;
    height: auto;
    margin: 0 0 0 2%;
    overflow: hidden;
    position: relative;
    width: 96%;
}
.compov_gree{
    display: block;
    float: left;
    height: auto;
    margin: 0 0 150px 0;
    position: relative;
    width: 100%;
}
.compov_gree_copy{
    display: block;
    float: left;
    height: auto;
    overflow: hidden;
    position: relative;
    width: 100%;
    z-index: 1;
}
.compov_gree_copy p{
    font-size: calc(1.5rem + ((1vw - 0.64rem) * 0.7143));/* 20px~24pxで可変*/
    line-height: 1.6;
    padding: 0 5px 0 0;
}
.compov_gree_title{
    height: 12%;
    width: 100%;
}
.compov_gree_title h2,.compov_phil h2,.kagoov_list h2,.kagoov h2{
    border-image: linear-gradient(to right, #c8161d 30%, #004994 100%)1;
    border-top: 5px solid #e6e6e6;
    font-size: calc(3.0rem + ((1vw - 0.64rem) * 0.7143));/* 20px~24pxで可変*/
    padding: 25px 0 0 0;
}
.compov_gree_img_erea{
    display: block;
    float: left;
    height: 50vh;
    position: relative;
    width: 100%;
    z-index: 1;
}
.compov_gree_img{
    background-image: url("../img/syacyou_img_02.jpg");
    background-position: center center;
    background-size:cover;
    display: block;
    float: left;
    height: 85%;
    position: relative;
    width: 100%;
    z-index: 1;
}
.compov_gree_pres_copy{
    display: block;
    float: left;
    height: var(--compov_gree_pres);
    margin-right: 3%;
    position: relative;
    width: 22%;
    z-index: 1;
}
.compov_gree_pres_img{
    background-image: url("../img/kagomotosign.png");
    background-position: left center;
    background-repeat: no-repeat;
    background-size:contain;
    display: block;
    float: left;
    height: var(--compov_gree_pres);
    position: relative;
    width: 60%;
    z-index: 1;
}
.compov_gree_pres_copy p{
    display: inline-block;
    font-size: calc(1.4rem + ((1vw - 0.64rem) * 0.7143));/* 20px~24pxで可変*/
    line-height: 1.2;
    position: absolute;
    right: 0;
    text-align: right;
    top: 50%;
    transform: translateY(-50%);
    -webkit- transform: translateY(-50%);
}
.compov_phil{
    display: block;
    float: left;
    height: auto;
    margin: 0 0 150px 0;
    position: relative;
    width: 100%;
    z-index: 1;
}
.compov_phil h2{
    margin: 0 0 30px 0;
}
.compov_phil_p1{
    border-bottom: 10px solid #e6e6e6;
    border-image: linear-gradient(to right, #c8161d 30%, #004994 100%)1;
    display: inline-block;
    font-size: calc(2.0rem + ((1vw - 0.64rem) * 0.7143));/* 20px~24pxで可変*/
    line-height: 1.5;
    padding: 25px 0 0 0;
}
.compov_phil_p2{
    font-size: calc(1.5rem + ((1vw - 0.64rem) * 0.7143));/* 20px~24pxで可変*/
    line-height: 1.5;
    margin: 20px 0 0 0;
}
.kagoov{
    display: block;
    float: left;
    height: auto;
    position: relative;
    width: 100%;
    z-index: 1;
}
.kagoov h2{
    margin: 0 0 30px 0;
}
.kagoov_list{
    display: block;
    float: left;
    height: auto;
    margin: 0 0 150px 0;
    position: relative;
    width: 100%;
    z-index: 1;
}
dl{
    border-bottom: 2px solid #e6e6e6;
    border-image: linear-gradient(to right, #c8161d 30%, #004994 100%)1;
    display: table;
    font-size: calc(1.5rem + ((1vw - 0.64rem) * 0.7143));/* 20px~24pxで可変*/
    line-height: 1.5;
    table-layout: fixed;
    width: 100%;
}
dl:first-child{
    border-image: linear-gradient(to right, #c8161d 30%, #004994 100%)1;
    border-top: 2px solid #e6e6e6;
}
dt{
    background-color: rgba(0,0,0,0.03);
    display: table-cell;
    padding: 20px;
    text-align: right;
    width: 30%;
}
dd{
    display: table-cell;
    padding: 20px;
    width: 70%;
}
.kagoov_map{
    display: block;
    float: left;
    height: auto;
    margin: 0 0 150px 0;
    position: relative;
    width: 100%;
    z-index: 1;
}
.kagoov_map_i{
    border: 0;
    height: 700px;
    width: 100%;
}/*デフォルトCSS------------------------------------------------------compov_main↑*/

/*-------------------------------------------------------------------------------------------*/
/*▼SP_CSS ウィンドウ幅が480px~599pxの場合に適用                                       */
/*-------------------------------------------------------------------------------------------*/
@media screen and (min-width: 480px) {
}/*SP_CSS END*/

/*-------------------------------------------------------------------------------------------*/
/* ▼タブレット_CSS ウィンドウ幅が600px~959pxの場合に適用                           */
/*-------------------------------------------------------------------------------------------*/
@media screen and (min-width: 600px) {
    /*表示アニメ設定*/
    .animation-box{
        background-size:200%;
    }
    .animation-box.active{
        background-size:102%;
    }
    .compov_gree_title h2,.compov_phil h2,.kagoov_list h2,.kagoov h2{
        font-size: calc(5.0rem + ((1vw - 0.64rem) * 0.7143));/* 20px~24pxで可変*/
    }
    .compov_gree_copy{
        height: 88%;
        width: 50%;
    }
    .compov_gree_img_erea{
        height: 88%;
        width: calc(100% - 50%);
    }
}/*▼タブレット_CSS END*/

/*-------------------------------------------------------------------------------------------*/
/* ▼小型PC_CSS ウィンドウ幅が960px~1279pxの場合に適用                               */
/*-------------------------------------------------------------------------------------------*/
@media screen and (min-width: 960px) {
    .compov_main{
        margin: 0 0 0 10%;
        width: 80%;
    }
    .compov_gree_copy p{
        font-size: calc(1.6rem + ((1vw - 0.64rem) * 0.7143));/* 20px~24pxで可変*/
        line-height: 1.6;
    }
    .compov_gree_title h2,.compov_phil h2,.kagoov_list h2,.kagoov h2{
        font-size: calc(4.0rem + ((1vw - 0.64rem) * 0.7143));/* 20px~24pxで可変*/
    }
}/*小型PC_CSS END*/

/*-------------------------------------------------------------------------------------------*/
/* ▼大型PC_CSS ウィンドウ幅が1280px以上の場合に適用                                    */
/*-------------------------------------------------------------------------------------------*/
@media screen and (min-width: 1280px) {
.compov_phil{
    margin: 750px 25%;
    width: 50%;
}
    .compov_gree_pres_copy{
        margin-right: 2%;
        width: 30%;
    }
    .compov_gree_pres_copy p{
        text-align: right;
    }
}/*大型PC_CSS END*/