@charset "utf-8";

*{
    margin: 0;
    padding: 0;
}

.flex{
    display: flex;
}

img{
    max-width: 100%;
}

header{
    background-color: #EFEC64;
    width: 100%;
    height: 107px;
    
}

/* .atama div a{
    width: 100px;
} */

div .tel{
    position: relative;
    left: 20%;
}

div .moushikomi{
    position: relative;
    left: 20%;
}

/* header div img{
    width: 100%;
    100px
    margin-left: 10%;;
} */

/* .atama div a{
    font-size: 45px;
    font-weight: bolda;
    color: darkred;
    text-align: right;
    justify-content: baseline;
} */

/* .atama div p{ */
    /* flex-flow: row; */
/* } */

/* div .moushikomi{
    width: 50%;
} */

h1 img{
    width: 100%;
}

section.setumei{
    background-color: #BAD881;
    width: 100%;
    height: 600px;
}

 section div p,li{
    /* background-color: #F9CDAE; */
    font-size: 21px;
    margin: 0 auto;
    padding: 10px;
    position: relative;
    letter-spacing: 2px;
    /* left: 10%; */
    /* text-align: center; */
}

.setumei div img{
    width: 80%;
    position: relative;
    /* right: -15%; */
    /* top: 10; */
    bottom: 12%;
}

.setumei2 p{
    padding-left: 10%;
}

section h2{
    position: relative;
    padding: 1.5rem;
    margin-top: 5.0rem;
    margin-bottom: 5.0rem;
    border-top: 4px solid black;
    border-bottom: 4px solid black;
    color: black;
    font-weight: bold;
    font-size: 60px;
    width: 70%;
    /* left: 30%; */
    /* position: relative; */
    /* display: inline-block */
    text-align: center;
    justify-content: center;
    margin: 3% 15%;
}

section img{
    width: 100%;
}

section div img{
    width: 100%;

}

.setumei2{
    background-color: #F9CDAE;
    /* width: 50%; */
    height: 75%;
    margin-top: 6%;
}

p,ol{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
}

.burijji{
    width: 70%;
    position: relative;
    left: 15%;
}

div h3{
    font-size: 48px;
    text-align: center;
    border-bottom: 4px solid red;
    width: 80%;
    position: relative;
    left: 5%;
}

div .toku1{
    position: relative;
    top: 5%;
    /* right: 3%; */
    padding: auto;
}

/* #toku1{
    width: 50%;
} */

.toku2{
    background-image: url(../images/toku2.png);
    background-size: cover;
}

.toku2 div ul p{
    width: 50%;
    position: relative;
    right: 10%;
}

div .toku1{
    background-color: #BAD881;
}

div .toku3{
    background-color: #BAD881;
}

/* .toku2 img{
    width: 100%;
    flex-flow: row-reverse;
} */

.toku1-text{
    color: #000;
}

.toku2-text{
    width: 58%;
    background-color: rgba(0, 0, 0, 0.4); /*背景に黒を指定し透過させる*/
    color: floralwhite;
}

.toku3-text{
    color: #000;
}

.daiji{
    color: #F08B72;
    text-shadow:1px 1px 0 #000, -1px -1px 0 #000,
    -1px 1px 0 #000, 1px -1px 0 #000,
    0px 1px 0 #000,  0-1px 0 #000,
    -1px 0 0 #000, 1px 0 0 #000;
    font-size: 24px;
}

.daiji-title{
    color: red;
    text-shadow:1px 1px 0 #000, -1px -1px 0 #000,
    -1px 1px 0 #000, 1px -1px 0 #000,
    0px 1px 0 #000,  0-1px 0 #000,
    -1px 0 0 #000, 1px 0 0 #000;
}

ul{
    font-size: 21px;
    font-weight: bold;
    margin: 0 auto;
    /* padding: 10px;
    position: relative;
    letter-spacing: 2px; */
}

.yajirusi{
    text-align: center;
}

.kotira{
    text-align: center;
    background-color: #999999;
}

.top img{
    width: 25%;
    position: relative;
    left: 75%;
}

/* .top img:hover{
    width: 50%;
} */

.toku1_img{
    width: 70%;
}

.toku3_img{
    width: 134%;
}

/* ここからスマホ用 */

@media screen and (max-width: 768px) {
    h2 {
        font-size: 28px; /* 小さめのフォントサイズに変更 */
        width: 90%;
        margin: 20px auto; /* 中央配置 */
    }
}

@media screen and (max-width: 768px) {
    .flex {
        flex-direction: column;
    }
}

@media screen and (max-width: 768px) {
    img {
        max-width: 100%;
        height: auto;
    }
}

@media screen and (max-width: 768px) {
    body {
        margin: 0;
        padding: 0;
        overflow-x: hidden; /* 右側の余計なスクロールを防ぐ */
    }
}


/* ここまでスマホ用 */