@charset "utf-8";

* {
    margin: 0;
    padding: 0;
}
html {
    scroll-behavior: smooth;
    scroll-padding-top: 200px;
}
/* ロゴとメニュー */
header {
    z-index: 1;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4%;
    margin: 0 auto ;
    background-color: #F6D6AC;
}
li a {
    color: black;
    text-decoration: none;
    text-align: center;
    padding-bottom: 2.5px;
}
.dropdown{
    display: flex;
    gap: 2rem;
    list-style-type:none;
    align-items: center;
}
.headmenu {
    list-style: none;
    font-weight: bold;
    font-size: 1.2rem;
}
h1 img {
    width: 8rem;
    height: 7rem;
    object-fit: cover;
}

/* ドロップダウン */
.dropdown > li {
	position:relative;
}
.dropdown > li.headmenu:hover > a {
    color: #fff;
}
.can > li:hover > a {
    color: #fff;
}
.can > li {
    border-bottom: 1px solid black;
}
.cantitle:after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 0 0 15px;
    border-right: 1px solid rgb(0, 0, 0);
    border-bottom: 1px solid rgb(0, 0, 0);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
nav ul li a{
	display: block;
	text-decoration: none;
	transition:all .3s;
}
nav li.headmenu ul{
    /*絶対配置で位置を指定*/
	position: absolute;
	top:30px;
	z-index: 4;
    /*形状を指定*/
	background:#F6D6AC;
	width:110%;
    /*はじめは非表示*/
	visibility: hidden;
	opacity: 0;
    /*アニメーション設定*/
	transition: all .3s;
}
nav li.headmenu:hover > ul,
nav li.headmenu ul li:hover > ul,
nav li.headmenu:active > ul,
nav li.headmenu ul li:active > ul{
  visibility: visible;
  opacity: 1;
}

/* 入塾申し込みボタン */
.form {
    background-color: white;
    border-radius: 20px;
    color: rgb(255, 149, 0);
    padding: 10px;
    font-weight: bold;
    list-style: none;
    font-size: 1.2rem;
}
.form:hover {
    background-color: rgb(255, 149, 0);
    color: white;
}
.form_main {
    background-color: rgb(255, 149, 0);
    color: white;
    border-radius: 20px;
    padding: 30px;
    font-weight: bold;
    list-style: none;
    font-size: 3rem;
}
.form_main:hover {
    background-color: white;
    color: rgb(255, 149, 0);
    border: solid rgb(255, 149, 0);
    border-width: 5px;
}
.formdiv {
    margin: 50px 0;
}
/* バーガーメニュー */
.burgermenu {
    display: none;
}
.burger {
    display: none;
}

/* キャッチコピー */
.slogan {
    font-size: 300%;
    margin: 60px 0;
    width: 100%;
    text-align: center;
    font-family: "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro";
    font-weight: lighter;
    /* アニメーション実行 */
    animation-name:fadeUpAnime;
    animation-duration:0.5s;
    animation-fill-mode:forwards;
    opacity:0;
    position: absolute;
    top: 30%;
    background-color:  rgb(255,255,255,0.7);
}
/* アニメーション */
@keyframes fadeUpAnime{
    from {
        opacity: 0;
        transform: translateY(100px);
    }
    
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
span {
    font-size: 5rem;
    color: red;
}
.slogandiv > img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.slogandiv {
   height: 660px;
   z-index: -1;
}

/* 内容 */
section {
    text-align: center;
    margin: 30px 4%;
}
section h2 {
    width: 100%;
    font-size: 3rem;
    margin-bottom: 20px;
    border-bottom: solid;
}

/* バナー */
.banner {
    margin: 0 15px;
}

/* レッスン内容 */
.lesson div span {
    color: blue;
    font-size: 1.8rem;
    font-weight: bold;
}
.lesson div {
    width: 70%;
    background-color: rgb(255, 227, 193);
    padding-top: 10px;
}
.lesson {
    font-size: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.lesson div p:nth-last-of-type(2),.lesson div p:nth-last-of-type(3){
    text-decoration: underline;
    margin: 15px 0;
    width: 100%;
} 
.lesson p:nth-of-type(5) {
    text-align: left;
    margin: 2% 5%;
}
.lesson br {
    display: block;
}
.lesson img {
    width: 95%;
    object-fit: cover;
    margin: 10px 0;
}
/* 授業風景 */
.scenery img {
    object-fit: cover;
    width: 300px;
    height: 180px;
    margin: 10px;
}
/* 資格 */
.achievement h3 {
    font-size: 1.8rem;
}
.achievement p {
    text-align: left;
    font-size: 1.5rem;
}
section.achievement {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.achievement div {
    width: 70%;
    padding: 30px;
    border-radius: 40px;
}
.achievement div {
    background-color: #ffe0b6;
}
/* お問合せ */
.inline {
    display: inline-block;
    width: 100%;
}
.phonenumber{
    font-size: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px;
    font-weight: bold;
}
.contact {
    width: 100%;
}
.phonenumber img {
    margin-right: 10px;
    width: 60px;
    height: 60px;
}
.adress {
    font-size: 1.8rem;
    margin-bottom: 20px;
}
iframe {
    width: 80vw;
    height: 20vw;
}
.sns {
    font-size: 2rem;
}
.sns img {
    margin: 20px;
    width: 15vw;
    height: 15vw;
}
.sns_items {
    display: flex;
    justify-content: center;
}
/* フッター */
footer {
    padding-top: 10px;
    margin-top: 20px;
    text-align: center;
    background-color: #e6e9ec;
}
.classnav {
    display: flex;
    justify-content: center;
}
.footmenu {
    list-style: none;
    font-size: 1.5rem;
    margin-bottom: 15px;
}
footer nav {
    margin-bottom: 30px;
}
footer small {
    font-size: 80%;
}
/* トップページリンク */
/*リンクの形状*/
#page-top a{
	display: flex;
	justify-content:center;
	align-items:center;
	background:#ff0004;
	border-radius: 5px;
	width: 60px;
	height: 60px;
	color: #fff;
	text-align: center;
	text-transform: uppercase; 
	text-decoration: none;
	font-size:0.6rem;
	transition:all 0.3s;
}

#page-top a:hover{
	background: #777;
}

/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 10px;
	bottom:10px;
	z-index: 2;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateY(100px);
}

/*　上に上がる動き　*/

#page-top.UpMove{
	animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/*　下に下がる動き　*/

#page-top.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: 1;
	transform: translateY(100px);
  }
}

/* レスポンシブ対応 */
@media (max-width: 1024px) {
    .headnav {
        display: none;
    }
    .form {
        position: relative;
        right: 50px;
    }
    /* バーガーメニュー */
    .burger {
        display: flex;
    }
    .burgermenu {
        display: block;
        width: 40px;
        height: 40px;
        background-image: url(../photo/menu.svg);
        background-size: 40px;
        background-position: center;
        background-repeat: no-repeat;
        position: relative;
        z-index: 2;
    }
    .burgermenu.is-active {
        background-image: url(../photo/close.svg);
    }
    .menu {
        width: 100vw;
        height: 100vh;
        text-align: center;
        background-color: pink;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1;
        display: none;
        overflow: scroll;
    }
    .head-menu{
        position: relative;
        top: 150px;
        margin-top: 20px;
        font-size: 2rem;
        
    }
    .menu.is-active {
        display: block;
    }
    /* キャッチコピー */
    br {
        display: block;
    }
    /* 入塾申し込みフォーム */
    .form_main {
        font-size: 2rem;
    }
    /* 内容 */
    section h2 {
        font-size: 1.8rem;
    }
    /* レッスン内容 */
    .lesson div span {
        font-size: 1.6rem;
    }
    .lesson {
        font-size: 1.2rem;
    }
    /* 資格 */
    .achievement h3 {
        font-size: 1.4rem;
    }
    .achievement p {
        font-size: 1.2rem;
    }
    /* お問合せ */
    .phonenumber {
        font-size: 3rem;
    }
    .phonenumber img{
        width: 50px;
        height: 50px;
    }
    .LINE {
        font-size: 1.6rem;
    }
    .LINE img{
        width: 300px;
        height: 300px;
    }
    .adress {
        font-size: 1.6rem;
    }
    .sns {
        font-size: 1.6rem;
    }
}
@media (max-width: 600px) {
    /* ロゴとメニュー */
    h1 img {
        width: 8rem;
        height: 8rem;
    }
    .form {
        right: 14px;
        bottom: 0px;
        padding: 10px 16px;
        font-size: 12px;
    }
    /* バーガーメニュー */
    .head-menu{
        top: 100px;
        font-size: 1.5rem;
    }
    /* キャッチコピー */
    .slogan {
        font-size: 190%;
        top: 30%;
    }
    .slogandiv span {
        font-size: 3rem;
    }
    .slogandiv {
        height: 396px;
    }
    /* 入塾申し込みフォーム */
    .form_main {
        font-size: 1.5rem;
    }
    /* 内容 */
    section h2 {
        font-size: 1.3rem;
    }
    /* レッスン内容 */
    .lesson div span {
        font-size: 1.1rem;
    }
    .lesson {
        font-size: 0.9rem;
    }
    .lesson div {
        width: auto;
    }
    /* 授業風景*/
    .scenery img {
        width: 160px;
        height: 96px;
        margin: 3px;
    }
    /* お問合せ */
    .sns {
        font-size: 1rem;
    }
    .LINE {
        font-size: 1rem;
    }
    .phonenumber {
        font-size: 1.65rem;
    }
    .phonenumber img {
        width: 30px;
        height: 30px;
    }
    .contact,.adress {
        font-size: 1rem;
    }
    .LINE img {
        width: 100px;
        height: 100px;
    }
    .footmenu {
        font-size: 1.2rem;
    }
}
@media (max-width:360px) {
    /* キャッチコピー */
    .slogandiv {
        height: 290px;
    }
    .slogan {
        font-size: 120%;
        top: 25%;
    }
    .slogandiv span {
        font-size: 2rem;
    }
    /* 内容 */
    /* レッスン内容 */
    .lesson div span {
        font-size: 0.9rem;
    }
    /* 授業風景*/
    .scenery img {
        width: 130px;
        height: 78px;
        margin: 1px;
    }
    /* 入塾申し込みフォーム */
    .form_main {
        font-size: 1.2rem;
    }
    /* お問合せ */
    .adress {
        font-size: 0.9rem;
    }
    .contact {
        font-size: 0.9rem;
    }
    iframe {
        width: 15rem;
        height: 15rem;
    }
    .LINE {
        font-size: 0.85rem;
    }
    .phonenumber {
        font-size: 1.34rem;
    }
    .sns {
        font-size: 0.85rem;
    }
}