@charset "UTF-8";
* {
    margin: 0 ;
    padding: 0 ;
    border-collapse: collapse;
    list-style-type: none;
}
body{
    background-color: rgb(255, 255, 255);
    background-image: repeating-linear-gradient(0deg, transparent, transparent 1px, #efefef 1px, #efefef 2px);
    background-attachment: fixed;
}
.background{
    background-color: #fff;

}
.contents{
    /* background-image: url(../images/background.jpg); */
    max-width: 950px;
    margin: 0 auto;
}
.contents2{
    background-color: #fff;
    max-width: 950px;
    margin: 0 auto;
}
.layout{
    background-color: #fff;
}
.layout-product-detail{
    background-color: #fff;
    /* max-width: 950px;
    margin: 0 auto; */
}
.nippou-menu{
    text-align: center;
}
.nippou-touroku{
    text-align: center;
}
.nippou-mente{
    text-align: center;
}


@media screen and (min-width: 1200px){

.dis-flex1{
  display: flex;
}
    .view-tb{
        display: none;
    }
.sp-view{
    display: none;
}
    /* ヘッダーエリア */
.layout{
    margin-top: 1%;
    box-shadow: 0 0 10px #999;
    max-width: 1000px;
    margin: 0 auto;
    background-color: #fff;
}
.header-area{
    display:grid;
    max-width: 1000px;
    margin: 0 auto;
    grid-template-columns: repeat(12,minmax(1fr,8fr));
    background-color: #fff;
    /* border-bottom: solid rgb(244, 143, 20) 8px; */
}
.border-line-head{
    border-bottom: solid rgb(179,142,246) 8px;
}
/* .header-area:hover{
    background-color: white;
}
.header-area:active{
    background-color: white;
    transition: background 250ms ease;
} */
.komidashi{
    font-weight: bold;
    margin-right: 20%;
}
.header-logo{
    text-align: center;
    grid-column: 1/2;
    grid-row: 1/3;
    display: block;
    margin: 5%;
}
.phone-area{
    grid-column:5/8;
    grid-row: 1/2;
    justify-content: right;
    text-align: center;
    display: flex;
    margin-right: 2%;
}
.phone-img{
    display: inline-block;
    margin-top: 1%;
}
.phone-number{
    font-size: 150%;
    margin-left: 1%;
    margin-top: 1%;
}
.working-time{
    font-weight: bold;
    font-size: 15px;
    display: inline-block;
    margin-top:  2%; 
    padding-left: 1%;
}
.menu-area{
    grid-column: 6/8;
    grid-row: 2/3;
}
.menu-lists{
    font-size: large;
    font-weight: bold;
   display: flex;
    align-items: center;
    gap: 1rem;
}
.menu-lists li{
    width: 30%;
    height: 30%;
    position: relative;
    text-align: center;
}
.menu-shiryouseikyu{
    background-color: orange;
    border-radius: 10px;
    justify-content: center;
    box-shadow:  4px 4px 0 0 #b0761d; 
}
/* ヘッダーエリア */

.border-line{
    border:solid rgb(179,142,246) 5px;
}
.btn--ghost1 {
    border: 1px solid rgb(179,142,246);
    background: #fff;
}
/* product1 */
.layout-product1{
    padding-top: 5%;
    padding-bottom: 5%;
    /* padding-left: 25%; */
    /* width: 80%; */
    display: block;
    margin: 0 auto;
}  
.nippou-menu{
    display: block;
}
.layout-product1-child{
    display: flex;
    width: 100%;
    height: auto;
    gap: 8%;
}
.product1-image1{
    max-width: 100%;
    width: 70%;
}
.product1-image1-2{
    display: none;
}
.product1-image{
    max-width: 80%;
}
/* .nippou-touroku{
    width: 100%;
} */
/* .nippou-mente{
    padding-left: 10%;
} */
.nippou-explain{
    padding-top: 3%;
    font-weight: bold;
    font-size: large;
    text-align: center;
}

.nippou-explain-text{
    text-align: left;
    display: inline-block;
    background-color: white;
}

.touroku-midashi0{
    font-weight: bold;
    /* text-align: left; */
    /* font-size: large; */
    text-align: center;
    /* padding-left: 8%; */
}
.touroku-midashi{
    font-weight: bold;
    text-align: center;
    font-size: 100%;
}
/* product1 */

/* product-explain */
.layout-product1-explain{
    background-color: white;
    border-radius: 10px;
    display: grid;
    column-gap: 5%;
    row-gap: 20%;
    padding-top: 5rem;
    padding-bottom: 10rem;
    padding-left: 2%;
    padding-right: 2%;
    grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
        .explain1{
            display:block;
            background-color:#bee1aa;
            border-radius: 10px;
            filter: drop-shadow(5px 5px 4px rgb(166, 165, 165) );
            text-align: center;
        }
}
.explain-img{
    margin-top: 3%;
    width: 20%;
    height: auto;
    
}
.explain-font{
    margin-top: 2%;
    margin-bottom: 1%;
    font-size: 98%;
    font-weight: bold;
    text-align: left;
    display: inline-block;
}
.shiryouseikyu{
    grid-column:2/3;
    grid-row: 2/3;
    background:linear-gradient(180deg, #edb864 0%, #ffe1aa 50%, #ffb866 50%, #caa547 100%);
    border-radius: 10px;
    margin-left: 10%;
    margin-right: 10%;
    text-align: center;
    filter: drop-shadow(5px 5px 4px rgb(166, 165, 165) );
    box-shadow: 0 4px 0 #a87a06; 
}
.shiryouseikyu:hover{
    transform: translateY(-4px);
    filter: drop-shadow(10px 10px 8px rgb(116, 112, 112) );
    transition: .8s cubic-bezier(0.37, 0, 0.63, 1);
    box-shadow: none;
}
.shiryou-icon{
    padding-top: 10%;
}
.shiryou-text{
    padding-top: 4%;
    padding-left: 2%;
    text-align: center;
    font-weight: bold;
    font-size: 120%;
}

.border-line2{
    border:solid rgb(179, 142, 246) 5px;
    margin-top: 1%;
    margin-bottom: 1%;
}

/* product-explain */

/* product2 */
.layout-product2{
    text-align:center ;
    display: block;
    padding-top: 5%;
    padding-bottom: 5%;
    /* display: grid;
    grid-template-columns: (1fr,16fr); */
}
.layout-product2-child{
    display: flex;
    justify-content: center;
}
.seiban{
    /* grid-column: 3/4; */
    display: block;
    /* padding-right: 5%; */
}
.product2-midashi1{
    font-weight: bold;
    font-size: 100%;
    margin-right: 20%;
}
.product2-midashi2{
    font-weight: bold;
    font-size: 100%;
}
.product2-image2{
    max-width: 80%;
}
.product2-image{
    max-width: 78%;
}
.tantou{
    display: block;
}
.koutei-code{
    display: block;
    /* padding-left: 10%; */
}
.nippou-movie{
    padding-top: 5%;
    margin: 0 auto;
    text-align: center;
    max-width: 60%;
}
/* product2 */


.cloud_bar {
    border-bottom: double 3px rgb(179,142,246);
    width: 90%;
    box-sizing: border-box;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    margin: 1em auto;
    padding: 3px;
}
img {
    border: none;
    /* vertical-align: bottom; */
}
dl.dl80 {
    width: 80%;
    margin: 30px auto 0;
    padding: 0;
    text-align: center;
    color: #333;
    padding-bottom: 20px;
}
.dl80 dt {
    background: #63b560;
    color: white;
    box-shadow: 2px 2px 1px #aaa;
    font-size: 16px;
    text-indent: 1em;
    font-weight: bold;
    padding-top: 2px;
}
.dl80 dd {
    margin-top: 5px;
    font-size: 14px;
    padding: 10px 20px;
    line-height: 1.5;
}

#hyou1 table{
    border-collapse:separate;
    border-spacing: 5px;
    width: 80%;
  }
  
  #hyou1 table th,#hyou1 table td{
    border-radius: 5px;
    text-align: center;
    padding: 10px 0;
  }
  
  #hyou1 table th{
    background-color: #21b935;
    color: white;
    border:solid 1px #21b935;
  }
  
  #hyou1 table td{
    background-color: #bee1aa;
    border:solid 1px #bee1aa;
  }
  
  .futozi{
    font-weight: bold;
  }
  
  #hyou2 table{
    border-collapse:separate;
    border-spacing: 5px;
    width: 90%;
  }
  
  #hyou3 table td{
    width:30%;
    padding-bottom: 2%;
  }

  /* under-menu */
.layout-header2{
    background-color: #fff;
    padding-top: 3%;
    padding-bottom: 10%;
    display: grid;
    grid-template-columns: (1fr,20fr);   
    max-width: 950px;
    margin: 0 auto;
}
.undermenu-logo-area{
    max-width: 60%;
    height: auto;
    /* grid-column: 6/7; */
    grid-column: 2/3;
    grid-row: 1/3;
}
.border-line3{
    border-left: solid orange;
    /* grid-column: 7/7; */
    grid-column: 3/3;
    grid-row: 1/4;
}
.under-menu-area{
    width: 120%;
    height: auto;
    font-weight: bold;
    font-size: large;
    grid-column: 4/12;
    grid-row: 1/3;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    column-gap: 3%;
}
.menu-home{
    padding: 10%;
    grid-column: 1/3;
    grid-row: 1/2;
}
.menu-ryoukin{
    padding: 10%;
    grid-column: 3/5;
    grid-row: 1/3;
}
.menu-company{
    padding: 10%;
    grid-column: 5/7;
    grid-row: 1/2;
}
.menu-shiryou{
    grid-column: 7/9;
    grid-row: 1/3;
    display: block;
    background-color: orange;
    border-radius: 10%;
    text-align: center;
    padding-top: 8%;
    padding: 5%;
}
.menu-icon{
    max-width:30%;
    max-height:30%;
    padding-top: 15%;
}
.menu-event{
    padding: 8%;
    grid-column: 1/3;
    grid-row: 2/3;
}
.menu-support{
    padding:8%;
    grid-column: 3/5;
    grid-row: 2/3;
}
.system-img{
    max-width: 800px;
}
}

@media screen and (min-width:426px) {
    .balloon5 {
        width: 100%;
        max-width: 900px;
        margin: 0 auto;
        overflow: hidden;
        display: flex;
        margin-top: 3%;
    }
    .balloon5 .faceicon {
        /* float: left; */
        margin-right: -90px;
        width: 80px;
        justify-content: right;
    } 

    .balloon5 .faceicon img{
        width: 100%;
        height: auto;
        border: solid 3px rgb(241, 167, 77);
        border-radius: 50%;
        background-color: #fff;
    }

    .balloon5 .chatting {
        width: 100%;
        margin: 0 auto;
    }

    .says {
        display: inline-block;
        position: relative; 
        margin: 5px 0 0 105px;
        padding: 17px 13px;
        border-radius: 12px;
        /* background: #d7ebfe; */
        background-color: rgb(248, 186, 111);
    }

    .says:after {
        content: "";
        display: inline-block;
        position: absolute;
        top: 18px; 
        left: -24px;
        border: 12px solid transparent;
        /* border-right: 12px solid #d7ebfe; */
        border-right: 12px solid rgb(248, 186, 111);
    }

    .says p {
        margin: 0;
        padding: 0;
        position: relative;
        padding-left: 20px;
    }
    .says p::before{
      content: "・";
      left: 0;
      position: absolute;
    }

    .dis-cen{
    padding: 5%;
    max-width: 950px;
    margin:0 auto;
    border-radius: 10px;
    word-break: auto-phrase;
}
}

@media screen and (max-width:425px){
    .balloon5 {
        width: 100%;
        max-width: 900px;
        margin: 0 auto;
        overflow: hidden;
        display: block;
        margin-top: 3%;
    }
    .balloon5 .faceicon {
        /* float: left; */
        /* margin-right: -90px; */
        width: 80px;
        margin: 0 auto;
        /* justify-content: right; */
    } 
    .balloon5 .faceicon img{
        width: 100%;
        height: auto;
        border: solid 3px rgb(241, 167, 77);
        border-radius: 50%;
    }

    .balloon5 .chatting {
        width: 100%;
        margin: 0 auto;
    }

    .says {
        display: inline-block;
        position: relative; 
        margin: 30px 0 0 0;
        padding: 23px 13px;
        border-radius: 12px;
        /* background: #d7ebfe; */
        background: rgb(248, 186, 111);
        font-size: small;
    }

    .says:after {
        content: "";
        display: inline-block;
        position: absolute;
        /* top: 18px; 
        left: -24px; */
        top: -25px;
        left: 42%;
        margin-left: -15px;
        border: 23px solid transparent;
        /* border-right: 20px solid #d7ebfe; */
        border-right: 20px solid rgb(248, 186, 111);
    }

    .says p {
        margin: 0;
        padding: 0;
        position: relative;
        padding-left: 15px;
    }
    .says p::before{
      content: "・";
      left: 0;
      position: absolute;
    }

    .dis-cen{
    margin-left: 3%;
    margin-right: 3%;
    margin-top: 3%;
    padding: 1%;
    max-width: 950px;
    border-radius: 10%;
    word-break: auto-phrase;
    }

}

.ex-text{
    font-size: 70%;
}

@media screen and (min-width:769px) and (max-width:1199px){
    .dis-flex1{
        display: flex;
    }
    .header-area{
        display: none;
        }
    .layout{
        margin-top: 1%;
        background-color: #fff;
        }
    .sp-view{
        display: none;
    }
        /* ヘッダーエリア */
    .layout{
        margin-top: 1%;
        box-shadow: 0 0 10px #999;
        max-width: 1000px;
        margin: 0 auto;
        background-color: #fff;
    }
    .header-area{
        display:grid;
        grid-template-columns: repeat(12,minmax(1fr,8fr));
        border-bottom: solid rgb(179, 142, 246) 5px;
    }
    .komidashi{
        font-weight: bold;
        margin-right: 20%;
    }
    .header-logo{
        text-align: center;
        grid-column: 1/2;
        grid-row: 1/3;
        display: block;
    }
    .phone-area{
        grid-column:5/8;
        grid-row: 1/2;
        justify-content: right;
        text-align: center;
        display: flex;
        margin-right: 2%;
    }
    .phone-img{
        display: inline-block;
        padding-bottom: 1%;
    }
    .phone-number{
        font-size:140%;
        margin-left: 1%;
    }
    .working-time{
        font-weight: bold;
        font-size: 80%;
        display: inline-block;
        margin-top:  1%; 
        padding-left: 1%;
    }
    .menu-area{
        grid-column: 6/8;
        grid-row: 2/3;
    }
    .menu-lists{
        font-size: medium;
        font-weight: bold;
        display: flex;
        grid-template-columns: repeat(12,minmax(1fr,12fr));
        grid-template-rows: 2fr;
    }
    .menu-lists li{
        width: 30%;
        height: 30%;
        position: relative;
        text-align: center;
    }
    .menu-shiryouseikyu{
        background-color: orange;
        border-radius: 10px;
        justify-content: center;
        box-shadow:  4px 4px 0 0 #b0761d; 
    }
    /* ヘッダーエリア */
    
    .border-line{
        border:solid rgb(170, 130, 244) 5px;
    }
    
    /* product1 */
    .layout-product1{
        /* padding-top: 10%;
        padding-bottom: 5%;
        padding-left: 18%;
        display: block; */
        text-align: center;
        display: block;
        padding-top: 5%;
        padding-bottom: 5%;
    }  
    .nippou-menu{
        display: block;
        justify-content: center;
    }
    .nippou-mente{
        display: block;
        justify-content: center;
    }
    .layout-product1-child{
        display: flex;
        width: 80%;
        height: auto;
        margin: 0 auto;
        gap: 6%;
    }
    .product1-image1{
        max-width: 90%;
        justify-content: center;
    }
    .product1-image1-2{
        display: none;
    }
    .product1-image{
        /* max-width: 90%; */
        width: 90%;
        height: auto;
        justify-content: center;
    }
    
    .nippou-explain{
        padding-top: 3%;
        font-weight: bold;
        font-size: large;
        text-align: center;
    }
    
    .nippou-explain-text{
        text-align: left;
        display: inline-block;
        background-color: white;
        /* margin-right: 20%; */
    }
    
    .touroku-midashi0{
        font-weight: bold;
        /* text-align: left; */
        font-size: medium;
        /* padding-left: 7%; */
    }
    .touroku-midashi{
        font-weight: bold;
        text-align: center;
        font-size: medium;
    }
    /* product1 */
    
    /* product-explain */
    .layout-product1-explain{
        background-color: white;
        border-radius: 10px;
        display: grid;
        column-gap: 5%;
        row-gap: 15%;
        padding-top: 3rem;
        padding-bottom: 6rem;
        padding-left: 10rem;
        padding-right: 10rem;
        margin-left:2% ;
        margin-right: 2%;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            .explain1{
                display:block;
                background-color:#bee1aa;
                border-radius: 10px;
                filter: drop-shadow(5px 5px 15px rgb(166, 165, 165) );
                text-align: center;
            }
    }
    .explain-img{
        margin-top: 3%;
        width: 20%;
        height: auto;
        
    }
    .explain-font{
        margin-top: 2%;
        margin-bottom: 1%;
        font-size: medium;
        font-weight: bold;
        text-align: left;
        display: inline-block;
    }
    .shiryouseikyu{
        grid-column: 2/3;     
        display: block;
        padding-top: 10%;
        background:linear-gradient(180deg, #edb864 0%, #ffe1aa 50%, #ffb866 50%, #caa547 100%);
        border-radius: 10px;
        text-align: center;
        filter: drop-shadow(5px 5px 4px rgb(166, 165, 165) );
        box-shadow: 0 4px 0 #a87a06; 
    }

    .shiryouseikyu:hover{
        transform: translateY(-4px);
        filter: drop-shadow(10px 10px 8px rgb(116, 112, 112) );
        transition: .8s cubic-bezier(0.37, 0, 0.63, 1);
        box-shadow: none;
    }
    .shiryou-text{
        text-align: center;
        font-weight: bold;
        font-size: 120%;
    }
    
    .border-line2{
        border:solid rgb(226, 100, 17) 5px;
        margin-top: 1%;
        margin-bottom: 1%;
    }
    
    /* product-explain */
    
    /* product2 */
    .layout-product2{
        text-align:center ;
        display: block;
        padding-top: 5%;
        padding-bottom: 5%;
        /* display: grid;
        grid-template-columns: (1fr,16fr); */
    }
    .layout-product2-child{
        display: flex;
        justify-content: center;
    }
    .product2-image{
        max-width: 80%;
    }
    .product2-image2{
        max-width: 80%;
    }
    .seiban{
        /* grid-column: 3/4; */
        display: block;
        padding-right: 5%;
    }
    .product2-midashi1{
        font-weight: bold;
        font-size: medium;
        margin-right: 20%;
    }
    .product2-midashi2{
        font-weight: bold;
        font-size: medium;
    }
    .tantou{
        display: block;
    }
    .koutei-code{
        display: block;
        padding-left: 10%;
    }
    .nippou-movie{
        padding-top: 5%;
        max-width: 50%;
        margin: 0 auto;
        text-align: center;
    }
    /* product2 */
    
    
    .cloud_bar {
        border-bottom: double 3px #42e375;
        width: 90%;
        box-sizing: border-box;
        font-size: 18px;
        font-weight: bold;
        text-align: center;
        margin: 1em auto;
        padding: 3px;
    }
    .system-img{
        max-width: 80%;
    }
    dl.dl80 {
        width: 80%;
        margin: 30px auto 0;
        padding: 0;
        text-align: center;
        color: #333;
        padding-bottom: 20px;
    }
    .dl80 dt {
        background: #63b560;
        color: white;
        box-shadow: 2px 2px 1px #aaa;
        font-size: 16px;
        text-indent: 1em;
        font-weight: bold;
        padding-top: 2px;
    }
    .dl80 dd {
        margin-top: 5px;
        font-size: 14px;
        padding: 10px 20px;
        line-height: 1.5;
    }
    
    #hyou1 table{
        border-collapse:separate;
        border-spacing: 5px;
        width: 80%;
    }
    
    #hyou1 table th,#hyou1 table td{
        border-radius: 5px;
        text-align: center;
        padding: 10px 0;
    }
    
    #hyou1 table th{
        background-color: #21b935;
        color: white;
        border:solid 1px #21b935;
    }
    
    #hyou1 table td{
        background-color: #bee1aa;
        border:solid 1px #bee1aa;
    }
    
    .futozi{
        font-weight: bold;
    }
    
    #hyou2 table{
        border-collapse:separate;
        border-spacing: 5px;
        width: 90%;
    }
    
    #hyou3 table td{
        width:30%;
        padding-bottom: 2%;
    }
    
      /* under-menu */
    .layout-header2{
        margin-top: 3%;
        padding-bottom: 10%;
        display: grid;
        grid-template-columns: (1fr,20fr);   
    }
    .undermenu-logo-area{
        grid-column: 5/6;
        grid-row: 1/3;
    }
    .undermenu-logo{
        max-width: 70%;
        text-align: right;
    }
    .border-line3{
        border-left: solid orange;
        grid-column: 6/6;
        grid-row: 1/4;
    }
    .under-menu-area{
        font-weight: bold;
        font-size: medium;
        grid-column: 6/20;
        grid-row: 1/4;
        column-gap: 3%;
        display: grid;
        grid-template-columns: subgrid;
        grid-template-rows: subgrid;
    }
    
    .menu-home{
        padding: 10%;
        grid-column: 1/3;
        grid-row: 1/2;
    }
    .menu-ryoukin{
        padding: 10%;
        grid-column: 3/5;
        grid-row: 1/3;
    }
    .menu-company{
        padding: 10%;
        grid-column: 5/7;
        grid-row: 1/2;
    }
    .menu-shiryou{
        grid-column: 7/9;
        grid-row: 1/3;
        display: block;
        background-color: orange;
        border-radius: 10%;
        text-align: center;
        padding: 10%;
    }
    .menu-icon{
        max-width:30%;
        padding-top: 10%;
    }
    .menu-event{
        padding: 8%;
        grid-column: 1/3;
        grid-row: 2/3;
    }
    .menu-support{
        padding:8%;
        grid-column: 3/5;
        grid-row: 2/3;
    }

}


@media screen and (max-width:768px){
    .header-area{
        display: none;
    }
    .view-tb{
        display: none;
    }
    /* product1 */
    .layout-product1{
        padding-top: 5%;
        padding-bottom: 5%;
        display: block;
        text-align: center;
        font-size: small;
    }
    .product1-image1{
        display: none;
    }
    .product1-image1-2{
        max-width: 50%;
        height: auto;
        margin-bottom: 5%;
    }
    .product1-image{
        max-width: 50%;
        height: auto;
        margin-bottom: 5%;
    }
    /* product1-explain */
    .layout-product1-explain{
        background-color: white;
        border-radius: 10px;
        display: grid;
        column-gap: 2%;
        row-gap: 10%;
        padding-top: 8%;
        /* padding-bottom: 40%; */
        padding-bottom: 10%;
        margin-left:2% ;
        margin-right: 2%;
        /* padding-left: 20%; */
        /* padding-right: 20%; */
        grid-template-columns: repeat(auto-fill, minmax(40%, 1fr));/*old 50%*/
            .explain1{
                display:block;
                background-color:#bee1aa;
                border-radius: 10px;
                filter: drop-shadow(5px 5px 15px rgb(166, 165, 165) );
                text-align: center;
            }
            .shiryouseikyu{
                background:linear-gradient(180deg, #edb864 0%, #ffe1aa 50%, #ffb866 50%, #caa547 100%);
                display: block;
                text-align: center;
                border-radius: 10px;
                filter: drop-shadow(5px 5px 15px rgb(166, 165, 165) );
                box-shadow: 0 4px 0 #a87a06; 
            }
    }
    .explain-img{
        margin-top: 3%;
        /* max-width: 15%; */
        max-width: 30%;
        height: auto;
        
    }
    .explain-font{
        margin-top: 2%;
        margin-bottom: 1%;
        /* font-size: small; */
        font-size: 70%;/*new*/
        font-weight: bold;
        text-align: left;
        display: inline-block;
    }

    .shiryouseikyu:hover{
        transform: translateY(-4px);
        filter: drop-shadow(10px 10px 15px rgb(116, 112, 112) );
        transition: .8s cubic-bezier(0.37, 0, 0.63, 1);
        box-shadow: none;
    }
    .shiryou-icon{
        padding-top: 10%;
    }
    .shiryou-text{
        text-align: center;
        font-weight: bold;
        font-size: medium;
    }
    
    .border-line2{
        border:solid rgb(226, 100, 17) 5px;
        margin-top: 1%;
        margin-bottom: 1%;
    }
    
    /* product-explain */
    
    /* product2 */
    .layout-product2{
        justify-content: center;
        text-align: center;
        padding-top: 10%;
        padding-bottom: 15%;
    }
    .product2-image{
        max-width: 50%;
        margin-bottom: 5%;
    }
    .product2-image2{
        max-width: 40%;
        margin-bottom:5%;
    }
    .nippou-movie{
        text-align: center;
        max-width: 80%;
        margin: 0 auto;
    }
    /* product2 */

    /* システム構成例 */
    .system-img{
        width: 80%;
        height: auto;
    }
    .cloud_bar {
        border-bottom: double 3px #42e375;
        width: 90%;
        box-sizing: border-box;
        font-size: 18px;
        font-weight: bold;
        text-align: center;
        margin: 1em auto;
        padding: 3px;
    }
    dl.dl80 {
        width: 80%;
        margin: 30px auto 0;
        padding: 0;
        text-align: center;
        color: #333;
        padding-bottom: 20px;
    }
    .dl80 dt {
        background: #549152;
        box-shadow: 2px 2px 1px #aaa;
        font-size: 16px;
        color: white;
        text-indent: 1em;
        font-weight: bold;
        padding-top: 2px;
    }
    .dl80 dd {
        margin-top: 5px;
        font-size: 14px;
        padding: 10px 20px;
        line-height: 1.5;
    }
    
    #hyou1 table{
        border-collapse:separate;
        border-spacing: 5px;
        width: 80%;
    }
    
    #hyou1 table th,#hyou1 table td{
        border-radius: 5px;
        text-align: center;
        padding: 10px 0;
        border-collapse: separate;
        border-spacing: 5px;
    }
    
    #hyou1 table th{
        background-color: #21b935;
        color: white;
        border:solid 1px #21b935;
    }
    
    #hyou1 table td{
        background-color: #bee1aa;
        border:solid 1px #bee1aa;
    }
    
    .futozi{
        font-weight: bold;
    }
    
    #hyou2 table{
        border-collapse:separate;
        width: 90%;
    }
    
    #hyou3 table td{
        width:30%;
        padding-bottom: 2%;
    }
    .layout-header2{
        display: none;
    }
    .nippou-explain{
        padding-top: 3%;
        font-weight: bold;
        text-align: center;
    }
    
    .nippou-explain-text{
        text-align: left;
        display: inline-block;
        background-color: white;
        border-radius: 10px;
    }
    .kiki-area{
        font-size: 60%;
    }
    .pd-bottom{
        padding-bottom: 5%;
    }
}
@media screen and (min-width:321px)  {
    .ss-view{
        display: none;
    }

}

/* === header 資料請求だけ紫の丸ボタン化 === */
.header-area .menu-lists li:last-child a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .45em 1.1em;
  border: 2px solid #6b4ce6;      /* 紫の丸枠 */
  border-radius: 9999px;           /* 丸 */
  color: #6b4ce6;
  background: #fff;
  line-height: 1;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
  box-shadow: 0 0 0 0 rgba(107,76,230,.0);
}

@media (hover:hover){
  .header-area .menu-lists li:last-child a:hover{
    background: #6b4ce6;           /* ホバー時に反転 */
    color: #fff;
    box-shadow: 0 4px 12px rgba(107,76,230,.25);
  }
}

/* 小さめ画面での押しやすさ確保 */
@media (max-width:1199px){
  .header-area .menu-lists li:last-child a{ padding: .5em 1.2em; }
}