@charset "UTF-8";
/* =============================================
                    COMMON
============================================= */
body { font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif; font-weight: 500; color: #222; border-top: 6px solid #004f99;}
sup { font-size: 70%; vertical-align: top; position: relative; top: -0.1em;}
*{ box-sizing: border-box;}

footer{ background: #004f99; color: #fff; text-align: center; border-top: 6px solid #fed963;}
/* ==== TOP ===== */
body#top #main .inner{ position: relative;}
body#top #main header{ position: absolute; width: 100%;}
body#top #main header .logo-sansan{ float: left;}
body#top #main header .logo-kbc{ float: left;}
body#top #main header .logo-gdo{ float: right; margin-top: -4px;}
body#top section{ border-top: 6px solid #fed963;}
body#top section .tit-box h2{ font-weight: bold; color: #004f99; text-align: center; letter-spacing: -0.06em;}
body#top section .tit-box p{ font-family: 'Roboto Condensed', sans-serif; font-weight: bold; color: #004f99; text-align: center;}
body#top section .btn a{ background: rgb(0,0,0,0.85); font-weight: bold; color: #fff; text-align: center; text-decoration: none; border: 2px solid #fff; display: block; position: relative;}
body#top section .btn a::before{ content: ''; width: 6px; height: 6px; border: 0px; border-top: solid 2px #fff; border-right: solid 2px #fff; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); position: absolute; top: 50%; right: 20px; margin-top: -4px;}
body#top #about .catch{ font-weight: bold; text-align: center; letter-spacing: -0.1em;}
body#top #about .catch strong{ color: #004f99;}
body#top #about .please-box{ background: rgb(255,255,255,0.85); border: 1px solid #ccc;}
body#top #about .please-box h3{ font-weight: bold; color: #004f99; text-align: center;}
body#top #highlight .text:last-of-type{ margin-bottom: 0;}
body#top #campaign{ background: url(/special/2021/06sansan/asset/img/top/campaign-bg.jpg) left top repeat; border-top: 6px solid #167830;}
body#top #campaign .tit-box h2{ color: #167830;}
body#top #campaign .tit-box p{ color: #167830;}
body#top #campaign .campaign-list li{ border-bottom: 1px dotted #ddd;}
body#top #campaign .campaign-list li a,body#top #campaign .campaign-list li > span{ text-decoration: none; display: block;}
body#top #campaign .campaign-list li a .img,body#top #campaign .campaign-list li > span .img{ position: relative;}
body#top #campaign .campaign-list li a .img img,body#top #campaign .campaign-list li > span .img img{ border: 1px solid #ccc;}
body#top #campaign .campaign-list li a .img .held{ background: #167830; font-weight: bold; color: #fff; position: absolute; top: 0; left: 0; z-index: 10; display: inline-block;}
body#top #campaign .campaign-list li > span .img .end{ background: #fff; font-weight: bold; color: #da0000; position: absolute; top: 1px; left: 1px; z-index: 10; display: inline-block;}
body#top #campaign .campaign-list li > span .img::after{ background: rgba(0,0,0,0.6); content: ""; position: absolute; top: 0; left: 0; z-index: 9; display: block; width: 100%; height: 100%;}
body#top #campaign .campaign-list li a .detail,body#top #campaign .campaign-list li > span .detail{ color: #222;}
body#top #campaign .campaign-list li a .detail h3,body#top #campaign .campaign-list li > span .detail h3{ font-weight: bold; line-height: 1.4;}
body#top #campaign .campaign-list li a .detail .day,body#top #campaign .campaign-list li > span .detail .day{ font-weight: bold;}
body#top #campaign .campaign-list li a .detail .t-link,body#top #campaign .campaign-list li > span .detail .t-link{ text-align: right;}
body#top #campaign .campaign-list li a .detail .t-link span,body#top #campaign .campaign-list li > span .detail .t-link span{ background: url(/special/2021/06sansan/asset/img/common/icon-blank.png) right 1px center no-repeat; font-weight: bold; color: #222; text-decoration: underline; display: inline-block; padding-right: 20px;}
body#top #campaign .campaign-list li:last-of-type{ margin-bottom: 0;}
body#top #campaign .campaign-list li.end .img{ position: relative;}
body#top #campaign .campaign-list li.end .img::after{ background: rgba(0,0,0,0.6); content: ""; position: absolute; top: 0; left: 0; z-index: 9; display: block; width: 100%; height: 100%;}
body#top #campaign .campaign-list li.end .img .held{ background: #fff; font-weight: bold; color: #da0000; position: absolute; top: 1px; left: 1px; z-index: 10; display: inline-block;}
body#top #campaign .bnr-list li img{ border: 1px solid #ccc;}
body#top #campaign .bnr-list li.end{ position: relative;}
body#top #campaign .bnr-list li.end::after{ background: rgba(0,0,0,0.6); content: ""; position: absolute; top: 0; left: 0; z-index: 9; display: block; width: 100%; height: 100%;}
body#top #campaign .bnr-list li.end span{ background: #fff; font-weight: bold; color: #da0000; position: absolute; top: 1px; left: 1px; z-index: 10; display: inline-block;}
body#top #campaign .info-text{ font-weight: bold; text-align: center;}
body#top #campaign .btn a{ background: #167830;}
body#top #sansan{ border-top: 6px solid #004f99;}
body#top #sansan h2{ font-weight: bold; text-align: center; color: #fff;}
body#top #sansan .text{ color: #fff;}
body#top #sansan .t-link{ text-align: right; color: #fff;}
body#top #sansan .t-link a{ background: url(/special/2021/06sansan/asset/img/common/icon-blank.png) right 1px center no-repeat; font-weight: bold; color: #fff; text-decoration: underline; display: inline-block; padding-right: 20px;}
/* ==== course ===== */
body#course #main .inner{ position: relative;}
body#course #main header{ position: absolute; width: 100%;}
body#course #main header .logo-sansan{ float: left;}
body#course #main header .logo-kbc{ float: left;}
body#course #main header .logo-gdo{ float: right; margin-top: -4px;}
body#course #main .detail{ color: #fff;}
body#course #main .detail .tit-box,body#course #main .detail .tit-box h1{ font-weight: bold;}
body#course #main .detail .tit-box .en{ font-family: 'Roboto Condensed', sans-serif;}
body#course #main .detail .tit-box h1{ letter-spacing: -0.06em;}
body#course section{ background: url(/special/discover/sansan/2023/images/course/bg.jpg) left top repeat; border-top: 6px solid #fed963;}
body#course section .tit-box h2{ font-weight: bold; color: #004f99; text-align: center; letter-spacing: -0.06em;}
body#course section .tit-box p{ font-family: 'Roboto Condensed', sans-serif; font-weight: bold; color: #004f99; text-align: center;}
body#course section #tab{ border-bottom: 6px solid #004f99;}
body#course section #tab .tab-list li{ background: rgb(164,210,253); background: linear-gradient(0deg, rgba(164,210,253,1) 0%, rgba(203,230,255,1) 100%); font-weight: bold; color: #004f99; text-align: center; cursor: pointer;}
body#course section #tab .tab-list li span{ font-family: 'Roboto Condensed', sans-serif;}
body#course section #tab .tab-list li.ac{ background: #004f99; color: #fff;}
body#course section #tab .tab-list li:first-of-type{ float: left;}
body#course section #tab .tab-list li:last-of-type{ float: right;}
body#course section #content-area{ background: #fff; border-bottom: 6px solid #004f99;}
body#course section #content-area .content{ display: none;}
body#course section #content-area .content.show{ display: block;}
body#course section #content-area .content .box .stit-box .inner{ position: relative;}
body#course section #content-area .content .box .stit-box .stit{ position: absolute;}
body#course section #content-area .content .box .stit-box .stit .hole{ font-family: 'Roboto Condensed', sans-serif; color: #fff;}
body#course section #content-area .content .box .stit-box .stit .hole span{ display: inline-block;}
body#course section #content-area .content .box .stit-box .stit h3{ font-weight: bold; color: #fff; letter-spacing: -0.06em;}
body#course section #content-area .content .box .stit-box .course-img{ position: absolute;}
body#course section #content-area .content .bottom-btn a{ background: rgb(164,210,253); background: linear-gradient(0deg, rgba(164,210,253,1) 0%, rgba(203,230,255,1) 100%); font-weight: bold; color: #004f99; text-align: center; text-decoration: none; display: block;}
body#course section #content-area .content .bottom-btn a span{ font-family: 'Roboto Condensed', sans-serif;}
body#course section #profile .box{ background: #fff; border: 2px solid #ccc; padding: 1px;}
body#course section #profile .box .in{ border: 1px solid #ccc; position: relative;}
body#course section #profile .box .in .img01{ position: absolute;}
body#course section #profile .box .in h3{ font-weight: bold; position: relative; z-index: 1;}
body#course section #profile .box .in h3 span{ font-family: 'Roboto Condensed', sans-serif; display: inline-block;}
body#course section #profile .box .in p{ position: relative; z-index: 1;}
body#course section #official{border: solid 4px #54c3f1;border-radius: 12px;position: relative;}
body#course section #official .button{padding: 0;}
body#course section #official .button a{font-size: 16px;line-height: 24px;letter-spacing: 1px;text-align: center;color: #FFF;display: block;padding: 15px 0 16px 0;border-radius: 100px;background: #54c3f1;text-decoration: none;}
body#course section #official .button a::after{content: "";display: inline-block;background: url("../../images/snsn_cmn_arw_white.png");background-size: 18px 8px;width: 18px;height: 8px;vertical-align: middle;margin: -4px 0 0 8px;}
/* ==== knowledge ===== */
body#knowledge #main .inner{ position: relative;}
body#knowledge #main header{ position: absolute; width: 100%;}
body#knowledge #main header .logo-sansan{ float: left;}
body#knowledge #main header .logo-kbc{ float: left;}
body#knowledge #main header .logo-gdo{ float: right; margin-top: -4px;}
body#knowledge #main .detail{ color: #fff;}
body#knowledge #main .detail .tit-box,body#knowledge #main .detail .tit-box h1{ font-weight: bold;}
body#knowledge #main .detail .tit-box .en{ font-family: 'Roboto Condensed', sans-serif;}
body#knowledge #main .detail .tit-box h1{ letter-spacing: -0.06em;}
body#knowledge section{ background: url(/special/2021/06sansan/asset/img/knowledge/bg.jpg) left top repeat; border-top: 6px solid #fed963;}
body#knowledge section .tit-box h2{ font-weight: bold; color: #004f99; text-align: center; letter-spacing: -0.06em;}
body#knowledge section .tit-box p{ font-family: 'Roboto Condensed', sans-serif; font-weight: bold; color: #004f99; text-align: center;}
body#knowledge section .read{ font-weight: bold; text-align: center;}
body#knowledge section .ico-list{ display: flex; flex-wrap: wrap;}
body#knowledge section .ico-list li{ text-align: center;}
body#knowledge section .measures-box{ background: rgb(255,255,255,0.85); border: 1px solid #ccc;}
body#knowledge section .measures-box h3{ font-weight: bold; color: #004f99; text-align: center;}
body#knowledge section .measures-box li:last-of-type{ margin-bottom: 0;}
/* ==== movie ===== */
body#movie #main .inner{ position: relative;}
body#movie #main header{ position: absolute; width: 100%;}
body#movie #main header .logo-sansan{ float: left;}
body#movie #main header .logo-kbc{ float: left;}
body#movie #main header .logo-gdo{ float: right; margin-top: -4px;}
body#movie #main .detail{ color: #fff;}
body#movie #main .detail .tit-box,body#movie #main .detail .tit-box h1{ font-weight: bold;}
body#movie #main .detail .tit-box .en{ font-family: 'Roboto Condensed', sans-serif;}
body#movie #main .detail .tit-box h1{ letter-spacing: -0.06em;}
body#movie section{ background: url(/special/2021/06sansan/asset/img/movie/bg.jpg) left top repeat; border-top: 6px solid #fed963;}
body#movie section .tit-box h2{ font-weight: bold; color: #004f99; text-align: center; letter-spacing: -0.06em;}
body#movie section .tit-box p{ font-family: 'Roboto Condensed', sans-serif; font-weight: bold; color: #004f99; text-align: center;}
body#movie section .movie-list li{ background: #fff;}
body#movie section .movie-list li .movie{ position: relative; width: 100%; padding-top: 56.25%;}
body#movie section .movie-list li .movie .video-js{ position: absolute; top: 0; right: 0; width: 100%; height: 100%;}
body#movie section .movie-list li .detail h3{ font-weight: bold; line-height: 1.4;}
body#movie section .movie-list li .cp{ background: #fafafa; text-align: right;}
/* ==== interview ===== */
body#interview #main .inner{ position: relative;}
body#interview #main header{ position: absolute; width: 100%;}
body#interview #main header .logo-sansan{ float: left;}
body#interview #main header .logo-kbc{ float: left;}
body#interview #main header .logo-gdo{ float: right; margin-top: -4px;}
body#interview #main .detail{ color: #fff;}
body#interview #main .detail .tit-box,body#interview #main .detail .tit-box h1{ font-weight: bold;}
body#interview #main .detail .tit-box .en{ font-family: 'Roboto Condensed', sans-serif;}
body#interview #main .detail .tit-box h1{ letter-spacing: -0.06em;}
body#interview #main .cp{ color: #fff; position: absolute;}
body#interview section{ background: url(/special/2021/06sansan/asset/img/interview/bg.jpg) left top repeat; border-top: 6px solid #fed963;}
body#interview section .tit-box h2{ font-weight: bold; color: #004f99; text-align: center; letter-spacing: -0.06em;}
body#interview section .tit-box p{ font-family: 'Roboto Condensed', sans-serif; font-weight: bold; color: #004f99; text-align: center;}
body#interview section .conversation-list li{ background: #fff;}
body#interview section .conversation-list li .detail h3{ font-weight: bold; line-height: 1.4;}
body#interview section .conversation-list li .detail h3 span{ font-size: 70%;}
body#interview section .conversation-list li a{ color: #222; text-decoration: none;}
body#interview section .movie-list li{ background: #fff;}
body#interview section .movie-list li .movie{ position: relative; width: 100%; padding-top: 56.25%;}
body#interview section .movie-list li .movie .video-js{ position: absolute; top: 0; right: 0; width: 100%; height: 100%;}
body#interview section .movie-list li .detail h3{ font-weight: bold; line-height: 1.4;}
body#interview section .movie-list li .cp{ background: #fafafa; text-align: right;}
/* ==== interview-conversation ===== */
body#conversation #main .inner{ position: relative;}
body#conversation #main header{ position: absolute; width: 100%;}
body#conversation #main header .logo-sansan{ float: left;}
body#conversation #main header .logo-kbc{ float: left;}
body#conversation #main header .logo-gdo{ float: right; margin-top: -4px;}
body#conversation section{ background: url(/special/2021/06sansan/asset/img/interview/bg.jpg) left top repeat; border-top: 6px solid #fed963;}
body#conversation section .box h2{ font-weight: bold; text-align: center;}
body#conversation section .box dl dt{ font-weight: bold;}
body#conversation section .box dl dd:last-of-type{ margin-bottom: 0;}
body#conversation section #profile-list li{ background: #fff; border: 2px solid #ccc; padding: 1px;}
body#conversation section #profile-list li .in{ border: 1px solid #ccc; position: relative;}
body#conversation section #profile-list li .in .img{ position: absolute;}
body#conversation section #profile-list li .in h3{ font-weight: bold; position: relative; z-index: 1;}
body#conversation section #profile-list li .in h3 span{ font-family: 'Roboto Condensed', sans-serif; display: inline-block;}
body#conversation section #profile-list li .in p{ position: relative; z-index: 1;}
body#conversation section #pager-list li.back{ float: left;}
body#conversation section #pager-list li.next{ float: right;}
body#conversation section #pager-list li a{ font-weight: bold; color: #004f99; line-height: 1.2; text-decoration: none; display: inline-block;}
body#conversation section #pager-list li.back a{ background: url(/special/2021/06sansan/asset/img/interview/arrow-back.png) left center no-repeat; padding-left: 15px;}
body#conversation section #pager-list li.next a{ background: url(/special/2021/06sansan/asset/img/interview/arrow-next.png) right center no-repeat; padding-right: 15px;}

/* =============================================
                    PC
============================================= */
@media screen and (min-width: 768px){
body{ font-size: 16px;}
a:hover,a:hover img{ opacity: 0.8; transition: .4s;}
.pc{ display: block;}
.sp{ display: none;}
.inner{ width: 1000px; margin: 0 auto;}
#g-nav{ background: rgb(164,210,253); background: linear-gradient(0deg, rgba(164,210,253,1) 0%, rgba(203,230,255,1) 100%); box-shadow: 0px 1px 1px rgba(0,0,0,0.25); width: 100%; position: relative; z-index: 100;}
#g-nav.fixed{ position: fixed; top: 0;}
#g-nav .box{ display: block;}
#g-nav ul{ display: flex; align-items: center;}
#g-nav ul li{ border-right: 1px solid #a0d0ff; width: 142px;}
#g-nav ul li:first-of-type{ border-left: 1px solid #a0d0ff;}
#g-nav ul li:nth-of-type(7){ background: rgb(121,196,141); background: linear-gradient(0deg, rgba(121,196,141,1) 0%, rgba(178,228,191,1) 100%); width: 152px;}
#g-nav ul li a,#g-nav ul li span{ font-size: 16px; font-weight: bold; line-height: 1.2; color: #004f99; text-align: center; text-decoration: none; display: block; padding: 68px 0 20px; position: relative;}
#g-nav ul li:nth-of-type(1) a,#g-nav ul li:nth-of-type(1) span{ background: url(/special/2021/06sansan/asset/img/common/nav-icon01.png) center 10px no-repeat;}
#g-nav ul li:nth-of-type(2) a,#g-nav ul li:nth-of-type(2) span{ background: url(/special/2021/06sansan/asset/img/common/nav-icon02.png) center 10px no-repeat;}
#g-nav ul li:nth-of-type(3) a,#g-nav ul li:nth-of-type(3) span{ background: url(/special/2021/06sansan/asset/img/common/nav-icon03.png) center 10px no-repeat;}
#g-nav ul li:nth-of-type(4) a,#g-nav ul li:nth-of-type(4) span{ background: url(/special/2021/06sansan/asset/img/common/nav-icon04.png) center 10px no-repeat;}
#g-nav ul li:nth-of-type(5) a,#g-nav ul li:nth-of-type(5) span{ background: url(/special/2021/06sansan/asset/img/common/nav-icon05.png) center 10px no-repeat; padding: 78px 0 29px;}
#g-nav ul li:nth-of-type(6) a,#g-nav ul li:nth-of-type(6) span{ background: url(/special/2021/06sansan/asset/img/common/nav-icon06.png) center 10px no-repeat;}
#g-nav ul li:nth-of-type(7) a,#g-nav ul li:nth-of-type(7) span{ background: url(/special/2021/06sansan/asset/img/common/nav-icon07.png) center 10px no-repeat; color: #167830;}
#g-nav ul li span .comingsoon{ background:rgba(4,61,113,0.9); font-family: 'Roboto Condensed', sans-serif; font-size: 22px; line-height: 1.0; color: #fff; position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding-top: 40px;}
#g-nav .results{ background: #fff; border-radius: 30px; text-align: center; padding: 10px; margin: 10px 0;}
#g-nav .results a{ background: url(/special/2021/06sansan/asset/img/common/icon-blank.png) right 1px center no-repeat; font-size: 18px; font-weight: bold; color: #004f99; display: inline-block; padding-right: 25px;}
body#top #g-nav{ position: absolute; top: 706px;}
body#top #g-nav.fixed{ position: fixed; top: 0;}
footer{ padding: 40px;}
footer small{ font-size: 14px;}

/* ==== TOP ===== */
body#top #main{ background: url(/special/2021/06sansan/asset/img/top/main-bg01_pc.jpg?0803),url(/special/2021/06sansan/asset/img/top/main-bg02_pc.jpg); background-repeat: no-repeat,repeat-x; background-position: top center, top left; height: 700px; margin-bottom: 184px;}
body#top #main .inner{ max-width: 1000px; width: 100%; height: 100%;}
body#top #main header{ top: 22px;}
body#top #main header .logo-sansan{ margin-right: 20px;}
body#top #main header .logo-kbc{ margin-top: 4px;}
body#top #main h1{ text-align: center; margin-top: 198px;}
body#top section{ padding-top: 60px;}
body#top section .tit-box{ margin-bottom: 40px;}
body#top section .tit-box h2{ font-size: 38px; padding-top: 115px; margin-bottom: 10px;}
body#top section .btn a{ font-size: 20px; padding: 20px 0;}
body#top #about{ background: url(/special/2021/06sansan/asset/img/top/about-bg_pc.jpg) center bottom no-repeat; background-size: cover; padding-bottom: 300px;}
body#top #about .tit-box h2{ background: url(/special/2021/06sansan/asset/img/top/about-tit-icon.png) center top no-repeat;}
body#top #about .img01{ box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.3); margin-bottom: 40px;}
body#top #about .catch{ font-size: 38px; margin-bottom: 35px;}
body#top #about .text{ text-align: center; line-height: 2.0; margin-bottom: 30px;}
body#top #about .btn{ width: 400px; margin: 0 auto 60px;}
body#top #about .please-box{ padding: 20px;}
body#top #about .please-box h3{ font-size: 14px; margin-bottom: 5px;}
body#top #about .please-box p{ font-size: 12px; line-height: 1.6;}
body#top #highlight{ background: url(/special/2021/06sansan/asset/img/top/highlight-bg_pc.jpg) center bottom no-repeat; background-size: cover; padding-bottom: 100px;}
body#top #highlight .tit-box h2{ background: url(/special/2021/06sansan/asset/img/top/highlight-tit-icon.png) center top no-repeat;}
body#top #highlight .img01{ background: #fff url(/special/2021/06sansan/asset/img/top/highlight-img01_pc.png?0803) center center no-repeat; width: 100%; height: 220px; margin-bottom: 40px;}
body#top #highlight .text{ text-align: center; line-height: 2.0; margin-bottom: 20px;}
body#top #campaign{ padding-bottom: 100px;}
body#top #campaign .tit-box{ background: url(/special/2021/06sansan/asset/img/top/campaign-tit-bg_pc.png) center top no-repeat;}
body#top #campaign .tit-box h2{ background: url(/special/2021/06sansan/asset/img/top/campaign-tit-icon.png) center top no-repeat;}
body#top #campaign .campaign-list{ margin-bottom: 40px;}
body#top #campaign .campaign-list li{ padding-bottom: 30px; margin-bottom: 40px;}
body#top #campaign .campaign-list li a .img,body#top #campaign .campaign-list li > span .img{ width: 220px; float: left;}
body#top #campaign .campaign-list li a .img img,body#top #campaign .campaign-list li > span .img img{ width: 100%;}
body#top #campaign .campaign-list li a .img .held,body#top #campaign .campaign-list li.end .img .held{ font-size: 14px; padding: 10px;}
body#top #campaign .campaign-list li > span .img .end{ font-size: 14px; padding: 10px;}
body#top #campaign .campaign-list li a .detail,body#top #campaign .campaign-list li > span .detail{ float: right; width: 760px;}
body#top #campaign .campaign-list li a .detail h3,body#top #campaign .campaign-list li > span .detail h3{ font-size: 20px; margin-bottom: 10px;}
body#top #campaign .campaign-list li a .detail .day,body#top #campaign .campaign-list li > span .detail .day{ margin-bottom: 10px;}
body#top #campaign .campaign-list li a .detail .text,body#top #campaign .campaign-list li > span .detail .text{ line-height: 2.0; margin-bottom: 5px;}
body#top #campaign .campaign-list li a:hover .detail .t-link span{ text-decoration: none;}
body#top #campaign .bnr-list{ margin: 0 auto 20px;}
body#top #campaign .bnr-list.center{ width: 660px;}
body#top #campaign .bnr-list li{ float: left; width: 320px; margin: 0 20px 20px 0;}
body#top #campaign .bnr-list li:last-of-type{ margin-right: 0;}
body#top #campaign .bnr-list li img{ width: 100%;}
body#top #campaign .bnr-list li.end span{ font-size: 14px; padding: 10px;}
body#top #campaign .info-text{ font-size: 20px; line-height: 1.6; margin-bottom: 30px;}
body#top #campaign .btn{ width: 400px; margin: 0 auto;}
body#top #sansan{ background: url(/special/2021/06sansan/asset/img/top/sansan-bg_pc.jpg) center bottom no-repeat; background-size: cover; padding-bottom: 60px;}
body#top #sansan h2{ font-size: 22px; margin-bottom: 30px;}
body#top #sansan .text{ line-height: 2.0; margin-bottom: 10px;}
body#top #sansan .t-link a:hover{ text-decoration: none;}
/* ==== course ===== */
body#course #g-nav ul li:nth-of-type(4) a{ background: #004f99 url(/special/discover/sansan/2023/images/course/common/nav-icon04.png) center 10px no-repeat; color: #fff;}
body#course #main{ background: url(/special/discover/sansan/2023/images/course/main-bg01_pc.jpg) center top no-repeat; background-size: cover; height: 600px;}
body#course #main .inner{ max-width: 1000px; width: 100%; height: 100%;}
body#course #main header{ top: 22px;}
body#course #main header .logo-sansan{ margin-right: 20px;}
body#course #main header .logo-kbc{ margin-top: -4px;}
body#course #main header .logo-kbc img{ width: 120px;}
body#course #main .detail{ margin-top: 147px;}
body#course #main .detail .tit-box{ background: url(/special/discover/sansan/2023/images/course/main-tit-icon.png) left center no-repeat; padding: 0 0 0 100px; margin-bottom: 40px;}
body#course #main .detail .tit-box .stit{ font-size: 18px; margin-bottom: 10px;}
body#course #main .detail .tit-box h1{ font-size: 38px; margin-bottom: 8px;}
body#course #main .detail .tit-box .en{ font-size: 16px;}
body#course #main .detail .text{ line-height: 2.0;}
body#course section{ padding-top: 60px;}
body#course section .tit-box{ margin-bottom: 40px;}
body#course section .tit-box h2{ font-size: 38px; margin-bottom: 10px;}
body#course section .map{ box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.3); margin-bottom: 80px;}
body#course section #tab .tab-list{ width: 1000px; margin: 0 auto;}
body#course section #tab .tab-list li{ font-size: 30px; border-radius: 10px 10px 0 0; width: 495px; padding: 25px 0;}
body#course section #tab .tab-list li:hover{ opacity: 0.8; transition: .4s;}
body#course section #content-area .content .box .stit-box .inner{ height: 420px;}
body#course section #content-area .content .box .stit-box .stit{ bottom: 30px; left: 0;}
body#course section #content-area .content .box .stit-box .stit .hole{ font-size: 60px; margin-bottom: 15px;}
body#course section #content-area .content .box .stit-box .stit .hole span{ font-size: 30px; margin-left: 10px;}
body#course section #content-area .content .box .stit-box .stit h3{ font-size: 38px; line-height: 1.4;}
body#course section #content-area .content .box .stit-box .course-img{ top: 15px; right: 120px;}
body#course section #content-area #tab01.content .box.no01 .stit-box{ background: url(/special/discover/sansan/2023/images/course/tab01-box01-bg01_pc.jpg) center bottom no-repeat; background-size: cover;}
body#course section #content-area #tab01.content .box.no02 .stit-box{ background: url(/special/discover/sansan/2023/images/course/tab01-box02-bg01_pc.jpg) center bottom no-repeat; background-size: cover;}
body#course section #content-area #tab01.content .box.no03 .stit-box{ background: url(/special/discover/sansan/2023/images/course/tab01-box03-bg01_pc.jpg) center bottom no-repeat; background-size: cover;}
body#course section #content-area #tab02.content .box.no01 .stit-box{ background: url(/special/discover/sansan/2023/images/course/tab02-box01-bg01_pc.jpg) center bottom no-repeat; background-size: cover;}
body#course section #content-area #tab02.content .box.no02 .stit-box{ background: url(/special/discover/sansan/2023/images/course/tab02-box02-bg01_pc.jpg) center bottom no-repeat; background-size: cover;}
body#course section #content-area #tab02.content .box.no03 .stit-box{ background: url(/special/discover/sansan/2023/images/course/tab02-box03-bg01_pc.jpg) center bottom no-repeat; background-size: cover;}
body#course section #content-area .content .box .detail{ padding: 60px 0 80px;}
body#course section #content-area .content .box .detail .text-box .text{ width: 500px;}
body#course section #content-area .content .box .detail .text-box .text p{ line-height: 2.0; margin-bottom: 15px;}
body#course section #content-area .content .box .detail .text-box .text p:last-of-type{ margin-bottom: 0;}
body#course section #content-area .content .box .detail .text-box:first-of-type{ margin-bottom: 40px;}
body#course section #content-area .content .box .detail .text-box:nth-of-type(odd) .img01{ float: right;}
body#course section #content-area .content .box .detail .text-box:nth-of-type(odd) .text{ float: left;}
body#course section #content-area .content .box .detail .text-box:nth-of-type(even) .img01{ float: left;}
body#course section #content-area .content .box .detail .text-box:nth-of-type(even) .text{ float: right;}
body#course section #content-area .content .bottom-btn{ width: 495px; margin: 0 auto;}
body#course section #content-area .content .bottom-btn a{ font-size: 30px; border-radius: 10px 10px 0 0; padding: 25px 0;}
body#course section #profile{ padding: 80px 0;}
body#course section #profile .box .in{ padding: 35px 60px 35px 260px;}
body#course section #profile .box .in .img01{ left: 30px; bottom: 0;}
body#course section #profile .box .in h3{ font-size: 20px; margin-bottom: 15px;}
body#course section #profile .box .in h3 span{ font-size: 16px; margin-left: 15px;}
body#course section #profile .box .in p{ line-height: 2.0;}
body#course section #official{width: 1000px;margin: 0 auto 80px auto;}
body#course section #official p{font-size: 16px;line-height: 28px;padding: 40px 0 40px 40px;}
body#course section #official .button{width: 320px;position: absolute;top:40px;right: 40px;}
/* ==== knowledge ===== */
body#knowledge #g-nav ul li:nth-of-type(3) a{ background: #004f99 url(/special/2021/06sansan/asset/img/common/nav-icon03.png) center 10px no-repeat; color: #fff;}
body#knowledge #main{ background: url(/special/2021/06sansan/asset/img/knowledge/main-bg01_pc.jpg) center top no-repeat; background-size: cover; height: 600px;}
body#knowledge #main .inner{ max-width: 1000px; width: 100%; height: 100%;}
body#knowledge #main header{ top: 22px;}
body#knowledge #main header .logo-sansan{ margin-right: 20px;}
body#knowledge #main header .logo-kbc{ margin-top: 4px;}
body#knowledge #main .detail{ margin-top: 147px;}
body#knowledge #main .detail .tit-box{ background: url(/special/2021/06sansan/asset/img/knowledge/main-tit-icon.png) left center no-repeat; padding: 0 0 0 100px; margin-bottom: 40px;}
body#knowledge #main .detail .tit-box .stit{ font-size: 18px; margin-bottom: 10px;}
body#knowledge #main .detail .tit-box h1{ font-size: 38px; margin-bottom: 8px;}
body#knowledge #main .detail .tit-box .en{ font-size: 16px;}
body#knowledge #main .detail .text{ line-height: 2.0;}
body#knowledge section{ padding: 60px 0 80px;}
body#knowledge section .tit-box{ margin-bottom: 40px;}
body#knowledge section .tit-box h2{ font-size: 38px; margin-bottom: 10px;}
body#knowledge section .read{ font-size: 26px; margin-bottom: 60px;}
body#knowledge section .ico-list{ margin-bottom: 20px;}
body#knowledge section .ico-list li{ margin: 0 66px 40px 0;}
body#knowledge section .ico-list li:nth-of-type(4n){ margin-right: 0;}
body#knowledge section .ico-list li:nth-of-type(5){ margin-left: 134px;}
body#knowledge section .ico-list li .ico{ margin-bottom: 20px;}
body#knowledge section .ico-list li p{ line-height: 1.6;}
body#knowledge section .measures-box{ padding: 20px;}
body#knowledge section .measures-box h3{ font-size: 20px; margin-bottom: 15px;}
body#knowledge section .measures-box li{ line-height: 1.6; text-indent: -14px; margin-left: 14px; margin-bottom: 5px;}
/* ==== movie ===== */
body#movie #g-nav ul li:nth-of-type(6) a{ background: #004f99 url(/special/2021/06sansan/asset/img/common/nav-icon06.png) center 10px no-repeat; color: #fff;}
body#movie #main{ background: url(/special/2021/06sansan/asset/img/movie/main-bg01_pc.jpg) center top no-repeat; background-size: cover; height: 600px;}
body#movie #main .inner{ max-width: 1000px; width: 100%; height: 100%;}
body#movie #main header{ top: 22px;}
body#movie #main header .logo-sansan{ margin-right: 20px;}
body#movie #main header .logo-kbc{ margin-top: 4px;}
body#movie #main .detail{ margin-top: 205px;}
body#movie #main .detail .tit-box{ background: url(/special/2021/06sansan/asset/img/movie/main-tit-icon.png) left center no-repeat; padding: 0 0 0 100px; margin-bottom: 40px;}
body#movie #main .detail .tit-box .stit{ font-size: 18px; margin-bottom: 10px;}
body#movie #main .detail .tit-box h1{ font-size: 38px; margin-bottom: 8px;}
body#movie #main .detail .tit-box .en{ font-size: 16px;}
body#movie #main .detail .text{ line-height: 2.0;}
body#movie section{ padding: 60px 0 40px;}
body#movie section .tit-box{ margin-bottom: 40px;}
body#movie section .tit-box h2{ font-size: 38px; margin-bottom: 10px;}
body#movie section .movie-list li{ float: left; width: 480px; box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.3); margin-bottom: 40px;}
body#movie section .movie-list li:nth-of-type(even){ float: right;}
body#movie section .movie-list li .detail{ padding: 20px;}
body#movie section .movie-list li .detail h3{ font-size: 20px; margin-bottom: 5px;}
body#movie section .movie-list li .detail p{ line-height: 2.0;}
body#movie section .movie-list li .cp{ font-size: 12px; padding: 20px;}
/* ==== interview ===== */
body#interview #g-nav ul li:nth-of-type(5) a{ background: #004f99 url(/special/2021/06sansan/asset/img/common/nav-icon05.png) center 10px no-repeat; color: #fff;}
body#interview #main{ background: url(/special/2021/06sansan/asset/img/interview/main-bg01_pc.jpg) center top no-repeat; background-size: cover; height: 600px;}
body#interview #main .inner{ max-width: 1000px; width: 100%; height: 100%;}
body#interview #main header{ top: 22px;}
body#interview #main header .logo-sansan{ margin-right: 20px;}
body#interview #main header .logo-kbc{ margin-top: 4px;}
body#interview #main .detail{ margin-top: 205px;}
body#interview #main .detail .tit-box{ background: url(/special/2021/06sansan/asset/img/interview/main-tit-icon.png) left center no-repeat; padding: 0 0 0 100px; margin-bottom: 40px;}
body#interview #main .detail .tit-box .stit{ font-size: 18px; margin-bottom: 10px;}
body#interview #main .detail .tit-box h1{ font-size: 38px; margin-bottom: 8px;}
body#interview #main .detail .tit-box .en{ font-size: 16px;}
body#interview #main .detail .text{ line-height: 2.0;}
body#interview #main .cp{ font-size: 12px; right: 0; bottom: 20px;}
body#interview section{ padding: 60px 0 40px;}
body#interview section .tit-box{ margin-bottom: 40px;}
body#interview section .tit-box h2{ font-size: 38px; margin-bottom: 10px;}
body#interview section .conversation-list{ margin-bottom: 40px;}
body#interview section .conversation-list li{ float: left; width: 480px; box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.3); margin-bottom: 40px;}
body#interview section .conversation-list li:nth-of-type(even){ float: right;}
body#interview section .conversation-list li .detail{ padding: 20px;}
body#interview section .conversation-list li .detail h3{ font-size: 20px; margin-bottom: 5px;}
body#interview section .conversation-list li .detail p{ line-height: 2.0;}
body#interview section .movie-list li{ float: left; width: 480px; box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.3); margin-bottom: 40px;}
body#interview section .movie-list li:nth-of-type(even){ float: right;}
body#interview section .movie-list li .detail{ padding: 20px;}
body#interview section .movie-list li .detail h3{ font-size: 20px; margin-bottom: 5px;}
body#interview section .movie-list li .detail p{ line-height: 2.0;}
body#interview section .movie-list li .cp{ font-size: 12px; padding: 20px;}
/* ==== interview-conversation ===== */
body#conversation #g-nav ul li:nth-of-type(5) a{ background: #004f99 url(/special/2021/06sansan/asset/img/common/nav-icon05.png) center 10px no-repeat; color: #fff;}
body#conversation.first #main{ background: url(/special/2021/06sansan/asset/img/interview/first/main-bg01_pc.jpg) center top no-repeat; background-size: cover; height: 600px;}
body#conversation #main .inner{ max-width: 1000px; width: 100%; height: 100%;}
body#conversation #main header{ top: 22px;}
body#conversation #main header .logo-sansan{ margin-right: 20px;}
body#conversation #main header .logo-kbc{ margin-top: 4px;}
body#conversation #main h1{ text-align: center; margin-top: 175px;}
body#conversation section{ padding: 60px 0 80px;}
body#conversation section .read{ font-size: 16px; line-height: 2.0; margin-bottom: 50px;}
body#conversation section .box{ margin-bottom: 20px;}
body#conversation section .box:last-of-type{ margin-bottom: 40px;}
body#conversation section .box h2{ font-size: 26px; margin-bottom: 40px;}
body#conversation section .box .img{ margin-bottom: 40px;}
body#conversation section .box dl{ margin-bottom: 40px;}
body#conversation section .box dl dt{ font-size: 16px; line-height: 2.0; margin-bottom: 30px;}
body#conversation section .box dl dd{ font-size: 16px; line-height: 2.0; margin-bottom: 30px;}
body#conversation section #profile-list li:first-of-type{ margin-bottom: 40px;}
body#conversation section #profile-list li .in{ padding: 35px 60px 35px 260px;}
body#conversation section #profile-list li:last-of-type .in{ padding: 51px 60px 51px 260px;}
body#conversation section #profile-list li .in .img{ left: 30px; bottom: 0;}
body#conversation section #profile-list li .in h3{ font-size: 20px; margin-bottom: 15px;}
body#conversation section #profile-list li .in h3 span{ font-size: 16px; margin-left: 15px;}
body#conversation section #profile-list li .in p{ line-height: 2.0;}
body#conversation section #pager-list{ margin-top: 40px;}
}

/* =============================================
                    SP
============================================= */
@media screen and (max-width: 767px){
body{ font-size: 14px;}
img{ width: 100%;}
.pc{ display: none;}
.sp{ display: block;}
#g-nav{ box-shadow: 0px 0 8px rgba(0,0,0,0.25); width: 100%; position: fixed; bottom: 0; z-index: 100;}
#g-nav .box{ display: none;}
#g-nav ul{ border-top: 6px solid #004f99;}
#g-nav ul li{ border-bottom: 1px solid #a0d0ff;}
#g-nav ul li a,#g-nav ul li span{ font-size: 20px; font-weight: bold; line-height: 1.2; color: #004f99; text-decoration: none; display: block; padding: 15px 20px 15px 55px; position: relative;}
#g-nav ul li:nth-of-type(1) a,#g-nav ul li:nth-of-type(1) span{ background: #fff url(/special/2021/06sansan/asset/img/common/nav-icon01.png) 20px center no-repeat; background-size: 25px;}
#g-nav ul li:nth-of-type(2) a,#g-nav ul li:nth-of-type(2) span{ background: #fff url(/special/2021/06sansan/asset/img/common/nav-icon02.png) 20px center no-repeat; background-size: 25px;}
#g-nav ul li:nth-of-type(3) a,#g-nav ul li:nth-of-type(3) span{ background: #fff url(/special/2021/06sansan/asset/img/common/nav-icon03.png) 20px center no-repeat; background-size: 25px;}
#g-nav ul li:nth-of-type(4) a,#g-nav ul li:nth-of-type(4) span{ background: #fff url(/special/2021/06sansan/asset/img/common/nav-icon04.png) 20px center no-repeat; background-size: 25px;}
#g-nav ul li:nth-of-type(5) a,#g-nav ul li:nth-of-type(5) span{ background: #fff url(/special/2021/06sansan/asset/img/common/nav-icon05.png) 20px center no-repeat; background-size: 25px;}
#g-nav ul li:nth-of-type(6) a,#g-nav ul li:nth-of-type(6) span{ background: #fff url(/special/2021/06sansan/asset/img/common/nav-icon06.png) 20px center no-repeat; background-size: 25px;}
#g-nav ul li:nth-of-type(7) a,#g-nav ul li:nth-of-type(7) span{ background: #fff url(/special/2021/06sansan/asset/img/common/nav-icon07.png) 20px center no-repeat; background-size: 25px; color: #167830;}
#g-nav ul li a::before,#g-nav ul li span::before{ content: ''; width: 6px; height: 6px; border: 0px; border-top: solid 2px #004f99; border-right: solid 2px #004f99; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); position: absolute; top: 50%; right: 20px; margin-top: -4px;}
#g-nav ul li:nth-of-type(7) a::before,#g-nav ul li:nth-of-type(7) span::before{ border-top: solid 2px #167830; border-right: solid 2px #167830;}
#g-nav ul li span .comingsoon{ background:rgba(4,61,113,0.9); font-family: 'Roboto Condensed', sans-serif; font-size: 22px; line-height: 2.5; color: #fff; text-align: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
#g-nav #menu{ background: rgb(164,210,253); background: linear-gradient(0deg, rgba(164,210,253,1) 0%, rgba(203,230,255,1) 100%); text-align: center; padding: 10px; cursor: pointer;}
#g-nav #menu{ padding-bottom: calc(10px + env(safe-area-inset-bottom)); padding-top: calc(10px + env(safe-area-inset-top)); padding-left: calc(10px + env(safe-area-inset-left)); padding-right: calc(10px + env(safe-area-inset-right));}
#g-nav #menu .btn-trigger{ position: relative; width: 25px; height: 25px;}
#g-nav #menu .btn-trigger span{ position: absolute; left: 0; width: 100%; height: 3px; background-color: #004f99;}
#g-nav #menu .btn-trigger, .btn-trigger span{ display: inline-block; transition: all .5s; box-sizing: border-box;}
#g-nav #menu .btn-trigger span:nth-of-type(1){ top: 0;}
#g-nav #menu .btn-trigger span:nth-of-type(2){ top: 11px;}
#g-nav #menu .btn-trigger span:nth-of-type(3){ bottom: 0;}
#g-nav #menu .btn-trigger span:nth-of-type(1) { -webkit-animation: btn07-bar01 .75s forwards; animation: btn07-bar01 .75s forwards;}
@-webkit-keyframes btn07-bar01 {
    0%{ -webkit-transform: translateY(20px) rotate(45deg);}
    50%{ -webkit-transform: translateY(20px) rotate(0);}
    100%{ -webkit-transform: translateY(0) rotate(0);}
}
@keyframes btn07-bar01 {
    0%{ transform: translateY(20px) rotate(45deg);}
    50%{ transform: translateY(20px) rotate(0);}
    100%{ transform: translateY(0) rotate(0);}
}
#g-nav #menu .btn-trigger span:nth-of-type(2){ transition: all .25s .25s; opacity: 1;}
#g-nav #menu .btn-trigger span:nth-of-type(3){ -webkit-animation: btn07-bar03 .75s forwards; animation: btn07-bar03 .75s forwards;}
@-webkit-keyframes btn07-bar03 {
    0%{ -webkit-transform: translateY(-20px) rotate(-45deg);}
    50%{-webkit-transform: translateY(-20px) rotate(0);}
    100%{-webkit-transform: translateY(0) rotate(0);}
}
@keyframes btn07-bar03 {
    0%{ transform: translateY(-20px) rotate(-45deg);}
    50%{ transform: translateY(-20px) rotate(0);}
    100%{ transform: translateY(0) rotate(0);}
}
#g-nav #menu .btn-trigger.active span:nth-of-type(1){ -webkit-animation: active-btn07-bar01 .75s forwards; animation: active-btn07-bar01 .75s forwards; top: -9px;}
@-webkit-keyframes active-btn07-bar01 {
    0%{ -webkit-transform: translateY(0) rotate(0);}
    50%{ -webkit-transform: translateY(20px) rotate(0);}
    100%{ -webkit-transform: translateY(20px) rotate(45deg);}
}
@keyframes active-btn07-bar01 {
    0%{ transform: translateY(0) rotate(0);}
    50%{ transform: translateY(20px) rotate(0);}
    100%{ transform: translateY(20px) rotate(45deg);}
}
#g-nav #menu .btn-trigger.active span:nth-of-type(2){ opacity: 0;}
#g-nav #menu .btn-trigger.active span:nth-of-type(3){ -webkit-animation: active-btn07-bar03 .75s forwards; animation: active-btn07-bar03 .75s forwards; bottom: -9px;}
@-webkit-keyframes active-btn07-bar03 {
    0%{ -webkit-transform: translateY(0) rotate(0);}
    50%{ -webkit-transform: translateY(-20px) rotate(0);}
    100%{ -webkit-transform: translateY(-20px) rotate(-45deg);}
}
@keyframes active-btn07-bar03 {
    0%{ transform: translateY(0) rotate(0);}
    50%{ transform: translateY(-20px) rotate(0);}
    100%{ transform: translateY(-20px) rotate(-45deg);}
}
#g-nav .results a{ background: #fff url(/special/2021/06sansan/asset/img/common/icon-blank.png) right 20px center no-repeat; font-size: 18px; font-weight: bold; line-height: 1.4; color: #004f99; text-decoration: none; display: block; padding: 15px 20px 15px 20px;}
footer{ padding: 20px 0 70px;}
footer small{ font-size: 12px;}

/* ==== TOP ===== */
body#top #main header{ top: 12px;}
body#top #main header .logo-sansan{ width: 64px; margin-right: 15px;}
body#top #main header .logo-kbc{ width: 99px; margin-top: 4px;}
body#top #main header .logo-gdo{ width: 70px;}
body#top section{ padding-top: 30px;}
body#top section .inner{ padding: 0 20px;}
body#top section .tit-box{ margin-bottom: 20px;}
body#top section .tit-box h2{ font-size: 22px; padding-top: 60px; margin-bottom: 6px;}
body#top section .btn a{ font-size: 18px; padding: 20px 0;}
body#top #about{ background: url(/special/2021/06sansan/asset/img/top/about-bg_sp.jpg) center bottom no-repeat; background-size: 100%; padding-bottom: 150px;}
body#top #about .tit-box h2{ background: url(/special/2021/06sansan/asset/img/top/about-tit-icon.png) center top no-repeat; background-size: 50px;}
body#top #about .img01{ box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.3); margin-bottom: 20px;}
body#top #about .catch{ font-size: 22px; line-height: 1.4; margin-bottom: 15px;}
body#top #about .text{ line-height: 1.8; margin-bottom: 25px;}
body#top #about .btn{ margin-bottom: 30px;}
body#top #about .please-box{ padding: 15px;}
body#top #about .please-box h3{ font-size: 14px; margin-bottom: 5px;}
body#top #about .please-box p{ font-size: 12px; line-height: 1.6;}
body#top #highlight{ background: #d0e8ff url(/special/2021/06sansan/asset/img/top/highlight-bg_sp.jpg) center bottom no-repeat; background-size: 100%; padding-bottom: 50px;}
body#top #highlight .tit-box h2{ background: url(/special/2021/06sansan/asset/img/top/highlight-tit-icon.png) center top no-repeat; background-size: 50px;}
body#top #highlight .img01{ margin-bottom: 20px;}
body#top #highlight .text{ line-height: 1.8; margin-bottom: 15px;}
body#top #campaign{ padding-bottom: 50px;}
body#top #campaign .tit-box{ background: url(/special/2021/06sansan/asset/img/top/campaign-tit-bg_sp.png) center top no-repeat; background-size: 100%;}
body#top #campaign .tit-box h2{ background: url(/special/2021/06sansan/asset/img/top/campaign-tit-icon.png) center top no-repeat; background-size: 50px;}
body#top #campaign .campaign-list{ margin-bottom: 25px;}
body#top #campaign .campaign-list li{ padding-bottom: 20px; margin-bottom: 25px;}
body#top #campaign .campaign-list li a .img,body#top #campaign .campaign-list li > span .img{ margin-bottom: 10px;}
body#top #campaign .campaign-list li a .img .held,body#top #campaign .campaign-list li.end .img .held{ font-size: 12px; padding: 10px;}
body#top #campaign .campaign-list li > span .img .end{ font-size: 12px; padding: 10px;}
body#top #campaign .campaign-list li a .detail h3,body#top #campaign .campaign-list li > span .detail h3{ font-size: 18px; margin-bottom: 15px;}
body#top #campaign .campaign-list li a .detail .day,body#top #campaign .campaign-list li > span .detail .day{ margin-bottom: 10px;}
body#top #campaign .campaign-list li a .detail .text,body#top #campaign .campaign-list li > span .detail .text{ line-height: 1.8; margin-bottom: 5px;}
body#top #campaign .bnr-list{ margin-bottom: 15px;}
body#top #campaign .bnr-list li{ margin-bottom: 15px;}
body#top #campaign .bnr-list li.end span{ font-size: 12px; padding: 10px;}
body#top #campaign .info-text{ font-size: 18px; line-height: 1.6; margin-bottom: 15px;}
body#top #sansan{ background: url(/special/2021/06sansan/asset/img/top/sansan-bg_sp.jpg) center center no-repeat; background-size: cover; padding-bottom: 30px;}
body#top #sansan h2{ font-size: 20px; line-height: 1.4; margin-bottom: 15px;}
body#top #sansan .text{ line-height: 1.8; margin-bottom: 10px;}
body#top .results-box{ background: rgb(164,210,253); background: linear-gradient(0deg, rgba(164,210,253,1) 0%, rgba(203,230,255,1) 100%); text-align: center; padding: 10px;}
body#top .results-box a{ background: #fff url(/special/2021/06sansan/asset/img/common/icon-blank.png) right 20px center no-repeat; font-size: 16px; color: #004f99; font-weight: bold; line-height: 1.4; display: block; border-radius: 10px; padding: 10px;}
/* ==== course ===== */
body#course #g-nav ul li:nth-of-type(4) a{ background: #004f99 url(/special/2021/06sansan/asset/img/common/nav-icon04.png) 20px center no-repeat; background-size: 25px; color: #fff;}
body#course #g-nav ul li:nth-of-type(4) a::before{ border-top: solid 2px #fff; border-right: solid 2px #fff;}
body#course #main{ background: url(/special/discover/sansan/2023/images/course/main-bg01_sp.jpg) center top no-repeat; background-size: cover;}
body#course #main .inner{ height: 610px; position: relative;}
body#course #main header{ top: 12px;}
body#course #main header .logo-sansan{ width: 64px; margin-right: 15px;}
body#course #main header .logo-kbc{ width: 99px; margin-top: -4px;}
body#course #main header .logo-kbc img{ width: 100px;}
body#course #main header .logo-gdo{ width: 70px;}
body#course #main .detail{ position: absolute; bottom: 30px; padding: 0 20px;}
body#course #main .detail .tit-box{ background: url(/special/discover/sansan/2023/images/course/main-tit-icon.png) left top no-repeat; background-size: 65px; padding: 75px 0 0 0; margin-bottom: 20px;}
body#course #main .detail .tit-box .stit{ font-size: 14px; margin-bottom: 8px;}
body#course #main .detail .tit-box h1{ font-size: 30px; margin-bottom: 8px;}
body#course #main .detail .tit-box .en{ font-size: 13px;}
body#course #main .detail .text{ line-height: 1.8;}
body#course section{ padding-top: 30px;}
body#course section .inner{ padding: 0 20px;}
body#course section .tit-box{ margin-bottom: 20px;}
body#course section .tit-box h2{ font-size: 22px; margin-bottom: 6px;}
body#course section .map{ box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.3); margin-bottom: 40px;}
body#course section #tab .tab-list{ padding: 0 20px;}
body#course section #tab .tab-list li{ font-size: 18px; border-radius: 6px 6px 0 0; width: 49%; padding: 15px 0;}
body#course section #content-area .content .box .stit-box .inner{ height: 280px;}
body#course section #content-area .content .box .stit-box .stit{ bottom: 20px; left: 20px;}
body#course section #content-area .content .box .stit-box .stit .hole{ font-size: 30px; margin-bottom: 5px;}
body#course section #content-area .content .box .stit-box .stit .hole span{ font-size: 15px; margin-left: 10px;}
body#course section #content-area .content .box .stit-box .stit h3{ font-size: 20px; line-height: 1.4;}
body#course section #content-area .content .box .stit-box .course-img{ top: 10px; right: 30px;}
body#course section #content-area .content .box .stit-box .course-img img{ height: 260px; width: auto;}
body#course section #content-area #tab01.content .box.no01 .stit-box{ background: url(/special/discover/sansan/2023/images/course/tab01-box01-bg01_sp.jpg) center bottom no-repeat; background-size: cover;}
body#course section #content-area #tab01.content .box.no02 .stit-box{ background: url(/special/discover/sansan/2023/images/course/tab01-box02-bg01_sp.jpg) center bottom no-repeat; background-size: cover;}
body#course section #content-area #tab01.content .box.no03 .stit-box{ background: url(/special/discover/sansan/2023/images/course/tab01-box03-bg01_sp.jpg) center bottom no-repeat; background-size: cover;}
body#course section #content-area #tab02.content .box.no01 .stit-box{ background: url(/special/discover/sansan/2023/images/course/tab02-box01-bg01_sp.jpg) center bottom no-repeat; background-size: cover;}
body#course section #content-area #tab02.content .box.no02 .stit-box{ background: url(/special/discover/sansan/2023/images/course/tab02-box02-bg01_sp.jpg) center bottom no-repeat; background-size: cover;}
body#course section #content-area #tab02.content .box.no03 .stit-box{ background: url(/special/discover/sansan/2023/images/course/tab02-box03-bg01_sp.jpg) center bottom no-repeat; background-size: cover;}
body#course section #content-area .content .box .detail{ padding: 30px 0 40px;}
body#course section #content-area .content .box .detail .text-box .img01{ margin-bottom: 20px;}
body#course section #content-area .content .box .detail .text-box .text p{ line-height: 1.8; margin-bottom: 15px;}
body#course section #content-area .content .box .detail .text-box:last-of-type .text p:last-of-type{ margin-bottom: 0;}
body#course section #content-area .content .bottom-btn{ padding: 0 20px;}
body#course section #content-area .content .bottom-btn a{ font-size: 18px; border-radius: 6px 6px 0 0; padding: 15px 0;}
body#course section #profile{ padding: 40px 0;}
body#course section #profile .box .in{ padding: 20px;}
body#course section #profile .box .in .img01{ left: 0; top: -40px; width: 110px;}
body#course section #profile .box .in h3{ font-size: 18px; text-align: right; margin-bottom: 15px;}
body#course section #profile .box .in h3 span{ font-size: 14px; margin-left: 10px;}
body#course section #profile .box .in p{ line-height: 1.8;}
body#course section #official{margin: 0 20px 40px 20px;}
body#course section #official p{font-size: 15px;line-height: 24px;padding: 20px 20px 0 20px;}
body#course section #official .button{padding: 15px 20px 20px 20px;}
/* ==== knowledge ===== */
body#knowledge #g-nav ul li:nth-of-type(3) a{ background: #004f99 url(/special/2021/06sansan/asset/img/common/nav-icon03.png) 20px center no-repeat; background-size: 25px; color: #fff;}
body#knowledge #g-nav ul li:nth-of-type(3) a::before{ border-top: solid 2px #fff; border-right: solid 2px #fff;}
body#knowledge #main{ background: url(/special/2021/06sansan/asset/img/knowledge/main-bg01_sp.jpg) center top no-repeat; background-size: cover;}
body#knowledge #main .inner{ height: 610px; position: relative;}
body#knowledge #main header{ top: 12px;}
body#knowledge #main header .logo-sansan{ width: 64px; margin-right: 15px;}
body#knowledge #main header .logo-kbc{ width: 99px; margin-top: 4px;}
body#knowledge #main header .logo-gdo{ width: 70px;}
body#knowledge #main .detail{ position: absolute; bottom: 30px; padding: 0 20px;}
body#knowledge #main .detail .tit-box{ background: url(/special/2021/06sansan/asset/img/knowledge/main-tit-icon.png) left top no-repeat; background-size: 65px; padding: 75px 0 0 0; margin-bottom: 20px;}
body#knowledge #main .detail .tit-box .stit{ font-size: 14px; margin-bottom: 8px;}
body#knowledge #main .detail .tit-box h1{ font-size: 30px; margin-bottom: 8px;}
body#knowledge #main .detail .tit-box .en{ font-size: 13px;}
body#knowledge #main .detail .text{ line-height: 1.8;}
body#knowledge section{ padding: 30px 0;}
body#knowledge section .inner{ padding: 0 20px;}
body#knowledge section .tit-box{ margin-bottom: 20px;}
body#knowledge section .tit-box h2{ font-size: 22px; margin-bottom: 6px;}
body#knowledge section .read{ font-size: 18px; margin-bottom: 30px;}
body#knowledge section .ico-list{ margin-bottom: 20px;}
body#knowledge section .ico-list li{ width: 46%; margin: 0 8% 20px 0;}
body#knowledge section .ico-list li:nth-of-type(2n){ margin-right: 0;}
body#knowledge section .ico-list li .ico{ margin-bottom: 10px;}
body#knowledge section .ico-list li p{ font-size: 12px; line-height: 1.6;}
body#knowledge section .measures-box{ padding: 20px;}
body#knowledge section .measures-box h3{ font-size: 18px; margin-bottom: 15px;}
body#knowledge section .measures-box li{ line-height: 1.6; text-indent: -14px; margin-left: 14px; margin-bottom: 5px;}
/* ==== movie ===== */
body#movie #g-nav ul li:nth-of-type(6) a{ background: #004f99 url(/special/2021/06sansan/asset/img/common/nav-icon06.png) 20px center no-repeat; background-size: 25px; color: #fff;}
body#movie #g-nav ul li:nth-of-type(6) a::before{ border-top: solid 2px #fff; border-right: solid 2px #fff;}
body#movie #main{ background: url(/special/2021/06sansan/asset/img/movie/main-bg01_sp.jpg) center top no-repeat; background-size: cover;}
body#movie #main .inner{ height: 500px; position: relative;}
body#movie #main header{ top: 12px;}
body#movie #main header .logo-sansan{ width: 64px; margin-right: 15px;}
body#movie #main header .logo-kbc{ width: 99px; margin-top: 4px;}
body#movie #main header .logo-gdo{ width: 70px;}
body#movie #main .detail{ position: absolute; bottom: 30px; padding: 0 20px;}
body#movie #main .detail .tit-box{ background: url(/special/2021/06sansan/asset/img/movie/main-tit-icon.png) left top no-repeat; background-size: 65px; padding: 75px 0 0 0; margin-bottom: 20px;}
body#movie #main .detail .tit-box .stit{ font-size: 14px; margin-bottom: 8px;}
body#movie #main .detail .tit-box h1{ font-size: 30px; margin-bottom: 8px;}
body#movie #main .detail .tit-box .en{ font-size: 13px;}
body#movie #main .detail .text{ line-height: 1.8;}
body#movie section{ padding: 30px 0 0;}
body#movie section .inner{ padding: 0 20px;}
body#movie section .tit-box{ margin-bottom: 20px;}
body#movie section .tit-box h2{ font-size: 22px; margin-bottom: 6px;}
body#movie section .movie-list li{ box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.3); margin-bottom: 30px;}
body#movie section .movie-list li .detail{ padding: 20px;}
body#movie section .movie-list li .detail h3{ font-size: 18px; margin-bottom: 5px;}
body#movie section .movie-list li .detail p{ line-height: 1.8;}
body#movie section .movie-list li .cp{ font-size: 10px; padding: 20px;}
/* ==== interview ===== */
body#interview #g-nav ul li:nth-of-type(5) a{ background: #004f99 url(/special/2021/06sansan/asset/img/common/nav-icon05.png) 20px center no-repeat; background-size: 25px; color: #fff;}
body#interview #g-nav ul li:nth-of-type(5) a::before{ border-top: solid 2px #fff; border-right: solid 2px #fff;}
body#interview #main{ background: url(/special/2021/06sansan/asset/img/interview/main-bg01_sp.jpg) center top no-repeat; background-size: cover;}
body#interview #main .inner{ height: 500px; position: relative;}
body#interview #main header{ top: 12px;}
body#interview #main header .logo-sansan{ width: 64px; margin-right: 15px;}
body#interview #main header .logo-kbc{ width: 99px; margin-top: 4px;}
body#interview #main header .logo-gdo{ width: 70px;}
body#interview #main .detail{ position: absolute; bottom: 40px; padding: 0 20px;}
body#interview #main .detail .tit-box{ background: url(/special/2021/06sansan/asset/img/interview/main-tit-icon.png) left top no-repeat; background-size: 65px; padding: 75px 0 0 0; margin-bottom: 20px;}
body#interview #main .detail .tit-box .stit{ font-size: 14px; margin-bottom: 8px;}
body#interview #main .detail .tit-box h1{ font-size: 30px; margin-bottom: 8px;}
body#interview #main .detail .tit-box .en{ font-size: 13px;}
body#interview #main .detail .text{ line-height: 1.8;}
body#interview #main .cp{ font-size: 10px; right: 20px; bottom: 20px;}
body#interview section{ padding: 30px 0 0;}
body#interview section .inner{ padding: 0 20px;}
body#interview section .tit-box{ margin-bottom: 20px;}
body#interview section .tit-box h2{ font-size: 22px; margin-bottom: 6px;}
body#interview section .conversation-list{ margin-bottom: 30px;}
body#interview section .conversation-list li{ box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.3); margin-bottom: 30px;}
body#interview section .conversation-list li .detail{ padding: 20px;}
body#interview section .conversation-list li .detail h3{ font-size: 18px; margin-bottom: 5px;}
body#interview section .conversation-list li .detail p{ line-height: 1.8;}
body#interview section .movie-list li{ box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.3); margin-bottom: 30px;}
body#interview section .movie-list li .detail{ padding: 20px;}
body#interview section .movie-list li .detail h3{ font-size: 18px; margin-bottom: 5px;}
body#interview section .movie-list li .detail p{ line-height: 1.8;}
body#interview section .movie-list li .cp{ font-size: 10px; padding: 20px;}
/* ==== interview-conversation ===== */
body#conversation #g-nav ul li:nth-of-type(5) a{ background: #004f99 url(/special/2021/06sansan/asset/img/common/nav-icon05.png) 20px center no-repeat; background-size: 25px; color: #fff;}
body#conversation #g-nav ul li:nth-of-type(5) a::before{ border-top: solid 2px #fff; border-right: solid 2px #fff;}
body#conversation.first #main{ background: url(/special/2021/06sansan/asset/img/interview/first/main-bg01_sp.jpg) center top no-repeat; background-size: cover;}
body#conversation #main .inner{ height: 500px; position: relative;}
body#conversation #main header{ top: 12px;}
body#conversation #main header .logo-sansan{ width: 64px; margin-right: 15px;}
body#conversation #main header .logo-kbc{ width: 99px; margin-top: 4px;}
body#conversation #main header .logo-gdo{ width: 70px;}
body#conversation #main h1{ position: absolute; bottom: 20px; padding: 0 10px;}
body#conversation section{ padding: 30px 0 40px;}
body#conversation section .inner{ padding: 0 20px;}
body#conversation section .read{ line-height: 1.8; margin-bottom: 25px;}
body#conversation section .box{ margin-bottom: 10px;}
body#conversation section .box:last-of-type{ margin-bottom: 40px;}
body#conversation section .box h2{ font-size: 20px; line-height: 1.4; margin-bottom: 20px;}
body#conversation section .box .img{ margin-bottom: 20px;}
body#conversation section .box dl{ margin-bottom: 20px;}
body#conversation section .box dl dt{ line-height: 1.8; margin-bottom: 15px;}
body#conversation section .box dl dd{ line-height: 1.8; margin-bottom: 15px;}
body#conversation section #profile-list li:first-of-type{ margin-bottom: 40px;}
body#conversation section #profile-list li .in{ padding: 20px;}
body#conversation section #profile-list li .in .img{ left: 10px; top: -40px; width: 110px;}
body#conversation section #profile-list li .in h3{ font-size: 18px; line-height: 1.4; text-align: right; margin-bottom: 15px;}
body#conversation section #profile-list li .in h3 span{ font-size: 14px; margin-left: 10px;}
body#conversation section #profile-list li .in p{ line-height: 1.8;}
body#conversation section #pager-list{ margin-top: 20px;}
}

/* =============================================
                    1000px
============================================= */
@media screen and (max-width: 1000px){
/* ==== TOP ===== */
body#top #main header{ padding: 0 20px;}
/* ==== course ===== */
body#course #main header{ padding: 0 20px;}
/* ==== knowledge ===== */
body#knowledge #main header{ padding: 0 20px;}
/* ==== movie ===== */
body#movie #main header{ padding: 0 20px;}
/* ==== interview ===== */
body#interview #main header{ padding: 0 20px;}
/* ==== interview-conversation ===== */
body#conversation #main header{ padding: 0 20px;}
}