@charset "utf-8";

/********************************/
/* 内容要素 */
/********************************/
/*mobile*/
@media screen and (max-width: 1023px) {

    .center{
        line-height: 1.5em;
        font-size: 20px;
        width:100%;
        margin: 0px auto;
        padding-bottom: 20px;
    }
    
    .center a{ text-decoration: none; }
    .center a:link { color: #000000; }
    .center a:visited { color: #000000; }
    .center a:active { color: #000000; }
    .center a:hover { opacity: 0.6; filter: brightness(110%); }
    
    .center_naiyou{
        display: flex;
        flex-direction: column;
        padding: 0;
        list-style: none;
    }
    
    .center_naiyou li{
        padding: 0px;
        margin: 0px auto;
    }
    
    .center_banner{
        padding: 0px;
        list-style: none;
        display: flex;
        flex-direction: column;
        margin: 0 auto;
    }
    
    .center_banner li{
        text-align: left;
    }
    
    .center_banner p{
        padding: 0px;
        margin: 0px auto;
    }
    
    .center_main{
        padding: 0px;
        list-style: none;
        display: flex;
        flex-direction: column;
        margin: 0 auto;
    }
    
    .center_main li{
        text-align: right;
    }
}

/*pc*/
@media screen and (min-width: 1024px) {
    
    .center{
        line-height: 1.5em;
        font-size: 20px;
        width: 1050px;
        margin: 0px auto;
        padding-bottom: 20px;
    }
    
    .center a{ text-decoration: none; }
    .center a:link { color: #000000; }
    .center a:visited { color: #000000; }
    .center a:active { color: #000000; }
    .center a:hover { opacity: 0.6; filter: brightness(110%); }
    
    .center_naiyou{
        display: flex;
        padding: 0;
        list-style: none;
        width: 1050px;
    }
    
    .center_naiyou li{
        padding: 0px;
        margin: 0px auto;
    }
    
    .center_banner{
        padding: 0px;
        margin: 0px auto;
        list-style: none;
        display: flex;
        flex-direction: column;
    }
    
    .center_banner li{
        text-align: left;
    }
    
    .center_banner p{
        padding: 0px;
        margin: 0px auto;
    }
    
    .center_main{
        padding: 0px;
        margin: 0px auto;
        list-style: none;
        display: flex;
        text-align: right;
    }
    
    .center_main li{
        text-align: right;
    }
}

/********************************/
/* 画像切り替え */
/********************************/
/*mobile*/
@media screen and (max-width: 1023px) {
    .myChangeImage {
        position: relative;
        width: 100%;
        height: calc( 100vw / 2.5 );    /*画像の大きさをそれっぽく計算して縦幅にしている*/
    }

    .myChangeImage img{
        position: absolute;
        top: 0;
        left: 0;
        animation: ChangeImage 12s infinite;
        opacity: 0;
        width:100%;
        height: auto;
    }
}

/*pc*/
@media screen and (min-width: 1024px) {
    .myChangeImage {
        position: relative;
        width : 1050px;
        height : 430px;
    }

    .myChangeImage img{
        position: absolute;
        top: 0;
        left: 0;
        animation: ChangeImage 12s infinite;
        opacity: 0;
    }
}

/***** 画像2つの場合 *****/
@keyframes ChangeImageFirst {
    0%{ opacity: 1;}
    25%{ opacity: 1;}
    50%{ opacity: 1;}
    75%{ opacity: 0;}
    100%{ opacity: 0;}
}

@keyframes ChangeImage{
    0%{ opacity: 0;}
    25%{ opacity: 1;}
    50%{ opacity: 1;}
    75%{ opacity: 0;}
    100%{ opacity: 0;}
}

.myChangeImage img:nth-of-type(1) {
    animation: ChangeImageFirst 12s infinite;
    animation-delay: 0s;
}
.myChangeImage img:nth-of-type(2) {
    animation-delay: 6s;
}
/*************************/

/***** 画像3つの場合 *****
@keyframes ChangeImageFirst {
    0%{ opacity: 1;}
    20%{ opacity: 1;}
    33%{ opacity: 1;}
    63%{ opacity: 0;}
    100%{ opacity: 0;}
}

@keyframes ChangeImage{
    0%{ opacity: 0;}
    20%{ opacity: 1;}
    33%{ opacity: 1;}
    63%{ opacity: 0;}
    100%{ opacity: 0;}
}

.myChangeImage img:nth-of-type(1) {
    animation: ChangeImageFirst 18s infinite;
    animation-delay: 0s;
}
.myChangeImage img:nth-of-type(2) {
    animation-delay: 6s;
}
.myChangeImage img:nth-of-type(3) {
    animation-delay: 12s;
}
*************************/