@charset "utf-8";
/* CSS Document */
body {
    background-image: url("../img/newnew829cb7ae9a5f22970e7225c31440eba8.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    /*background-color:rgba(255,255,255,0.8);
  	background-blend-mode:lighten;*/
    font-family: sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
html {
    scroll-behavior: smooth;
}
a:link {
    text-decoration: none;
    color: #004a28;
}
a:visited {
    text-decoration: none;
    color: #004a28;
}
a:hover {
    text-decoration: none;
    color: #004a28;
}
a:active {
    text-decoration: none;
    color: #004a28;
}
a:focus {
    text-decoration: none;
    color: #004a28;
}
.atamaobi {
    background-color: #004a28;
    height: 50px;
}
.atamaobi p {
    color: #fff;
    text-align: center;
    padding-top: 15px;
}
.hako {
    width: 960px;
    margin: 0 auto;
}
.hako ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style-type: none;
    margin-top: 20px;
}
.hako ul span {
    font-size: 22px;
    color: #004a28;
}
.logohako {
    padding-left: 40px;
}
.snshako {
    display: flex;
    width: 960px;
    margin-left: 340px;
}
.snshako li {
    padding: 0 7%;
}
.single img {
    width: 100%;
}
.snslogo {
    display: flex;
    margin-left: 70%;
}
.snslogo li {
    padding: 0 2%;
}
header {
    width: 1200px;
    margin: 0 auto;
}
header ul {
    display: flex;
    justify-content: space-around;
    margin: 10px 0;
    list-style-type: none;
}
header ul li {
    font-size: 20px;
    color: #004a28;
    padding-right: 25px;
}
header a:hover {
    transform: translateY(0.1700em);
    transition: all 0.4s ease 0s;
}
.color {
    color: #004a28;
    font-size: 26px;
    border-bottom: solid 8px #80200a;
}
.sns {
    display: flex;
    justify-content: space-around;
    margin: 40px auto 0 auto;
    width: 1000px;
}
.index_p {
    width: 960px;
    margin: 25px auto 0 auto;
    font-size: 20px;
    display: flex;
    justify-content: center;
}
footer {
    background-color: #004a28;
    height: 50px;
    margin-top: 40px;
}
footer p {
    color: #fff;
    text-align: center;
    padding-top: 15px;
}
.rental {
    width: 960px;
    margin: 40px auto 0 auto;
    text-align: center;
}
.rental img {
    width: 50%;
}
.rental_hako {
    display: flex;
    margin: 20px auto 0 auto;
    width: 960px;
    justify-content: center;
    flex: 1;
}
.rental_txt p {
    font-size: 20px;
    color: #004a28;
}
.lesson_hako {
    width: 960px;
    margin: 0 auto;
}
.lesson_logo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 80px;
}
.lesson_logo h2 {
    font-size: 24px;
    color: #004a28;
    margin-right: 10px;
}
.lesson_lesson {
    width: 960px;
    margin: 0 auto;
}
.lesson_tya {
    background-color: #c89e6e;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    position: relative;
    margin-top: 40px;
}
.lesson_tya p {
    font-size: 18px;
    margin-top: 80px;
    margin-left: 90px;
    width: 960px;
    padding-bottom: 50px;
}
.lesson_tya img {
    width: 25%;
    position: absolute;
    top: 40px;
    left: 600px;
}
.lesson_tya02 {
    background-color: #c89e6e;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    position: relative;
    margin-top: 40px;
}
.lesson_tya02 p {
    font-size: 18px;
    margin-top: 80px;
    margin-left: 450px;
    width: 960px;
    padding-bottom: 50px;
}
.lesson_tya02 img {
    margin-right: 40px;
    position: absolute;
    top: 120px;
    left: 80px;
	width: 25%;
}
.lesson_tya03 {
    background-color: #c89e6e;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    position: relative;
    margin-top: 40px;
}
.lesson_tya03 p {
    font-size: 18px;
    margin-top: 40px;
    margin-left: 120px;
    width: 960px;
    padding-bottom: 50px;
}
.lesson_tya03 img {
    margin-right: 40px;
    position: absolute;
    top: 40px;
    left: 600px;
}
.whats_hako {
    width: 960px;
    margin: 0 auto;
    padding-top: 60px;
    flex: 1;
}
.whats_hako p {
    font-size: 20px;
    color: #004a28;
    margin: 0 10%;
}
.access_hako {
    display: flex;
    width: 700px;
    margin: 20px auto 0 auto;
}
.access_midasi {
    background-color: #004a28;
    color: #fff;
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.access_midasi p {
    text-align: center;
    font-size: 22px;
}
.access_honbun {
    border: solid 3px #004a28;
    width: 550px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 5%;
    padding-top: 2%;
    padding-bottom: 2%;
}
.access_honbun p {
    font-size: 18px;
}
.mgl-88 {
    margin-left: 73px;
}
.access_midasi2 {
    background-color: #004a28;
    color: #fff;
    width: 200px;
    padding: 6%;
    padding-top: 130px;
}
.access_midasi2 p {
    text-align: center;
    font-size: 20px;
}
.access_honbun2 {
    border: solid 3px #004a28;
    width: 550px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 5%;
    padding-top: 2%;
    padding-bottom: 2%;
}
.access_honbun2 p {
    font-size: 18px;
}
.access_midasi3 {
    background-color: #004a28;
    color: #fff;
    width: 200px;
    padding: 6%;
    padding-top: 180px;
}
.access_midasi3 p {
    text-align: center;
    font-size: 20px;
}
.map {
    width: 700px;
    margin: 20px auto 0 auto;
}
.menu {
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}
.menu img {
    width: 50%;
}

.pod{text-align: center;}
.pod img{
	width: 50%;
}
.oyako_hako {
    width: 960px;
    margin: 0 auto;
	padding: 2% 5%;
    flex: 1;
}
.oyako_hako p {
    font-size: 20px;
    color: #004a28;
}
.oyako_flex {
    display: flex;
    margin-bottom: 20px;
}
.oyako_flex img {
    width: 40%;
    margin-top: 10px;
}
.oyako_flex img:last-child {
    margin-left: 40px;
}
.oyako_flex2 p {
    padding-top: 60px;
    width: 900px;
}
.oyako_flex2 {
    display: flex;
    margin-bottom: 20px;
}
.oyako_flex2 img {
    width: 65%;
    margin-top: 10px;
    padding-left: 20px;
}
.oyako_flex2 img:last-child {
    margin-left: 2%;
}
.oyako_flex2 p {
    padding-top: 20px;
}
#sp {
    display: none;
}
@media only screen and (max-width: 800px) {
    img, object, embed, video {
        max-width: 100%;
        height: auto;
    }
    #pc {
        display: none;
    }
    #sp {
        display: block;
    }
    .index_p {
        width: 100%;
        margin: 10px auto 0;
        font-size: 14px;
        padding: 1%;
    }
    .logo_flex {
        display: flex;
        width: 100%;
        margin: 0 auto;
    }
    .logo {
        text-align: center;
        margin: 15% 0 3% 0;
    }
    .logo img {
        width: 55%;
    }
    .logo02 {
        margin: 3%;
    }
    .logo02 ul {
        display: flex;
        list-style: none;
        justify-content: space-around;
    }
    .logogo {
        width: 100%;
        margin-top: -80px;
    }
    .flex {
        display: flex;
        justify-content: center;
        margin-left: 80px;
    }
    .logogo h2 {
        font-size: 18px;
        padding-top: 150px;
        padding-left: 10px;
        width: 90px;
    }
    .logogo img {
        width: 60%;
        height: 50%;
        padding-right: 100px;
        padding-top: 110px;
    }
    .logogo2 {
        width: 100%;
        margin-top: -140px;
    }
    .logogo2 h2 {
        font-size: 17px;
        padding-top: 200px;
        padding-left: 0px;
        
    }
    .logogo2 img {
        width: 60%;
        height: 50%;
        padding-right: 100px;
        padding-top: 180px;
    }
    .logogo3 {
        width: 100%;
        margin-top: -60px;
    }
    .mgt-18 {
        margin-top: 80px;
    }
    .mgt-20 {
        margin-top: 120px;
    }
    .logogo3 h2 {
        font-size: 19px;
        padding-top: 140px;
        padding-left: 0px;
    }
    .logogo3 img {
        width: 60%;
        height: 50%;
        padding-right: 100px;
        padding-top: 100px;
    }
    .logogo4 {
        width: 100%;
        margin-top: -120px;
    }
    .logogo4 h2 {
        font-size: 17px;
        padding-top: 190px;
        padding-left: 5px;
        width: 80px;
    }
    .logogo4 img {
        width: 60%;
        height: 50%;
        padding-right: 100px;
        padding-top: 150px;
    }
    .logogo5 {
        width: 100%;
        margin-top: -170px;
    }
    .logogo5 h2 {
        font-size: 17px;
        padding-top: 240px;
        padding-left: 5px;
        width: 100px;
    }
    .logogo5 img {
        width: 60%;
        height: 50%;
        padding-right: 100px;
        padding-top: 200px;
    }
    .atamaobi {
        height: 30px;
    }
    .atamaobi p {
        font-size: 10px;
        padding-top: 2%;
    }
    .single img {
        height: 100%;
    }
    .sns2 {
        display: block;
        text-align: center;
        width: 100%;
        margin-top: -20px;
    }
    .fb {
        margin-top: 8%;
        margin-bottom: 4%;
    }
    .rental {
        width: 100%;
        margin: 20px auto 0 auto;
    }
    .rental_hako {
        width: 100%;
        padding: 5%;
    }
    .rental_txt p {
        font-size: 11px;
        color: #004a28;
    }
    .lesson_hako {
        width: 100%;
        margin: 0 auto;
    }
    .lesson_logo {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
        margin-bottom: 10px;
    }
    .lesson_logo h2 {
        font-size: 14px;
        color: #004a28;
        margin-right: 5px;
    }
    .lesson_logo img {
        width: 70%;
    }
    .lesson_lesson {
        width: 100%;
    }
    .lesson_tya {
        background-color: #c89e6e;
        border-radius: 12px;
        display: block;
        position: static;
        width: 90%;
        margin: 0 auto;
    }
    .lesson_tya p {
        font-size: 11px;
        margin-top: 1%;
        margin-left: 5%;
        padding-bottom: 20px;
        padding-top: 3%;
        width: 95%;
    }
    .lesson_tya img {
        margin-left: 24%;
        padding-bottom: 2%;
        position: static;
        width: 50%;
        padding-top: 3%;
    }
    .lesson_tya02 {
        display: block;
        background-color: #c89e6e;
        border-radius: 10px;
        justify-content: center;
        position: static;
        width: 90%;
        margin: 5% auto 5% auto;
    }
    .lesson_tya02 p {
        font-size: 11px;
        margin-top: 4%;
        margin-left: 5%;
        width: 95%;
        padding-bottom: 2%;
    }
    .lesson_tya02 img {
        position: static;
        padding-top: 3%;
        padding-left: 20%;
        width: 70%;
    }
    .lesson_tya03 {
        background-color: #c89e6e;
        border-radius: 10px;
        display: block;
        position: static;
        width: 90%;
        margin: 0 auto;
    }
    .lesson_tya03 p {
        font-size: 11px;
        margin-top: 1%;
        margin-left: 9%;
        padding-bottom: 3%;
        padding-top: 1%;
        width: 100%;
    }
    .lesson_tya03 img {
        margin-left: 15%;
        padding-bottom: 2%;
        padding-top: 3%;
        position: static;
        width: 65%;
    }
    .whats_hako {
        width: 100%;
        margin: 0 auto;
        padding-top: 0px;
        margin-top: -60px;
    }
    .whats_hako p {
        font-size: 12px;
        color: #004a28;
        margin-left: 10%;
    }
    .access_hako {
        display: flex;
        justify-content: center;
        width: 100%;
        margin: 20px auto 0 auto;
    }
    .access_midasi {
        background-color: #004a28;
        color: #fff;
        width: 120px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0%;
        padding-top: 0px;
    }
    .access_midasi p {
        font-size: 14px;
    }
    .access_honbun {
        border: solid 3px #004a28;
        width: 220px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-left: 2%;
        padding-top: 1%;
        padding-bottom: 1%;
    }
    .access_honbun p {
        font-size: 12px;
    }
    .access_midasi2 {
        width: 120px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0%;
        padding-top: 0px;
    }
    .access_midasi2 p {
        text-align: center;
        font-size: 13px;
    }
    .access_honbun2 {
        border: solid 3px #004a28;
        width: 220px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-left: 2%;
        padding-top: 1%;
        padding-bottom: 1%;
    }
    .access_honbun2 p {
        font-size: 11px;
    }
    .access_midasi3 {
        background-color: #004a28;
        color: #fff;
        width: 120px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0%;
        padding-top: 0px;
    }
    .access_midasi3 p {
        text-align: center;
        font-size: 14px;
    }
    .map {
        width: 100%;
        margin: 20px auto 0 auto;
        display: flex;
        justify-content: center;
    }
    .menu {
        width: 100%;
        margin: 60px auto 0 auto;
        display: block;
    }
    .menu img {
        width: 100%;
    }
	.pod img{
		width: 100%;
		text-align: center;
	}
    .oyako_hako {
        width: 100%;
        margin: 0 auto;
        padding-left: 4%;
        margin-top: -60px;
    }
    .oyako_hako p {
        font-size: 12px;
        margin-top: 20px;
    }
    .oyako_flex {
        display: flex;
        margin-bottom: 20px;
    }
    .oyako_flex img {
        width: 40%;
        margin-top: 10px;
    }
    .oyako_flex img:last-child {
        margin-left: 2%;
    }
    .oyako_flex p {
        padding-top: 20px;
    }
    .oyako_flex2 {
        display: flex;
        margin-bottom: 20px;
    }
    .oyako_flex2 img {
        width: 80%;
        margin-top: 10px;
    }
    .oyako_flex2 img:last-child {
        margin-left: 2%;
    }
    .oyako_flex2 p {
        padding-top: 20px;
    }
    .mgl-88 {
        margin-left: 48px;
    }
    .mgl-18 {
        margin-left: 10px;
    }
    .color2 {
        color: #fff;
        border-bottom: solid 3px #80200a;
        width: 50%;
    }
    .color3 {
        color: #fff;
        border-bottom: solid 3px #80200a;
        width: 85%;
    }
    .color4 {
        color: #fff;
        border-bottom: solid 3px #80200a;
        width: 65%;
    }
    .color5 {
        color: #fff;
        border-bottom: solid 3px #80200a;
        width: 100%;
    }
    .color6 {
        color: #fff;
        border-bottom: solid 3px #80200a;
        width: 70%;
    }
    footer {
        background-color: #004a28;
        height: 50px;
        margin-top: 20px;
    }
    footer p {
        font-size: 10px;
        padding-top: 5%;
    }
    header {
        width: 100%;
    }
    .hako {
        width: 100%;
        margin: 0 auto;
    }
    a:link {
        text-decoration: none;
        color: #004a28;
    }
    a:visited {
        text-decoration: none;
        color: #004a28;
    }
    a:hover {
        text-decoration: underline;
        color: #004a28;
    }
    a:active {
        text-decoration: underline;
        color: #004a28;
    }
    a:focus {
        text-decoration: underline;
        color: #004a28;
    }
}