@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700;900&display=swap');

/* ===================================================
 common
=====================================================*/
body{
	margin: 0;
	padding: 0;
	min-width:1100px;/*safari 右側の途切れ解決*/
   _display: inline;/*safari 右側の途切れ解決*/
   _zoom:1;/*safari 右側の途切れ解決*/  
   }
html {
	font-family: 'Noto Sans JP', sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic";
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	font-size: 62.5%;/* 10px */
	color: #333333;
}

/* Fluid-img----------------------------------- */
img {max-width : 100%; border: 0}

/* clearfix----------------------------------- */
.clearfix:after {content: ""; display: block; clear: both; visibility: hidden;}

/* 禁則処理の追加----------------------------------- */
p,li,dt,dd,th,td,pre{
-ms-line-break: strict;
line-break: strict;
-ms-word-break: break-strict;
word-break: break-strict}

a {outline: none; color: #333333; transition: all 0.3s;}
a:link {text-decoration: none; color: #333333;}
a:visited {text-decoration: none; color: #333333;}

/*フォント----------------------------------- */
h1 {font-weight: 700; } 
h2 {font-weight: 700;} 
h3 {font-weight: 500;} 
p{line-height:2; margin-top:1.5em;}

/* ===================================================
for SP
=====================================================*/
body{ min-width:initial; font-size: 1.4rem;} /* 14px */

#wrapper{width:100%;}

.wrap{padding: 0 5%}
section .wrap, 
article .wrap, 
aside .wrap{padding: 15% 5%}

.content_bk, 
#main_img{background-color: #edf3fb; position: relative}

.content_bk::after{
  content: "";
  position: absolute;
  border-top: 30px solid #edf3fb;
  border-right: 30px solid transparent;
  border-bottom: 30px solid transparent;
  border-left: 30px solid transparent;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}
.content_bk::before{
  content: "";
  position: absolute;
  border-top: 30px solid #FFFFFF;
  border-right: 30px solid transparent;
  border-bottom: 30px solid transparent;
  border-left: 30px solid transparent;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}

/*----------------------------------------------------
ボタン
------------------------------------------------------*/
.btn{text-align: center;}
.btn a{
    font-size:1.8rem;
	font-weight: 500;
	padding:1.2em 0.5em;
	border-radius:100px;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	appearance:none;
	-webkit-appearance:none;
	text-align:center;
	position:relative;
	transition: all 0.3s;
	cursor:pointer;
	display:block;
	width:100%;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}
.btn a:hover{text-decoration: none}
.btn.more a{
    font-size:1.6rem;
	padding:1em 0.5em;
	width:80%;
}
.btn.more{margin-top: 30px}
.btn.entry{margin-bottom: 30px;}

.btn.entry a, .btn.more a{background-color:#ff9900; color:#FFF;}
.btn.contact a{background-color:#FFF; color:#ff9900; border: 1px solid #ff9900}

.btn a::before{
   content: '';
    width: 10px;
    height: 10px;
    border: 0px;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    right: 30px;
    margin-top: -6px;
}
.btn.entry a::before, 
.btn.more a::before{border-top: solid 2px #FFF; border-right: solid 2px #FFF;}
.btn.contact a::before{border-top: solid 2px #ff9900; border-right: solid 2px #ff9900;}

body#lectures_workshop .btn.entry a, 
body#lectures_workshop .btn.contact a{font-size: 1.6rem}
body#lectures_workshop .btn.entry a span, 
body#lectures_workshop .btn.contact a span{display: block; font-size: 2rem; margin-top: 0.3em}

/*----------------------------------------------------
header
------------------------------------------------------*/
header{position: fixed; top: 0; left: 0; z-index:1; height:60px; box-sizing:border-box; background-color:#3980ed;}
header, nav{margin : 0 auto; width:100%;}
#header_inner{
	width: 100%;
	text-align: left;
	box-sizing: border-box;
	padding-left: 4%;
	display: table;
}

header #logo{display:table-cell; vertical-align: middle; height:60px;}
header #logo img{width:180px;}

header nav.globalMenuSp{
    display:none;
	font-size:1.8rem;
    position: fixed;
    top: 0;
    left: 0;
    background: #fff;
    color: #000;
    text-align: left;
    width: 100%;
	margin-top:60px;
	height: 100%;
	z-index: 100;
	overflow:auto;
	-webkit-overflow-scrolling:touch;
	box-sizing: border-box;
	padding-bottom: 100px;
}

header nav.globalMenuSp.active{
	display:block;
	/*以下はメニューを開いている間コンテンツがスクロールしないようにする*/
	/*max-height:calc(100vh - 60px - 6em);*//*60pxはヘッダーの高さ*/
	/*height: 100%;
	width: 100%;
	overflow:auto;
	padding-bottom:50px;
	-webkit-overflow-scrolling:touch;
	z-index: 2;*/
}

header nav.globalMenuSp ul{display: block; width:100%;}
header nav.globalMenuSp li{
	display: block;
	width: 100%;
	border-bottom: 1px dotted #CCCCCC;
	padding-left: 0px;
	padding-right: 0px;
	height: auto;
	text-align:center;
}
	
header nav.globalMenuSp li a{border-bottom:none; margin:0px; padding:1.2em 0; display: block}
header nav li a:hover{text-decoration: none}

header nav.globalMenuSp li#entry {padding:1.2em 0px;}
header nav.globalMenuSp li#entry a{
    color:#FFF;
	background-color: #ff9900;
	width: 80%;
	border-radius: 40px;
	border: none;
	box-sizing: border-box;
	display: block;
	margin: auto;
}


/*ハンバーガーメニュー
------------------------------------------------------------------------------*/
.navToggle {
    display: block;
    position: fixed;
    width: 25px;
    height: 25px;
    cursor: pointer;
    z-index: 1001;
    text-align: center;
	top:17.5px;
	right:4%;}


/*三本線*/
.navToggle span {
    display: block;
    position: absolute; /* .navToggleに対して */
    width: 25px;
    border-bottom: solid 2px #FFF;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
}
 
.navToggle span:nth-child(1) {top: 5px;}
.navToggle span:nth-child(2) {top: 12px;}
.navToggle span:nth-child(3) {top: 19px;}

/* 最初のspanをマイナス45度に */
.navToggle.active span:nth-child(1) {
    top: 12px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
 
/* 2番目と3番目のspanを45度に */
.navToggle.active span:nth-child(2),
.navToggle.active span:nth-child(3) {
    top: 12px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}


/*----------------------------------------------------
footer
------------------------------------------------------*/
footer {width:100%; padding:10% 0% 10% 0%; box-sizing:border-box; text-align: center; background-color: #3980ed}
footer .logo.bottom img{width:140px; height:auto;}
footer #copyright{ font-size:1.1rem; margin-top:15px; color: #FFF}

/*----------------------------------------------------
.to-topの設定
----------------------------------------------------*/
.to-top{
position: fixed;
display: flex;
right: 4%;
bottom: 60px;
cursor: pointer;
width: 60px;
height: 60px;
transition: all 0.3s;
z-index: 1;
border: 1px solid #3980ed;
border-radius: 100px;
background-color: #FFF;
box-sizing: border-box;
}
.to-top:hover{opacity: 1;}
.to-top span{
display: block;
width: 58px;
height: 58px;
border-radius: 100px;
background-image: url(../images/pagetop.svg);
background-size: 21px 12px;
background-position: center 48%;
background-repeat: no-repeat;
transition: all 0.3s;
}


/*----------------------------------------------------
TOP
------------------------------------------------------*/
#main_img{
margin-top: 60px;
width: 100%;
height: 550px;
line-height: 1.2;
background-repeat: no-repeat;
background-position: center -20px;
background-image: url(../images/main_sp.jpg);
background-size:cover;
background-color: transparent;
position: relative;
}
#main_img .main_inner{
box-sizing: border-box;
padding: 0 5%;
position: absolute;
bottom: 50px;
background-image: url(../images/main_bk.png);
background-repeat: repeat;
text-align:center;
}
#main_img h1{
font-size: 3.6rem;
color: #0f36ab;
font-weight: 700;
-webkit-text-stroke: 2px #ffffff;
text-stroke: 2px #ffffff;
paint-order: stroke;
line-height: 1;
}
#main_img p.lead{font-size:1.5rem; margin:15px 0 15px 0; line-height:1.6; color: #000; text-align: left; font-weight: 500;
 -webkit-text-stroke: 2px #ffffff;
  text-stroke: 2px #ffffff;
  paint-order: stroke;}
#main_img p.sub_ttle{font-size:2.4rem; font-weight: 700; margin-top: 10px; color: #0f36ab; 
-webkit-text-stroke: 2px #ffffff;
  text-stroke: 2px #ffffff;
  paint-order: stroke;}

#main_img h1, #main_img p{
animation-name: fadeInAnime;
animation-fill-mode: backwards;
animation-duration: 1s;
animation-timing-function: ease;
animation-delay: 0.5s;
animation-direction: normal;
}


/*1で解説*/
@keyframes fadeInAnime{
  0% {opacity: 0;}
  100% {opacity: 1;}
}

/*アニメーションの開始から終了までを指定する*/
@keyframes fadeUpAnime{
  from {opacity: 0; transform: translateY(100px);}
  to {opacity: 1; transform: translateY(0);}
}

#course .box, 
#course_head.box{
background-repeat: no-repeat;
background-position: center top;
background-size: 250px auto;
padding:40px 0 0px 0;
}
#course .box.course1, 
#course_head.box.course1 {background-image: url(../images/book.svg);}

#course .box.course2, 
#course_head.box.course2 {background-image: url(../images/book2.svg);}

#course .box:first-child{margin-bottom:60px}
#course .box h2{font-size: 3.2rem; text-align: center; color: #000000; line-height: 1.4;}
#course .box h2 span{display: block;}
#course .box.course1 h2 span{color: #00807d; font-size: 2.4rem}
#course .box.course2 h2 span{color: #8c0376; letter-spacing: -0.1em; font-size: 2.2rem}
#course .box p {margin-top: 2.5em}
#course .box p span{font-weight: 700; font-size: 115%}
p span.nomal{color: #000000}
p span.orange{color: #ff3300}

#about_a h2, 
#about_b h2, 
.second h3{font-size: 2.2rem; text-align: center; margin-bottom: 1.5em; color: #000; line-height: 1.4; font-weight: 700;}

#about_a h2, 
.second h3.s{font-size: 2rem;}

.second h3.sec{margin-top: 2.5em}

#about_a h2 span, 
#about_b h2 span, 
.second h3 span{border-bottom: 4px solid #3980ed; padding:0 0.2em 0.2em 0.2em;}

#about_a h2 span.line, 
#second h2 span.line, 
.second h3 span.line{letter-spacing:-0.1em }

#about_a h3, 
#about_b h3{font-size: 1.6rem; text-align: center; font-weight: 600; line-height: 1.6}
#about_b h3{margin-top: 1.5em}

.zu{margin-top: 40px; font-size: 1.2rem}
.zu .note{margin-top: 30px; border: 1px dotted #CCC; padding: 0 1.5em 1.5em 1.5em}
.zu .note div{font-weight: 700; margin-top: 1.5em}
.zu .note p{margin-top: 0.3em; line-height: 1.6}
.zu .pc{display: none}

article#about_b .wrap{padding-bottom: 0}
#about_b .ph{margin-top: 1.5em; text-align: center}
#about_b .ph img{width: 50%}

/*----------------------------------------------------
training_course
------------------------------------------------------*/
#h1_area{margin-top: 60px; background-color: #d6e6ff; padding: 5% 0}
#h1_area h1{
color: #3980ed;
font-size: 1.3rem;
font-weight: normal;
border-left: 7px solid #3980ed;
padding-left: 10px;
padding-top: 3px;
padding-bottom: 3px;
line-height: 1.4;
}
#h1_area h1 span.line{display: block; font-size:3rem; font-weight: 700; position: relative}
#h1_area h1 span.b{font-size:4rem; display: inline-block; position: absolute; bottom: -4px}
#h1_area h1 span.space{letter-spacing: -0.1em}
#h1_area p{line-height: 1.8}

.info{margin: 0 auto; text-align: center; margin-bottom: 1.5em; font-size: 2.8rem}
.info span{color: #ff0000; font-weight: 700; background-color: #ffedf4; padding:0 0.5em}

p.center.lead{font-size: 1.6rem; font-weight: 500}

#course_head.box{padding-bottom: 40px}
#course_head.box h2{font-size: 2.2rem; text-align: center; line-height: 1.3;}
#course_head.box h2 span.pre{display: block; font-size: 3.2rem; color: #000000;}
#course_head.box.course1 h2{color: #00807d}
#course_head.box.course2 h2{color: #8c0376; letter-spacing: -0.1em}
#course_head.box.course2 h2 span{letter-spacing: 0;}

#course_head p{margin-top: 2em; font-weight: 500}
#course_head p span.orange{ color: #ff3300; font-weight: 700}

.details{margin-top: 20px}
ul.course_study.sec{margin-top: 0.8em;}
ul.course_study li{
color: #000;
font-size: 1.6rem;
font-weight: 500;
border-radius: 8px;
background-color: #f0f0f0;
padding: 0.8em 0.5em 0.8em 35px;
margin-bottom: 0.8em;
position: relative;
line-height: 1.4;
}
ul.course_study li:last-child{margin-bottom: 0}
ul.course_study li::before{
position: absolute;
content: "";
width: 18px;
height: 18px;
background-repeat: no-repeat;
background-position: center center;
background-size: 18px 18px;
left:10px;
top:16px;
}
ul.course_study.c01 li::before{background-image: url(../images/icon_check.svg);}
ul.course_study.c02 li::before{background-image: url(../images/icon_check2.svg);}

ul.course_study li.none::before{display: none}
ul.course_study li.none{text-align: right; font-size: 1.4rem; font-weight: normal; border: none; background-color: transparent}

#course_details .box h4, 
#voice h4{
background-color: #0f36ab;
color: #FFF;
font-weight: 500;
font-size: 1.6rem;
padding:0.3em 10px;
margin-top: 40px
}
#course_details .box h4.first, #voice h4{margin-top: 0}
#course_details ul.list, 
#course_details p{margin-top: 1em}
ul.list_inline{margin-bottom: 1em}
ul.list li, 
ul.list_inline li span{position: relative; margin-bottom: 0.3em;  padding-left: 18px;line-height:1.6;}
#course_details ul.list li{margin-bottom: 1em;}
span.bold{font-weight: 700}
span.orange{color: #ff3300; font-weight: 700}

ul.list li:last-child, 
ul.list_inline li:last-child{margin-bottom: 0}
ul.list li::before, 
ul.list_inline li span::before{
content: "";
position: absolute;
width: 10px;
height: 10px;
background-color: #3980ed;
border-radius: 50px;
top:7px;
left: 0;
}
#course_details ul.list li::before{background-color: #333333;}

#voice{border: 1px solid #0f36ab; border-radius: 10px; padding: 1em; margin-top: 2em}
#voice .box{margin-top: 1.5em; display: flex; justify-content: space-between;}
#voice .icon{font-size: 1.1rem; text-align: center; width: 18%}
#voice .icon img{vertical-align: bottom; margin-bottom: 0.5em}
#voice .text{background-color: #ffffff; border-radius: 8px; padding: 1em; width: 80%; position: relative;}
#voice .text::before {
  content: "";
  position: absolute;
  top: 22px;
  left: -20px;
  border: 8px solid transparent;
  border-right: 15px solid #ffffff;
}
#voice .ttl{font-weight: 600; font-size: 1.6rem; line-height: 1.6}
#voice p{margin-top: 0.5em}
#voice .btn_voice{text-align: center; padding: 2em 0 1.5em 0; margin: auto}
#voice .btn_voice a{
width: 85%;
display: block;
background-color: #3980ed;
color: #ffffff;
border-radius: 50px;
padding: 1.2em 2em 1.2em 1em;
margin-left: auto;
margin-right: auto;
font-weight: 500;
}
#voice .btn_voice a{position: relative}
#voice .btn_voice a span::before{
   content: '';
    width: 10px;
    height: 10px;
    border: 0px;
    border-top: solid 1px #FFF;
    border-right: solid 1px #FFF;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 40%;
    right: 2em;
}
#voice .btn_voice a:hover{text-decoration: none}

/*----------------------------------------------------
lectures_workshop
------------------------------------------------------*/
body#lectures_workshop article .wrap{padding-bottom: 0}
#theme {
background-repeat: no-repeat;
background-image: url(../images/lec-work_ph01_sp.jpg);
background-position: center bottom;
background-size: contain;
padding-bottom: 75%
}
#theme h4{font-weight: 700; font-size: 2rem; margin-bottom: 0.8em; text-align: center}
#theme ul{margin-bottom: 1.5em; font-size: 1.6rem; font-weight: 500;}
#theme li{position: relative; padding-left: 18px; line-height: 1.6; margin-top: 0.8em;
-webkit-text-stroke: 3px #ffffff;
  text-stroke: 3px #ffffff;
  paint-order: stroke;}
#theme li::before{
position: absolute;
content: "";
background-color: #3980ed;
width: 12px;
height: 12px;
border-radius: 50px;
top:7.5px;
left: 0;
}
.kome{margin-bottom: 2em; text-indent: -1em; margin-left: 1em;}

.archive{line-height: 1.6; margin-bottom: 0.5em; border-bottom: 1px dotted #cccccc;padding-bottom: 0.5em}
.archive .ymd{font-weight: 500}


/*----------------------------------------------------
introduction
------------------------------------------------------*/
body#introduction article .wrap{padding-bottom: 0}
body#introduction h2{color: #0f36ab; font-weight: 700; font-size: 2.4rem; text-align: center; line-height: 1.6}
body#introduction h2 span.line{display: block}
.images{margin-top: 2.5em}

.member{margin-top: 3em;}
.member h4{font-weight: 500; font-size: 1.6rem; text-align: center}
.member .ph{text-align: center; margin-bottom: 1.5em}
.member .ph img{width: 40%}
.member .links{line-height: 1.6; margin-top: 1em; padding:0.5em 0.5em 0.5em 1.8em; border: 1px dotted #CCCCCC;}
.member .links a{text-decoration: underline}
.member .links li{margin: 0.3em 0; list-style-type: disc}

dl.gaiyou {margin-top: 1.5em}
dl.gaiyou dt{
margin:0  0 0.8em 0;
font-weight: 500;
position: relative;
background-color: #f0f0f0;
padding: 0.3em 0.5em 0.3em 1.8em;
}
dl.gaiyou dt::before{
position: absolute;
content: "";
background-color: #3980ed;
width: 12px;
height: 12px;
border-radius: 50px;
top:7px;
left: 0.5em;
}
dl.gaiyou dd{line-height: 1.6}
dl.gaiyou ul{margin-left: 1.3em; margin-bottom: 0.5em}
dl.gaiyou li{list-style-type: decimal; margin-top: 0.5em}


/* ===================================================
768px　for Tablet
=====================================================*/
@media screen and (min-width : 768px) {
body { font-size: 1.6rem; } /* 16px */

section .wrap, 
article .wrap, 
aside .wrap{padding: 10% 5%}
.content_bk::after{
  border-top: 40px solid #edf3fb;
  border-right: 40px solid transparent;
  border-bottom: 40px solid transparent;
  border-left: 40px solid transparent;
}
.content_bk::before{
  border-top: 40px solid #FFFFFF;
  border-right: 40px solid transparent;
  border-bottom: 40px solid transparent;
  border-left: 40px solid transparent;
}

/*----------------------------------------------------
ボタン
------------------------------------------------------*/
.btn a{width:70%;}
.btn.more a{width:100%;}
.btn.more{margin-top: 40px}
.btn a::before{right: 40px;}

body#lectures_workshop .btn.entry a, 
body#lectures_workshop .btn.contact a{font-size: 1.6rem}
body#lectures_workshop .btn.entry a span, 
body#lectures_workshop .btn.contact a span{display: inline-block; font-size: 2rem; margin-top:0; padding-left: 0.3em}

/*----------------------------------------------------
TOP
------------------------------------------------------*/
#main_img .main_inner{padding: 80px 5% 30px 5%}

#main_img{
height: 550px;
background-position: right top;
background-image: url(../images/main.jpg);
background-size:cover;
}
#main_img .main_inner{
position: static;
background-image:none;
padding-top: 200px;
}

#main_img h1{font-size:6.5rem;
-webkit-text-stroke: 3px #ffffff;
text-stroke: 3px #ffffff;
}
#main_img p span{display: block}
#main_img p.lead{font-size:1.8rem; margin:20px 0; text-align: center; font-weight: 500;
-webkit-text-stroke: 3px #ffffff;
text-stroke: 3px #ffffff;
letter-spacing: 0.1em;}
#main_img p.sub_ttle{font-size:5rem;
-webkit-text-stroke: 3px #ffffff;
text-stroke: 3px #ffffff;}

#course .wrap{display: flex; justify-content: space-between;}
#course .box{
background-position: center top;
background-size: 280px auto;
border:none;
padding:0;
width: 45%;
}
#course .box:first-child{margin-bottom: 0}
#course .box h2{font-size: 2.8rem; padding-top: 40px}
#course .box h2 span{ont-size: 4.6rem}

#about_a h2, 
#about_b h2, 
.second h3, 
.second h3.s{font-size: 3rem;}

.zu{margin-top: 50px; font-size: 1.4rem}
.zu .note{margin-top: 40px}
.zu .pc{display: block}
.zu .sp{display: none}

#about_b .col_wrap{margin-top: 4em}
#about_b .col_wrap:after {content: ""; display: block; clear: both; visibility: hidden;}
#about_b .ph{margin-top: 0; text-align: left; float: left; margin-right: 2em; margin-bottom: 2em; width: 28%}
#about_b .ph img{width: 100%}

#about_b h3, 
#about_a h3{line-height: 1.8; font-size: 2.4rem}
#about_b h3{margin-bottom: 1em; text-align: left}


/*----------------------------------------------------
training_course
------------------------------------------------------*/
#h1_area{margin-top: 60px; padding:20px 0; display: table; width: 100%}
#h1_area h1{font-size: 1.8rem;}
#second_profile #h1_area h1{width: 100%}
#h1_area h1 span.line{font-size:3.5rem;}
#h1_area h1 span.b{font-size:4.7rem; bottom:-7px}

.info{font-size: 3.2rem}
p.center.lead{font-size: 1.8rem; text-align: center}

#course_head.box{
background-size: 350px auto;
padding:60px 0 0px 0;
}
#course_head.box{padding-bottom: 70px}
#course_head.box h2{font-size: 3.2rem;}
#course_head.box h2 span.pre{font-size: 4.8rem; }

#course_head.box.course2 h2{font-size: 2.8rem;}
#course_head.box.course2 h2 span.pre{font-size: 4.5rem; }

#course_head p{margin-top: 3em; font-size: 1.8rem}


#course_details .box h4{
font-size: 1.8rem;
padding:0.5em 10px;
margin-top: 0px
}
#course_details .box h4.third{ margin-top: 50px}
#voice h4{font-size: 1.8rem;}

.details{display: flex; justify-content: space-between; margin-bottom: 20px; margin-top: 40px}
ul.course_study.sec{margin-top: 0;}
ul.course_study{width: 48%; }
ul.course_study li{
padding: 0.8em 0.5em 0.8em 45px;
margin-bottom: 0.7em;
box-sizing: border-box;
}
ul.course_study li::before{
width: 20px;
height: 20px;
background-size: 20px 20px;
left:15px;
top:16px;
}

#course_details{display: flex; justify-content: space-between; flex-wrap: wrap;}
#course_details .box{width: 47%;}

#course_details ul.list li{line-height:1.8;}
ul.list li::before{top:9px;}
ul.list_inline li span::before{top: 6px;}
ul.list_inline li{display: inline-block; margin-left: 1em; font-size: 1.4rem}
ul.list_inline li:first-child{margin-left: 0}

#voice{padding: 1.5em;}
#voice .box{margin-top: 2em;}
#voice .icon{font-size: 1.3rem;}
#voice .icon img{margin-bottom: 0.7em}
#voice .text{padding: 1.2em;}
#voice .text::before {
  top: 30px;
  left: -30px;
  border: 13px solid transparent;
  border-right: 25px solid #ffffff;
}
#voice .ttl{font-size: 2rem;}

#voice .btn_voice a{
width: 50%;
padding: 1.3em 2em 1.3em 1em;
}
#voice .btn_voice a span::before{
    top: 42%;
    right: 2.5em;
}

/*----------------------------------------------------
lectures_workshop
------------------------------------------------------*/
#theme {
background-image: url(../images/lec-work_ph01.jpg);
background-position: right top;
background-size: contain;
padding:1.5em 1em 0 0;
}
#theme h4{font-size: 2.4rem; margin-bottom: 1em}
#theme ul{margin-bottom: 1.5em; font-size: 1.8rem;}
#theme li{margin-top: 0.7em}
#theme li::before{top:10px;}

/*----------------------------------------------------
introduction
------------------------------------------------------*/
body#introduction h2{font-size: 3.6rem;}
.images{margin-top: 3.5em}

.member{margin-top: 3em; display: flex; justify-content: space-between}
.member h4{font-size: 2rem; text-align: left}
.member .text{width: 75%}
.member .ph{text-align: left; margin-bottom:0; width: 20%}
.member .ph img{width: 100%}

dl.gaiyou dt::before{top:8px;}

}
/* ===================================================
1025px　for PC
=====================================================*/
@media screen and (min-width : 1025px) {
#wrapper{background-color:#FFFFFF; width:100%; margin : 0 auto;}

a:hover {text-decoration: underline; color: #3980ed;}
a:active {text-decoration: none; color: #3980ed;}

.wrap{max-width:1024px; margin : 0 auto; padding: 0}
section .wrap, 
article .wrap, 
aside .wrap{padding: 8% 0}

body.second article .wrap{padding-top: 5%}
body.second article .content_bk .wrap{padding-top: 8%}
article#course .wrap{padding-top: 6%}

.content_bk::after{
  border-top: 50px solid #edf3fb;
  border-right: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 50px solid transparent;
}
.content_bk::before{
  border-top: 50px solid #FFFFFF;
  border-right: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 50px solid transparent;
}

/*----------------------------------------------------
ボタン
------------------------------------------------------*/
.btn a{font-size:2.4rem; width: 100%; padding: 0.9em 0.5em}
.btn.more a{font-size:1.8rem; padding: 1.2em 0.5em}
.btn.more{margin-top: 40px}
.btn.entry{margin-bottom: 45px;}

.btn.more, .btn.contact, .btn.entry{border-radius: 100px; margin-left: auto; margin-right: auto}
.btn.more a, .btn.contact a, .btn.entry a{background-color: transparent}
.btn.more{width: 60%}
.btn.contact, .btn.entry{width: 50%}

.btn.contact a:hover{color: #FFF}
.btn.contact a:hover::before{border-top: solid 2px #FFF; border-right: solid 2px #FFF;}

body#lectures_workshop .btn.contact a, 
body#lectures_workshop .btn.entry a{font-size: 1.8rem; padding: 1.2em 0.5em}
body#lectures_workshop .btn.contact a span, 
body#lectures_workshop .btn.entry a span{display: inline-block; font-size: 2.4rem;}

/*----------------------------------------------------
header
------------------------------------------------------*/
header{position: inherit; height: 90px; border: none}
#header_inner{
	max-width: 1024px;
	margin : 0 auto;
	padding: 0;
}

header #logo{ width:250px; height:90px;}
header #logo img{width:250px;}

header a img{transition: all 0.3s;}
header a:hover img{ opacity:0.7}

.navToggle {display: none}

header nav.globalMenuSp{
    display:table-cell;
	font-size:1.5rem;
	position: inherit;
	margin-top:0px;
	width: 774px;
	background-color:#3980ed;
	padding-bottom: 0;
}
header nav.globalMenuSp li#entry{font-size:1.4rem;}

header nav.globalMenuSp ul{background-color:transparent; float: right; width: auto;}
header nav.globalMenuSp li{
display: inline-block;
vertical-align: middle;
transition: all 0.3s;
text-align: right;
border: none; 
width: auto;
margin-right: 35px;
}
header nav.globalMenuSp li:last-child{margin-right: 0}

header nav.globalMenuSp li a{
    /*線の基点とするためrelativeを指定*/
  position: relative;
  color: #FFF;
}

header nav.globalMenuSp li a::after {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom: 10px;
    left: 0;
    /*線の形状*/
    width: 100%;
    height: 2px;
    background:#FFF;
    /*アニメーションの指定*/
    transition: all .3s;
    transform: scale(0, 1);/*X方向0、Y方向1*/
    transform-origin: center top;/*上部中央基点*/
}
header nav.globalMenuSp li#entry a::after{display: none}

/*現在地とhoverの設定*/
header nav.globalMenuSp li a:hover::after {
    transform: scale(1, 1);/*X方向にスケール拡大*/
}


header nav.globalMenuSp li#entry, 
.btn.more, 
.btn.entry, 
.btn.contact{
	padding:0;
	text-align: center;
	position: relative;
    overflow: hidden;
    transition: ease .2s;
}
.btn.more, 
.btn.entry{background-color: #ff9900;}
header nav.globalMenuSp li#entry{background-color: #0f36ab;}
.btn.contact{background-color: #FFFFFF;}

header nav.globalMenuSp li#entry:before, 
.btn.more:before, 
.btn.entry:before, 
.btn.contact:before{
  content: '';
    /*絶対配置で位置を指定*/
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
    /*色や形状*/
  width: 100%;
  height: 100%;
    /*アニメーション*/
  transition: transform .3s cubic-bezier(0.8, 0, 0.2, 1) 0s;
  transform: scale(0, 1);
  transform-origin: left top;
}
.btn.more:before, 
.btn.entry:before{background:  #ff6600;/*背景色*/}
header nav.globalMenuSp li#entry:before{background:  #00aeff;/*背景色*/}
.btn.contact:before{background:  #ffcc00;/*背景色*/}

/*hoverした際の形状*/
header nav.globalMenuSp li#entry:hover:before, 
.btn.more:hover:before, 
.btn.entry:hover:before, 
.btn.contact:hover:before{
  transform-origin:right top;
  transform:scale(1, 1);
}
header nav.globalMenuSp li#entry a, 
.btn.more a, 
.btn.entry a, 
.btn.contact a{
  position: relative;
  z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
}
.btn.contact a:hover{border-color: #ffcc00}

header nav.globalMenuSp li#entry a{
	background-color:transparent;
	width: 100%;
	border-radius:0;
	padding: 50px 10px 10px 10px;
	height: 90px;
	box-sizing: border-box;
	line-height: 1.4;
}
header nav.globalMenuSp li#entry:hover{ opacity:1}
header nav.globalMenuSp li#entry a::before{
position: absolute;
content: "";
background-image: url(../images/icon_contact.svg);
background-repeat: no-repeat;
background-size: 40px 26px;
width: 40px;
height: 36px;
background-position: center 5px;
top:10px;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
}


/*----------------------------------------------------
footer
------------------------------------------------------*/
footer {padding-top:60px; padding-bottom:60px;}
footer .logo.bottom{
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}
footer .logo.bottom img{width:180px; height:auto;}
footer .logo.bottom a:hover{ text-decoration:none;}
footer #copyright{margin-top:30px;}
footer #copyright a{ text-decoration:underline}


/*----------------------------------------------------
toPageTopの設定
----------------------------------------------------*/
.to-top{bottom:80px;}
.to-top:hover{background-color: #3399ff;}
.to-top span:hover{background-position: center 35%; background-image: url("../images/pagetop02.svg")}


/*----------------------------------------------------
TOP
------------------------------------------------------*/
#main_img{margin-top: 0px; height: 700px; background-position: left top;}
#main_img .main_inner{
padding: 140px 0 0px 0;
text-align: left;
max-width: 1024px;
margin: auto;
}

#main_img h1{font-size:7.6rem; line-height: 1; letter-spacing: -0.1em;
-webkit-text-stroke: 4px #ffffff;
text-stroke: 4px #ffffff;}
#main_img h1 span{display: block}
#main_img p.lead{font-size:2.1rem; text-align: left; margin-top: 40px; color: #000000; font-weight: normal; 
-webkit-text-stroke: 4px #ffffff;
text-stroke: 4px #ffffff;}
#main_img p.sub_ttle{font-size:5.5rem; font-weight: 500; letter-spacing:0;
-webkit-text-stroke: 4px #ffffff;
text-stroke: 4px #ffffff;}

#course .box{
background-size:350px auto;
width: 46%;
}
#course .box h2{font-size:4.5rem; padding-top: 50px;}
#course .box.course1 h2 span, 
#course .box.course2 h2 span{font-size: 3rem}

#about_a h2, 
#about_b h2, 
.second h3, 
.second h3.s{font-size: 4.8rem; margin-bottom:1.2em}

#about_a h2 span, 
#about_b h2 span, 
.second h3 span{padding-bottom:0;}

#about_b h3, 
#about_a h3{font-size: 2.4rem}

#about_b .col_wrap{margin-top: 5em}

.w920{width: 920px}

/*----------------------------------------------------
training_course
------------------------------------------------------*/
#h1_area{margin-top: 0px; padding: 25px 0; display: table; width: 100%}
#h1_area h1{
font-size: 2.1rem;
border-left: 10px solid #3980ed;
padding-left: 15px;
padding-top: 5px;
}
#h1_area h1 span.line{font-size:5.5rem;}
#h1_area h1 span.b{font-size:6.5rem;}

.info{font-size: 4.8rem}

#course_head.box{padding:55px 0 100px 0;}
#course_head p{text-align: center; font-size: 2rem; }
#course_head p.course1{margin-top: 1.7em}
#course_head p.course2{margin-top: 3em}

p span.line{display: block}
p.center.lead{font-size: 2.4rem;}
p.center.lead2{font-size: 1.8rem; text-align: center}

.details{margin-bottom: 40px}
ul.course_study{width: 47%}
ul.course_study li{font-size: 2rem;}
ul.course_study li{padding: 0.6em 0.5em 0.6em 50px;}
ul.course_study li::before{
width: 20px;
height: 20px;
background-size: 20px 20px;
left:20px;
top:17px;
}
ul.course_study li.none{font-size: 1.8rem; vertical-align: middle}

#course_details .box h4,
#voice h4{font-size: 2rem;}

#course_details .box{width: 46%;}

#course_details ul.list li{line-height: 2}
ul.list li::before{top:9px;}
ul.list_inline{margin-bottom: 0.3em}
ul.list_inline li span::before{top: 8px;}
ul.list_inline li{font-size: 1.6rem}

#voice{padding: 1.8em;}
#voice .icon{font-size: 1.4rem; width: 15%}
#voice .text{padding: 1.5em; width: 85%}
#voice .text::before {
  top: 30px;
  left: -30px;
  border: 13px solid transparent;
  border-right: 25px solid #ffffff;
}
#voice .ttl{font-size: 2rem;}

#voice .btn_voice a{
width: 35%;
padding: 1.3em 2em 1.3em 1em;
}
#voice .btn_voice a span::before{
    top: 42%;
    right: 2.5em;
}
#voice .btn_voice a:hover{background-color: #0f36ab}

.archive{margin-bottom: 1em; border-bottom:none; padding-bottom:0; display: flex;}
.archive .text{}
.archive .ymd{width: 9em}

/*----------------------------------------------------
lectures_workshop
------------------------------------------------------*/
#theme {padding:0 ;}
#theme h4{text-align: left}
#theme ul{margin-bottom: 1.5em; font-size: 1.8rem;}
#theme li{margin-top: 1em}
.kome{margin-top: 2.5em;}

/*----------------------------------------------------
introduction
------------------------------------------------------*/
body#introduction h2{font-size: 4.8rem;}
.images{margin-top: 3.5em}

.member{margin-top: 4.5em;}
.member h4{font-size: 2rem;}
.member .ph{text-align: center; margin-bottom: 1.5em}
.member .links{margin-top: 1.2em; padding:0.5em 0.5em 0.5em 2em;}
.member .links li{margin: 0.5em 0}

dl.gaiyou{font-size: 0}
dl.gaiyou dt, dl.gaiyou dd{
line-height: 1.8;
font-size: 1.6rem;
display: inline-block;
vertical-align: top;
margin: 1em 0 0 0 ;
}
dl.gaiyou dt{
background-color:transparent;
padding:0 0 0 1.3em;
width: 12%;
}
dl.gaiyou dd{width: 85%; font-size: 1.6rem;}
dl.gaiyou dt::before{left:0}


}