@charset "utf-8";

/* CSS Document */
header {
    background: url(../img/main_bg.png);
}

.head-box {
    width: 1100px;
    margin: auto;
    display: flex;
    align-items: flex-end;
    padding-top: 0.3%;
}

.head-title {
    width: 37%;
    padding: 1% 0%;
    margin-right: 3%;
    margin-bottom: 1%;
}

.head-title img {
    width: 100%;
}

.main-nav-li>a::after {
    top: 16px;
}

.pan {
    background: #FF5B5B;
}

.pan-box {
    width: 1100px;
    margin: auto;
    padding: 0.3% 1.8%;
}

.pan-link {
    color: #fff;
}

.pan-link:hover {
    text-decoration: underline;
}

.pan-arrow {
    color: #fff;
    margin: 0 1em;
}

.pan-now {
    color: #fff;
    font-weight: 400;
}

main {
    background: #E6FBFB;
    padding-bottom: 4%;
}

.main-title-box {
    width: 100%;
    margin: auto;
    height: 100%;
    position: absolute;
    display: flex;
    align-items: center;
}

.main-title {
    position: relative;
}

.naka-h1 {
    width: 1100px;
    margin: auto;
    font-size: 1.7em;
    padding: 1%;
    color: #542400;
}

.main-title img {
    width: 100%;
}

.naka-section {
    width: 1100px;
    margin: auto;
    padding: 2% 3%;
    padding-bottom: 1%;
    background: #fff;
}

.naka-h2 {
    font-weight: 500;
    color: #542400;
    display: flex;
    align-items: center;
    margin-top: 2%;
}

.naka-h2 img {
    height: 1.4em;
    margin-right: 0.4em;
}

.naka-h2-txt {
    font-size: 1.3em;
    line-height: 1.2em;
}

.con-box {
    padding: 2% 3%;
    margin: 0;
}

.con-box-y {
    background: #FFFDC2;
    border-radius: 20px;
    margin: 2% 2%;
    padding: 3% 3%;
}

.con-p {
    margin-bottom: 2%;
}

.con-h3 {
    display: inline-block;
    padding: 0.2% 2%;
    border: solid 2px;
    border-radius: 3px;
    margin-top: 4%;
    margin-bottom: 2%;
    background: #fff;
}

.con-text-box {
    padding: 1% 2%;
}

.files {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: left;
}

.files>a:hover>span {
    text-decoration: underline;
}

.files>a:hover>img {
    opacity: 0.8;
}

.files>a {
    width: 23%;
    margin: 1%;
    margin-bottom: 3%;
}

.files>a>img {
    width: 100%;
    border: solid 1px #ddd;
}

.files>a>span {
    display: block;
    text-align: center;
    color: #111;
    margin-top: 1%;
}

.sosial-box {
    padding: 0 3%;
    display: flex;
    gap: 10px;
}