@charset "UTF-8";

/*//////////////////////////////////////
オンラインマニュアル 保護者用 レスポンシブ
///////////////////////////////////////*/
.manual-header h1 {
    font-size: 11px;
}
/*■■■■■ スマホメニュー   ■■■■■*/
.manual-header a.smt-menu {
    position: relative;
    display: block;
    padding: 0;
}
.manual-header a.smt-menu .menu-open {
    display: inline-block;
    position: absolute;
    width: 40px;
    height: auto;
    right: 10px;
    top: 10px;
}
.manual-whapper .snav .close,
.manual-whapper-top .snav .close {
    padding: 0;
}
.manual-whapper .snav .menu-close,
.manual-whapper-top .snav .menu-close {
    display: inline-block;
    width: 40px;
    height: auto;
    margin-left: calc(100% - 50px);
    margin-top: 15px;
}
/* 
.manual-whapper .snav .menu-close,
.manual-whapper-top .snav .menu-close, {
    display: inline-block;
    width: 40px;
    height: auto;
    margin-left: calc(100% - 50px);
    margin-top: 15px;
} */
.manual-whapper .snav .close::before,
.manual-whapper-top .snav .close::before {
    display: none;
} 


/*■■■■■■■■■ aside ■■■■■■■■■*/
#js-aside {
    display: none;
}
.manual-whapper aside,
.manual-whapper-top aside {
	background-color: #FBE4EB;
	left: 0;
	top: 0;
	position: fixed;
	width: 100%;
	height: auto;
	z-index: 10;
	transition-duration: .5s;
	text-align: left;
}
.manual-whapper aside h3,
.manual-whapper-top aside h3 {
    background-color: #ED7A9B;
    border-radius: 7px;
    color: #fff;
    text-align: left;
    padding: .2rem .5rem;
    font-size: 14px;
    font-weight: bold;
    margin: 0;
    letter-spacing: .1rem;
}

.manual-whapper aside a,
.manual-whapper-top aside a {
    display: block;
    color: inherit;
    padding: 10px 15px;
    text-decoration: none;
    font-size: 16px;
    position: relative;
    padding-left: 40px;
}
.manual-whapper aside nav a br,
.manual-whapper-top aside nav a br {
    display: none;
}
.manual-whapper aside nav a::before {
    content: '＞';
    font-size: 11px;
    position: absolute;
    left: 15px;
    top: 18px;
}
.manual-whapper aside a:not(:first-child).selected {
	background-color: #ed7a9b;
	color: #fff;
}
.manual-whapper aside a:hover {
	background-color: #ed7a9b;
	color: #fff;
}
/* .manual-whapper aside a:last-child:hover,
.manual-whapper aside a.selected:last-child:hover {
	background-color: #fff;
	color: #7fbe26;
} */

/*■■■■■■■■■ main ■■■■■■■■■*/
.manual-whapper {
    margin: 0 4% 8%;
}
.manual-whapper main h2 {
    font-size: 20px;
    font-weight: bold;
    line-height: 1.2;
    border-bottom: solid 1px #646464;
    color: #646464;
    margin-bottom: 15px;
    padding: 15px 20px;
}
.manual-whapper main .lead {
    padding: 0 2% 4%;
}


.manual-whapper main.bg-w > div,
.manual-whapper main > div {
    background-color: #fff;
    margin: 0 0 8%;;
    padding: 0;
}
.manual-whapper main.bg-w h3,
.manual-whapper main h3 {
    background-color: #FBE4EB;
    border-radius: 6px;
    color: #ED7A9B;
    margin-bottom: 15px;
    padding: 5px 10px;
    font-size: 16px;
    font-weight: bold;
}
.manual-whapper main.bg-w h3 + div {
    margin: 0 10px 30px;
}
.manual-whapper main.bg-w img {
    border: none;
}
.manual-whapper .box1 {
    border: solid 1px #ccc;
    padding: 10px 15px;
}
.manual-whapper .box1 li {
    position: relative;
    padding-bottom: .5rem;
    padding-left: 17px;
}
.manual-whapper .box1 li::before {
    content: '●';
    color: #ccc;
    font-size: 20px;
    position: absolute;
    left: 0;
    top: -5px;
}
.tx-red {
    color: #f00;
}

.manual-whapper main .bg-p,
.manual-whapper-top.printout main .bg-p {
    background-color: #FCEBF0;
    margin: 0;
    padding: 20px;
}
.manual-whapper main > div img,
.manual-whapper-top.printout main .page img {
    display: block;
    width: auto;
    max-width: 100%;
    /* border: solid 1px #B1B1B1; */
    margin: 20px 0;
}
.maru-p {
    position: relative;
    font-size: 16px;
    font-weight: bold;
    line-height: 2.0;
}
.maru-p::before {
    content: '●';
    color: #ed7a9b;
    font-size: 120%;
    padding: 20px 0;
}


.manual-whapper .attend-tabs-list {
    display: block;/*mypage04.html タブ切り替えにしないため全表示*/
    margin-top: 50px;
}

@media screen and (min-width: 800px) {


/*■■■■■■■■■ aside ■■■■■■■■■*/ /*■共通*/
#js-aside {
    display: block;
}
.fixnav {
    position: fixed !important;
    top: 0px;
 }
.manual-whapper aside {
    background-color: #fff;
    width: 30%;
    max-width: 260px;
    float: left;
    box-sizing: border-box;
    position: static;
    left: inherit;
}
.manual-whapper aside h3 {
    background-color: #ED7A9B;
    border-radius: 7px;
    color: #fff;
    text-align: left;
    padding: .2rem .5rem;
    font-size: 16px;
    font-weight: bold;
    margin: 0 0 15px;
    letter-spacing: normal;
}
.manual-whapper aside > nav,
.manual-whapper aside > nav div {
    margin: 0 0 30px;
}
.manual-whapper aside nav nav  {
    margin-right: 10px;
    margin-left: 10px;
}

.manual-whapper aside nav a {
    position: relative;
    display: block;
    color: #646464;
    font-size: 14px;
    line-height: 1.8;
    padding: .2rem;
    margin: .2rem 0;
    text-decoration: none;
}
.manual-whapper aside nav a::before {
    position: static;
}
.manual-whapper aside nav a:hover,
.manual-whapper aside nav a.active {
    background-color: #FCEBF0;
    border-radius: 16px;
    color: #ED7A9B;
    padding: .2rem;
}
.manual-whapper aside a:not(:first-child).selected {
    background-color: #FCEBF0;
    color: #ED7A9B;
}

/*■■■■■■■■■ main ■■■■■■■■■*/
    
.manual-whapper {
    margin: 0 2% 8%;
    overflow: hidden;
}
.manual-whapper main {
    width: 67%;
    max-width: 810px;
    float: right;
    box-sizing: border-box;
}
.manual-whapper main h2 {
    font-size: 30px;
    font-weight: bold;
    line-height: 1.2;
    border-bottom: solid 1px #646464;
    color: #646464;
    padding: 0 20px 15px;
}
.manual-whapper main .lead,
.manual-whapper-top.printout main .lead {
    padding: 0 2% 4%;
}
.manual-whapper main.bg-w > div,
.manual-whapper main > div,
.manual-whapper-top.printout main > div {
    margin: 0 2% 8%;
}
.manual-whapper main.bg-w h3,
.manual-whapper main h3 {
    font-size: 24px;
    margin-bottom: 20px;
}
.maru-p {
    font-size: 20px;
}
.manual-whapper-top.other.pc-top {
	margin-top: 80px;
}

/*setting01.html*/

.manual-whapper main > div img.w80,
.manual-whapper-top.printout main > div img.w80 {
    max-width: 80%;
    margin: 20px auto;
}


}


@media screen and (min-width: 1100px) {
    .manual-whapper {
        width: 1100px;
        margin: 0 auto 8%;
    }
    .manual-whapper aside {
        width: 260px;
    }
    .manual-whapper main {
        width: 810px;
    }
    .manual-whapper main .lead,
    ..manual-whapper-top.printout main .lead {
        padding: 20px;
    }
    .manual-whapper main.bg-w > div,
    .manual-whapper main > div,
    .manual-whapper-top.printout main > div {
        margin: 0 20px 50px;
    }
       
}