@charset "utf-8";


@media screen and (max-width: 1240px){
#under, h1 ,h2{font-size:1.3vw;}
}

/*----------------*/
h1{margin: 0; padding:0;}
h2{display:none; margin: 0; padding:0;}
#under{
font-family:'Barlow',Arial,"メイリオ","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, Osaka, "sans-serif";
}
#under, h1, h2{
font-size:16px;}
#under h2{
display: block;
color: #000;
}
#under dl{margin-bottom:0;}
#under a{
color: #000;
text-decoration: underline;
}
#under .under_marker{
background: linear-gradient(transparent 60%, yellow 30%);
text-decoration: none;
display: inline-block;
font-weight: normal;
}
#under a.under_none{
text-decoration: none;
}
#under .fw_nomal{
font-weight: normal;
}
.col-sm-12{padding: 0;}
.ns_container{
max-width: 100%;
margin-top: 0;
margin-bottom: 100px;
}
.nav.nav-tabs{max-width: 980px; width: 100%; margin: 0 auto;}
.breadcrumb{margin-bottom: 0;}
.switch_pc{display: block !important;}
.switch_sp{display: none !important;}
:root {
  --color01:#fff;
  --color02:#4987ff;
  --color03:#f1f3f5;
  --color04:#4776ae;
}


/*-- 共通 --*/
.catArea{
margin-top: 100px;
}
.catArea .wrap{
padding: 0 40px;
}
.catArea .wrap > div:last-child{
border-bottom: none;
padding-bottom: 0;
}
.catArea .ttl{
font-size: 1em;
font-weight: bold;
border-bottom: 2px solid var(--color02);
margin-bottom: 30px;
background-color: var(--color02);
color: var(--color01);
padding: 5px 1em;
border-radius: 10px 10px 0 0;
}
.catArea .exBox{
display: flex;
gap:10%;
margin-bottom: 40px;
}
.catArea .txtArea{
margin-bottom: 40px;
}
.catArea .exBox,
.catArea .txtArea{
padding-bottom: 40px;
border-bottom: 1px solid var(--color01);
}
.numTxt{
font-weight: bold;
margin-bottom: 10px;
}
.numTxt p,
.list_indent{
padding-left: 1em;
text-indent: -1em;
}
.cap{
font-size: 0.8em;
}
.catArea .exBox > div{
width: 50%;
}
.catArea .exBox .imgBox{
width: 40%;
}

/*-- mainArea --*/
.mainArea.box_inner{
background-color: #fff;
}
.mainArea .mainBox{
width: 50%;
min-width: 570px;
margin: 0 auto;
}
.en .mainArea .mainBox{
min-width: 600px;
}
.mainArea .mainBox .tocArea{
position: relative;
}
.mainArea .mainBox .ttlArea{
width: 50%;
}

.mainArea .mainBox .imgBox{
width:34%;
position: absolute;
top: -22%;
right: -1%;
z-index: 2;
transform: rotate(8deg);
}

.mainArea .mainBox .outBox{
margin-top: 1vw;
}


/*-- 目次 --*/
.mainttl{
font-size:3.5rem;
font-weight: bold;
text-align: center;
margin-bottom: 25px;
margin-top: 40px;
line-height: 1.4;
}
.tocBox{
position: relative;
padding: 40px 20px;
background-color: var(--color03);
border-radius: 10px;
width: 80%;
min-width: 350px;
margin: 90px auto 0 auto;
z-index: 0;
}
.tocBox .ttl{
padding: 0 20px;
margin-bottom: 10px;
border-bottom: 1px solid var(--color02);
font-size: 1.2em;
margin: 0px;
position: absolute;
top: 0px;
left: 50%;
transform: translate(-50%, -50%);
background-color:var(--color02);
border-radius: 30px;
color:var(--color01);
padding: 8px 24px;
text-align: center;
white-space: nowrap;
}
.tocBox .txtBox{
padding:0 1em; 
}
.tocBox .tocList a:after{
content: "";
background: #ffffff;
height: calc(tan(60deg) * 60px / 2);
width: 60px;
clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.box_inner{
width: 90%;
max-width: 1010px;
margin: 0 auto;
background-color: var(--color03);
border-radius: 10px;
padding-bottom: 20px;
}

/*-- boxTop --*/
.catArea.boxTop{
margin-top: 40px;
}
.catArea.boxTop .ttl{
}
.catArea.boxTop .txtArea{
margin-bottom: 0;
}
.boxTop .txtArea{
display: flex;
gap:10%;
}
.boxTop .selectBox{
width: 45%;
font-weight: bold;
background-color: var(--color01);
border-radius: 10px;
text-align: center;
padding: 10px;
}
.boxTop .selectBox .area01{
padding: 10px;
background-color: var(--color03);
border-radius: 10px;
}
.boxTop .selectBox .area02{
padding: 10px;
}

/*-- アカウントの登録 --*/
.catbox01 .txtArea .inner{
padding: 0 1em;
}
.catbox01 .exBox.box01 > div{
width: 45%;
}
.catbox01 .exBox.box01 .imgBox{
width: 55%;
}
.catbox01 .exBox.box02 > div{
width: 75%;
}
.catbox01 .exBox.box02 .imgBox{
width: 30%;
}
.catbox01 .exBox .listBox{
margin-bottom: 20px;
padding-left:35px;
}

/*-- コードの登録 --*/
.catArea.catbox02 .exBox.box01{
display: block;
}
.catArea.catbox02 .numTxt {
margin-bottom: 20px;
}
.catArea.catbox03 .noteBox{
margin-top: 20px;
}
/*
.catArea.catbox02 .exBox.box01 .imgBox,
.catArea.catbox02 .exBox.box01 > div{
width: 100%;
}
*/


/*-- 教育機関との紐付け --*/
.catArea.catbox03 .exBox.box01{
display: block;
}
.catArea.catbox03 .exBox.box01 .imgBox,
.catArea.catbox03 .exBox.box01 > div{
width: 100%;
}


.catArea .exBox > .imgBox.wideCol,
.catArea .exBox > div.wideCol{
width: 100%;
}

/*-- 対話型学習アシスタントLAURAのAI利用について --*/
.catArea.catbox04 .ttl{
background-color: #011e41;
border-bottom-color:#011e41;
}

.catArea.catbox04 .noteBox{
margin-top: 20px;
font-weight: bold;
}

.catArea.catbox04 .accordion-title{
font-weight: bold;
border-bottom-color: #ccc;
}

.catArea.catbox04 .accordion-title::after{
border-color: #011e41;
}




@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
  img {
    image-rendering: -webkit-optimize-contrast;
  }
}


/* 768px以下用：タブレット／*/
@media screen and (max-width: 768px){

/*-- 共通 --*/
.switch_pc{display: none !important;}
.switch_sp{display: block !important;}
.catArea .exBox{
display: block;
}
.mainttl{
font-size: 8vw;
}
.mainttl .sp_block{
display: block;
}
.mainArea .mainBox,
.en .mainArea .mainBox,
.tocBox{
min-width: 100%;
}
.tocBox{
margin-top: 17vw;
padding: 35px 5% 20px 5%;
}
.tocBox .ttl{
left: 21%;
}
.tocList li{
margin-bottom: 2vw;
}

.mainArea .mainBox .imgBox {
width: 46%;
top: -45%;
right: -3%;
}

@media screen and (max-width: 730px) {
.mainArea .mainBox .imgBox {
width: 41%;
top: -15%;
right: -3%;
}
}

.boxTop .txtArea{
display: block;
}
.boxTop .selectBox{
width: 100%;
margin-bottom: 30px;
}
.boxTop .txtArea{
margin-bottom: 40px;
}
.catArea .exBox > div,
.catArea .exBox .imgBox,
.catbox01 .exBox.box01 > div,
.catbox01 .exBox.box01 .imgBox,
.catbox01 .exBox.box02 > div,
.catbox01 .exBox.box02 .imgBox{
width: 100%;
}
.catArea{
margin-top:10vw;
}
.catArea .wrap{
padding: 0 5%
}

.boxTop .selectBox{
margin-bottom: 20px;
}
.boxTop .selectBox:last-child{
margin-bottom: 0;
}
.catArea .exBox .imgBox{
margin-top: 10px;
}
.catArea.catbox02 .exBox.box03 .imgBox{
margin-bottom: 20px;
}


}


/* 767px以下用：タブレット／*/
@media screen and (max-width: 767px){
.switch_pc7{display: none !important;}
.switch_sp7{display: block !important;}

}


/* 480px以下用：landscape用の記述 */
@media screen and (max-width: 480px){
}


/* 375px以下用：landscape用の記述 */
@media screen and (max-width: 375px){

}

/* 320px以下用：landscape用の記述 */
@media screen and (max-width: 320px) {

}