@charset "UTF-8";

body{
    /*font-size: 1.0rem;*/
    min-height: 100vh;      /*bodyタグを内容が少なくても画面一敗の高さを保つように指示*/
    display: flex;          /*子要素の"flex:1;"を生かすには親要素に"display:flex;"が必要*/
    flex-direction: column; /* 縦並びに配置 */
    width: 100%;
    margin: 0 auto;
}
    header{
        position: fixed;
        display: flex;
        display: block;    /* 中央寄せに必要 */
        /*justify-content: center;*/
        text-align:center;  /* インライン要素の中央寄せ */
        width: 100%;
        height: 47px;
        padding: 10px 0px 12px 0px;
        /* background-color: azure;
        background: linear-gradient(to bottom, blue, azure 40%, azure 60%, blue);*/
        background: linear-gradient(to bottom, rgb(87, 87, 255), rgb(175, 206, 253) 22%, rgb(168, 220, 252) 40%, blue);
    }
    image.logo{
        display: block;
        width: 52%;
        /*margin-left: auto;
        margin-right: auto;*/
    }
    h1{
        display: block;
        padding-top: 6px;
        font-size: 1.125rem;
        font-weight: 400;
        color: rgb(246, 255, 0);
    }
    h2{
        display: block;
        padding-top: 6px;
        font-size: 1.125rem;        
        color: rgb(246, 255, 0);        
    }
    main{
        display: flex;
        justify-content: center;
        flex-direction: column;
        width: 100%;
        text-align:center;
        /*min-height: 100vh;*/
        flex: 1;
        margin-top: 69px;
        margin-bottom: 52px;
        padding-top: 20px;
        padding-bottom: 90px;
        /*text-align: center;*/
        /*background-color: lightgoldenrodyellow;  */
        /*background-color: rgb(207, 255, 255);    */ 
        background: blue;
    }
    .pht_s{
        width: 93%;
        margin-top: 6px;
        border: solid 1px white;
    }
    .slider{
        width: 100%;
        height: 100%;
        /*padding-bottom: 100px;*/
    }
    .swiper{        
        display: flex;
        justify-content: center;
        width: 100%;
        height: 300px;
        /*padding: 20px 0px;*/
    }
    .swiper-wrapper{
        width: 100%;
        height: 100%;
        /*margin: 0 auto;*/
        /*padding: 15px 0px;*/
    }
    .swiper-slide{
        width: 100%;
        height: 100%;        
        text-align: center;
        /*line-height: 360px;*/
        background-color: blue;
    }
    
    /* 前へ次への矢印カスタマイズ */
    .swiper-button-prev,.swiper-button-next {
        height: 50px;
        width: 50px;
    }
    /* 前へ次への矢印カスタマイズ */
    .swiper-button-prev:after,.swiper-button-next:after {
        background-repeat: no-repeat;
        background-size: contain;
        content: "";
        height: 26px;
        margin: auto;
        width: 26px;
    }
    /* 前への矢印カスタマイズ */
    .swiper-button-prev:after {
        background-image: url(https://dabx2.com/image_1/btn_nav-60.png);
        transform: scale(-1, 1); /* 左右反転 */ 
    }
    /* 次への矢印カスタマイズ */
    .swiper-button-next:after {
        background-image: url(https://dabx2.com/image_1/btn_nav-60.png);  
    }
/* 画像サイズ調整 */
/*.swiper-slide img {
  height: auto;
  width: 100%;
}*/


    .return{
        width: 100%;
        margin: 0 auto;
        display: flex;
        justify-content: center;
            font-size : 0.875rem;
            line-height : 1.2em;
            font-weight : bold;
            color: mediumblue;
    }
    .button{        
        text-align: center;
        padding: 6px 16px;
        margin-bottom: 10px;       
        border: 1px dotted #333333;
        border-radius: 12px;
        background-color: rgb(194, 224, 255);
    }
    footer{
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 52px;
    }
    ul{
        display: flex;
        justify-content: space-around;
        padding: 12px 10px 8px 10px;
        list-style:none;
        background-color: blue;
            font-size : 0.625rem;
            line-height : 1.2em;
            font-weight : bold;
            color: mediumblue;
    }
    li{
        text-align: center;
        margin-bottom: 10px;
        padding: 6px 6px;
        border: 1px dotted #333333;
        border-radius: 7px;
        background-color: rgb(194, 224, 255);
    }




    @media screen and (min-width:767px){
        body{        
            width: 820px;
            margin: 0 auto;        
            background-color: darkgrey;
        }
        header{
            width: 820px;
            height: 86px;
        }
        image.logo{
            display: block;
            width: 40%;
        }
        h1{
            display: block;
            padding-top: 6px;
            font-size: 1.5rem;
            color: rgb(246, 255, 0);        
        }
        main{
            display: flex;
            /*justify-content: center;
            flex-direction: row;
            flex-wrap: wrap;*/
            width: 100%;
            /*height: 1fr;*/
            padding-top: 50px;
            display: flex;
            justify-content: center;
            flex: 1;
            margin-top: 108px;
            margin-bottom: 60px;
        }
        .pht_s{
            width: 80%;
            /*height: 82%;*/
        }
        .swiper{
            width: 100%;
            height: 500px;
            display: flex;
            justify-content: center;
        }
        .swiper-wrapper{
            width: 100%;
            height: 100%;                
        }
        .swiper-slide{
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 500px;            
        }
        .swiper-button-prev:after,.swiper-button-next:after {
            height: 42px;
            width: 42px;
        }
        .return{
            font-size : 1.2rem;
        }
        .button{        
            text-align: center;
            padding: 8px 24px;
            /*margin-bottom: 10px; */
            border: 1px dotted #333333;
            border-radius: 18px;
            background-color: rgb(194, 224, 255);
        }
        footer{
            width: 820px;
            /*margin-bottom: 60px;*/
            height: 60px;
        }
        ul{
            font-size : 1.2rem;
        }
        li{
            /*text-align: center;*/
            /* margin-bottom: 10px;*/
            padding: 6px 20px;
            border: 1px dotted #333333;
            border-radius: 15px;
            background-color: rgb(194, 224, 255);
        }
    }