@charset "utf-8";
@import url('components.css');

a { text-decoration:none; color:#2d3934; }
a:hover { text-decoration:none; color:#25A1C6; }
img { max-width: 100%; }
body { background: #ffffff; padding:0; width: 100%; overflow: hidden; }
.importance { color: #f00; font-weight: bold;}

header { height: 100px; display: flex; align-items: center; justify-content: space-between; }
header .logo { margin: 0 0 0 25px; }
header nav { display: flex; flex-direction: row-reverse; align-items: center; }
header nav ol { display: flex; }
header nav ol li {  }
header nav ol li a { display: block; width: 120px; line-height: 15px; font-size: 15px; text-align: center; padding: 70px 0 15px; background:#000; color: #fff; position: relative; transition: background .3s; }
header nav ol li.contact a { background: #847E58 ; }
header nav ol li.register a { background: #25C6B4; }
header nav ol li.menu a { background: #727272; }

header nav ol li a::before { position: absolute; top:20px; left: calc(50% - 18px); content: ""; display: block; width: 36px; height: 36px; }
header nav ol li.contact a::before { background: url(/seminar/static/images/ico_contact.svg) no-repeat; background-size: 36px 36px; }
header nav ol li.register a::before { background: url(/seminar/static/images/ico_register.svg) no-repeat; background-size: 36px 36px; }
header nav ol li.menu a::before { background: url(/seminar/static/images/ico_menu.svg) no-repeat; background-size: 36px 36px; }

header nav ol li a:hover { color:#fff; }
header nav ol li.contact a:hover { background: #645E38 ; }
header nav ol li.register a:hover { background: #05a694; }
header nav ol li.menu a:hover { background: #525252; }

header nav ol li.menu { display: none; }

header nav ul { display: flex; }
header nav ul li { margin: 0 2em 0 0; font-weight: bold; }
header nav ul li.active a { color: #25A1C6; }

.kv { display: flex; width: 100%; flex-direction: row-reverse; }
.kv .img { width: calc(100% - 500px); height: 600px; display: flex; }
.kv .img img { width: 100%; object-fit: cover; }
.kv .txt { width: 500px; padding: 50px; height: 600px; background: #25A1C6; display: flex; align-items: center; justify-content: center;}
.kv .txt h1 { color:#fff; font-size: 18px; line-height:1; margin: 0 0 10px; }
.kv .txt h1 em { color:#fff; font-size: 32px; line-height:1; font-weight: bold; margin: 0 5px 0 0; }
.kv .txt p { color:#fff; font-size: 17px; line-height:2; margin: 0 0 20px; font-weight: bold; text-align: justify; }
.kv .txt ul { display: flex; justify-content: space-between; margin:0 0 10px; }
.kv .txt ul li { width: calc((100% - 10px) / 2); }
.kv .txt ul li a { display: block; padding: 10px; text-align: center; color:#fff; line-height: 1; background: #555; transition: background .3s; }
.kv .txt ul li a:hover { background: #777; }
.kv .txt ol { display: flex; justify-content: space-between; }
.kv .txt ol li { width: 100%; }
.kv .txt ol li a { display: block; background: #25C6B4; padding: 20px; text-align: center; color: #fff; transition: background .3s; }
.kv .txt ol li a:hover { background: #25ADC6; }

.info { padding: 50px; }
.info h2 { text-align: center; font-size: 26px; color: #212765; line-height: 1; margin:0 0 50px; }
.info h2 small { font-size: 18px; color: #777; }
.info .inr { max-width: 80%; margin: 0 auto; border-top:1px solid rgba(0,0,0,.1); }
.info .inr p { border-bottom:1px solid rgba(0,0,0,.1); padding: 30px 0; line-height: 1.7; }
.info .inr ul li a { display: block; line-height: 1; padding: 20px; text-align: center; background: rgba(0,0,0,.05); }
.toppage .info .inr p { display: none; }
.toppage .info .inr p:nth-of-type(-n+3) { display: block; }

.topGallery { padding: 50px; background: rgba(0,0,0,.05);}
.topGallery h2 { text-align: center; font-size: 26px; color: #212765; line-height: 1; margin:0 0 50px; }
.topGallery h2 small { font-size: 18px; color: #777; }
.topGallery .inr { max-width: 1230px; margin: 0 auto; }
.topGallery .inr ul { display: flex; flex-wrap: wrap; justify-content: center; }
.topGallery .inr ul li { padding: 15px; }

footer { border-top:3px solid #212765; }
footer ul { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; padding: 20px; }
footer ul li { padding: 0 1em; }
footer small { display: block; text-align: center; font-size: 12px; line-height: 1; margin: 0 0 20px; }

.title { background: url(/seminar/static/images/title_bg.png) center center/cover no-repeat; width: 100%; height: 120px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: rgba(0,0,0,.9); }
.title h1 { font-size: 1.5rem; color: rgba(0,0,0,.9); }
.title h1 small { font-size: .9rem; color: #25A1C6; display: block; text-align: center; line-height: 1; margin: 4px 0 0; }

.h02 { font-size: 1.4rem; color: #25A1C6;}
.h03 { font-size: 1.2rem; color: #212765;}
ul.list { list-style-type: disc; margin: 0 1em 30px; }
ul.list li { list-style-type: disc; margin: 5px 0; }

article.page { padding: 60px 0;}
section.about { padding: 0 20px; max-width: 80%; margin: 0 auto; }
section.about dl { padding: 20px 0; border-bottom: 1px solid rgba(0, 0, 0, .1); display: flex; align-items: center; }
section.about dl:nth-last-of-type(1) { border: none;}
section.about dl dt { width: 10em; font-weight: bold; font-size: 1rem; color: #25A1C6; }
section.about dl dt::before { content: "■";}
section.about dl dd { width: calc(100% - 10em); font-size: 1rem; }

section.access { padding: 0 20px; max-width: 80%; margin: 0 auto; }
section.access dl { padding: 20px 0; border-bottom: 1px solid rgba(0, 0, 0, .1); }
section.access dl:nth-last-of-type(1) { border: none;}
section.access dl dt { font-weight: bold; font-size: 1.1rem; color: #25A1C6; margin: 0 0 5px; }
section.access dl dt::before { content: "■";}
section.access dl dd { font-size: 1rem; }
section.access dl dd p { margin: 0 0 10px;}
section.access dl dd ul li a { width: 150px; display: block; padding: 10px 5px; text-align: center; border: 1px solid rgba(0,0,0,.1); background: rgba(0,0,0,.05); background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%); line-height: 1; border-radius: 2px; }

section.schedule { padding: 0 20px; max-width: 80%; margin: 0 auto; }
section.schedule .tab ul { display: flex; margin: 0 auto 60px; }
section.schedule .tab ul li { width: 100%; }
section.schedule .tab ul li a { display: block; padding: 20px 5px; line-height: 1; text-align: center; font-weight: bold; color: rgba(0, 0, 0, .4); background: #f6f6f6; transition: background .3s; }
section.schedule .tab ul li a:hover,
section.schedule .tab ul li.active a { background:#25A1C6; color: #fff; }
section.schedule .scheDetail h2 { margin: 30px 0; }
section.schedule .scheDetail h3 { margin: 15px 0; }
section.schedule .scheDetail p { margin: 0 0 30px; }
section.schedule .scheDetail a { text-decoration: underline; }
section.schedule .scheDetail .application_btn a { display: block; max-width: 400px; margin: 60px auto; padding: 25px; text-align: center; line-height: 1; font-size: 1.3rem; text-decoration: none; background: #25C6B4; color: #fff; transition: background .3s; border-radius: 3px; box-shadow: 0 3px 6px rgba(0,0,0,.03); }
section.schedule .scheDetail .application_btn a:hover { background: #05a694; }

section.pamphlet { padding: 0 20px; max-width: 80%; margin: 0 auto; transition: .3s; }
section.pamphlet h2 { margin: 30px 0; cursor: pointer; }
section.pamphlet h2:hover { text-decoration: underline; }
section.pamphlet ul { visibility: hidden; opacity: 0; height: 0; overflow: hidden; transition: .3s; }
section.pamphlet.active ul { visibility: visible; opacity: 1; height: auto; }
section.pamphlet ul li { border-top:1px solid rgba(0,0,0,.1); padding: 20px 0;}

section.faq { padding: 0 20px; max-width: 80%; margin: -70px auto 0; }
section.faq h2 { margin: 100px 0 30px; cursor: pointer; }
section.faq dl { border-top:1px solid #eee; border-bottom:1px solid #eee; margin: -1px 0 0; padding: 25px 0;}
section.faq dl dt { font-size: 1.1rem; font-weight: 600; margin: 0 0 5px; padding: 5px 0 5px 40px; position: relative; }
section.faq dl dt:before { position: absolute; left: 0; top:calc(50% - .5em); display: block; width: 30px; text-align: center; line-height: 1; content: "Q"; font-family: Arial, Helvetica, sans-serif; font-size: 30px; font-weight: 500; color:#c6a025; }
section.faq dl dd { position: relative; padding: 5px 0 5px 40px; }
section.faq dl dd:before { position: absolute; left: 0; top:calc(50% - .5em); display: block; width: 30px; text-align: center; line-height: 1; content: "A"; font-family: Arial, Helvetica, sans-serif; font-size: 30px; font-weight: 500; color:#255bc6; }



/* ───────────────────────────────────────────────────────────────────────────
 1200px以下の動作
─────────────────────────────────────────────────────────────────────────── */
@media print, screen and (max-width:1200px){

input[type="search"], input[type="email"], input[type="text"] { font-size: 16px; }
html,
body { font-size: 16px; }

header nav ol li.contact { display: none; }
header nav ol li.menu { display: block; }

.kv { display: block;}
.kv .img { width: 100%; height: auto; }
.kv .txt { width: 100%; height: auto; padding: 25px; }
.kv .txt h1 { font-size: 1rem;}
.kv .txt h1 em { font-size: 1.5rem;}
.kv .txt p { font-size: 1rem; }
.kv .txt ul li { width: calc((100% - 5px) / 2); }
.kv .txt ul li a { font-size: .8rem; padding:10px 2px; }
.info { padding: 50px 25px;}
footer ul { display: flex; justify-content: space-between; margin: 0 0 20px; padding: 0; }
footer ul li { width: 50%; box-shadow: inset -1px -1px 0 rgba(0,0,0,.2); padding: 0; }
footer ul li a { display: block; padding: 10px; }

header { height: 60px; }
header .logo { margin: 0 0 0 10px;}
header .logo img { height: 24px; }
header nav ul { display: block; width: 100%; position: absolute; top:60px; left: 0; background:#727272;overflow: hidden; visibility: hidden; opacity: 0; transition: .3s; }
header nav ul.active { visibility: visible; opacity: 1; }
header nav ul li { display: block; width: 100%; }
header nav ul li a { display: block; padding: 10px; border-bottom:1px solid rgba(255,255,255,.1); color: #fff; font-weight: normal; font-size: 1rem; }
header nav ol li a { width: 60px; height: 60px; font-size: 10px; padding: 40px 0 0; }
header nav ol li a::before { top:5px; }

article.page { padding:20px 0;}
section.about dl {display: block; }
section.about dl dt { width: auto; margin: 0 0 5px; }
section.about dl dd { width: auto; }

section.about,
section.access,
section.schedule,
section.pamphlet,
section.faq {  max-width: 100%; }



}

/* ───────────────────────────────────────────────────────────────────────────
 360px以下の動作
─────────────────────────────────────────────────────────────────────────── */
@media print, screen and (max-width:360px){

}

/* ───────────────────────────────────────────────────────────────────────────
 印刷時動作
─────────────────────────────────────────────────────────────────────────── */
@media print{  }