@charset "utf-8";

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
common
font-family: kan412typos-std, sans-serif;
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ----------------------------------------------------
element base setting (common)
---------------------------------------------------- */
body {
  color: #333333;
  line-height: 1.8; 
  background: #fff;
}
a {
  color: #1e84b9; 
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
.clickable a, .clickable a:hover {
  color: #333;
}

/* ----------------------------------------------------
footer (common)
---------------------------------------------------- */
#footer { background: #eee;}

#pagetop {
  position: fixed;
  bottom: 4%;
  right: 3%;
}
#pagetop a {
  display:block;
  width: 50px;	height: 50px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background-color: #57a060;
  text-align:center;
  color: #fff;
  text-decoration:none;
  line-height: 50px;
  font-size: 128.6%	;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
pcSetting
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (min-width:768px) {
/* ----------------------------------------------------
common(pc)
---------------------------------------------------- */
/* hover */
a:hover {
  opacity: .8 !important; filter: alpha(opacity=80);
  text-decoration: none;
  -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
}
a img:hover {
  opacity: .8 !important; filter: alpha(opacity=80);
  -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
}
.clickable:hover {
  filter: alpha(opacity=80) !important;	opacity: .8 !important;
  -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
}
.clickable:hover {
  opacity: 0.7;
  -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
}
/* ----------------------------------------------------
header(pc)
---------------------------------------------------- */
#header {padding: 30px 4%; border-bottom: 1px solid #ccc; display: flex; display: -webkit-flex; justify-content: space-between;}
#header #hd-logo {font-size: 3rem; position: relative; padding-left: 60px; font-family: kan412typos-std, sans-serif; line-height: 1;}
#header #hd-logo a {color: #333;}
#header #hd-logo .lgHeader {position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
#header #menu-forum_menu {margin: 0; font-size: 0;}
#header #menu-forum_menu li {display: inline-block; font-size: 1.8rem; margin-left: 20px;}
#header #menu-forum_menu li a.current {color: #333;}

.pageTitle {text-align: center; font-size: 3rem; padding: 80px 4% 20px; font-weight: 600; position: relative;}
.pageTitle::after {content: ""; position: absolute;width: 60px; height: 5px; background: #394c90; left: 50%; bottom: 0; margin-left: -30px;}
#container {display: flex; display: -webkit-flex; justify-content: space-between; width: 92%; max-width: 1200px; margin: 60px auto 100px;}
#container .mainContent {width: 70%;}
#container .sideContent {width: 25%;}

#footer { background: #eee; padding: 30px 4%; text-align: center;}
#footer  #menu-forum_menu-1 {margin-bottom: 30px; font-size: 0;}
#footer  #menu-forum_menu-1 li {display: inline-block; font-size: 1.4rem; margin:  0 20px;}
#footer .copy {font-size: 1.2rem;}
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
tabletSetting
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 1200px) and (min-width: 768px) {
#header {padding: 2.5vw 4%; }
#header #hd-logo {font-size: 2.5vw; padding-left: 5vw; }
#header #hd-logo .lgHeader  {width: 3.75vw}
#header #menu-forum_menu li {font-size: 1.5vw; margin-left: 1.6vw;}

.pageTitle {font-size: 2.5vw; padding: 6.5vw 4% 1.6vw; }
.pageTitle::after {width: 5vw; height: 0.4vw; margin-left: -2.5vw;}
#container {margin: 5vw auto 8vw;}
#footer { padding: 2.5vw 4%;}
#footer  #menu-forum_menu-1 {margin-bottom: 2.5vw; }
#footer  #menu-forum_menu-1 li {font-size: 1.16vw; margin:  0 1.6vw;}
#footer .copy {font-size: 1vw;}

}


/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
spSetting
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 767px) {
	#mainContainer{ width: 100%; position: relative;padding-top: 16vw;}
/* ----------------------------------------------------
header(sp)
---------------------------------------------------- */
#header  {position: fixed; left: 0; top: 0; z-index: 99; width: 100%; height: 16vw; background: #fff; padding: 4vw; border-bottom: 1px solid #ccc;}
#header #hd-logo {font-size: 6vw;  position: relative; padding-left:9vw; font-family: kan412typos-std, sans-serif; line-height: 1;}
#header #hd-logo a {color: #333;}
#header #hd-logo .lgHeader {position: absolute; left: 0; top: 50%; transform: translateY(-35%); width: 7vw;}

#btnGlobal {position: absolute; width: 8vw; height: 6vw; right: 4%; top: 5vw; z-index: 120;}
#btnGlobal .btnLine { height: 3px; background: #013e7f; position: absolute; right:0; width: 100%;}
#btnGlobal .btnLine.btnLineT {  top: 0;}
#btnGlobal .btnLine.btnLineM { top: 50%; transform: translateY(-50%);}
#btnGlobal .btnLine.btnLineB { bottom: 0; }
#btnGlobal.active .btnLine {background: #fff;}
#btnGlobal.active .btnLine.btnLineT { display: none;}
#btnGlobal.active .btnLine.btnLineM { transform: translateY(0) rotate(45deg) ;}
#btnGlobal.active .btnLine.btnLineB { transform: rotate(-45deg); bottom:inherit; top: 50%;}
#btnGlobal .btnLine.btnLineM, #btnGlobal .btnLine.btnLineB {-moz-transition: all, ease-in-out, 0.3s;  -o-transition: all, ease-in-out, 0.3s;  -webkit-transition: all, ease-in-out, 0.3s; transition: all, ease-in-out, 0.3s;}
#btnGlobal .btnText { color: #013e7f; font-size: 1.5rem; margin: 0; position: absolute; right: 0; top: 0; line-height: 1;}
#spGrandMenu {background: rgba(0,0,0,0.8); width: 100%; height: 100%; position: fixed; z-index: 100;  left: 0; top: 0; display: none; overflow: auto; padding: 20vw 8%;}
#spGrandMenu a {color: #fff;}
#spGrandMenu .spWrapGM {display: flex; display: -webkit-flex; flex-direction: column-reverse; padding: 20vw 8% 10vw;}
#spGrandMenu #menu-forum_menu li { font-size: 4.8vw; border-bottom: 1px dotted #888; line-height: 1;}
#spGrandMenu #menu-forum_menu li a {display:  block; padding: 4vw 0; position: relative;}
#spGrandMenu #menu-forum_menu li a::after {content:""; position: absolute; right: 2vw; top: 50%; width: 2vw; height: 2vw; border-top:1px solid #fff; border-right: 1px solid #fff; transform:  rotate(45deg) translateX(-50%);}
#spGrandMenu #menu-forum_menu li.btn-navChild a::after { transform:  rotate(135deg);}
#spGrandMenu #menu-forum_menu li.btn-navChild .navChild {display: none;}
#spGrandMenu #menu-forum_menu li.btn-navChild .navChild  li {border-bottom: none; font-size: 3.7vw; padding-left: 3.7vw;}
#spGrandMenu #menu-forum_menu li.btn-navChild .navChild a::after {transform:  rotate(45deg) ;}

.pageTitle {text-align: center; margin:  5vw auto; width: 92%; font-weight: 600; font-size: 5vw; position: relative; padding-bottom: 3vw;}
.pageTitle::after {content: ""; position: absolute;width: 8vw; height: 0.6vw; background: #394c90; left: 50%; bottom: 0; margin-left: -4vw;}
#container {margin: 5vw auto;}
#container .mainContent {padding:  0 4% 8vw;}
#container .sideContent {border-top: 1px solid #ccc;}

/* ----------------------------------------------------
footer(sp)
---------------------------------------------------- */
#footer {padding: 4%; font-size: 3.2vw;}
#footer ul {margin-bottom: 4vw;}
#footer .copy {text-align: center; font-size: 2.8vw;}
#pagetop {bottom: 18vw;}


}