html{
    font-size: 100%;
    scroll-behavior: smooth;
}
body{
    font-family: "Noto Sans JP", serif;
    color: #333;
}
/* ヘッダー部分　ロゴ＋メニュー */
.header-wrapper{
    max-width: 1064px;
    height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-inline: 20px;
    margin-inline: auto;
}
.header-menu ul{
    display: flex;
    justify-content: space-around;
    gap: 20px;
}
.header-menu-item a{
    font-size: 18px;
    font-weight: bold;
}
.header-menu-item a:hover{
    color: #ffaa44;
}
.contact{
    display: inline-block;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    background-color: #ffaa44;
    border-radius: 25px;
    padding: 2px 10px;
}
.contact:hover{
    color: #fff;
    opacity: 0.5;
}
/* TOPボタン */
.top-btn{
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: #ffaa44;
    text-align: center;
    align-content: center;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    position: fixed;
    right: 30px;
    bottom: 50px;
}
/* メインビジュアル */
.top{
    text-align: center;
    max-width: 1064px;
    padding: 70px 20px;
    margin: 0 auto;
}
.mv img{
    max-width: 100%;
    max-width: 1024px;
}
/* キャンペーン */
.cp-wrapper{
    max-width: 1024px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    margin-top: 70px;
}
.cp-box{
    border: 5px solid #ffaa44;
    border-radius: 25px;
    width: 480px;
    align-content: center;
    padding: 20px;
}
h3{
    font-size: 24px;
    font-weight: bold;
    line-height: 1.3;
}
.underline {
    text-decoration-color: #cdeded;
    text-decoration-line: underline;
    text-decoration-thickness: 10px;
    text-underline-offset: -3px;
    text-decoration-skip-ink: none;
}
.cp-img{
    margin-block: 20px;
}
.cp-img img{
    max-width: 100%;
    max-width: 400px;
}
.cp-text{
    text-align-last: left;
    font-size: 12px;
    line-height: 1.3;
}

.cp-text a{
    color: #ffaa44;
}
/* ここからTVCM */
.cm{
    background-color: #fffcdf;
    padding-block: 70px;
    text-align: center;
}
h2{
    font-size: 32px;
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: 0.1em;
}
.title-underline {
    text-decoration-color: #ffaa44;
    text-decoration-line: underline;
    text-decoration-thickness: 10px;
    text-underline-offset: -3px;
    text-decoration-skip-ink: none;
}
.cm-text{
    color: #999;
    font-size: 12px;
    margin: 20px;
}
.cm iframe{
    margin: 20px;
}
/* ここから女性向けWebデザインスクール調査で1位を獲得 */
.media{
    padding-block: 70px;
    text-align: center;
}
.media-img{
    margin: 60px 20px 80px;
}
/* スクールの主なメディア実績・リリース情報 */
.media-wrapper{
    max-width: 1064px;
    padding-inline: 20px;
    margin: 0 auto;
}
.media-container{
    max-width: 1024px;
    border: 2px solid #ffaa44;
    border-radius: 25px;
    padding: 40px 50px;
    margin-top: 30px;
    text-align: left;
    box-shadow: 0px 5px 8px 3px #33333340;

}
.media-container dl{
    max-width: 915px;
    font-size: 16px;
    line-height: 1.5;
}
.media-container dt{
    padding-block: 14px;
}
.media-container dd{
    border-bottom: 2px dotted #ffaa44;
    padding-bottom: 14px;
}
.media-container-link{
    text-align: right;
    margin-top: 14px;
    margin-right: 20px;
}
.media-container-link a{
    color: #ffaa44;
    font-weight: bold;
} 

.media-container summary{
    margin-top: 24px;
    margin-left: 20px;
    color: #999;
}
/*  ここから子育てママの仕事の悩み */
.desc{
    padding-block: 90px;
    text-align: center;
}
/* 水色吹き出し */
.desc-title1 {
    position: relative;
    width: 350px;
    margin: 0 auto;
    padding: 1rem 1rem 1rem 1.5rem;
    border-radius: 30px;
    background-color: #9CC7CE;
    color: white;
    font-weight: bold;
    font-size: 24px;
}
.desc-title1:before,
.desc-title1:after {
    position: absolute;
    border-radius: 50%;
    background-color: #9CC7CE;
    content: "";
}
.desc-title1:before {
    top: 110%;
    left: 40px;
    height: 15px;
    width: 15px;
}

.desc-title1:after {
    top: 150%;
    left: 50px;
    height: 10px;
    width: 10px;
}
.desc-img1 img{
    width: 550px;
    
}
.desc-wrapper{
    display: flex;
    max-width: 1000px;
    padding-inline: 20px;
    margin: 0 auto;
    margin-block: 80px 50px;
    padding-bottom: 30px;
    gap: 40px;
    border-bottom: 2px dotted #ffaa44;
}
.desc-box{
    text-align-last: left;
    align-content: center;
    font-size: 16px;
    line-height: 1.5;
}
.desc-mark{
    text-decoration-color: #ffaa44;
    text-decoration-line: underline;
    text-decoration-thickness: 5px;
    text-underline-offset: -2px;
    text-decoration-skip-ink: none;
    font-weight: bold;
}
/* オレンジ吹き出し */
.desc-title2 {
    width: 600px;
    position: relative;
    padding: 1rem 1rem 1rem 1.5rem;
    border-radius: 30px;
    background-color: #ffaa44;
    color: white;
    font-weight: bold;
    font-size: 24px;
    margin: 0 auto;
}
.desc-title2:before {
    position: absolute;
    top: 100%;
    left: 40px;
    height: 0;
    width: 0;
    border-style: solid;
    border-color: transparent;
    border-top-color: #ffaa44;
    border-width: 8px;
    content: "";
}
.desc-img2 img{
    width: 100%;
    width: 450px;
}
.desc-img3 img{
    width: 100%;
    width: 550px;
}
.item01{
    width: 480px;
}
.item02{
    width: 680px;
}
.item03{
    width: 400px;
}
.item04{
    width: 800px;
}
.desc-famm-text1{
    max-width: 840px;
    background-image: url(images/women1.png);
    background-size: 40%;
    background-repeat: no-repeat;
    background-position: right bottom;
    border: 3px solid #9CC7CE;
    border-radius: 15px;
    font-size: 18px;
    text-align: left;
    line-height: 1.5;
    padding: 30px 20px;
    margin: 0 auto;
    margin-block: 80px 50px;
}
.desc-famm-text1 ul{
    list-style: disc;
    margin-left: 30px;
}
.desc-mark2{
    text-decoration-color: #9CC7CE;
    text-decoration-line: underline;
    text-decoration-thickness: 5px;
    text-underline-offset: -2px;
    text-decoration-skip-ink: none;
    font-weight: bold;
}
.down{
    font-size: 24px;
    color: #ffaa44;
}
.desc-famm-text2{
    max-width: 840px;
    background-image: url(images/women2.png);
    background-size: 40%;
    background-repeat: no-repeat;
    background-position: right bottom;
    border: 3px solid #ffaa44;
    border-radius: 15px;
    font-size: 18px;
    text-align: left;
    line-height: 1.5;
    padding: 30px 20px;
    margin: 0 auto;
    margin-block: 50px 70px;
}
.desc-famm-text2 ul{
    list-style: disc;
    margin-left: 30px;
}
.desc-famm-table{
    max-width:1020px;
    margin-inline: auto;
    border-collapse: collapse;
    border: 3px solid #999;
    box-shadow: 0px 4px 4px 0px #33333340;
}
.table-top td{
    border-bottom: 1px dotted #999; 
}
.desc{
    padding-inline: 20px;
}
.desc-famm-table td{
    width: 160px;
    padding: 10px;
    border-right: 2px solid #999;
}
.desc-famm-table td:last-of-type{
    border-right: none;
}
.desc-famm-table img{
    width: 120px;
}
.table-header{
    font-size: 14px;
    font-weight: bold;
}
.table-content{
    font-size: 14px;
    margin-top: 15px;
}
.desc-famm-grid{
    width: 1024px;
    padding-top: 20px;
    margin: 0 auto;
    margin-block: 70px 50px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
.desc-famm-grid li{
    width: 320px;
    border: 2px solid #ffaa44;
    border-radius: 15px;
    padding: 15px;

}
.desc-famm-grid-inner{
    display: flex;
    flex-direction: column;
} 
.desc-famm-grid-inner-item{
    height: 210px;
}
h4{ 
    font-size: 20px;
    font-weight: bold;
    line-height: 1.5;
}
.desc-famm-grid-inner-item p{
    font-size: 16px;
    line-height: 1.5;
    margin-block: 20px 50px;
}
.desc-famm-grid-inner-item02{
    margin-top: auto;
}
.desc-famm-grid-inner-item02 img{
    width: 100%;
    width: 290px;
    margin-top: auto;
}
/* ここからLIVE配信講座の特徴 */
.live{
    background-color: #fffcdf;
    padding: 90px 20px;
}
.live ul{
    margin-block: 50px;
}
.live li{
    max-width: 1024px;
    background-color: #fff;
    border-radius: 25px;
    padding: 20px;
    margin-inline:auto;
    

}
.live-wrapper{
    display: flex;
    max-width: 1024px;
    background-color: #fff;
    border-radius: 25px;
    padding: 30px;
    gap: 30px;
    margin-inline:auto;
    margin-bottom: 40px;
    box-shadow: 0px 4px 4px 0px #33333340;
}
.live6{
    box-shadow: 0px 4px 4px 0px #33333340;
}
.live-text p{
    margin-block: 20px;
    font-size: 16px;
    line-height: 1.5;
}
.live-mark{
    font-weight: bold;
}
.live-img{
    align-content: center;
}
.live-img img{
    width: 300px;
    border-radius: 15px;
}
.live-skill ul{
    display: grid;
    grid-template-columns: 1fr 1fr;
}
h5{
    font-size: 16px;
    font-weight: bold;
}
.live-skill ul li img{
    width: 450px;
    margin-top: 20px;
}
.live-skill-comment{
    font-size: 14px;
    color: #999;
}
/* 現職や復職に向けてWebデザインの学習をしたい方にもおススメ！ */
.recommend{
    background-color: #fff;
    text-align: center;
    padding-block: 90px;
}
.skill-recommend{
    max-width: 1064px;
    padding-inline: 20px;
    border-radius: 25px;
    margin: 0 auto; 
}
.skill-recommend p{
    font-size: 16px;
    line-height: 1.5;
    margin-block: 40px;
}
.skill-recommend ul{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: end;
    margin-block: 70px;
}
.skill-recommend ul li img{
    width: 270px;
}
.recommend-interview{
    width: 1064px;
    padding-inline: 20px;
    margin-inline: auto;
    margin-block: 50px;
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.recommend-interview img{
    width: 450px;
}
.recommend a{
    color: #ffaa44;
    font-size: 16px;
    font-weight: bold;
}
/* ここから講座で学べる内容 */
.content{
    text-align: center;
    padding-block: 70px;
}
.content-wrapper{
    padding-inline: 20px;
    width: 900px;
    margin: 0 auto;
}
.content-wrapper-container{
    width: 600px;
    text-align: left;
    border: 2px solid #ffaa44;
    border-radius: 25px;
    padding-block: 30px;
    padding-left: 8%;
    margin-inline: auto;
    box-shadow: 0px 4px 4px 0px #33333340;
}
.content-step{
    display: inline-block;
    text-align: center;
    font-size: 18px;
    border-radius: 0px 25px 0px 25px;
    background-color: #ffaa44;
    height: 30px;
    width: 70px;
    align-content: center;
    color: #fff;
}
.content-class{
    display: inline-block;
    font-size: 18px;
    margin-left: 30px;
}
.content-text{
    margin-block: 50px;
    font-size: 16px;
    line-height: 1.5;
}
.content-triangle{
    font-size: 18px;
    color: #999;
    margin-block: 20px;
}
.content-bottom{
    text-align-last: left;
    margin-block: 50px 90px;
    font-size: 12px;
    line-height: 1.5;
}
.content02-wrapper{
    width: 1064px;
    padding-inline: 20px;
    margin-inline: auto;
    margin-block: 70px 50px;
    display: flex;
    justify-content: space-around;
}
.content02-graph img{
    width: 400px;
}
.content02-img img{
    width: 350px;
}
.content02-text-wrapper{
    width: 900px;
    padding-inline: 20px;
    margin-inline: auto;
}
.content02-text{
    text-align-last: left;
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 90px;
}
.content02-table{
    width: 1024px;
    margin-inline: auto;
    margin-block: 50px 70px;
}
.content02-table img{
    width: 250px;
}
.content02-table td{
    border: none;
    padding: 10px;
}
.content02-table-head{
    font-size: 16px;
    font-weight: bold;
}
.content02-table-bottom{
    font-size: 16px;
    line-height: 1.5;
    margin-top: 20px;
    text-align-last: left;
}
.about-class{
    max-width: 740px;
    padding-inline: 20px;
    text-align: left;
    border: 3px solid #ffaa44;
    border-radius: 25px;
    margin-inline: auto;
    margin-top: 50px;
    font-size: 18px;
    line-height: 1.5;
}
.about-class ul{
    list-style: disc;
    margin-left: 30px;
}
.about-class p{
    margin-block: 20px;
}
/* ここから講師紹介 */
.teacher{
    padding: 90px 20px;
    text-align: center;
}
.teacher-wrapper{
    max-width: 1024px;
    display: flex;
    justify-content: space-around;
    margin-inline: auto;
    margin-block: 50px;
    padding-bottom: 30px;
    border-bottom: 2px dotted #999;
}
.teacher-img{
    align-content: center;
}
.teacher-img img{
    width: 200px;
}
.teacher-text{
    width: 700px;
}
.teacher-text h4{
    font-size: 20px;
    font-weight: bold;
}
.teacher-text p{
    font-size: 16px;
    font-weight: bold;
    text-align-last: left;
    margin-block: 25px 16px;
}
.teacher-text ul{
    text-align-last: left;
    font-size: 16px;
    line-height: 1.5;
    margin-left: 30px;
}
/* 受講料について */
.payment{
    text-align: center;
}
.payment-price img{
    max-width: 100%;
    max-width: 700px;
}
.payment-price{
    margin-block: 50px;
}
.payment-text{
    max-width: 700px;
    padding: 20px 30px;
    border-top: 2px dotted #999;
    border-bottom: 2px dotted #999;
    margin-inline: auto;
}
.payment-text h4{
    font-size: 20px;
    margin-bottom: 20px;
}
.payment-text p{
    font-size: 16px;
    line-height: 1.5;
    text-align:left;
}
.payment-caution{
    max-width: 750px;
    margin-inline: auto;
    margin-bottom: 70px;
    text-align: left;
    color: #999;
    font-size: 12px;
}
.payment-compere img{
    max-width: 100%;
    max-width: 750px;
}
.payment-compere{
    margin-block: 90px 30px;
}
/* 無料説明会日程 */
.explain{
    padding-block: 90px;
    text-align: center;
}
.explain-text{
    max-width: 790px;
    text-align: left;
    margin-inline: auto;
    margin-block: 50px;
    padding-inline: 20px;
    font-size: 16px;
    line-height: 1.5;
}
.explain figure img{
    max-width: 100%;
    max-width: 600px;
}
.explain-schedule{
    width: 1024px;
    margin-inline: auto;
    margin-block: 50px;
    border-collapse: collapse;
    border: 2px solid #DCDCDC;
    box-shadow: 0px 4px 4px 0px #33333340;

}
.explain-schedule th{
    background-color: #ffaa44;
    text-align: center;
    color: #fff;
}
.explain-schedule th,td{
    padding: 10px;
    border-right: 1px solid #DCDCDC;
    border-bottom: 1px solid #DCDCDC;
}
.explain-schedule td:last-of-type{
    border-right: none; 
}
.explain-schedule th:last-of-type{
    border-right: none; 
}
.explain-schedule-text{
    max-width: 790px;
    padding-inline: 20px;
    margin-inline: auto;
    text-align: left;
    font-size: 16px;
    line-height: 1.5;
}
/* よくある質問 */
.question{
    padding-block: 90px;
    text-align: center;
}
.question-container{
    padding: 20px;
}
.question-wrapper{
    max-width: 1024px;
    display: flex;
    flex-direction: column;
    border: 1px solid #999;
    border-radius: 15px 15px 15px 15px;
    margin-inline: auto;
    margin-block: 50px;
    box-shadow: 0px 4px 4px 0px #33333340;
}
.question-top{
    border-radius: 15px 15px 0px 0px;
    background-color: #ffaa44;
    padding: 20px;
    text-align: left;
    color: #fff;
    font-size: 16px;
    line-height: 1.5;
    font-weight: bold;
}
.question-bottom{
    text-align: left;
    font-size: 16px;
    line-height: 1.5;
    padding: 20px;
}

.question-text {
    position: relative;
    display: inline-block;
    margin: 1.5em 0;
    padding: 7px 10px;
    min-width: 120px;
    max-width: 100%;
    color: #555;
    font-size: 16px;
    background: #FFF;
    border: solid 3px #555;
    border-radius: 15px;
    box-sizing: border-box;
}

.question-text:before {
    content: "";
    position: absolute;
    bottom: -24px;
    left: 50%;
    margin-left: -15px;
    border: 12px solid transparent;
    border-top: 12px solid #FFF;
    z-index: 2;
}

.question-text:after {
    content: "";
    position: absolute;
    bottom: -30px;
    left: 50%;
    margin-left: -17px;
    border: 14px solid transparent;
    border-top: 14px solid #555;
    z-index: 1;
}

.question-text p {
    margin: 0;
    padding: 0;
}
.question-img img{
    width: 300px;
    margin-bottom: 70px;
}
.question-class-wrapper{
    padding-inline: 20px;
    margin-bottom: 30px;

}
.question-class-wrapper ul{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    max-width: 1024px;
    margin-inline: auto;
    
}
.question-class-item{
    max-width: 320px;
}
.question-class-item img{
    width: 315px;
}
.question-class-item-text{
    padding: 15px;
}
.question-class-item-text h5{
    font-size: 20px;
    margin-bottom: 20px;
}
.question-class-item-text p{
    font-size: 16px;
    text-align: left;
    line-height: 1.5;
    margin-bottom: 20px;
}
.question-class-item-text a{
    color: #ffaa44;
    font-weight: bold;
}
.line{
    max-width: 1024px;
    margin-inline: auto;
    border-bottom: 2px dotted #ffaa44;
}
/* Fammについて */
aside{
    padding-block: 90px;
    text-align: center;
}
.about-wrapper{
    display: flex;
    max-width: 1064px;
    padding-inline: 20px;
    margin-inline: auto;
    margin-bottom: 70px;
    justify-content: space-around;
}
.about-wrapper img{
    max-width: 100%;
    max-width: 500px;
}
.about-text{
    max-width: 450px;
    align-content: center;
}
.about-text p{
    text-align: left;
    margin-top: 20px;
    line-height: 1.5;
}
aside a{
    display: inline;
    background-color: #ffaa44;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    padding: 15px 30px;
    border-radius: 35px;
}
aside a:hover{
    opacity: 0.3;
    color: white;
}
/* フッター */
footer{
    padding-block: 20px;
    background-color: #ffaa44;
}
.footer-wrapper{
    max-width: 1064px;
    padding-inline: 20px;
    margin-inline: auto;
}
footer ul{
    display: flex;
    justify-content: space-around;
}
footer a{
    color: #fff;
    font-size: 14px;
    font-weight: bold;
}
footer a:hover{
    border-bottom: 2px solid #fff;
}