@charset "utf-8";

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

/* 定義 */
:root {
--color-student:#3479bd;
--color-student02:#145aa0;
--color-teacher: #183965;
--color-teacher02: #05162d;
--color-hab-bg:#c9d5d6;
}

/*----------------*/
.ns_container{
max-width: 100%;
background-color: var(--color-hab-bg);
padding-bottom: 0;
}
.ns_container{margin-top: 0;}

.field-item{
background-image:url(/sites/default/files/contents/oeh/images/oeh_bg.png);
background-attachment: fixed;
background-position: top -50px right -230px;
background-position: right min(-7vw, -230px) top -4vw;
background-size: 770px;
background-repeat: no-repeat;
}


h1{margin: 0; padding:0;}
h2{display:none; margin: 0; padding:0;}
.under{font-family: "Open Sans", Noto Sans JP , 'Barlow',  Arial, "メイリオ","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, Osaka, "sans-serif";}
#under, h1, h2{font-size:min(1.5625vw, 16px);}
#under h2{display: block;}
.col-sm-12{padding: 0;}
#under dl{margin-bottom:0;}
#under{
width: 90%;
max-width: 1010px;
margin: 0 auto;
padding-top:min(4vw, 30px);
padding-bottom: 130px;
}

.breadcrumb{margin-bottom: 0;}
a:focus{outline:none;}

/*------- 共通 ---------*/
.standBox{text-align: center;}
.registerBox a:hover{opacity: 0.7;}
.cap{font-size: 0.8em;}
p{line-height: 1.6; margin: 0;}
.en p{line-height: 1.4;}
.switch_pc{display: block !important;}
.switch_sp{display: none !important;}
.spBox{display: inline-block;}
.flBox{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.flBox.fl-container{justify-content: space-between;}
.flBox .box_2col{width: 50%;}
.flBox .box_3col{width: 30%;}
.flBox .box_4col{width: 25%;}

/*------------*/
.top-txtBox{
margin-bottom:min(4vw, 30px);
background-color: hsla(0, 0%, 100%, 0.8);
padding: 30px 30px 20px 30px;
border: 5px solid #fff;
}
.top-txtBox p{
  margin-bottom: 1em;
}
.top-txtBox .listBox{
  margin: 1em 0 1.5em 1.8em;
}
.top-txtBox a{
text-decoration: underline;
}

/*-------タブ---------*/
.tabBox .tabArea {
width: 100%;
height: 110px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-end;
}
.tabBox .tabArea .one_tab {
width: 24%;
}
.tabBox .tabArea .one_tab span{
display: block;
}
.tabBox .tabArea .one_tab a {
display: block;
text-decoration: none;
transition-duration: 0.3s;
text-align: center;
color: #fff;
}
.tabBox .tabArea .one_tab.stbox .tab_inner:hover {
background-color: var(--color-student02);
}
.tabBox .tabArea .one_tab.ttbox .tab_inner:hover {
background-color: var(--color-teacher02);
}
.tabBox .tabArea .one_tab a:hover {
}
.tabBox .tabArea .one_tab .tab_inner {
height: 90px;
transition-duration: 0.3s;
box-shadow: inset 0px -8px 9px -5px rgba(0, 0, 0, 0.3);
}
.tabBox .tabArea .one_tab.stbox .tab_inner {
background-color: var(--color-student);
}
.tabBox .tabArea .one_tab.ttbox .tab_inner {
background-color: var(--color-teacher);
}
.tabBox .tabArea .one_tab a.select .tab_inner {
height: 110px;
}
.tab_contents .tab_main {
display: none;
padding: 40px 25px;
min-height: 280px;
transition-duration: 0.3s;
}
.tab_main.is_show {
display: block;
}
/*--------タブスタイル--------*/
.tabBox .tabArea .one_tab .tab_inner{
flex-wrap: wrap;
padding: 10px 0 5px 0;
}
.tabBox .tabArea .tab_inner div{
width: 100%;
}
.tabBox .tabArea .tab_inner .cate_ttl01{
height: 1.8em;
line-height: 1;
border-bottom: 1px solid #ffffff75;
margin: 0 10px 5px 10px;
padding-bottom: 8px;
font-size: min(1.6vw, 15px);
font-weight: 700;
letter-spacing: 0.05em;
}
.tabBox .tabArea .tab_inner .cate_ttl02{
font-size:min(1.4vw, 15px);
line-height: 1.2;
}
.tabBox .tabArea .one_tab a.select .tab_inner {
padding-top: 15px;
box-shadow: none;
}

/*----------------*/
.tab_contents {
background-color:#ffffffd4;
}
.tab_contents #tab01,
.tab_contents #tab02{
border-top:15px solid var(--color-student);
}
.tab_contents #tab03,
.tab_contents #tab04{
border-top:15px solid var(--color-teacher);
}


.tab_contents .ttlBox{
text-align: center;
margin-bottom: 40px;
}
.tab_contents .ttlBox .mainttl{
display: inline-block;
padding: 0 30px 10px 30px;
font-size: min(6vw, 30px);
border-bottom: 3px solid #000;
}
.tab_contents .st .ttlBox .mainttl{
border-color:var(--color-student);
}
.tab_contents .tt .ttlBox .mainttl{
border-color:var(--color-teacher);
}
.tab_contents .ttlBox .subttl{
display: block;
font-size:  min(4vw, 20px);
margin-top: 15px;
}
.top-noteBox{
width: 90%;
margin:0 auto;
}
.top-noteBox ul{
margin-top: 1em;
text-indent: -1em;
padding-left: 1em;
}

/*----------------*/
.topBox{
margin-bottom: 40px;
}
.wrapBox{
margin-bottom: 40px;
}
.wrapBox:last-child{
margin-bottom: 0;
}
.cate-wrap{
border: 1px solid #ccc;
margin: 0 20px;
padding-bottom: 20px;
}
.cate-wrap .area-box{
margin:20px 20px 0 20px;
}
.cate-wrap .area-box.flBox{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.cate-wrap .area-box.flBox .txtBox,
.cate-wrap .area-box.flBox .imgBox{
width: 49%;
}
.stepBox{
width: 100%;
margin-bottom: 20px;
}
.stepBox .step-desgin {
position: relative;
padding: .3em 0.5em .2em 1.5em;
color: #333333;
}
.st .stepBox .step-desgin {
color: var(--color-student);
}
.tt .stepBox .step-desgin {
color:var(--color-teacher);
}
.stepBox .txt{
font-size: 20px;
font-weight: bold;
}
.stepBox .num{
font-size: 25px;
font-weight: 700;
letter-spacing: 0.05em;
padding-left: 3px;
}
.st .stepBox .step-desgin {
border-bottom: 3px solid var(--color-student);
}
.tt .stepBox .step-desgin {
border-bottom: 3px solid var(--color-teacher);
}
.stepBox .step-desgin::before {
position: absolute;
top: 0;
left: .3em;
transform: rotate(55deg);
height: 7px;
width: 12px;
content: '';
}
.stepBox .step-desgin::after {
position: absolute;
transform: rotate(15deg);
top: .6em;
left: 0;
height: 5px;
width: 9px;
content: '';
}
.st .stepBox .step-desgin::before,
.st .stepBox .step-desgin::after {
background: var(--color-student);
}
.tt .stepBox .step-desgin::before,
.tt .stepBox .step-desgin::after {
background: var(--color-teacher);
}

.cate-wrap .area-box.area-border{
padding-bottom: min(1.5vw, 20px);
border-bottom: 1px solid #ccc;
}
.cate-wrap .area-box .txtBox.full,
.cate-wrap .area-box .imgBox.full{
margin-bottom: 2em;
}
.cate-wrap .area-box .imgBox.full-sub{
  width: 80%;
  margin: 2em auto;
}
.cate-wrap .area-box p{
margin-bottom: 1em;
}
.cate-wrap .area-box .note{
font-size: 0.8em;
}
.cate-wrap .area-box .listBox{
  text-indent: -1em;
  padding-left: 1em;
}
.cate-wrap .area-box .icon-img{
  width: 2em;
  margin: 0 0.5em;
}
/*--------見出し--------*/
.head-ttl{
position: relative;
padding: .5em .7em;
color: #ffffff;
font-size: 20px;
font-weight: 700;
}
.head-ttl::before {
position: absolute;
top: 100%;
left: 0;
border-bottom: solid 10px transparent;
border-right: solid 20px var(--color-student02);
content: '';
}
.head-ttl-sub{
  font-size: 0.8em;
}
.st .head-ttl{
background-color:var(--color-student);
}
.st .head-ttl::before {
border-right-color: var(--color-student02);
}
.tt .head-ttl{
background-color:var(--color-teacher);
}
.tt .head-ttl::before {
border-right-color: var(--color-teacher02);
}

/*--------個別--------*/
.tt02-02 .area02 .txtBox01{
width: 43%;
    border-right: 1px solid #ccc;
    padding-right: 2%;
}
.tt02-02 .area02 .txtBox02{
width: 54%;
}

/*-------- support --------*/
.supportArea{
  background-color: #ffffffd4;
  margin-top: 40px;
  padding: 20px 50px;
  border:10px solid #f3eb18
}
.supportArea p{
  margin-bottom: 1em;
}
.supportArea p:last-child{
  margin-bottom: 0;
}





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

.field-item{
background: none;
position: relative;
z-index: 0;
}
.field-item::before{
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100svh; /* スマホのアドレスバー対策 */
background-image:url(/sites/default/files/contents/oeh/images/oeh_bg.png);
background-position:top 19vw right -37vw;
background-size: 100%;
background-repeat: no-repeat;
z-index: -1; /* コンテンツの背面に配置 */
}

.ns_header {
z-index: 1000;
position: relative;
background-color: #fff;
}
.ns_footer{
z-index: 1000;
position: relative;
background-color: #fff;
}
#under{
width: 100%;
padding: 20px 5%;
}
.tabBox .tabArea{
display: block;
height: auto;
}
.tabBox .tabArea .one_tab{
width: 100%;
margin-bottom: 5px;
}
.tabBox .tabArea .tab_inner .cate_ttl01{
height:1.4em;
margin: 0 10px 10px 10px;
padding-bottom: 0;
font-size: min(5vw, 18px);
}
.tabBox .tabArea .box03 .tab_inner .cate_ttl01{
margin-bottom: 2px;
}
.tabBox .tabArea .tab_inner .cate_ttl02{
font-size:min(4vw, 16px);
line-height: 1.2;
font-weight: bold;
}
.tabBox .tabArea .one_tab .tab_inner{
height: 80px;
}
.tabBox .tabArea .one_tab a.select .tab_inner {
height: 110px;
}
.tabBox .tabArea .one_tab a.select .tab_inner {
border: 3px solid #fff;
}
.tabBox .tabArea .one_tab a:hover{
opacity: 1;
}

.tabBox .tabArea .one_tab.stbox .tab_inner:hover {
background-color: var(--color-student);
}
.tabBox .tabArea .one_tab.ttbox .tab_inner:hover {
background-color: var(--color-teacher);
}

/*------------*/

.top-txtBox{
padding: 5vw;
}
.top-txtBox p{
  margin-bottom: 1em;
}
.top-txtBox .listBox{
  margin:1em;
}




}

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

/*------- 共通 ---------*/
#under, h1, h2{font-size:14px;}
.switch_pc{display: none !important;}
.switch_sp{display: block !important;}
.spBox{display:block;}
.navBox .nav_menu{padding: 0;}
.under_wrap {width: 90%; margin: 0 auto;}
.flBox{display: block;}

.topBox{
margin:0 20px 10.6666666666667vw 20px;
}
.top-noteBox{
width: 100%;
}
.head-ttl{
margin-left: -20px;
width: calc(100% - -40px);
font-size: 4vw;
padding-left: 20px;
}
.tab_contents .tab_main{
padding:10.6666666666667vw 0 0 0;
}
.cate-wrap{
margin:0;
border:none;
}
.cate-wrap .area-box.flBox{
display: block;
}
.cate-wrap .area-box.flBox .txtBox,
.cate-wrap .area-box.flBox .imgBox{
width:100%;
margin-bottom: 1em;
}
.cate-wrap .area-box .imgarea{
margin-bottom: 1em;
}

.tt .stepBox .step-desgin{
border-width:2px;
}
.stepBox .step-desgin::before {
height: 4px;
width: 9px;
}
.stepBox .step-desgin::after{
height: 3px;
width: 7px;
}
.stepBox .txt{
font-size:15px;
}
.stepBox .num{
font-size:20px;
}

/*--------個別--------*/
.tt02-02 .area02 .txtBox01{
width: 100%;
border:none;
padding-right: 0;
}
.tt02-02 .area02 .txtBox02{
width: 100%;
}

/*-------- support --------*/
.supportArea{
  padding: 20px;
}

}

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

}