@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
h1{margin: 0; padding:0;}
h2{display:none; margin: 0; padding:0;}
#under h2{display: block;}
.col-sm-12{padding: 0;}
#under, body{font-family: "Open Sans",Arial,Verdana, Calibri, "メイリオ", Meiryo, Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "sans-serif";}

#under, h1 ,h2{font-size:16px;}
#under dl{margin-bottom:0;}
.ns_container{max-width: 100%;}
.ns_container{margin-top: 0;}
.nav.nav-tabs{max-width: 980px; width: 100%; margin: 0 auto;}
.breadcrumb{margin-bottom: 0;}
.contentWrap{
max-width: 980px;
width: 100%;
margin: 0 auto;
padding: 80px 0;
color: #123a65;
}

.btnBox a{
display:inline-block;
color: #fff;
line-height: 1.4;
text-align: center;
padding: 10px 10px 10px 30px;
background: #d40000;
font-size: 16px;
border-radius: 10px;
}
.btnBox a:after {
background: url(/sites/default/files/contents/images/icons/arrow-right-white.svg) no-repeat 0 1px;
background-size: 19px 11px;
content: '';
display: inline-block;
width: 29px;
height: 12px;
margin-left: 16px;
transition: background 0.3s ease-in;
}
.btnBox a:hover {
text-decoration: none;
opacity: 0.8;
transition: background 0.3s ease-in;
}
.btnBox a:hover:after {background-position: 80% 1px;}
.ttl-h1{text-align: center; margin-bottom: 60px; font-size: 2em; font-weight: bold;}
#topArea{
border-bottom: 5px solid #123a65;
/*
background: url("/sites/default/files/contents/kidsclub/oped2026/images/oped_mainbg.png") no-repeat left 15%;
background-size: 100% auto;
*/
}
#topArea .contentWrap{
padding:0;
align-items: center;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
}
#topArea .topArea_txt{width: 60%; text-align: center;}
#topArea .topArea_img{width: 45%;}
#topArea .cap{
font-family: "Open Sans", sans-serif;
font-size: min(24px, 4vw);
font-weight: bold;
margin-bottom:15px;
}
#topArea .cap .yearBox{
color: #fd5821;
}
/*#en #topArea .cap{font-size: 1.2em;}*/
#topArea h1{font-size: 1.8em; line-height: 1.4; margin-bottom: 10px;}
#topArea .topArea_date{font-size: 1.5em; line-height: 1.2em; font-weight: bold; margin-bottom: 15px;}
#topArea .topArea_time{font-size: 1em; display: block; font-weight: normal;}
#topArea .topArea_time_ttl{font-size: 0.8em; vertical-align: bottom;}
#topArea .topArea_place{font-size: 1em;}
#topArea .topArea_place a{color: #000; text-decoration: underline;}
#topArea .topArea_place .glyphicon-new-window{font-size: 0.8em; margin-left: 10px;}

#topArea .topArea_add{font-size: 1em;}
#topArea .topArea_add .add{
margin: 0;
display: inline-block;
}
#topArea .topArea_add.p-style p{
background: #123a65;
color:#fff;
padding: 10px 20px;
display: inline-block;
border-radius: 10px;
}

#topArea .topArea_txt .res-break{padding-right: 1em;}
/*
#topArea .topArea_add .iconbox-map {
padding: 3px 10px 3px 5px;
margin-left: 10px;
background-color: #123a65;
color: #fff;
border-radius: 4px;
}
*/
#topArea .topArea_add .mapArea{
display: inline-block;
}
#topArea .topArea_add .mapArea a{
padding: 3px 10px 3px 5px;
margin-left: 10px;
background-color: #123a65;
color: #fff;
border-radius: 4px;
font-size: 13px;
}
#topArea .topArea_add .mapArea .iconbox-map{
margin-right: 5px;
}

#topArea .infoBox{
background: url(/sites/default/files/contents/kidsclub/otws2020/images/bg-op.png)left top repeat;
border-radius: 10px;
padding: 5px 10px;
margin: 0 45px 15px 45px;
color: #b71212;
text-align: left;
font-size: 14px;
}
#en #topArea .infoBox {margin: 0 35px 15px 35px;}

#topArea .infoBox .ttl{
text-align: center;
font-weight: bold;
margin-bottom: 0;
}

#topArea .infoBox a{
text-decoration: underline;
color: #b71212;
}


#navArea{
background: #123a65;
padding: 6px 0;
}
#navArea .contentWrap{padding:0;}
#navArea ul{
display: flex;
flex-flow: row;
justify-content: space-around;
list-style-type: none;
}
#navArea a {
display: block;
border-radius: 4px;
color: white;
padding: 12px 24px;
text-decoration: none;
}
#navArea .iconbox-toplink a {border: 1px solid #fff;}

#navArea ul li a:hover {background: #72baeb;}
#navArea ul li.register-btn a {background-color: #d40000;}
#navArea ul li.register-btn a:hover {background-color: #d61313;}
#navArea ul li.iconbox-toplink .glyphicon-txt{padding-left: 5px;}

/* 固定 */
#navArea.fixed {
position: fixed;
top: 0;
padding: 0;
width: 100%;
z-index: 1000;
box-shadow:0px 3px 3px 0px rgba(0,0,0,0.4);
-webkit-box-shadow:0px 3px 3px 0px rgba(0,0,0,0.4);
-moz-box-shadow:0px 3px 3px 0px rgba(0,0,0,0.4);
}
#navArea.fixed ul li.register-btn a{padding: 9px 24px; margin-top: 3px;}

#program .programBox{margin-bottom: 40px;}

#program .program_detail li{
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
align-items: flex-start;
justify-content: flex-start;
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px solid #ccc;
line-height: 1.4;
}
#program .program_detail_time{flex-basis:15%; padding-left: 1em;}
#program .program_detail_ttl{flex-basis: 51%;}
#program .program_detail_name{flex-basis: 34%;}


#presenters{background-color: #123a65;}
#presenters .ttl-h1{color: #fff;}




#presenters .presentersBox {margin-bottom: 50px;}
#presenters .presentersArea .presentersBox{
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
align-items: flex-start;
justify-content:space-between;
}
#presenters .presentersArea p{margin-bottom: 0;}
#presenters .presentersArea .presentersBox .imgBox{flex-basis:11%;}
#presenters .presentersArea .presentersBox .imgBox img{
width:  100px;
height: auto;
border-radius:15%;
}
#presenters .presentersArea .presentersBox .txtBox{flex-basis:85%; background-color: #fff; border-radius: 15px; padding: 20px;}
#presenters .presentersArea .presentersBox dl{margin-bottom:20px;}
#presenters .presentersArea .presentersBox .txtBox .personal dt{
font-weight: bold;
font-size: 1.2em;
margin-bottom: 10px;
border-bottom: 1px dotted #8f9a9f;
padding-bottom: 10px;
}
#presenters .presentersArea .presentersBox .txtBox .personal dt .area01{
display: block;
font-size: 0.75em;
line-height: 1.4;
}
#presenters .presentersArea .presentersBox .txtBox .detail dt{
margin-bottom: 10px;
border-bottom: 1px dotted #8f9a9f;
padding-bottom: 5px;
}
#presenters .presentersArea .presentersBox .txtBox .detail dt span.icon01{
font-size:12px;
background-color:#74a5dd;
color: #fff;
padding:3px 0;
display:block;
width:128px;
float:left;
text-align:center;
margin-right:20px;
border-radius: 4px;
letter-spacing: 0.08em;
}
#presenters .noteBox{
width: 100%;
text-align: center;
font-size: 12px;
color: #fff;
}
#presenters .soonBox{
width: 100%;
text-align: center;
font-size: min(30px, 6vw);
color: #fff;
}



#benefits{background-color: #e3f2fc;}
#benefits .benefitsArea{
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
align-items: stretch;
justify-content:space-between;
}

#benefits .benefitsArea .benefitsBox{
flex-basis: 32%;
background-color: #fff;
border-radius: 10px;
padding: 20px 10px;
}
#benefits .ttl-h1{margin-bottom: 20px;}
#benefits .benefits_note{text-align: center; margin-bottom: 20px;}

#benefits .benefitsArea .benefitsBox .ttl{text-align: center; background-color: #e3f2fc; padding: 10px; border-radius: 10px; color: #123a65;}
#benefits .benefitsArea .benefitsBox .imgBox{
padding: 20px 0;
min-height: 250px;
display: flex;
justify-content: center;
align-items: center;
}
#benefits .benefitsArea .benefitsBox .imgBox img{width:80%; height: auto;}
#benefits .benefitsArea .benefitsBox .txtBox{line-height: 1.4;}
#benefits .benefitsArea .benefitsBox .cap{margin-top: 10px; font-size: 0.75em;}
#benefits .benefitsArea .benefitsBox .countBox.txt{}
#benefits .benefitsArea .benefitsBox .countBox.count{color:#AB0002; text-align: center; margin: 13px 0; line-height: 1;}
#benefits .benefitsArea .benefitsBox .countBox.count .count01{font-size:7em; display: block;}
#benefits .benefitsArea .benefitsBox .countBox.count .count02{font-size:6em;}

#program .program_detail li.delighter,
#presenters .presentersArea .presentersBox.delighter,
#benefits .benefitsArea .benefitsBox.delighter{
transition: all .5s ease-out;
opacity: 0;
}

#program .program_detail li.delighter.started,
#presenters .presentersArea .presentersBox.delighter.started,
#benefits .benefitsArea .benefitsBox.delighter.started{
transform: none;
opacity: 1;
}
#program .program_detail .capArea{
margin-top: 15px;
font-size: 0.8em;
}

#presenters_mv{
width: 80%;
margin: 20px auto;
}
#presenters_mv .mvArea{
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
#presenters_mv .mvArea iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}


.switch_sp{display: none;}
.switch_pc{display: block;}

/* 767px以下用：タブレット／スマートフォン用の記述 */
@media screen and (max-width: 980px) {
.contentWrap{max-width: 100%; width: 80%;}
#under, h1, h2{font-size:13px;}
}

/* 767px以下用：landscape用の記述 */
@media screen and (max-width: 768px) {
.breadcrumb>li{display: inline;}
.breadcrumb > li + li:before{margin-left: 0; padding: 0 0 0 8px;}
.ns_headerBottom_inner{padding: 0 5px;}
.contentWrap{width: 90%; padding: 30px 0;}
.ttl-h1{margin-bottom: 30px; font-size: 1.5em;}
#topArea{
background-size: cover;
background-position: top right;
}
#topArea .contentWrap{display: block; padding: 30px 0;}
#topArea h1{margin-bottom: 15px;}
#topArea .topArea_img{
width: 100%;
margin: 0;
}
#topArea .topArea_txt{
width: 100%;
line-height: 1.4;
background-color: #ffffffdb;
padding: 20px 10px;
}
#topArea .cap{font-size:min(20px,5vw);}
#topArea .topArea_txt .res-break{padding-right:0; display: block;}
#topArea .topArea_add{font-size: 1em;}
#topArea  .infoBox, #en #topArea .infoBox{margin:10px 0 0 0;}
#topArea .topArea_add .mapArea{
display: block;
margin-top: 10px;
}
#navArea ul{-webkit-flex-wrap:wrap; flex-wrap: wrap;}
#navArea ul li{
/*flex-basis: 33.3%;*/
flex-basis: 45%;
text-align: center;
}
/*#navArea ul li.register-btn {flex-basis: 66.6%;}*/
#navArea ul li a{padding: 5px 2px; margin: 3px;}
#navArea.fixed ul li a{ margin-bottom: 3px;}
#navArea.fixed ul li.register-btn a{
padding: 5px 24px;
margin-bottom: 3px;
white-space: nowrap;
}

#program .program_detail li{
display: block;
text-align: center;
border-bottom: none;
padding-bottom: 0;
margin-bottom: 0;
}
#program .program_detail_time{
padding-left: 0;
margin-bottom: 10px;
background-color:#123a65;
padding: 2px;
color: #fff;
}
#program .program_detail_ttl {
margin-bottom: 10px;
/*border-bottom: 1px dotted #ccc;*/
padding-bottom: 10px;
}
#presenters .presentersArea .presentersBox{display: block; background-color: #fff; border-radius: 15px; padding-top: 20px;}
#presenters .presentersArea .presentersBox .imgBox{padding: 0 35%;}
#presenters .presentersArea .presentersBox .imgBox img{width:100%; height: 100%;}

#presenters .presentersArea .presentersBox .txtBox{line-height: 1.4;}
#presenters .presentersArea .presentersBox .txtBox .titleBox{font-size: 1em;}
#presenters .presentersArea .presentersBox .txtBox .detail dt{font-size: 1.2em;}
#presenters .presentersArea .presentersBox .txtBox .detail dt span.icon01{
float: none; 
width:100%;
margin-bottom:20px;
}

#benefits .benefitsArea{display: block;}
#benefits.en .benefitsArea .benefitsBox .ttl{font-size: 1.4em;}
#benefits .benefitsArea .benefitsBox{flex-basis: 100%; margin-bottom: 20px;}
.block_sp{display: block;}
.switch_sp{display: block;}
.switch_pc{display: none;}
#presenters_mv{width: 100%;}

}