@charset "utf-8";
/* =============================================
共通
============================================= */
/* ---------------------------------------------
リセット
--------------------------------------------- */
:root{
--nikken-red: #db2b32;
--nikken-red_dark: #c40008;
--bg-color-red: #d0d8d7;
--btn-color: #2293b9;
--bg-color: #004d70;
--bg-color-light: #e1e7ee;
--bg-color-light2: #f0f2f5;
--bg-color-light3: #f0f2f5ba;
--bg-color-dark: #3e4e65;
--bg-color-dark2: #273949;
--nikken-red_thin: #209792;
--line-dark: #737373;
--line-dark2: #666;
--line-light: #d6d6d6;
--line-light2: #ebebeb;
--font-dark: #575f64;
--point-color: #f9ffc6;
--accent-color: #eaff4d;
--accent-color2: #f9fed2;
}
*,
::before,
::after{
box-sizing: border-box;
border-style: solid;
border-width: 0;
}
html{
line-height: 1.15;
text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
}
body{
margin: 0;
}
p, table, blockquote, address, pre, iframe, form, figure, dl{
margin: 0;
}
body, ul, li, ol{
font-size: 1.4rem;
line-height: 1.6;
}
h1, h2, h3, h4, h5, h6{
/* font-weight: inherit; */
margin: 0;
font-size: inherit;
font-size: 1.4rem;
line-height: 1.4;
}
ul, ol{
padding: 0;
margin: 0;
list-style: none;
}
dt{
font-weight: bold;
}
dd{
margin-left: 0;
}
pre{
font-family: monospace, monospace;
font-size: inherit;
}
address{
font-style: inherit;
}
img{
vertical-align: bottom;
border: none;
}
a{
color: #06c;
outline: none;
}
a:link{
text-decoration: none;
}
a:visited{
color: #432189;
text-decoration: none;
}
a:hover{
text-decoration: none;
}
a:active{
text-decoration: underline;
}
/* Custom cross-browser styles for keyboard :focus overrides defaults. */
a:focus{
box-sizing: border-box;
outline: 3px solid #00278c;
outline-offset: 1px;
}
*:focus{
box-sizing: border-box;
outline: 3px solid #00278c;
outline-offset: 1px;
}
/* Remove focus styles for non-keyboard :focus. */
a:focus:not(.focus-visible),
.ngk_link a:focus:not(.focus-visible){
outline: 0 !important;
box-shadow: none !important;
}
sub,
sup{
position: relative;
vertical-align: baseline;
}
sub{
bottom: -0.1rem;
}
sup{
top: -0.2rem;
}
table{
border-collapse: collapse;
border-color: inherit;
}
caption{
text-align: left;
}
td,
th{
padding: 0;
vertical-align: top;
}
th{
font-weight: bold;
text-align: left;
}
/* ---------------------------------------------
body
--------------------------------------------- */
body{
position: relative;
font-family: 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, Helvetica, Verdana, Arial, sans-serif;
color: #333;
}
h1,
h2,
h3,
h4,
h5,
h6,
th{
font-family: 'Noto Sans JP', sans-serif;
color: var(--font-dark);
}
strong{
color: var(--font-dark);
}
.wrap{
position: relative;
}
/* ---------------------------------------------
header
--------------------------------------------- */
/* グローバルナビ */
.header-cont{
position: relative;
display: block;
}
.header{
display: flex;
padding: 0 15px ;
background-color: #fff;
}
.logo{
position: relative;
z-index: 100;
width: 10%;
min-width: 110px;
height: 56px;
padding: 0;
}
.logo a{
display: flex;
align-items: center;
height: 100%;
}
.logo img{
width: 100%;
height: auto;
vertical-align: top;
}
.nav-cont .function-menu:first-child{
position: absolute;
top: 0;
right: 71px;
z-index: 1;
display: flex;
height: 56px;
padding: 5px 0 0;
margin: 0;
background-color: transparent;
}
.nav-cont .function-menu:first-child svg{
width: 20px;
}
.nav-cont .function-menu:first-child li{
width: 30px;
margin: 0;
text-align: center;
}
.nav-cont .function-menu:first-child li:first-child{
display: none;
}
.nav-cont .function-menu:first-child li.cart{
display: flex;
width: auto;
margin: 0;
}
.nav-cont .function-menu:first-child li.cart a{
width: 34px;
padding: 0;
margin: 0;
font-size: 0.9rem;
line-height: 1.1;
text-align: center;
}
.nav-cont .function-menu:first-child li.cart a span{
display: inline-block;
height: auto;
padding: 0;
margin: 0;
line-height: 1.0;
text-align: center;
}
.nav-cont .function-menu:first-child li.cart a::before{
position: static;
display: block;
height: 24px;
margin: 0 auto 1px;
}
.nav-cont .function-menu:first-child a{
display: block;
}
.nav-cont .function-menu:first-child .function-menu__search span{
display: block;
display: flex;
align-items: center;
justify-content: center;
height: 2em;
padding: 0;
margin-top: -2px;
font-size: 0.9rem;
line-height: 1.1;
}
.nav-cont .function-menu:first-child li.function-menu__login{
width: 5em;
padding: 5px 0;
margin: -5px 0 0 8px;
font-size: 1.0rem;
}
.nav-cont .function-menu:first-child li.function-menu__login a{
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
padding: 0 5px;
font-size: 1.0rem;
line-height: 1.2;
color: #fff;
text-align: center;
background-color: var(--nikken-red);
}
.br_sp--menu{
display: none;
}
.nav-cont .function-menu:first-child .br_sp--menu{
display: inline-block;
}
/* スマホ 開閉メニュー内 */
.nav.open li.cart .js_cart_button,
.nav.open li.cart .js_logout{
padding-left: 30px;
margin: 0;
vertical-align: middle;
}
.nav.open li.cart .js_cart_button{
margin-bottom: 5px;
}
.nav.open li.cart a span{
display: inline;
padding-left: 0;
line-height: 1.6;
vertical-align: top;
text-align: center;
}
.nav.open li.cart a{
margin: 0 0 10px;
line-height: 1.6;
vertical-align: top;
}
.nav-cont .nav.open .function-menu li.function-menu__login{
display: none;
}
li.cart .js_cart_button,
li.cart .js_logout{
position: relative;
display: block;
padding-left: 40px;
margin: 5px 25px;
}
li.cart .js_logout{
display: none;
}
li.cart .js_cart_button::before,
li.cart .js_logout::before{
position: absolute;
top: 0;
bottom: 0;
left: 0;
display: block;
width: 24px;
height: 26px;
margin: auto 0;
content: ' ';
background-repeat: no-repeat;
background-position: 90% center;
}
li.cart .js_cart_button::before{
background-image: url('data:image/svg+xml;utf8,');
}
li.cart .js_logout::before{
background-image: url('data:image/svg+xml;utf8,');
}
li.cart a.js_cart_button:hover,
li.cart a.js_logout:hover{
color: var(--nikken-red);
}
li.cart a.js_cart_button:hover::before{
background-image: url('data:image/svg+xml;utf8,');
}
a.js_logout:hover::before{
background-image: url('data:image/svg+xml;utf8,');
}
.header-frame.fixed{
position: fixed;
top: 0;
right: 0;
z-index: 20000;
}
.nav-cont .function-menu:first-child{
z-index: 1001;
}
.nav-cont .function-menu:first-child li.function-menu__login.fixed a{
position: fixed;
top: 0;
right: 70px;
flex-direction: column;
width: 5em;
height: 43px;
padding: 0 5px ;
margin: 0;
box-shadow: 0 1px 1px rgb(0 0 0 / 10%);
}
.nav-switch{
position: absolute;
top: 10px;
right: 0;
z-index: 20000;
box-sizing: border-box;
display: block;
width: 70px;
height: 42px;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
cursor: pointer;
background-color: #fff;
transition: top 0s;
}
.nav-switch.active{
position: fixed;
top: 10px;
z-index: 20000;
background-color: transparent;
}
.header-frame.fixed .nav-switch{
top: 0;
box-shadow: 0 1px 1px rgb(0 0 0 / 10%);
}
.header-frame.fixed .nav-switch.active{
box-shadow: none;
}
@media (hover: hover) {
.nav-switch:hover{
opacity: 0.5;
}
}
.nav-switch svg{
position: absolute;
top: 11px;
right: 23px;
width: 26px;
margin: 0;
vertical-align: middle;
}
.line{
fill: #878787;
transition: all 0.4s;
}
.active .line{
fill: #878787;
}
.line:nth-of-type(1){
transform: translateY(0);
}
.line:nth-of-type(2){
transform: translateY(8px);
}
.line:nth-of-type(3){
transform: translateY(16px);
}
.active .line:nth-of-type(1){
transform-origin: 48.2143% 9.0909%;
animation: active-menu-bar01s 0.3s forwards;
}
.active .line:nth-of-type(2){
opacity: 0;
}
.active .line:nth-of-type(3){
transform-origin: 48.2143% 9.0909%;
animation: active-menu-bar03s 0.3s forwards;
}
@keyframes active-menu-bar01s{
0%{
transform: translateY(0) rotate(0);
}
50%{
transform: translateY(8px) rotate(0);
}
100%{
transform: translateY(8px) rotate(45deg);
}
}
@keyframes active-menu-bar03s{
0%{
transform: translateY(16px) rotate(0);
}
50%{
transform: translateY(8px) rotate(0);
}
100%{
transform: translateY(8px) rotate(-45deg);
}
}
.nav{
position: fixed;
top: 0;
right: 0;
bottom: 0;
z-index: 1500;
display: none;
align-items: center;
justify-content: center;
width: 100%;
height: 0;
overflow: auto;
background: #fff;
opacity: 0;
transition: height 1.2s, opacity 0.3s;
}
.nav.open{
display: block;
flex-wrap: wrap;
height: 100%;
padding: 0;
background-color: #efefef;
opacity: 1;
animation: menu-fadeIn 0.3s ease-in 0s forwards;
}
.nav.open .content-nav,
.nav.open .global-nav{
width: 100%;
}
@keyframes menu-fadeIn{
0%{
display: none;
height: 0;
opacity: 0;
}
1%{
display: flex;
height: 100%;
opacity: 0;
}
100%{
display: flex;
height: 100%;
opacity: 1;
}
}
.global-nav{
padding: 30px;
margin: 0;
background-color: #efefef;
}
.main-menu li{
margin: 0 0 5px;
}
.main-menu a{
position: relative;
display: flex;
align-items: center;
font-family: 'Noto Sans JP', sans-serif;
font-size: 1.6rem;
font-weight: 400;
color: #333;
text-decoration: none;
}
.main-menu a::before{
width: 5px;
height: 5px;
margin: 0 5px 0 0;
content: ' ';
border-top: 1px solid #1b314f;
border-left: 1px solid #1b314f;
transform: rotate(135deg);
}
.main-menu .current > a{
position: relative;
color: var(--nikken-red);
}
.main-menu__second-class{
display: none;
padding-left: 20px;
margin-top: 10px;
margin-bottom: 10px;
}
.main-menu__second-class a{
font-size: 0.98em;
}
.main-menu__second-class.open{
display: block;
}
.type-menu .type-menu_nikken-content.current a{
color: var(--nikken-red);
}
.function-menu{
margin: 20px 0 0;
}
.function-menu li{
margin: 0 0 10px;
}
.function-menu a{
display: flex;
color: #333;
}
.function-menu svg{
width: 24px;
}
svg .ico-color{
fill: #333;
}
.function-menu span{
display: flex;
align-items: center;
height: 2em;
padding-left: 5px;
line-height: 1.2;
}
.type-menu{
margin: 20px 0 0;
}
.type-menu li{
margin: 0 0 5px;
}
.type-menu li a{
position: relative;
display: flex;
align-items: center;
font-size: 1.4rem;
text-decoration: none;
}
.type-menu li a::before{
display: block;
width: 5px;
height: 5px;
margin: 0 8px 0 0;
content: ' ';
border-top: 1px solid var(--nikken-red);
border-left: 1px solid var(--nikken-red);
transform: rotate(135deg);
}
.type-menu li a img{
vertical-align: middle;
}
.another-menu{
display: flex;
align-items: center;
justify-content: center;
margin-top: 30px;
}
.another-menu span{
display: none;
}
.another-menu a{
display: block;
padding: 0 8px;
text-align: center;
text-decoration: none;
}
.ksknik-youtube img{
width: auto;
height: 30px;
}
.fan-site a{
padding: 0 8px;
margin: 0 3px;
line-height: 30px;
background-color: #fff;
border: 1px solid var(--nikken-red);
border-radius: 20px;
}
.login-menu a{
display: block;
padding: 5px 10px;
margin: 20px 0 0;
font-size: 1.5rem;
color: #fff;
text-align: center;
background-color: var(--nikken-red);
transition: opacity 0.1s ease;
}
.login-menu a:hover{
opacity: 0.7;
}
/* コンテンツ内のナビゲーション */
.content-nav{
display: block;
padding: 15px;
margin: 15px;
font-family: 'Noto Sans JP', sans-serif;
}
.content-nav a{
position: relative;
display: inline-block;
display: flex;
align-items: center;
padding: 5px 0;
font-size: 1.5rem;
color: #333;
}
.content-nav a::before{
width: 5px;
height: 5px;
margin: 0 5px 0 0;
content: ' ';
border-top: 1px solid #1b314f;
border-left: 1px solid #1b314f;
transform: rotate(135deg);
}
.content-nav2{
padding: 0;
color: #fff;
background-color: var(--nikken-red_dark);
}
.content-nav__course-name{
padding-bottom: 10px;
font-size: 1.5rem;
font-weight: 700;
color: var(--nikken-red);
}
.course_index .content-nav2{
margin: 3em 0 0;
}
.content-nav2 .content-nav__ttl h1{
padding: 25px 15px;
font-size: 2.0rem;
color: #333;
text-align: left;
background-color: #fff;
}
.course_index .content-nav__ttl{
display: none;
}
.content-nav2 .content-nav__ttl h1{
border-top: 1px solid #ababab;
}
.content-nav2 .content-nav__ttl h1 a{
color: var(--nikken-red);
}
.content-nav2 ul{
display: flex;
flex-wrap: wrap;
margin: 0;
text-align: center;
}
.content-nav2 ul li{
width: 33.33%;
}
.content-nav2 ul li:first-child{
display: none;
}
.content-nav2 ul a{
display: block;
padding: 10px;
color: #fff;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
}
.content-nav2 ul a:hover{
opacity: 0.8;
}
.page-top{
position: fixed;
right: 0;
bottom: 0;
z-index: 1000;
display: none;
}
.page-top a{
display: block;
text-decoration: none;
background-color: #fff;
border: 10px solid #fff;
}
.page-top a img{
width: 90px;
height: auto;
opacity: 0.7;
}
.page-top a:hover{
opacity: 0.9;
}
.page-top a:hover img{
opacity: 1.0;
}
.path{
position: relative;
z-index: 15;
padding: 10px 20px;
background-color: #fff;
}
.ksk-info{
font-size: 1.5rem;
background: var(--bg-color-light);
}
.ksk-info__box{
padding: 50px 25px;
}
.ksk-logo{
margin: 0 0 15px;
}
.ksk-logo a{
transition: all 0.2s ease;
}
.ksk-logo a:hover{
opacity: 0.8;
}
.ksk-logo img{
max-width: 100%;
height: auto;
}
.ksk-list{
display: flex;
margin: 5px 0 0;
}
.ksk-list li{
margin: 0 20px 0 0;
}
.ksk-list li a{
position: relative;
display: flex;
align-items: center;
font-size: 1.4rem;
color: #333;
background: linear-gradient(#9c9c9c 0 0) 0 100% / var(--d, 0) 1px no-repeat;
transition: opacity 0.3s ease;
}
.ksk-list li a::before{
display: block;
width: 4px;
height: 4px;
margin: 0 5px 0 0;
content: ' ';
border-top: 1px solid #7a8696;
border-left: 1px solid #7a8696;
transform: rotate(135deg);
}
.ksk-list li a img{
vertical-align: middle;
}
.ksk-list li a:hover{
opacity: 0.7;
--d: 100%;
}
#footer_info{
padding: 17px 0;
background-color: #e5e9ed;
border-top: 1px solid #ccc;
}
#footer_info ul{
width: 970px;
margin: 0 auto ;
text-align: center;
}
#footer_info ul li{
display: inline-block;
margin: 0 3px;
}
#footer_info ul a{
position: relative;
display: block;
width: 180px;
padding: 10px 20px 15px 9px;
font-size: 1.8rem;
font-weight: bold;
vertical-align: middle;
color: #fff;
text-align: center;
background: linear-gradient(to bottom, #51b8d0 0%,#43a1b7 100%);
box-shadow: 0 0 0 2px #fff inset, 1px 1px 0 rgb(0 0 0 / 10%);
}
#footer_info ul a::before{
position: absolute;
top: 0;
right: 16px;
bottom: 0;
width: 5px;
height: 7px;
margin: auto 0;
content: ' ';
background: url(../img/cmn_arrow_ico.png) no-repeat left -21px;
background-size: 150px 150px;
}
#footer_info ul a img{
width: 159px;
vertical-align: middle;
}
#footer_info ul a:hover{
position: relative;
top: 1px;
left: 1px;
text-decoration: none;
opacity: 0.8;
}
.fotter-content-nav{
padding: 50px;
background-color: #fff;
}
.fotter-nav__wrap{
padding: 25px 15px;
text-align: center;
background-color: #242b37;
}
.footer-nav__list{
display: flex;
flex-wrap: wrap;
justify-content: start;
margin: 0 0 10px;
}
.footer-nav__list a{
position: relative;
display: flex;
align-items: center;
padding: 5px 10px;
color: #fff;
}
.footer-nav__list a::before{
display: block;
width: 4px;
height: 4px;
margin: 0 5px 0 0;
content: ' ';
border-top: 1px solid #fff;
border-left: 1px solid #fff;
transform: rotate(135deg);
}
.footer-nav__list a:hover{
opacity: 0.7;
}
.footer-nav__list a img{
vertical-align: middle;
}
.footer-small{
display: block;
padding: 20px;
margin: 0 -15px ;
color: #fff;
border-top: 1px solid #5f646d;
}
.another-menu--btm{
margin: 20px 0 30px;
display: flex;
gap: 10px;
justify-content: center;
align-items: center;
}
.another-menu--btm .fan-site a{
padding: 4px 8px;
overflow: hidden;
}
/* --- 本文部分 構造 main --- */
#content_header{
position: relative;
padding: 20px;
margin-bottom: 40px;
/* border-top: 3px solid #e04536; */
background: var(--bg-color-light);
background: var(--nikken-red_dark) url(/nikken/img/bg_n.svg) no-repeat center right;
background-size: auto 225px;
}
.content_wrap{
padding: 0 15px 15px;
}
#content_wrap{
box-sizing: border-box;
width: 100%;
padding: 0 4% 10px;
}
.basic-section{
margin: 80px 0 0;
}
.detail_link{
width: 100%;
text-align: right;
}
#index_header{
margin: 0 0 30px;
}
#main_ttl h1{
display: flex;
align-items: center;
justify-content: center;
height: 18vh;
min-height: 100px;
padding: 0 35px;
font-family: 'Noto Sans JP', sans-serif;
font-size: 2.6rem;
font-weight: 700;
line-height: 1.4;
color: #fff;
text-align: center;
background: var(--nikken-red_dark) url(../img/bg_n.svg) no-repeat right -30% center;
background-size: auto 120%;
}
#main_ttl h1 a{
color: #fff;
text-decoration: none;
transition: all 0.2s ease;
}
#main_ttl h1 a:hover{
opacity: 0.8;
}
#main_ttl h1 .ttl-s{
display: block;
font-size: 0.6em;
}
.btm-header #main_ttl h1{
height: 5vh;
min-height: 90px;
font-size: 2.0rem;
}
.lead_ttl{
margin: 0 0 15px;
font-family: 'Noto Sans JP', sans-serif;
font-size: 2.0rem;
font-weight: bold;
font-weight: 400;
line-height: 1.4;
color: #333;
text-align: center;
letter-spacing: 0.06em;
}
.content_lead{
width: 100%;
padding: 0 0 30px;
margin: 0 auto;
font-size: 1.5rem;
line-height: 1.8;
text-align: center;
/* word-break: keep-all;
overflow-wrap: break-word; */
overflow-wrap: anywhere;
}
.content_lead p.note{
margin-top: 20px;
}
/* --- 本文部分 構造 aside --- */
#side{
overflow: visible;
background: #fff;
}
.side_nav_list{
box-sizing: border-box;
margin-bottom: 10px;
}
.side_nav_list > li{
border-top: 1px solid #efefef;
}
.side_nav_list li a{
position: relative;
display: block;
padding: 4px 10px 4px 15px;
font-size: 1.3rem;
color: #676060;
}
.side_nav_list li a::before{
position: absolute;
top: 0.8em;
left: 5px;
display: block;
width: 4px;
height: 7px;
margin: 0;
content: ' ';
background: url(../img/cmn_arrow_ico.png) no-repeat 0 -70px;
background-size: 150px 150px;
}
.side_nav_list li.current > a{
color: #db2424;
background: #ffdfdf;
}
.side_nav_list li.current a::before{
background-position: 0 -77px;
}
.side_nav_list li a:hover{
color: #333;
text-decoration: none;
background-color: #ffebeb;
}
.side_nav_list li ul{
padding: 0;
}
.side_nav_list li li a{
padding: 2px 10px 2px 15px;
}
.side_nav_list .current ul{
display: block;
background-color: #f8f3f3;
border-top: 2px solid #fff;
}
.side_nav_list li ul{
display: none;
}
.side_nav_list .current_parent ul{
display: block;
background-color: #f8f3f3;
border-top: 2px solid #fff;
}
.side_nav_list .current li,
.side_nav_list .current_parent li{
margin: 0;
border-bottom: 1px dotted #ccc;
}
.side_nav_list .current li a,
.side_nav_list .current_parent li a{
padding: 5px 0 5px 25px;
}
.side_nav_list .current li a::before,
.side_nav_list .current_parent ul li a::before{
left: 15px;
}
/* 申込 */
.apply_cont{
padding: 10px 15px 8px;
margin: 0 0 10px;
font-size: 1.2rem;
border: 1px solid #adadad;
}
.apply_cont h2{
min-height: 20px;
padding: 13px 5px 8px 60px;
margin: -10px -15px 15px;
font-size: 1.5rem;
color: #686d71;
background: #cfd6da url(/nikken/img/btn_apply_ttl_bg.png) no-repeat 5px 5px;
}
.apply_note{
margin: 5px 0 0;
font-size: 1.3rem;
}
.apply_cont_attention{
margin: 0 0 10px;
font-size: 1.2rem;
line-height: 1.5;
color: #6a6a6a;
}
.apply_btn a{
position: relative;
box-sizing: border-box;
display: inline-block;
width: 100%;
padding: 15px 15px 15px 5px;
margin: 0 0 5px;
font-size: 1.85rem;
font-weight: bold;
line-height: 1.3;
color: #fff;
text-align: center;
background: linear-gradient(to bottom, #93ca5c 0%,#7cc035 100%);
}
#side .apply_btn a{
font-size: 1.8rem;
}
.apply_btn a::after{
position: absolute;
top: 0;
right: 7px;
bottom: 0;
display: block;
width: 20px;
height: 16px;
margin: auto 0;
content: ' ';
background: url(../img/cmn_arrow_ico.png) no-repeat -17px -21px;
background-size: 150px 150px;
}
.apply_btn a:hover{
position: relative;
top: 1px;
left: 1px;
text-decoration: none;
opacity: 0.8;
}
main p.close_btn,
.simple_close_btn span{
position: relative;
box-sizing: border-box;
display: inline-block;
width: 100%;
padding: 20px;
margin: 0 0 20px;
font-size: 1.85rem;
font-weight: bold;
line-height: 1.3;
color: #afafaf;
text-align: center;
background-color: #eaeaea;
border: 3px solid #fff;
box-shadow: 0 0 2px rgb(0 0 0 / 30%);
}
.simple_close_btn{
text-align: center;
}
.simple_close_btn span{
display: inline-block;
width: auto;
min-width: 260px;
padding: 13px 30px;
font-family: 'Noto Sans JP', sans-serif;
font-size: 2.2rem;
vertical-align: middle;
text-align: center;
}
.pamphlet_btn a{
display: inline-block;
width: 100%;
height: 34px;
padding: 3px;
margin-top: 15px;
overflow: hidden;
vertical-align: middle;
color: var(--bg-color-dark);
text-align: center;
border: 1px solid var(--line-light);
}
.pamphlet_btn a:hover{
opacity: 0.8;
}
.pamphlet_btn a::before{
display: inline-block;
width: 26px;
height: 28px;
margin-right: 10px;
vertical-align: middle;
content: '';
background: url(/nikken/guidance/img/ico-digital-pamphlet.svg) no-repeat center left;
background-size: 26px 28px;
opacity: 0.8;
}
/* プレゼント、申込みボタン */
.simple_btn,
.present_btn{
text-align: center;
}
.simple_btn a,
.present_btn a{
position: relative;
box-sizing: border-box;
display: inline-block;
width: 320px;
padding: 15px 15px 15px 5px;
margin: 0 0 5px;
font-size: 2.2rem;
font-weight: bold;
line-height: 1.3;
color: #fff;
text-align: center;
background: linear-gradient(to bottom, #93ca5c 0%,#7cc035 100%);
}
.simple_btn a::after,
.present_btn a::after{
position: absolute;
top: 0;
right: 7px;
bottom: 0;
display: block;
width: 20px;
height: 16px;
margin: auto 0;
content: ' ';
background: url(/nikken/img/cmn_arrow_ico.png) no-repeat -17px -21px;
background-size: 150px 150px;
}
.simple_btn a:hover,
.present_btn a:hover{
position: relative;
top: 1px;
left: 1px;
text-decoration: none;
opacity: 0.8;
}
#side_btn_cont{
padding: 0 0 5px;
margin: 0 0 20px;
}
.side_btn_school{
margin: 0 0 5px;
}
/* aside内 見出しなど */
#side h3{
position: relative;
display: block;
padding: 10px;
margin: 0 0 2px;
font-size: 1.5rem;
font-weight: normal;
color: #fff;
background-color: #e04536;
}
#side h3 a{
position: absolute;
top: 0;
right: 10px;
bottom: 0;
display: block;
height: 1.7em;
padding: 3px 0 0 18px;
margin: auto 0;
font-size: 1.3rem;
color: #f2c0c0;
background: url(/nikken/guidance/img/side_nav_list_arrow2.png) no-repeat 7px center;
border-left: 1px solid #ed6161;
}
#side h3 a.content_top{
position: static;
height: auto;
padding: 0;
font-size: 1.5rem;
color: #fff;
background: none;
border: none;
}
#side h3 a:hover{
text-decoration: none;
opacity: 0.7;
}
.aside_ttl_lv1{
margin: 10px 0 5px;
font-size: 1.4rem;
}
.aside_ttl_lv2{
position: relative;
padding: 10px 0 10px 13px;
margin: 0;
font-size: 1.5rem;
background-color: #f3f3f3;
}
.aside_ttl_lv2::before{
position: absolute;
top: 0;
bottom: 0;
left: 5px;
display: block;
width: 3px;
height: 1em;
margin: auto 3px auto 0;
content: ' ';
background-color: #f26666;
}
.aside_ttl_lv3{
position: relative;
padding: 5px 0 5px 10px;
margin: 3px 0 0;
font-size: 1.6rem;
}
.aside_ttl_lv3::before{
position: absolute;
top: 0;
bottom: 0;
left: 1px;
display: block;
width: 2px;
height: 1.2em;
margin: auto 2px auto 0;
content: ' ';
background-color: #cbcbcb;
}
.nav_grp{
margin: 0 0 15px;
}
.nav_note{
font-size: 1.2rem;
}
/* 下部にコンテンツ用のリンク */
.content-nav__cont{
padding: 20px;
margin: 70px 0 10px;
background-color: #efefef;
}
.content-nav__cont a{
position: relative;
display: inline-block;
padding-left: 0.7em;
}
.content-nav__cont a:hover{
opacity: 0.8;
}
.content-nav__cont .current > a{
color: var(--nikken-red) ;
border-bottom: 1px solid var(--nikken-red);
}
.content-nav__cont a::before{
position: absolute;
top: 0.5em;
left: 0;
height: 0.5em;
aspect-ratio: 1 / 1;
margin: 0;
content: ' ';
background-color: #333;
clip-path: polygon(0 7%, 7% 0, 57% 50%, 7% 100%, 0 93%, 43% 50%, 0 7%);
}
.btm-content-nav__ttl--lv1{
display: flex;
align-items: center;
margin: 0 0 15px;
font-family: 'Noto Sans JP', sans-serif;
font-size: 1.6rem;
}
.course-nav__ttl--lv2{
position: relative;
padding: 0 0 5px;
margin: 20px 0 5px;
font-family: 'Noto Sans JP', sans-serif;
font-size: 1.6rem;
border-bottom: 1px solid var(--line-dark);
}
.course-nav__ttl--lv2 a{
position: absolute;
right: 10px;
bottom: 2px;
display: block;
height: 1.7em;
padding: 0 0 0 1.2em;
margin: auto 0;
font-size: 1.3rem;
font-weight: normal;
color: #7a7a7a;
border-left: 1px solid var(--line-light);
}
.content-nav__cont .course-nav__ttl--lv2 a::before{
bottom: 4px;
left: 5px;
}
.course-nav__ttl--lv3{
margin: 20px 0 5px;
font-size: 1.3rem;
}
.course-nav__list li{
display: inline-block;
margin: 0 15px 5px 0;
}
.schoolname{
margin: 0 0 30px;
}
.btm-content-nav__list li{
display: flex;
flex-wrap: wrap;
align-items: flex-start;
margin: 0 15px 5px 0;
}
.btm-content-nav__list li a{
position: relative;
display: inline-block;
padding-left: 0.7em;
}
.btm-content-nav__list li a:hover{
opacity: 0.8;
}
.btm-content-nav__list li.current a{
color: var(--nikken-red);
border-bottom: 1px solid var(--nikken-red);
}
.btm-content-nav__list li a::before{
position: absolute;
top: 0.5em;
left: 0;
width: 0.5em;
height: 0.5em;
margin: 0;
content: ' ';
background-color: #333;
clip-path: polygon(14% 0, 61% 50%, 14% 100%, 6% 92%, 46% 50%, 6% 8%);
}
.btm-content-nav__list li.back a{
padding: 5px 10px 5px 15px;
margin-top: 10px;
line-height: 1.0;
background-color: #fff;
border-radius: 5px;
}
.btm-content-nav__list li.back a::before{
top: 0;
bottom: 0;
left: 0.3em;
margin: auto 0;
clip-path: polygon(46% 6%, 11% 50%, 46% 95%, 38% 100%, 0 50%, 38% 0);
}
/* 年度別申込みボタン */
.apply_year_cont{
padding: 5px 15px;
margin: -12px 0 10px;
font-size: 1.2rem;
background-color: #fff;
border: 2px solid #e5e5e5;
}
.apply_year_ttl{
position: relative;
font-size: 1.23rem;
color: #686d71;
}
.apply_year_ttl::after{
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 10px;
height: 10px;
margin: auto 0;
overflow: hidden;
content: ' ';
background-image: url(../img/open_close.png);
background-repeat: no-repeat;
background-position: left top;
background-size: 100% auto;
}
.apply_year_ttl.open::after{
background-position: left -11px;
}
.apply_year_ttl span{
font-size: 1.3rem;
color: #e63929;
}
.apply_year_box{
display: none;
padding: 10px 0 0;
}
/* --- お知らせアイコン --- */
.news_list{
margin: 0 0 20px;
}
.news_list li{
position: relative;
padding: 37px 0 10px;
line-height: 1.3;
border-bottom: 1px dotted #ccc;
}
.news_list li > span{
position: absolute;
top: 13px;
left: 98px;
display: block;
width: 10em;
font-size: 1.3rem;
}
.news_list li a{
font-size: 1.3rem;
line-height: 1.3;
}
.news_list li a::before{
position: absolute;
top: 10px;
left: 0;
display: block;
width: 90px;
height: 22px;
overflow: hidden;
font-size: 1.2rem;
line-height: 22px;
color: #fff;
text-align: center;
content: ' ';
background-color: var(--nikken-red_thin);
}
.news_list .guidance a::before{
content: '講座情報';
background-color: #038c81;
}
.news_list .test a::before{
content: '試験情報';
background-color: #098342;
}
.news_list .news a::before{
content: '更新情報';
background-color: #098342;
}
.news_list .message a::before{
content: 'お知らせ';
background-color: #038cbf;
}
.news_list .kaisoku a::before{
content: '解答速報';
background-color: #098b9f;
}
.news_list .campaign a::before{
content: 'キャンペーン';
background-color: #032a8c;
}
.news_list .service a::before{
content: 'サービス';
background-color: #8c7c08;
}
.news_list .architect a::before{
content: '建築士';
background-color: #c92e38;
}
.news_list .housing a::before{
content: '宅建';
background-color: #e95e01;
}
.news_list .investigation a::before{
content: '土地家屋';
}
.news_list .survey a::before{
content: '測量士補';
}
.news_list .fp a::before{
content: 'FP';
background-color: #e95e01;
}
.news_list .shouken a::before{
content: '二種外務員';
}
.news_list .zeimu a::before{
content: '税務会計';
}
.news_list .boki a::before{
content: '日商簿記';
}
.news_list .construction a::before{
content: '建築施工';
}
.news_list .engineering a::before{
content: '土木施工';
}
.news_list .pavement a::before{
content: '舗装施工';
}
.news_list .pipe a::before{
content: '管工事';
}
.news_list .gardening a::before{
content: '造園';
}
.news_list .exterior a::before{
content: 'エクステリア';
}
.news_list .electric01 a::before{
content: '1級電気';
}
.news_list .electric02 a::before{
content: '第二種電気';
}
.news_list .electric03 a::before{
content: '第三種電気';
}
.news_list .concrete a::before{
content: 'コンクリート';
}
.news_list .secretary a::before{
content: '秘書検定';
}
.news_list .kaigofukushi a::before{
content: '介護福祉士';
}
.news_list .ninchishou a::before{
content: '認知症ケア';
}
.news_list .kea a::before{
content: 'ケアマネ';
}
.news_list .shakaifukushi a::before{
content: '社会福祉士';
}
.news_list .iryofukushiAd a::before{
content: '医療福祉';
}
.news_list .tourokuhanbaisha a::before{
content: '登録販売者';
}
.news_list .hoikushi a::before{
content: '保育士';
}
.news_list .energy a::before{
content: 'エネルギー';
}
.news_list .hanbaishi a::before{
content: '販売士';
}
.news_list .pr a::before{
content: 'PR';
}
.news_list .business a::before{
content: 'ビジネス実務';
}
.news_list .gyouseishosh a::before{
content: '行政書士';
}
.news_list .sharoushi a::before{
content: '社労士';
}
.news_list .koumuin a::before{
content: '公務員';
}
.news_list .itpas a::before{
content: 'ITパス';
}
.news_list .mos a::before{
content: 'MOS';
}
.news_list .web a::before{
content: 'Web';
}
.news_list .pken a::before{
content: 'P検';
}
.news_list .java a::before{
content: 'JAVA';
}
.news_list .nihongo a::before{
content: '日本語';
}
.news_list .toefl a::before{
content: 'TOEFL';
}
.news_list .kouzou a::before{
content: '構造計算';
}
.news_list .equipment a::before{
content: '建築設備士';
}
.news_list .interior a::before{
content: 'インテリア';
}
.news_list .structure_01 a::before{
content: '構造設計';
}
.news_list .kanri a::before{
content: '管理業務';
}
.news_list .rent a::before{
content: '賃貸不動産';
}
.news_list .cpds a::before{
content: 'CPDS';
}
.news_list .eco a::before{
content: 'eco';
}
.news_list .keiri a::before{
content: '経理士';
}
.news_list .fjc a::before{
content: '福祉住環境';
}
.news_list .jw-cad a::before{
content: 'Jw-CAD';
}
.news_list .autocad a::before{
content: 'Auto-CAD';
}
.news_list .architect_cad a::before{
content: '建築CAD';
}
.news_list .it_office a::before{
content: 'Office';
}
.news_list .recruit_spi a::before{
content: 'SPI';
}
.news_list .hsk a::before{
content: '中国語';
}
.news_list .success a::before{
content: '合格実績';
}
.news_list .seminar a::before{
content: 'セミナー';
background-color: #2eb093;
}
.news_list .present a::before{
content: 'プレゼント';
background-color: #0858ff;
}
.news_list .supply a::before{
content: '給水装置';
}
.news_list .jobtraining a::before{
content: '職業訓練';
}
#news_all{
display: none;
}
.news_list li a:hover{
text-decoration: underline;
opacity: 0.8;
}
.news_list li a img{
margin-right: 5px;
vertical-align: middle;
}
/* ---------------------------------------------
汎用
--------------------------------------------- */
/* 余白 */
.mt10{
margin-top: 10px;
}
.text-strong,
.text_strong{
color: var(--nikken-red);
}
.text-strong--color2{
color: var(--nikken-red_thin);
}
.text_strong.under_line{
border-bottom: 1px solid var(--nikken-red);
}
/* --- 見出し --- */
.ttl_lv1{
padding: 15px 0;
margin: 50px 0 25px;
font-family: 'Noto Sans JP', sans-serif;
font-size: 1.8rem;
color: var(--nikken-red);
text-align: center;
word-break: keep-all;
overflow-wrap: break-word;
border-bottom: 1px solid var(--nikken-red);
}
.ttl_lv2{
padding: 15px;
margin: 0 0 20px;
font-family: 'Noto Sans JP', sans-serif;
font-size: 1.6rem;
color: var(--font-dark);
text-align: center;
background: linear-gradient(65deg, #f0f2f5 0%,#f0f2f5 20%, #e0e4eb 100%);
}
.ttl_lv2.ttl--left{
text-align: left;
}
.ttl_lv3{
position: relative;
padding: 10px 0 10px 13px;
margin: 0 0 10px;
font-size: 1.7rem;
color: var(--font-dark);
text-align: left;
border-bottom: 1px solid var(--line-light);
}
.ttl_lv3::before{
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 5px;
height: 70%;
margin: auto 0;
content: ' ';
background: linear-gradient(to bottom, #efefef 0%,#ccc 100%);
border-radius: 5px;
}
.ttl_lv4{
padding-bottom: 5px;
margin: 40px 0 15px;
font-size: 1.6rem;
color: #575f64;
border-bottom: 1px dotted var(--line-dark);
}
.ttl_lv5{
padding-bottom: 5px;
margin: 0 0 5px;
font-size: 1.5rem;
color: #575f64;
}
.ttl_lv5::before{
display: inline-block;
padding-right: 5px;
content: '●';
}
/* --- float --- */
.float_right{
float: right;
margin-left: 15px;
}
.float_left{
float: left;
margin-right: 15px;
}
.float_clear{
clear: both;
}
.clearfix::after{
clear: both;
display: block;
content: '';
}
/* --- text --- */
.text_right{
text-align: right;
}
.text_left{
text-align: left;
}
.text_center{
text-align: center;
}
.bold_text{
font-weight: bold;
}
.ttl_text{
padding-bottom: 5px;
font-weight: bold;
color: #2782c3;
}
.text_strong{
color: var(--nikken-red);
}
.text_light{
color: #a9afba;
}
.fontsize_ss,
.fontsize_ss *{
font-size: 1.1rem;
}
.fontsize_s,
.fontsize_s *{
font-size: 1.2rem;
}
.fontsize_l,
.fontsize_l *{
font-size: 1.4rem;
}
.fontsize_ll,
.fontsize_ll *{
font-size: 1.8rem;
}
/* --- リスト --- */
ol.decimal,
ol.decimal ol.decimal{
padding-left: 0;
margin-left: -0.2em;
counter-reset: li;
}
ol.decimal > li{
/* *list-style: decimal; */
position: relative;
padding-left: 2.5em;
margin-bottom: 5px;
}
ol.decimal > li::before{
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
display: block;
width: 1.8em;
padding: 0;
margin: 0 5px 0 0;
text-align: center;
content: '（'counter(li) '）';
counter-increment: li;
}
ol.decimal > li ol.decimal > li::before{
content: counter(li)'.';
}
ol.disc > li,
ul.disc > li{
margin: 0 0 5px 17px;
list-style-type: disc;
}
td ol.disc > li,
td ul.disc > li{
margin: 0 0 3px 17px;
line-height: 1.3;
}
.inline_list li{
display: inline-block;
}
ol.parentheses > li,
ul.parentheses > li{
padding-left: 2em;
text-indent: -2em;
counter-increment: marunum;
}
ol.parentheses > li::before,
ul.parentheses > li::before{
margin-right: 0.25em;
content: '('counter(marunum)')';
}
/* 定義リスト */
.simple_dl{
margin: 0;
overflow: hidden;
}
.simple_dl dt{
float: left;
clear: both;
box-sizing: border-box;
display: block;
width: 15%;
padding: 5px;
margin: 5px 0 0;
line-height: 1.5;
text-align: center;
background-color: #ecf2f5;
}
.simple_dl dd{
position: relative;
float: left;
box-sizing: border-box;
display: block;
width: 83%;
padding: 5px 0;
margin: 5px 0 0 1%;
line-height: 1.5;
border-top: 1px dotted #bfbfbf;
}
.simple_dl dt:first-child,
.simple_dl dd:nth-child(2){
margin-top: 0;
border-top: none;
}
/* dl-list */
.dl-list{
margin: 0 0 70px;
}
.dl-list div{
margin: 0 0 20px;
}
.dl-list dt{
padding: 8px;
font-size: 1.7rem;
color: var(--font-dark);
text-align: center;
background-color: var(--bg-color-light);
}
.dl-list dd{
padding: 15px 0;
font-size: 1.4rem;
}
.dl-list dd h2{
position: relative;
padding-left: 15px;
margin: 30px 0 15px;
font-size: 1.8rem;
}
.dl-list dd h2:first-child{
margin-top: 0;
}
.dl-list dd h2::before{
position: absolute;
top: 3px;
bottom: 0;
left: 0;
width: 5px;
height: 1em;
margin: auto 0;
content: ' ';
background: var(--nikken-red);
}
.dl-list dd h3{
margin: 30px 0 10px;
font-size: 1.7rem;
}
.dl-list dd p + p{
margin-top: 10px;
}
/* --- リンク --- */
.h_opacity a,
a.h_opacity{
display: block;
}
.h_opacity a:hover,
a.h_opacity:hover{
text-decoration: none;
opacity: 0.8;
}
/* リンク用矢印 */
.link_arrow,
.link_list li{
position: relative;
display: flex;
align-items: center;
justify-content: left;
}
.link_arrow--inline::before,
.link_arrow::before,
.link_list li::before{
display: inline-block;
width: 5px;
height: 5px;
margin: 0 5px 0 0;
vertical-align: middle;
content: ' ';
border-top: 1px solid #1b314f;
border-left: 1px solid #1b314f;
transform: rotate(135deg);
}
.link_arrow--inline{
position: relative;
transition: all 0.2s ease;
}
.link_arrow--inline:hover,
.link_arrow:hover,
.link_list a:hover{
opacity: 0.8;
}
.btn:hover{
opacity: 0.8;
}
.detail_link{
text-align: right;
}
.detail_link a{
display: inline-block;
padding: 5px 40px 5px 30px;
margin: 5px 0 0;
font-size: 1.5rem;
font-weight: bold;
color: #fff;
background-color: var(--btn-color);
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: 90% center;
background-size: 18px 11px;
transition: all 0.1s ease;
}
.detail_link a:hover{
text-decoration: none;
background-position: 93% center;
opacity: 0.8;
}
/* --- ボタン --- */
/* 申込みボタン */
.nikken_btn{
margin: 10px 0;
text-align: center;
}
.nikken_btn a{
box-sizing: border-box;
display: inline-block;
min-width: 300px;
padding: 15px 20px;
margin: 0 auto 5px;
font-size: 2.2rem;
font-weight: bold;
line-height: 1.3;
color: #fff;
text-align: center;
background: linear-gradient(to bottom, #93ca5c 0%,#7cc035 100%);
}
/* ショップなどへリンク */
.nikken_btn.outsite_btn a{
padding-right: 25px;
color: #fff;
background: linear-gradient(to bottom, #93ca5c 0%,#7cc035 100%);
}
.nikken_btn.outsite_btn a::after{
display: inline-block;
width: 12px;
height: 11px;
margin: 0 0 0 5px;
content: ' ';
background: url(../img/cmn_arrow_ico.png) no-repeat left -39px;
background-size: 150px 150px;
}
.nikken_btn a:hover{
position: relative;
top: 1px;
left: 1px;
text-decoration: none;
opacity: 0.8;
}
/* --- 上付き文字 --- */
sup{
position: relative;
top: -0.8ex;
font-size: 0.6em;
vertical-align: baseline;
}
/* --- 補足、注意書き --- */
/* ※付の補足など用 */
.note-indent1,
.note_indent1{
padding-left: 1em;
line-height: 1.4;
text-indent: -1em;
}
/* （～）付の補足 */
.note_indent2{
padding-left: 3em;
line-height: 1.3;
text-indent: -3em;
}
.note_indent1 li,
.note_indent2 li{
margin: 0 0 5px;
}
.note-indent1 .link_arrow,
.note_indent1 .link_arrow{
display: inline-block;
padding-left: 10px;
}
.note-indent1 .link_arrow::before,
.note_indent1 .link_arrow::before{
vertical-align: middle;
}
.table_basic .note_indent1 li,
.note_indent2 li{
margin: 0 0 3px;
line-height: 1.3;
}
.simple-section p.note,
li.note,
p.note{
font-size: 0.9em;
line-height: 1.8;
}
/* ※付き外部サイト案内 */
.site_info,
.simple_section .site_info{
margin: 0 0 5px;
}
.site_info_link,
.simple_section .site_info_link{
padding-bottom: 10px;
}
/* --- アイコン --- */
/* 外部サイト */
.outsite::after{
display: inline-block;
width: 12px;
height: 11px;
margin: 0 0 0 5px;
content: ' ';
background: url(../img/ico-outsite.svg) no-repeat left top;
}
.outsite_w::after{
display: inline-block;
width: 12px;
height: 11px;
margin: 0 0 0 5px;
content: ' ';
background: url(../img/cmn_arrow_ico.png) no-repeat left -39px;
background-size: 150px 150px;
}
.outsite-ico{
margin-left: 3px;
vertical-align: middle;
}
.outsite-ico img{
display: inline-block;
margin-top: -1px;
margin-right: 2px;
vertical-align: middle;
}
/* pdf */
.pdf_mark::after{
position: relative;
top: -1px;
display: inline-block;
width: 17px;
height: 17px;
margin: 0;
vertical-align: middle;
content: ' ';
background: url(../img/cmn_arrow_ico.png) no-repeat -14px 0;
background-size: 150px 150px;
}
/* お問い合せ */
.consultation{
padding: 40px 0 0;
text-align: center;
border-top: 1px solid #ccc;
}
.consultation__ttllv1{
font-size: 2.0rem;
color: var(--nikken-red);
}
.consultation__ttllv1 span{
position: relative;
display: inline-block;
padding: 0 15px 20px;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700;
border-bottom: 1px solid var(--nikken-red);
}
.consultation__ttllv1 span::after{
position: absolute;
right: 0;
bottom: -7px;
left: 0;
width: 12px;
height: 12px;
margin: 0 auto;
content: ' ';
background-color: #fff;
border: 0;
border-right: solid 1px var(--nikken-red);
border-bottom: solid 1px var(--nikken-red);
transform: rotate(45deg);
}
.consultation__ttllv2{
margin-top: 20px;
font-family: 'Noto Sans JP', sans-serif;
font-size: 1.8rem;
font-weight: 700;
}
.callcenter-tel{
position: relative;
display: flex;
align-items: center;
justify-content: center;
font-size: 3.0rem;
}
.callcenter-tel span{
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
}
.callcenter-tel a{
color: #333;
}
.callcenter-info{
font-size: 1.4rem;
line-height: 1.3;
text-align: center;
}
.callcenter_cont{
margin: 0 0 30px;
}
.consultation-pickup{
padding: 30px;
background-color: var(--nikken-red);
}
.consultation-pickup__box{
margin: 0 0 10px;
font-family: 'Noto Sans JP', sans-serif;
font-size: 1.5rem;
font-weight: 400;
}
.consultation-pickup__box a{
position: relative;
display: block;
height: 100%;
padding: 15px;
color: #333;
background-color: #fff;
transition: all 0.1s ease;
}
.consultation-pickup__box a::before{
position: absolute;
top: 0;
right: 15px;
bottom: 0;
width: 33px;
height: 11px;
margin: auto 0;
content: ' ';
background: url(../img/arrow-s.svg) no-repeat left top;
background-size: 27px 11px;
transition: all 0.1s ease;
}
.consultation-pickup__box a:hover{
text-decoration: none;
opacity: 0.9;
}
.consultation-pickup__box a:hover::before{
background-position: 5px top;
}
.consultation-pickup__ttl{
margin: 0 0 10px;
font-family: 'Noto Sans JP', sans-serif;
font-size: 2.0rem;
font-weight: 700;
color: var(--nikken-red);
}
.consultation-pickup__ttl span{
display: block;
padding-bottom: 10px;
}
.footer-link{
width: 100%;
}
.footer-link__list{
display: flex;
gap: 25px;
justify-content: center;
margin: 25px 0 -10px;
}
.footer-link__list a{
position: relative;
display: inline-block;
padding: 28px 0 0 ;
font-size: 1.4rem;
font-weight: bold;
line-height: 1.3;
color: #fff;
transition: all 0.2s ease;
}
.footer-link__list a::before{
position: absolute;
top: 0;
right: 0;
left: 0;
width: 25px;
height: 25px;
margin: 0 auto;
content: ' ';
background: url(../img/ico-howtoapply.svg) no-repeat left top;
}
.footer-link__list--faq a::before{
background: url(../img/ico-faq.svg) no-repeat left top;
}
.footer-link__list--sitemap a::before{
background: url(../img/ico-map.svg) no-repeat left top;
}
.footer-link__list a:hover{
opacity: 0.7;
}
/* --- 基本のテーブル --- */
.table_basic{
box-sizing: border-box;
width: 100%;
background-color: #fff;
border: 1px solid #bfbfbf;
}
.table_basic caption{
font-family: 'Noto Sans JP', sans-serif;
font-size: 1.6rem;
font-weight: 700;
color: var(--font-dark);
}
.table_basic th,
.table_basic td{
padding: 10px;
line-height: 1.4;
vertical-align: top;
border: 1px solid #ccc;
}
.table_basic th{
padding: 10px;
font-weight: normal;
color: #fff;
text-align: center;
background-color: var(--bg-color-dark);
}
.table_basic th.color2,
.table_basic td.color2{
background-color: #f4f4f4;
}
.simple_section .table_basic p,
.table_basic p{
margin-bottom: 5px;
line-height: 1.3;
}
.simple_section .table_basic p:nth-last-of-type(1),
.table_basic p:nth-last-of-type(1){
margin-bottom: 0;
}
.table_basic p.link_arrow::before{
top: 0.4em;
bottom: auto;
margin: 0;
background: url(../img/cmn_arrow_ico.png) no-repeat left -14px;
background-size: 150px 150px;
}
.table_basic .v_middle{
vertical-align: middle;
}
table .cellColor2{
font-weight: normal;
color: #403f41;
background: var(--bg-color-light2) none;
}
.table_basic th.cellColor3,
.table_basic td.cellColor3{
color: #333;
background-color: #f0f9d7;
}
.table_basic th.cellColor4,
.table_basic td.cellColor4{
color: #f0f2f5;
background-color: #2d4e30;
}
.table_basic th.cellColor5,
.table_basic td.cellColor5{
color: #333;
background-color: #cff0f7;
}
/* --- ページ内リンク --- */
.anchor_path{
display: flex;
overflow: hidden;
}
.anchor_path li{
margin: 0 5px 0 0;
font-size: 1.4rem;
font-weight: bold;
}
.anchor_path li a{
position: relative;
display: block;
padding: 15px 18px 15px 28px;
color: #777;
text-align: center;
text-decoration: none;
border: 1px solid #b1b1b1;
}
.anchor_path li a::before{
position: absolute;
top: 0;
bottom: 0;
left: 10px;
width: 0.9em;
height: 0.9em;
margin: auto 0;
content: ' ';
background-color: #333;
clip-path: polygon(5% 43%, 50% 86%, 94% 43%, 100% 49%, 50% 99%, 0 50%);
}
.anchor_path li a:hover{
color: var(--nikken-red);
border: 1px solid var(--nikken-red);
opacity: 0.8;
}
.anchor_path li a:hover::before{
background-color: var(--nikken-red);
}
/* guidance_cmn.css 内と重複 後で消す */
/* ページ内リンク */
.anchor-cont__list{
display: grid;
grid-template-columns: repeat(2, 1fr);
margin: 0 0 40px;
overflow: hidden;
text-align: center;
background: var(--bg-color-light2);
border-radius: 10px;
}
.anchor-cont__list li{
display: flex;
}
.anchor-cont__list a{
position: relative;
display: block;
display: flex;
align-items: center;
width: 100%;
padding: 10px 10px 10px 25px;
margin: 0 0 -1px;
font-size: 1.45rem;
line-height: 1.3;
text-align: left;
text-decoration: none;
border-right: 1px solid var(--line-light);
border-bottom: 1px solid var(--line-light);
transition: all 0.2s ease;
}
.anchor-cont__list a:hover{
opacity: 0.5;
}
.anchor-cont__list li:nth-child(2n) a{
border-right: none;
}
.anchor-cont__list a::before{
position: absolute;
top: -0.5em;
bottom: 0;
left: 8px;
height: 0.6em;
aspect-ratio: 1 / 1;
margin: auto 0;
content: ' ';
background-color: #06c;
clip-path: polygon(50% 87%, 95% 46%, 100% 53%, 50% 100%, 0% 50%, 6% 43%);
}
.main-cont__header{
margin: 0 0 50px;
}
.main-cont__ttl-lv1{
margin: 30px 0;
font-family: 'Noto Sans JP', sans-serif;
font-size: 2.4rem;
font-weight: 700;
text-align: center;
}
.main-cont__ttl-lv2{
position: relative;
margin: 0 0 35px;
font-family: 'Noto Sans JP', sans-serif;
font-size: 1.8rem;
font-weight: 700;
color: var(--nikken-red);
}
.main-cont__ttl-lv2::after{
position: absolute;
bottom: -10px;
left: 0;
width: 50px;
height: 2px;
content: ' ';
background-color: var(--nikken-red);
}
.main-cont__ttl-lv3{
padding: 15px;
margin: -40px 15px 30px;
font-size: 1.8rem;
color: #fff;
text-align: center;
background-color: var(--nikken-red);
}
.simple_section .simple_section__lead{
font-size: 1.8rem;
text-align: center;
}
.main-cont__img{
display: flex;
justify-content: center;
text-align: center;
}
.main-cont__img img{
height: 100%;
object-fit: cover;
}
.main-cont__img video{
width: 100%;
height: 100%;
object-fit: cover;
}
.main-cont__movie{
position: relative;
}
.main-cont__info{
padding: 30px 15px;
}
.main-cont__info li{
margin: 0 0 10px;
font-size: 1.5rem;
}
.main-cont__info p{
margin-bottom: 0.7em;
font-size: 1.7rem;
line-height: 1.8;
}
.main-cont__info p:last-child{
margin-bottom: 0;
}
.point-cont{
padding: 20px 0 10px;
margin: 0 0 50px;
background-color: #efefef;
}
/* ポイント */
.point__list{
margin: 40px 15px 20px;
}
.point__list li{
padding: 20px;
margin: 0 0 25px;
background-color: #fff;
}
.point-ttl{
margin: 0 0 5px;
font-size: 2.0rem;
font-weight: 700;
color: var(--nikken-red);
text-align: center;
}
.point-ttl--lv2{
margin: 0 0 20px;
font-size: 1.5rem;
font-weight: normal;
color: var(--nikken-red);
text-align: center;
}
.column-2__wrap{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 30px 0;
}
.column-2__wrap > div{
width: 45%;
}
.column-2__wrap > div img{
max-width: 100%;
height: auto;
margin: 0 0 10px;
}
.base-frame{
margin: 0 15px;
}
.base-frame .base-frame{
margin: 0 auto;
}
/* コース一覧テーブル */
.course_list_table{
width: 100%;
margin: 10px 0 0;
border-spacing: 0;
border-collapse: separate;
background-color: #fff;
border: none;
}
.course_list_table tr{
border: 1px solid var(--line-dark);
}
.course_list_table tr th{
padding: 15px 0 ;
font-family: 'Noto Sans JP', sans-serif;
color: #fff;
text-align: center;
background-color: var(--bg-color-dark2);
}
.course_list_table tr td{
box-sizing: border-box;
min-height: 1em;
padding: 10px 0 10px 5.6em;
text-align: left;
background-color: #fafafb;
border-top: 1px solid var(--line-light);
}
.course_list_table tr td:empty::after{
color: #ccc;
content: '―';
}
.course_list_table tr > *:nth-child(1){
padding: 15px;
background-color: var(--bg-color-light2);
border: none;
border-bottom: 1px solid var(--line-light);
}
.course_list_table tr > th:nth-child(1){
background-color: var(--bg-color-dark2);
}
.course_list_table tr > *:nth-child(2){
border: none;
}
.simple-section p.course_list_table_open,
.course_list_table_open{
position: relative;
display: block;
width: 66px;
height: 28px;
margin-bottom: 0;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
background-color: var(--bg-color-light);
}
.course_list_table_open::before{
position: absolute;
inset: 0;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
color: #333;
text-align: center;
text-indent: 0;
content: '開く＋';
}
.course_list_table_open:hover{
opacity: 0.7;
}
.course_list_table_open.open::before{
content: '閉じる-';
}
.course_list_table td.table_outline .course_text{
padding: 0;
margin: 0;
}
#index_course .course_list_table td.table_outline .course_text{
display: block;
}
#index_course .course_list_table_open{
display: none;
}
/* course_list_table_simple */
.course_list_table.course_list_table_simple tr td{
padding: 10px;
margin: 0;
}
/* おすすめコース */
.list_recommend{
margin: 0 0 5px;
}
#index_course{
padding: 10px 0 20px;
overflow: hidden;
}
.list_recommend{
position: relative;
width: 90%;
padding: 5px 10px;
margin: 0 auto 10px;
font-family: 'Noto Sans JP', sans-serif;
font-size: 1.4rem;
line-height: 1.5;
color: #4a4a4a;
text-align: center;
background-color: #fff;
border: 1px solid #292a2b;
border-radius: 5px;
}
.list_recommend::before,
.list_recommend::after{
position: absolute;
top: 100%;
left: 50%;
content: ' ';
transform: translateX(-50%);
}
.list_recommend::before{
border: solid 7px transparent;
border-top: solid 7px #292a2b;
}
.list_recommend::after{
margin-top: -5px;
border: solid 11px transparent;
border-top: solid 11px #fff;
}
.list_target{
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700;
color: var(--nikken-red);
}
#content_header .list_target{
position: absolute;
top: 0;
left: 0;
display: inline-block;
padding: 2px 10px 4px;
margin: 0;
font-size: 1.3rem;
font-weight: bold;
color: #fff;
color: var(--nikken-red);
background-color: #fff;
}
#content_header .list_note{
display: flex;
justify-content: center;
margin: 10px 0 0;
}
#content_header .list_note li{
padding: 0;
margin: 0 3px;
font-size: 1.2rem;
border: none;
}
.table_price ul li{
margin: 0 0 3px;
}
.table_date2 dl dt,
.table_price span.price_type{
position: relative;
display: block;
padding: 0 10px 3px;
margin: 0 0 3px;
font-size: 1.2rem;
font-weight: bold;
line-height: 1.4;
}
.table_date2 dl dt::before,
.table_price span.price_type::before{
position: absolute;
right: 0;
bottom: 0;
left: 0;
width: 6em;
height: 1px;
margin: 0 auto;
content: ' ';
border-top: 1px solid #ccc;
}
.course_list_table .course_name,
.course_list_table h3{
margin: 5px 0 0;
font-size: 1.9rem;
}
.course_list_table .course_name a,
.course_list_table h3 a{
position: relative;
display: block;
padding: 0 0 0 25px;
color: #333;
transition: all 0.2s ease;
}
.course_list_table .course_name a::before,
.course_list_table h3 a::before{
position: absolute;
top: 0.25em;
left: 0;
display: block;
width: 20px;
height: 20px;
margin: auto 0;
content: ' ';
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: left top;
background-size: 20px 20px;
border-radius: 50%;
}
.course_list_table .course_name a:hover,
.course_list_table h3 a:hover{
color: var(--nikken-red);
text-decoration: none;
opacity: 0.8;
}
.course_list_table .course_name a:hover::before,
.course_list_table h3 a:hover::before{
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: left top;
background-size: 20px 20px;
}
.course_list_table .recommend_course td{
background-color: #fff;
}
.course_list_table .recommend_course td:nth-child(1){
background-color: #f9fafb;
}
.course_list_table h4,
.course_list_table .course_lead{
margin: 0 0 5px;
font-size: 1.5rem;
color: var(--nikken-red);
}
.cellstrongColor1{
background: #ffa none;
}
.list_note li{
padding: 0;
margin: 0 3px;
font-size: 1.2rem;
border: none;
}
.list_note li span{
display: inline-block;
padding: 5px 8px;
font-size: 1.1rem;
color: #666;
background-color: #fff;
}
.list_note li span.tag_benefits{
color: var(--nikken-red);
}
/* ===========================================
MediaQueries
=========================================== */
/* スマホ----------------------------- */
@media screen and (width <= 767px){
html,
body{
width: 100%;
min-width: 0;
}
html{
font-size: 62.5%;
}
body{
font-family: sans-serif;
text-size-adjust: 100%;
}
.wrap,
.wrap_w{
position: relative;
width: 100%;
overflow: hidden;
}
.main img,
.index-slider__wrap img{
max-width: 100%;
height: auto;
}
.sp_only,
.br_sp{
display: inline-block;
}
.pc_only,
.br_pc{
display: none;
}
/* 講座一覧 */
.course_list_table tr{
display: flex;
flex-direction: column;
margin: 0 0 10px;
}
.course_list_table tr.tr_ttl{
display: none;
}
.course_list_table td{
position: relative;
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 0 10px;
border-right: none;
}
.course_list_table td.table_name{
display: block;
}
.course_list_table tr > *:nth-child(1){
margin: 0;
}
.course_list_table td dl{
display: grid;
flex: 1;
grid-template-columns: 5em 1fr;
}
.course_list_table td dl dt{
grid-column: 1 / 2;
padding: 0;
margin: 0;
font-size: 1.4rem;
line-height: 1.4;
vertical-align: middle;
text-align: left;
}
.course_list_table td dl dd{
grid-column: 2 / 3;
padding: 0;
margin: 0;
font-size: 1.4rem;
line-height: 1.4;
vertical-align: middle;
text-align: left;
}
.table_price ul li{
width: 100%;
font-size: 1.5rem;
text-align: left;
}
.table_price ul li > *{
display: inline;
}
.table_date2 dl dt::before,
.table_price ul li span.price_type::before{
content: none;
}
.table_price span.price_type{
display: inline-block;
padding: 0 10px;
margin: 0 5px 0 0;
font-size: 1.4rem;
text-align: left;
text-align: center;
border: 1px solid #ccc;
}
.course_list_table td::before{
position: absolute;
top: 10px;
bottom: 10px;
left: 0;
width: 5em;
font-size: 1.3rem;
font-weight: bold;
text-align: left;
border-right: 1px dotted #333;
}
.course_list_table td.table_date::before{
content: '開講日';
}
.course_list_table td.table_date2::before{
content: '期間';
}
.course_list_table td.table_price::before{
content: '受講料';
}
.course_list_table td.table_outline::before{
margin-left: 0;
content: '概要';
}
.course_list_table td.table_outline .course_text{
display: none;
}
.list_note li{
margin: 0;
}
.course_list_table tr td.table_date2{
min-height: 3em;
}
.course_list_table.course_list_table_simple td::before{
content: none;
}
.course_list_table.course_list_table_simple td.table_outline .course_text{
display: block;
}
.course_list_table.course_list_table_simple .toggle_btn{
display: none;
}
}
/* PC----------------------------- */
@media screen and (width >= 768px){
html{
font-size: 62.5%;
}
.sp_only,
.br_sp{
display: none;
}
.pc_only,
.br_pc{
display: inline-block;
}
/* ヘッダー内 */
.nav.open{
background-color: #fff;
}
.main-menu li,
.function-menu li,
.type-menu li{
margin: 0 0 5px;
}
.function-menu li{
margin: 0 3px;
}
.br_sp--menu{
display: none;
}
/* --- お知らせアイコン --- */
.news_list li{
display: flex;
flex-wrap: wrap;
padding: 10px 0;
}
.news_list li > span{
position: static;
width: 10em;
font-size: 1.4rem;
}
.news_list li a{
position: relative;
display: flex;
flex: 1;
align-items: center;
padding-left: 98px;
font-size: 1.4rem;
}
.news_list li a::before{
position: absolute;
top: 0;
left: 0;
display: block;
width: 90px;
height: 22px;
overflow: hidden;
font-size: 1.2rem;
line-height: 22px;
color: #fff;
text-align: center;
content: ' ';
background-color: var(--nikken-red_thin);
}
.ksk-logo img{
width: auto;
}
.detail_link a{
margin: 10px 0 0;
}
.course_index .content-nav2{
margin: 0;
}
.index .content-nav2{
margin-top: 0;
}
.content_wrap{
padding: 15px 10px 0;
}
#content_wrap{
width: 90%;
padding: 15px 0 0;
margin: 0 auto;
}
.content_lead{
width: 100%;
padding: 20px 0 40px;
margin: 0 auto;
font-size: 1.7rem;
line-height: 1.8;
text-align: center;
}
.lead_ttl{
margin: 0 0 15px;
font-size: 2.5rem;
}
#main_ttl h1{
height: 28vh;
min-height: 215px;
font-size: 4.4rem;
line-height: 1.5;
background: var(--nikken-red_dark) url(../img/bg_n.svg) no-repeat 103% center;
}
.btm-header #main_ttl h1{
font-size: 2.2rem;
background: var(--nikken-red_dark) url(../img/bg_n.svg) no-repeat right -1% center;
background-size: auto 160%;
}
.small-header #main_ttl h1{
height: 10vh;
min-height: 150px;
font-size: 4.0rem;
background: var(--nikken-red_dark) url(../img/bg_n.svg) no-repeat right -1% center;
background-size: auto 160%;
}
/* guidance_cmn.css 内と重複 */
/* ページ内リンク */
.anchor-cont__list{
display: block;
padding: 15px 15px 10px;
margin: 10px 0 40px;
border-radius: 30px;
}
.anchor-cont__list li{
display: inline;
width: auto;
}
.anchor-cont__list a{
display: inline-block;
width: auto;
padding: 0 8px 0 14px;
margin: 0 5px 8px;
font-size: 1.55rem;
text-align: center;
border: none;
border-bottom: 1px solid transparent;
}
.anchor-cont__list a:hover{
border-bottom: 1px solid #06c;
}
.anchor-cont__list a::before{
left: 0;
}
/* --- 見出し --- */
.ttl_lv1{
padding: 0 15px 30px;
margin: 80px 0 45px;
font-size: 2.4rem;
text-align: center;
}
.content_lead + * > .ttl_lv1:first-child,
#content_wrap > * > .ttl_lv1:first-child{
margin-top: 20px;
}
.ttl_lv2{
font-size: 2.0rem;
text-align: center;
}
.main-cont__ttl-lv2{
margin: 0 0 35px;
font-size: 2.2rem;
}
/* ポイント */
.point__list{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin: 50px 30px;
}
.point__list.point__list--item3{
grid-template-columns: repeat(3, 1fr);
}
.point__list li{
padding: 30px;
margin: 0;
background-color: #fff;
}
.point-ttl{
margin: 0 0 15px;
font-size: 2.4rem;
text-align: center;
}
.point__list li p{
font-size: 1.6rem;
}
.point-ttl--lv2{
margin: 0 0 20px;
font-size: 1.7rem;
}
/* 申込み */
.apply_btn a{
padding: 20px 20px 20px 5px;
font-size: 2.3rem;
}
/* コース一覧 */
.course_list_table{
border: 1px solid #f0f0f0;
border-bottom: 1px solid #666;
}
.simple-section p.course_list_table_open,
.course_list_table_open{
display: none;
}
.course_list_table tr td{
padding: 15px 10px;
border-top: 1px solid #666;
}
.course_list_table td.table_outline .course_text{
padding: 0;
margin: 0;
}
.course_list_table tr > td:nth-child(1){
width: 27%;
border-top: 1px solid #666;
border-right: 1px solid #f0f0f0;
}
.course_list_table tr > td:nth-child(2){
width: 12%;
text-align: center;
border-top: 1px solid #666;
border-right: 1px solid #f0f0f0;
}
.course_list_table tr > td:nth-child(3){
width: 12%;
text-align: center;
border-right: 1px solid #e8e8e8;
}
.course_list_table tr > td:nth-child(4){
width: 15%;
text-align: center;
border-right: 1px solid #e8e8e8;
}
.course_list_table tr > td:nth-child(5){
width: 25%;
}
.table_date2 dl dd{
padding: 0 0 3px;
font-size: 1.65rem;
}
.course_list_table tr > th,
.course_list_table tr > :nth-child(1),
.course_list_table tr > :nth-child(2){
border-right: 1px solid #476580;
}
.course_list_table tr > :nth-child(5){
border-right: none;
}
.course_list_table tr > *:nth-child(1){
border-bottom: none;
}
.table_date,
.table_date2,
.table_price{
vertical-align: middle;
}
.course_list_table.course_list_table_simple tr > td:nth-child(2){
width: auto;
text-align: left;
background-color: #fff;
}
/* dl-list */
.dl-list{
margin: 0 0 70px;
border-top: 1px solid var(--line-light);
}
.dl-list div{
display: flex;
flex-wrap: wrap;
align-items: stretch;
margin: 0;
border-bottom: 1px solid var(--line-light);
}
.dl-list div{
border-bottom: 1px solid var(--line-light);
}
.dl-list dt{
width: 350px;
padding: 15px;
font-size: 1.8rem;
text-align: left;
background-color: var(--bg-color-light2);
}
.dl-list dd{
flex: 1;
padding: 15px 40px;
font-size: 1.6rem;
}
}
@media screen and (width >= 1024px){
.header-cont{
width: 100%;
}
.header{
position: relative;
z-index: 10;
align-items: center;
width: 100%;
height: 140px;
padding: 50px 15px 0;
}
.logo{
display: flex;
align-items: center;
justify-content: center;
width: 14%;
max-width: 164px;
padding: 5px 0 0;
margin-right: 12px;
margin-left: 5px;
}
.logo a{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.logo a img{
margin-top: -12px;
}
.nav-cont{
flex: 1;
margin: 0;
}
.nav-cont .function-menu:first-child{
display: none;
}
.header-frame{
width: 100%;
height: 100%;
}
.header-frame.fixed{
position: relative;
}
.nav-switch{
display: none;
}
.nav{
position: static;
display: block;
width: 100%;
height: 100%;
padding: 0;
background-color: #fff;
opacity: 1;
}
.global-nav{
flex: 1;
padding: 0;
margin: 0;
background-color: transparent;
}
.menu-cont{
display: flex;
align-items: center;
justify-content: space-between;
}
.main-menu{
display: flex;
flex-wrap: wrap;
}
.main-menu a{
display: block;
padding: 10px 8px;
font-size: 1.55rem;
}
.main-menu a::before{
content: none;
}
.main-menu a span{
position: relative;
transition: all 0.1s ease;
}
.main-menu > li.current a span::after{
bottom: -1px;
border-top: 2px solid var(--nikken-red);
}
.main-menu__second-class{
position: fixed;
display: none;
padding: 15px;
background-color: #eee;
opacity: 0;
transition: opacity 0.2s ease;
}
.main-menu__second-class.open{
z-index: 1000;
display: block;
opacity: 1;
animation: open-fadeIn1 0.2s ease 0s forwards;
}
@keyframes open-fadeIn1{
0%{
display: none;
margin-top: -10px;
opacity: 0;
}
1%{
display: block;
margin-top: -10px;
opacity: 0;
}
100%{
display: block;
margin-top: 0;
opacity: 1;
}
}
.main-menu__second-class li a{
padding: 5px;
}
.main-menu__second-class li a{
color: #333;
}
.main-menu__second-class li.current a{
color: var(--nikken-red);
}
.main-menu__second-class li a:hover{
color: var(--nikken-red);
opacity: 0.8;
}
.submenu-cont{
position: absolute;
top: 0;
right: 0;
display: grid;
}
.function-menu,
.type-menu,
.another-menu{
display: flex;
align-items: center;
justify-content: center;
}
.function-menu{
align-items: stretch;
}
.function-menu a{
position: relative;
display: block;
width: 4em;
padding: 0;
font-size: 1.1rem;
color: #333;
text-align: center;
}
.function-menu a > span{
display: block;
padding: 0;
margin: 0 auto;
text-align: center;
}
.function-menu span svg{
z-index: 10;
display: block;
width: 24px;
margin: 0 auto;
fill: #333;
}
.function-menu a:hover .ico-color{
fill: var(--nikken-red);
}
li.cart{
display: flex;
gap: 8px;
}
li.cart .js_cart_button,
li.cart .js_logout{
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
width: 3.2em;
padding-left: 0;
margin: 0;
font-size: 1.1rem;
line-height: 1.2;
text-align: center;
}
li.cart .js_cart_button::before,
li.cart .js_logout::before{
position: static;
display: block;
height: 26px;
margin: 3px auto 2px;
}
.type-menu{
grid-row: 1 / 2;
grid-column: 1 / 2;
margin: 0;
}
.type-menu li{
margin: 5px 0 0;
}
.type-menu a{
position: relative;
display: inline-block;
padding: 0;
margin-right: 15px;
font-size: 1.2rem;
line-height: 1.4;
color: #333;
}
.type-menu li a{
font-size: 1.25rem;
}
.type-menu .outsite-ico{
display: inline-block;
padding: 0 0 1px 2px;
}
.another-menu{
grid-row: 1 / 2;
grid-column: 2 / 3;
padding: 0 5px;
margin: 0;
border-left: 1px solid #ccc;
}
.login-menu{
grid-row: 1 / 2;
grid-column: 3 / 4;
}
.another-menu span{
display: inline-block;
}
.another-menu img{
display: none;
}
.another-menu li{
margin-top: 5px;
}
.another-menu a{
position: relative;
display: flex;
align-items: center;
margin: 0;
font-size: 1.2rem;
color: #333;
}
.fan-site a{
padding: 0 8px;
margin: 0;
line-height: 30px;
border: none;
}
.another-menu li a::before{
display: block;
width: 5px;
height: 5px;
margin: 0 5px 0 0;
content: ' ';
border-top: 1px solid var(--nikken-red);
border-left: 1px solid var(--nikken-red);
transform: rotate(135deg);
}
.another-menu li a > span{
position: relative;
display: inline-block;
padding-right: 17px;
line-height: 1.3;
}
.another-menu li a > span::before{
position: absolute;
top: 4px;
right: 0;
width: 12px;
height: 11px;
margin: -2px 0 0 5px;
content: ' ';
background-image: url('data:image/svg+xml;utf8,');
}
.another-menu a:hover{
color: var(--nikken-red);
opacity: 0.6;
}
.another-menu li a:hover > span::before{
background-image: url('data:image/svg+xml;utf8,');
}
.main-menu a:hover > span,
.function-menu a:hover > span,
.function-menu a:hover svg,
.type-menu a:hover > span{
color: var(--nikken-red);
opacity: 0.8;
}
.main-menu a span::after,
.type-menu a > span::after,
.another-menu li a > span::after{
position: absolute;
bottom: -3px;
left: 0;
width: 100%;
height: 1px;
content: ' ';
border-top: 2px solid #fff;
transition: all 0.1s ease;
}
.type-menu a > span::after,
.another-menu li a > span::after{
border-top: 1px solid #fff;
}
.main-menu a:hover span::after,
.type-menu a:hover > span::after{
bottom: -1px;
border-top: 2px solid var(--nikken-red);
}
.type-menu a:hover > span::after,
.another-menu li a:hover > span::after{
border-top: 1px solid var(--nikken-red);
}
.type-menu li a::before{
margin-right: 5px;
}
.type-menu a > span{
position: relative;
transition: all 0.1s ease;
}
.type-menu a > span span{
display: none;
}
.type-menu a:hover .outsite-cls-1{
fill: var(--nikken-red);
}
.type-menu .type-menu_nikken-content.current a{
color: var(--nikken-red);
}
.type-menu .type-menu_nikken-content.current a > span::after{
bottom: -1px;
border-top: 1px solid var(--nikken-red);
}
.login-menu a{
margin: 0;
}
.nav-cont .function-menu li.function-menu__login{
display: none;
}
/* コンテンツ内のナビゲーション */
.content-nav{
position: relative;
top: 0;
left: 0;
display: none;
}
.content-nav__ttl h1{
padding-right: 10px;
margin-right: 10px;
font-family: 'Noto Sans JP', sans-serif;
font-size: 2.0rem;
font-weight: 700;
color: #fff;
border-right: 1px solid #fff;
}
.content-nav2{
display: flex;
align-items: center;
padding: 5px 50px;
background-color: var(--nikken-red_dark);
border: none;
}
.course_index .content-nav2{
margin: 0;
}
.content-nav__index-wrap .content-nav2{
width: 100%;
margin: 0;
}
.content-nav2 ul{
display: flex;
justify-content: center;
padding: 30px 0;
}
.content-nav2.fixed{
position: fixed;
top: 0;
z-index: 1000;
width: 100%;
}
.content-nav2.fixed ul{
padding: 10px 0;
}
.content-nav2 ul li{
width: auto;
}
.content-nav2 ul li a{
display: inline-block;
padding: 0 10px;
font-family: 'Noto Sans JP', sans-serif;
font-size: 1.5rem;
font-weight: 700;
color: #fff;
border: none;
}
.course_index .content-nav__ttl{
display: block;
}
.content-nav2 .content-nav__ttl h1{
padding: 5px 15px 5px 0;
font-size: 1.8rem;
color: #fff;
background-color: transparent;
border-top: none;
}
.content-nav2 .content-nav__ttl h1 a{
color: #fff;
}
.content-nav2 .content-nav__ttl h1 a:hover{
opacity: 0.8;
}
/* --- 本文部分 構造 main --- */
.main{
/* margin-top: 30px; */
z-index: 100;
background-color: #fff;
opacity: 0.3;
transition: all 0.3s ease-in;
}
.main.is-active{
opacity: 1;
}
.content_wrap{
display: flex;
width: 90%;
min-width: 970px;
max-width: 1300px;
padding: 50px 0;
margin: 0 auto ;
}
.main-cont{
box-sizing: border-box;
width: 100%;
margin: 0 auto ;
}
/* 1カラム時の基本の枠 */
.base-frame{
width: 90%;
min-width: 970px;
max-width: 1300px;
margin-right: auto;
margin-left: auto;
}
.content_wrap strong{
font-size: 1.8rem;
}
.content_wrap td p{
font-size: 1.5rem;
line-height: 1.6;
}
.simple_section__lead{
font-size: 1.6rem;
text-align: center;
}
/* --- 本文部分 構造 aside --- */
.aside-nav{
width: 240px;
}
.main_course_header p,
.basic-section p{
font-size: 1.5rem;
line-height: 1.8;
}
.fotter-nav__wrap{
padding: 15px;
}
.footer-nav__list{
justify-content: center;
}
.footer-nav__list a{
padding: 10px;
}
/* 問い合せ */
.consultation{
padding: 50px 0 0;
}
.consultation__ttllv1 span{
padding: 0 100px 20px;
}
.callcenter_cont{
display: flex;
align-items: center;
justify-content: center;
margin: 0 0 30px;
}
.consultation-pickup{
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 40px;
}
.consultation-pickup__box{
width: 40%;
margin: 0 15px;
}
.consultation-pickup__box a{
padding: 30px;
}
.consultation-pickup__ttl{
font-size: 2.5rem;
}
.consultation-pickup__ttl span{
display: inline-block;
padding-right: 5px;
}
.callcenter-tel{
font-size: 3.8rem;
}
.main-cont__header{
display: grid;
grid-template-rows: 30px 1fr 20px;
grid-template-columns: 1fr 35px 1fr;
margin: 0 0 50px;
}
.main-cont__ttl-lv1{
margin: 30px 0 50px;
font-size: 3.4rem;
text-align: center;
}
.main-cont__ttl-lv2{
font-size: 2.6rem;
}
.main-cont__img{
grid-row: 1 / 3;
grid-column: 1 / 3;
overflow: hidden;
}
.main-cont__info{
position: relative;
z-index: 10;
grid-row: 2 / 4;
grid-column: 2 / 4;
padding: 50px 0 50px 50px;
background-color: #fff;
}
.main-cont__header--noimg .main-cont__info{
padding: 0 50px;
margin: 0 0 60px;
}
.main-cont__ttl-lv3{
width: 700px;
padding: 20px;
margin: -40px auto 30px;
}
/* ポイント */
.point__list{
width: 90%;
min-width: 970px;
max-width: 1300px;
margin-right: auto;
margin-left: auto;
}
.column-2__wrap > div{
width: 48%;
}
.content-nav__cont{
padding: 50px;
margin: 70px auto;
}
.btm-content-nav__ttl--lv1{
padding-right: 15px;
margin-right: 15px;
}
.btm-content-nav__list{
align-items: center;
}
.btm-content-nav__list li{
display: inline-block;
margin-bottom: 8px;
}
.btm-content-nav__list .back{
width: 100%;
}
}
@media screen and (width >= 1300px){
.wrap{
position: relative;
}
main{
min-height: 100vh;
}
.header-cont{
width: 256px;
overflow-y: scroll;
}
.header{
position: fixed;
z-index: 1000;
display: block;
width: 256px;
height: 100%;
padding: 0;
overflow-y: auto;
border-right: 1px solid #e4e7ea;
}
.logo{
position: static;
width: 100%;
margin: 25px auto 5px;
text-align: center;
}
.logo img{
width: 100%;
height: auto;
}
.nav{
position: static;
display: block;
overflow: visible;
}
.menu-cont{
display: block;
margin: 0;
}
.menu-cont{
display: block;
margin: 0;
}
.submenu-cont{
position: relative;
display: block;
}
.main-menu{
position: static;
display: block;
}
.main-menu a{
display: block;
padding: 5px 0 5px 25px;
font-size: 1.7rem;
}
.main-menu > li{
position: relative;
}
.main-menu > li.current::before{
position: absolute;
inset: 0 0 0 auto;
width: 9px;
height: 16px;
margin: auto 0;
content: ' ';
background: url(../img/current.svg) no-repeat left top;
background-size: 9px 16px;
border: none;
}
.main-menu__second-class{
position: fixed;
left: 245px;
display: none;
/* top: 0; これをかかないでいるとなぜか親要素を基準にできる
bottom: 0; */
height: auto;
padding: 30px 0;
margin-top: -5em;
background-color: var(--bg-color-light2);
border-radius: 10px;
opacity: 0;
}
.main-menu__second-class.open{
left: 262px;
z-index: 5000;
display: flex;
align-items: center;
opacity: 1;
animation: open-fadeIn 0.2s ease 0s forwards;
}
@keyframes open-fadeIn{
0%{
left: 245px;
display: none;
opacity: 0;
}
1%{
left: 245px;
display: flex;
opacity: 0;
}
100%{
left: 262px;
display: flex;
opacity: 1;
}
}
.main-menu > li > .main-menu__second-class li{
text-align: left;
}
.main-menu > li > .main-menu__second-class li a{
padding: 5px 15px;
}
.function-menu a{
display: flex;
align-items: center;
width: 100%;
}
.function-menu a > span{
height: auto;
padding: 0 0 0 10px;
margin: 0;
}
li.cart{
display: block;
}
li.cart .js_cart_button,
li.cart .js_logout{
box-sizing: border-box;
display: block;
width: auto;
padding-left: 40px;
margin: 5px 25px;
font-size: 1.4rem;
text-align: left;
}
li.cart .js_cart_button::before,
li.cart .js_logout::before{
position: absolute;
margin: 0 auto;
}
li.cart .js_logout{
display: none;
}
li.cart .js_logout span{
padding: 0;
}
.func-br{
display: none;
}
.function-menu,
.type-menu,
.type-menu{
display: block;
}
.function-menu{
margin: 15px 0 0;
}
.function-menu li{
margin: 0 0 2px;
}
.function-menu a{
display: flex;
padding: 5px 25px;
font-size: 1.5rem;
color: #333;
text-align: left;
}
.function-menu a > span{
position: relative;
display: inline-block;
padding: 0 0 0 18px;
transition: all 0.1s ease;
}
li.cart .js_cart_button span{
padding: 0;
margin: 0 0 0 3px;
}
.function-menu span svg{
position: absolute;
top: 0;
left: 0;
display: inline-block;
width: 24px;
}
.header .outsite-ico{
margin-left: 5px;
}
.type-menu{
margin: 25px 14px 0;
border-top: 1px dotted #333;
}
.type-menu li{
padding: 6px 0;
margin: 0 0 5px;
border-bottom: 1px dotted #333;
}
.type-menu a > span span{
display: inline;
}
.type-menu li.kskpub{
margin-top: 0;
}
.type-menu a{
display: inline-block;
padding: 0;
margin: 0;
}
.type-menu li a{
font-size: 1.5rem;
}
.another-menu{
margin: 30px 0 50px;
}
.another-menu a{
display: block;
}
.another-menu a:hover{
opacity: 0.8;
}
.another-menu li a::before,
.another-menu li a::after{
content: none;
}
.another-menu{
padding: 0;
border-left: none;
gap: 6px;
}
.another-menu img{
display: inline-block;
}
.another-menu a{
padding: 0;
margin: 0;
}
.another-menu li a > span{
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
.fan-site a{
padding: 0 8px;
line-height: 30px;
border: 1px solid var(--nikken-red);
border-radius: 20px;
}
.login-menu{
position: static;
margin: 40px 15px 0;
}
.login-menu a{
display: block;
padding: 10px;
font-size: 15px;
color: #fff;
text-align: center;
}
/* --- 本文部分 構造 main --- */
.main{
z-index: -1;
margin: 0 0 0 256px;
overflow: hidden;
background-color: transparent;
opacity: 0.5;
}
}
/* ===========================================
印刷
=========================================== */
@media print{
html{
font-size: 61%;
}
#content_nav,
#header_ttl.fixed_ttl{
position: relative;
}
#global_nav_list li a{
height: 43px;
border-top: 2px solid #fff;
}
main img{
max-width: 100%;
height: auto;
}
.page_top{
display: none;
}
}