@charset "UTF-8";

html{
    height: 100%;
    overflow-y: scroll;
}

body{
    background-color: #f8f7fc;
    width: 100%;
    min-height: 100%;
    margin: 0;
}



.img{
    display: flex;
	background-color: #f8f7fc;
    justify-content: center;
    margin: 5rem auto 1rem;
}

.toppage{
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.intro {
    text-align: center;
    max-width: 1050px;
    padding: 0.75em 0.5em;
    margin: 2em auto 0rem;
    background: #d6ebff;
    box-shadow: 0px 0px 0px 10px #d6ebff;
    border: dashed 2px white;
}

.intro-p {
    color: #575757;
    font-size: 15px;
    padding-bottom: 5px;
    margin: 0;
    padding: 0;
}

span {
    color: #bc56e4;
    font-weight: 600;
}

.top-word , .top-excel , .top-insatu , .top-sonota{
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    width: 275px;
    height: 450px;
    margin: 15px 18px;
    color: #000000;
    text-decoration: none;
    position: relative;
    display: flex;
    border-radius: 25px;
    box-shadow: 0 2.5px 5px rgba(92, 12, 196, 0.199);
    margin-top: 50px;
}

.icon{
    position: absolute;
    top: 130px;
}
.picon{
    height: 140px;
}

.click-word , .click-excel , .click-insatu , .click-sonota{
    width: 205px;
    height: 53px;
    border-radius: 30px;
    text-align: center;
    line-height: 50px;
    font-size: 25px;
    font-weight: 900;
    color: #2b2b2b;
    text-decoration: none;
    position: absolute;
    top: 30px;
}

.click-word{
    background-color: #5291da;
    color: #ffffff;
}
.click-excel{
    background-color: #5ac788;
    color: #ffffff;
}
.click-insatu{
    background-color: #f06aad;
    color: #ffffff;
}
.click-sonota{
    background-color: #e9cf5b;
    color: #ffffff;
}

ul{
    position: absolute;
    top: 290px;
    list-style: none; 
    margin-top: -20px;
    padding-left: 0; 
}

ul li{
    text-align: left;
    margin: 4px;
    margin-bottom: 8px;
    border-bottom: 1px dashed #f0f0f0;
}

ul li:last-child {
    border-bottom: none;
}

ul li a {
    display: block;
    padding: 8px 10px 8px 22px; 
    font-size: 0.95rem;
    color: #495057;
    border-radius: 6px;
    position: relative; 
}

ul li a::before {
    content: ""; 
    position: absolute;
    left: 6px;
    top: 50%;
    border-style: solid;
    border-width: 5px 0 5px 7px; 
    border-color: transparent transparent transparent #2b579a; 
}

ul li a:hover {
    background-color: #f1f3f5;
    color: #000;
}

ul li a{
    color: #000000;
}

ul li p {
    text-align: right;
    font-size: 10px;
    color: #495057;
}

a {
    text-decoration: none;
}

footer{
    display: block;
    background-color: #c1c1f1;
    height: 5rem;
    text-align: center;     
    line-height: 5rem;   
    margin-top: 3.5rem;
}

footer p {
    margin: 0;
}

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex: 1;
}





h2 {
    margin-bottom: 30px;
}

nav{
    align-content: center;
}
.navigation{
    display: flex;
    justify-content: center;
}
.navigation a{
    text-align: center;
    align-content: center;
    width: 250px;
    height: 100px;
    background-color: #e5e6df;
    position: relative;
    color: black;
    text-decoration: none;
    margin: 20px 30px;
    font-size: larger;
    font-weight: 600;
}
.navigation a::after{
    content: "";
    position: absolute;
    bottom: -24px;
    left: 45%;
    border: 12px solid transparent;
    border-top: 12px solid #e5e6df;
}


.word , .excel , .insatu , .sonota{
    text-align: center;
    align-content: center;
    width: 250px;
    height: 100px;
    position: relative;
    margin: 20px 30px;
    font-size: larger;
    font-weight: 600;
}
.word{
    background-color: #a4bafd;
}
.word::after{
    content: "";
    position: absolute;
    bottom: -24px;
    left: 45%;
    border: 12px solid transparent;
    border-top: 12px solid #a4bafd;
}
.excel{
    background-color: #ace4b9;
}
.excel::after{
    content: "";
    position: absolute;
    bottom: -24px;
    left: 45%;
    border: 12px solid transparent;
    border-top: 12px solid #ace4b9;
}
.insatu{
    background-color: #f1d6e7;
}
.insatu::after{
    content: "";
    position: absolute;
    bottom: -24px;
    left: 45%;
    border: 12px solid transparent;
    border-top: 12px solid #f1d6e7;
}
.sonota{
    background-color: #ffe9ae;
}
.sonota::after{
    content: "";
    position: absolute;
    bottom: -24px;
    left: 45%;
    border: 12px solid transparent;
    border-top: 12px solid #ffe9ae;
}









.qanda{
    display: flex;
    flex-direction: column;
    align-items: center;
     margin-top: 3.5rem;
}

.qa{
    margin: 10px;
    background-color: #f7f3f8;
    align-items: center;
    width: 1000px;
    border: 1px solid #e1dbff;
}

.qa summary{
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 18px 40px;
    color: #000000;
    font-weight: 600;
    cursor: pointer;
    font-size: 20px;
}

.qa summary::before{
    position: absolute;
    left: 10px;
    font-size: 40px;
    color: #b468dd;
    content: "Q";
    font-family: impact;
}
.qa p{
    position: relative;
    left: 100px;
    width: 85%;
}
.qa p::before{
    position: absolute;
    left: -40px;
    font-size: 40px;
    color: #9c5fbe;
    content: "A";
    font-family: impact;
}
.qa img{
    position: relative;
    left: 120px;
    border: 1px solid #000;
    /*画像70％　width: 70%;*/
}
.qa h4{
    position: relative;
    left: 100px;
    font-weight: normal;
    width: 85%;
}
.qa table{
    position: relative;
    border-collapse: collapse;
    left: 120px;
    width: 700px;
}
.qa table td{
    text-align: center;
}

.topimage{
    width: 75px;
    position: fixed;
    right: 30px;
    bottom: 30px;
}

.bg-color {
    width: 100%;
    background-color: #d1d5f541;
    padding: 3.5rem 0;
    margin: 3rem 0 2rem;
}
.center{
    text-align: center;
}

.qa{
    margin: 10px auto; /* 上下10px、左右autoで中央寄せ */
    background-color: #f7f3f8;
    align-items: center;
    width: 1000px;
    max-width: 90%; /* 画面からはみ出るのを防ぐため（推奨） */
    border: 1px solid #e1dbff;
}

.qa summary {
    background-color: #FFFFFF;
}



















@media screen and (max-width: 1100px){
    .header{
        width: 99%;
    }
    .toppage{
        display: grid;
        grid-template-columns: auto auto;
    }
    .click-word , .click-excel , .click-insatu , .click-sonota{
        width: 200px;
    }
    .qa{
        width: 90%;
    }
    .qa p , .qa h4{
        width: 80%;
    }
    .qa img , .qa table{
        right: 60px;
        width: 70%;
    }
}



@media screen and (max-width: 780px){
    .navigation a , .word , .excel , .insatu , .sonota{
        font-size: medium;
        margin: 20px 5px;
    }
    .navi a{
        font-size: small;
    }

}



@media screen and (max-width: 760px){
    body{
        width: 100%;
    }
    .toppage{
        display: grid;
        grid-template-columns: auto auto;
    }
    .top-word , .top-excel , .top-insatu , .top-sonota{
        width: 240px;
        height: 350px;
        margin: 20px 10px;
    }
    .click-word , .click-excel , .click-insatu , .click-sonota{
        width: 90%;
    }
}



@media screen and (max-width: 600px){
    .img {
        margin-top: 25px;
    }
    .intro-p{
        font-size: small;
    }
    .top-word , .top-excel , .top-insatu , .top-sonota{
        width: 75%;         
        max-width: 340px;    
        height: auto;        
        min-height: auto;
        margin: 0 auto;      
        padding: 15px;
    }
    .qa p{
        width: 70%;
    }
    .toppage {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px; 
        margin-top: 40px;
    }
    .click-word, 
    .click-excel, 
    .click-insatu, 
    .click-sonota {
        position: static;   
        width: 72%;
        margin: 0 auto 15px;
    }
    .icon {
        position: static; 
        margin: 10px 0;
    }
    ul {
        position: static;
        margin-top: 10px;
        width: 100%;
    }
    footer p{
        font-size: small;
    }
}


@media screen and (max-width: 481px){
    .qa p , .qa h4 , .qa table{
        width: 65%;
    }

    .click-word, .click-excel, .click-insatu, .click-sonota {
        font-size: 20px;
    }
}