@charset "UTF-8";
/* ----- top-header ----- */
.top-header {
    /* border-top: 4px solid #57575a;
    border-bottom: 2px solid #57575a; */

    border-top: 4px solid;
    border-bottom: 2px solid;
    border-left: none;
    border-right: none;
    border-image: linear-gradient(90deg,#1fa8be 12.5%,#2e9e82 12.5% 25%,#eea134 25% 37.5%,#e1625c 37.5% 50%,#277db8 50% 62.5%,#92c158 62.5% 75%,#dd6d8c 75% 87.5%,#698cc0 87.5%);
    border-image-slice: 30;
    height: auto;

/*    
    position: sticky;
    top: 0px;
    z-index: 100;
*/
    background: #fff;
}

.top-icon {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    width: fit-content;
    height: auto;
    margin: 5px 10px;
}
.top-icon>div {
    width: fit-content;
    height: 35px;
    /* align-self: flex-start; */
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}
.top-icon>div>img {
    /* width: 100%; */
    width: 120px;
    height: 100%;
    justify-self: start;
    align-self: flex-start;
}

/* ----- ページトップへ戻る ----- */
#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 0;
  bottom: 0;
  background: #3f98ef;
  opacity: 0.6;
  border-radius: 50%;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -20px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

/* ----- top-menu ----- */
.top-menu {
    display: flexbox;
    line-height: 2.6;
    text-align: center;
    /* margin-top: 10px; */
    font-style: normal;
    font-weight: 800;
    font-size: 1.6rem;
    line-height: 1.8rem;
    padding-top: 5px;;
}
.menu-btn {
    position: relative;
    top: 20px;
    overflow: visible;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 198px;
    height: 45px;
    text-align: center;
    margin: 0px 2px;
    padding-bottom: 10px;
    border-radius: 8px 8px 0px 0px;
    transition: all .3s;
}
.menu-btn>a {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000;
}
.menu-btn.active>a {
    color: #ffffff;
}
.menu-btn>a:hover.menu-btn:hover {
    color: #ffffff;
}

.menu-box {
    display: -ms-flexbox;
    display: flex;
    flex-grow: 1;
    flex-basis: 0;
    -ms-flex-pack: justify;
    justify-content: space-between;
    max-width: 1382px;
    text-align: right;
    margin: 0 auto;
    font-size: 1.6rem;
}

.menu-box.introduction {
    border: 9px solid #e0625b;
}
.menu-box.beginner {
    border: 9px solid #1ca8be;
}
.menu-box.standard {
    border: 9px solid #319d81;
}
.menu-box.advanced {
    border: 9px solid #eca030;
}

/* ------tab----------------------- */
ul.list-tab {
    margin: auto;
    padding: 0;
    list-style-type: none;
    max-width: 1436px;
    text-align: center;
}
p { margin: 0;}
.wrap-tab {overflow: hidden;}
.list-tab { display: flex; margin: auto;}
.list-tab > li {
    /* display: block; */
    width: 100%;
    color: #000;
    text-align: center;
    background: #dddddd;
    box-sizing: border-box;
    cursor: pointer;
}

.list-tab > li.advanced {
    cursor:pointer;
}


/* 各タブの初期値 */
.menu-btn.introduction{background-color: #dddddd;}
.menu-btn.beginner{background-color: #dddddd;}
.menu-btn.standard{background-color: #dddddd;}
.menu-btn.advanced{background-color: #dddddd;}

/* ホバー時 */
.menu-btn:hover{
    top:0px;
    /* box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3); */
    height: 50px;
    padding-bottom: 0;
    color: #ffffff;
}
.menu-btn.introduction:hover{background: #e0625b; color: #fefefe;} 
.menu-btn.beginner:hover{background: #1ca8be; color: #fefefe;}
.menu-btn.standard:hover{background: #319d81; color: #fefefe;}
.menu-btn.advanced:hover{background: #eca030; color: #fefefe;} 

/* タブの色切り替え(押下後 => 活性) */
.menu-btn.active {
    top:10px;
    height: 50px;
    padding-bottom: 2px;
}
.menu-btn.active.introduction{background: #e0625b; color: #fefefe;}
.menu-btn.active.beginner{background: #1ca8be; color: #fefefe;}
.menu-btn.active.standard{background: #319d81; color: #fefefe;}
.menu-btn.active.advanced{background: #eca030; color: #fefefe;} 
.tab-content { display: none; padding: 1em;}
.tab-content.active { display: block;}
/* ----------------------------- */

/* ----- svg ----- */
.svgText text {
    font-weight: bold;
    font-size: 1.6rem;
    /* font-family: Meiryo UI; */
    stroke: #ffffff;
    fill: #4f4f4f;
    letter-spacing: 0px;
    text-anchor: middle;
}

.svgText > svg > use:nth-of-type(odd) {
    stroke-width: 4px;
    paint-order: stroke;
    stroke-linejoin: round ;
}
.svgText > svg > use:nth-of-type(even) {
    stroke-width: 0;
}
.svgText > svg > use:nth-of-type(n+3) {
    display: none;
}
@media screen and (max-width: 600px) {    
    .svgText > svg > use:nth-of-type(n+3) {
        display: inline;
    }
    .svgText > svg > use:nth-of-type(-n+2) {
        display: none;
    }
}

/* リンクの色 */
.menu-box a {
    /* color: #ffffff; */
    color: #000;
    text-decoration: underline;
}

.menu-box a:hover {
    text-decoration: none;
}

.menu-box form button{
    color: #000088;
    font-family: 'Kosugi Maru', "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
    font-weight: 400;
}
.menu-box form button:hover{
    text-decoration: underline;
}

.menu-box-inline {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: space-around;
    width: 50%;
    height: auto;
    margin-left: auto;
    margin: 0 10px;
}

.menu-box-inline a{
    color: #ffffff;
}

.menu-box>.menu-box-inline>h1 {
    font-size: 2.2rem;
    text-align: left;
    padding: 1.6rem 0.8rem 0rem 1rem;
}

.menu-box>.menu-box-inline>img {
    width: 180px;
}
@media screen and (max-width: 1240px) {
    .menu-box>.menu-box-inline>img {
        width: 25%;
    }
}
@media screen and (max-width: 999px) {
    .menu-box-inline {
        width: 97%;
    }

    .menu-box>.menu-box-inline>img {
        width: 25%;
    }
}

@media screen and (max-width: 600px) {
    .top-menu{
        font-size: 0.8rem;
        line-height: 2.2rem;
    }

    .tab-content { display: none; padding: 1em;}
    .tab-content.active { display: block;}

    .menu-box>.menu-box-inline>img {
        width: 20%;
    }

    .menu-box-inline {
        width: 94%;
    }
}

.menu-list {
    width: 80%;
    /* margin: 0px 0rem; */
    font-size: 1.8rem;
    text-align: left;
    padding-left: 0.5rem;
    list-style: none;
}

.menu-list > ul {
    padding-left: 10px;
}

.menu-list > li {
    position: relative;
    padding: 0px 0px 0px 3rem;
}

.menu-list > li::before {
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translateY(-50%);
    width: 0px;
    height: 0px;
    border: 0.3em solid transparent;
    content: "";
}

.menu-box .menu-list > li::before {
    border-left: 0.4em solid #000088;
}

/* スクロール */
.scrolly {
    overflow: hidden;
    overflow-y: scroll;
    /* IEなどのスクロールバーの色設定 */
    scrollbar-face-color: #999;
    scrollbar-track-color: #eee;
    /* スマホ用の慣性スクロール */
    -webkit-overflow-scrolling: touch;
}

/* -------------------------------------
   div.btn-container
---------------------------------------- */
.btn-container {
    /* width: fit-content; */
    height: fit-content;
    padding: 30px 5px 10px 5px;
    margin-top: 20px;
    position: relative;
    display: flex;
}

/* 枠線の色設定 */
.introduction .btn-container {
    border: 1px solid #e0625b;
}
.beginner .btn-container {
    border: 1px solid #1ca8be;
}
.standard .btn-container {
    border: 1px solid #009944;
}
.advanced .btn-container {
    border: 1px solid #eca030;
}

.landscape-wrap .btn-container {
    /* width: 81%; */
    width: 100%;
}

.btn-container:not(:first-of-type) {
    margin-top: 40px;
}

.btn-container h2 {
    background-color: #cde9e3;
    color: #000;
    /* font-size: 1.8rem; */
    width: fit-content;
    /* padding: 10px 15px; */
    position: absolute;
    top: -25px;
    left: 10px;
    /* text-align: right; */
    text-align: left;
    width: 20%;
    min-width:fit-content;
    /* display: flex;
    justify-content: center;
    align-items: center; */
}

.padding-10-15 {
    padding: 10px 15px;
}

.btn-container h2 a {
    display: block;
    padding: 10px 15px;
    /* text-align: center; */
}
.standard .btn-container h2 a:hover {
    background-color: #319d81;
}
.beginner .btn-container h2 a:hover {
    background-color: #1ca8be;
}
/* 枠線の色設定 */
.introduction .btn-container h2 {
    background-color: #f9dddb;
}
.beginner .btn-container h2 {
    background-color: #ccebf0;
}
.standard .btn-container h2 {
    /* background-color: #cde9e3; */
    background-color: #e2f0d9;
}
.advanced .btn-container h2 {
    background-color: #f9ebd1;
}


.btn-container h2 a { color: #000;}

/* -------------------------------------
   div.chapter
---------------------------------------- */
.chapter {
    display: flex;
    flex-direction: column;
    text-align: center;
    /* min-height: 80px; */
    margin: 0 10px;
    width: 100%;
}

/* -------------------------------------
   div.shoutobira-btn（ボタンの色はbg-○○クラスで設定する）
---------------------------------------- */
.shoutobira-btn {
    /* width: 120px; */
    width: 100%;
    /* padding: 20px 5px; */
    outline: 1px solid #ffffff;
    /* display: flex; */
    /* justify-content: center; */
    /* align-items: center; */
}

.shoutobira-btn a, .chapter-btn a, .shoutobira-btn p, .chapter-btn p {
    /* text-align: center; */
    /* display: block; */
    text-align: left;
    display: flex;
    align-items: center;
    padding: 20px 5px;
    line-height: 4rem;
}

.chapter-btn a , .chapter-btn p {
    justify-content: space-between;
    padding:15px 30px
}

.shoutobira-btn>a>img, .shoutobira-btn>p>img {
    width: 8%;
    margin: 0% 3%;
}

/* -------------------------------------
   ul.chapter-btn
---------------------------------------- */
.chapter-btn {
    display: flex;
    flex-direction: column;
    /* flex-wrap: wrap; */
    justify-content: flex-start;
    /* align-items: center; */
    width: 100%;
    /* height: 66px; */
}

.chapter-btn span a {
    padding: 39px;
}

.chapter-btn>li>a>img , .chapter-btn>li>p>img {
    width: 8%;
}

/* .tsukaumaeni .chapter-btn {
    border: 1px solid #1ca8be;
} */
.tsukaumaeni .chapter-btn a , .tsukaumaeni .chapter-btn>li>p{
    color: #1ca8be;
}

.tsukaumaeni .shoutobira-btn a:hover,.tsukaumaeni .chapter-btn a:hover {
    background-color: #ccebf0;
}

/* .shashinwotoru .chapter-btn {
    border: 1px solid #319d81;
} */
.shashinwotoru .chapter-btn a, .shashinwotoru .chapter-btn>li>p{
    color: #319d81;
}
.shashinwotoru .shoutobira-btn a:hover,.shashinwotoru .chapter-btn a:hover {
    background-color: #cde9e3;
}

/* .shiraberu .chapter-btn {
    border: 1px solid #eca030;
} */
.shiraberu .chapter-btn a , .shiraberu .chapter-btn>li>p{
    color: #eca030;
}
.shiraberu .shoutobira-btn a:hover,.shiraberu .chapter-btn a:hover {
    background-color: #f9ebd1;
}

/* .kangaeru .chapter-btn {
    border: 1px solid #e0625b;
} */
.kangaeru .chapter-btn a , .kangaeru .chapter-btn>li>p{
    color: #e0625b;
}
.kangaeru .shoutobira-btn a:hover,.kangaeru .chapter-btn a:hover {
    background-color: #f9dddb;
}

/* .kyouyuusuru .chapter-btn {
    border: 1px solid #217cb7;
} */
.kyouyuusuru .chapter-btn a , .chapter-btn>li>p{
    color: #217cb7;
}
.kyouyuusuru .shoutobira-btn a:hover,.kyouyuusuru .chapter-btn a:hover {
    background-color: #d1e4f0;
}

/* .tsukuru .chapter-btn {
    border: 1px solid #91c157;
} */
.tsukuru .chapter-btn a , .tsukuru .chapter-btn>li>p{
    color: #91c157;
}
.tsukuru .shoutobira-btn a:hover,.tsukuru .chapter-btn a:hover {
    background-color: #e7f1dc;
}

/* .kouryuusuru .chapter-btn {
    border: 1px solid #de6c8b;
} */
.kouryuusuru .chapter-btn a , .kouryuusuru .chapter-btn>li>p{
    color: #de6c8b;
}
.kouryuusuru .shoutobira-btn a:hover,.kouryuusuru .chapter-btn a:hover {
    background-color: #f9e1e6;
}

/* .iedetsukau .chapter-btn {
    border: 1px solid #688cc0;
} */
.iedetsukau .chapter-btn a, .iedetsukau .chapter-btn>li>p{
    color: #688cc0;
}
.iedetsukau .shoutobira-btn a:hover,.iedetsukau .chapter-btn a:hover {
    background-color: #e0e8f3;
}

.chapter-btn li {
    /* width: calc((100% - 160px) / 4); */
    /* padding: 10px 10px; */
    /* margin: 0 10px; */
    margin: 10px 0;
}

/* ボタンの色設定 */
.tsukaumaeni>.chapter-btn li {
    /* background-color: #1ca8be; */
    border: solid 4px #1ca8be;
}
.shashinwotoru>.chapter-btn li {
    /* background-color: #319d81; */
    border: solid 4px #319d81;
}
.shiraberu>.chapter-btn li {
    /* background-color: #eca030; */
    border: solid 4px #eca030;
}
.kangaeru>.chapter-btn li {
    /* background-color: #e0625b; */
    border: solid 4px #e0625b;
}
.kyouyuusuru>.chapter-btn li {
    /* background-color: #217cb7; */
    border: solid 4px #217cb7;
}
.tsukuru>.chapter-btn li {
    /* background-color: #91c157; */
    border: solid 4px #91c157;
}
.kouryuusuru>.chapter-btn li {
    /* background-color: #de6c8b; */
    border: solid 4px #de6c8b;
}
.iedetsukau>.chapter-btn li {
    /* background-color: #688cc0; */
    border: solid 4px #688cc0;
}
/* 空白 */
.chapter-btn >li.boder-none {
    height: 85px;
    border: none;
}
/* -------------------------------------
   ul.item-btn
---------------------------------------- */
.item-btn {
    display: flex;
    flex-wrap: wrap;
    /* flex-direction: column; */
    margin: 0 auto;
    width: 100%;
    /* justify-content: center; */
}

.item-btn li {
    margin: 5px 10px;
    /* padding: 10px 10px; */
    display: flex;
    /* justify-content: center; */
    align-items: center;
    border: solid 4px #767171;
}

.item-btn>li>a>img {
    width: 7.9%;
}

.tema>.item-btn>li>a>img {
    width: 8%;
}

.item-btn a {
    /* display: block; */
    /* text-align: center; */
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    color: #000;
    line-height: 4rem;
    width: 100%;
}

.item-btn a:hover {
    background-color: #d1d2d4;
}

.tema .item-btn a {
    justify-content: space-between;
}

.introduction .item-btn li {
    width: calc((100% - 160px) / 4);
}

.beginner .item-btn li {
    width: calc((100% - 56px) / 2);
}
.standard .item-btn li {
    /* width: calc((100% - 200px) / 5); */
    width: calc((100% - 56px) / 2);
}
.advanced .item-btn li {
    /* width: calc((100% - 200px) / 5); */
    width: calc((100% - 56px) / 2);
}

/* ボタンの色設定 */
.introduction .item-btn li {
    background-color: #e0625b;
}
/* .beginner .item-btn li {
    background-color: #1ca8be;
} */
/* .standard .item-btn li {
    background-color: #319d81;
} */
/*
.advanced .item-btn li {
    background-color: #eca030;
}
*/
/* -------------------------------------
   div.logo
---------------------------------------- */
.introduction .logo {
    width: 40%;
}
.beginner .logo {
    margin-top: 10px;
    width: 15%;
    /* height: fit-content; */
    display: flex;
    align-items: flex-end;
}
.beginner .logo {
    margin-top: 10px;
    /* width: 15%; */
    width: 100%;
    /* height: fit-content; */
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.beginner .logo img {
    width: 25%;
    min-width:180px;
}

.standard .logo {
    margin-top: 10px;
    /* width: 13%; */
    width: 100%;
    /* height: fit-content; */
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.standard .logo img {
    width: 25%;
    min-width:180px;
}

.advanced .logo {
    margin-top: 10px;
    /* width: 13%; */
    width: 100%;
    /* height: fit-content; */
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.advanced .logo img {
    width: 25%;
    min-width:180px;
}



/* -------------------------------------
   改行
---------------------------------------- */
.br-425px, .br-320px {
    display: none;
}

/* -------------------------------------
   タブレット横
---------------------------------------- */
@media screen and (max-width: 1260px) {
    .beginner .item-btn li {
        width: calc((100% - 26px));
    }
    .standard .item-btn li {
        /* width: calc((100% - 200px) / 5); */
        width: calc((100% - 26px));
    }

    .advanced .item-btn li {
        /* width: calc((100% - 200px) / 5); */
        width: calc((100% - 26px));
    }	
	
    .chapter-btn >li.boder-none {
        display: none;
    }
    .item-btn {
        flex-direction: column;
    }
	.chapter-btn>li>a>img {
	    width: 6%;
	    min-width:48px;
	}
    .item-btn>li>a>img  {
        width: 6%;
	    min-width:48px;
    }
    .shoutobira-btn {
        width: calc((100% - 19px));
    }
    .shoutobira-btn a>img{
        width: 6%;
        min-width: 48px;
    }
    .menu-box-inline {
        margin: 0 auto;
        /* width: 98%; */
        width: 100%;
        align-content: normal;
    }

	/* .chapter-btn {
	    align-items: center;
	} */

    .chapter-btn li {
/*        margin: 10px 10px;
        width: calc((100% - 80px) / 2);	*/
		/* width: calc((100% - 10px)); */
        width: calc((100% - 26px));
    }

	.btn-container {
		flex-direction:column;
	}
	
	/* .item-btn li {
		width: calc((100% - 20px));
	} */
/*
	.standard .logo img {
    	width: 80%;
	}
	
	.beginner .logo img {
    	width: 80%;
	}
*/
}


/* @media screen and (max-width: 769px) {
    .btn-container {
        flex-direction: column;
        margin: 20px auto 0;
        width: 98%;
    }

    .menu-box-inline {
        margin: 0 auto;
        width: 98%;
    }    

    .chapter-btn li {
        width: calc((100% - 160px) / 4);
        margin: 0 10px;
    }
    
    .landscape-wrap .btn-container {
        width: 100%;
    }
    
    .item-btn {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .introduction .item-btn li {
          width: calc((100% - 80px) / 2);
    }
    .beginner .item-btn li {
        width: calc((100% - 80px) / 2);
    }
    .standard .item-btn li {
        width: calc((100% - 80px) / 2);
    }

    .introduction .logo {
        width: 40%;
    } 
    .beginner .logo {
        width: 32%;
    }
    .standard .logo {
        width: 32%;
    }
} */

/* @media screen and (max-width: 712px) {
    .chapter-btn li {
        margin: 10px 10px;
    }
} */

/* -------------------------------------
   スマホ縦
---------------------------------------- */
@media screen and (max-width: 426px) {
    .top-icon {
        height: 30px;
    }
    .top-icon>div {
        height: 30px;
    }
/*
    .chapter-btn li {
        width: calc((100% - 80px) / 2);
    }

    .shoutobira-btn {
        padding: 52px 3px;
    }
*/
    .landscape-wrap .btn-container {
        width: 100%;
    }
/*
    .introduction .logo{
        width: 80%;
    }
    .beginner .logo,
    .standard .logo {
        width: 100%;
    }
    .beginner .logo img,
    .standard .logo img {
        width: 70%;
        margin: 0 auto;
    }
*/
    .br-425px {
        display: block;
    }

    .introduction .item-btn li {
/*        width: calc((100% - 40px) / 1);*/
        margin: 5px auto;
    }
    /* .beginner .item-btn li {
        width: calc((100% - 40px) / 1);
        margin: 5px auto;
    } */
    /* .standard .item-btn li {
        width: calc((100% - 40px) / 1);
        margin: 5px auto;
    } */

}

@media screen and (max-width: 376px) {
    /* .chapter-btn li {
        width: 100%;
    } */

    /* .standard .item-btn li {
        width: 100%;
    } */
}

@media screen and (max-width: 321px) {
    .br-320px {
        display: block;
    }
}