@charset  "Shift_JIS";

/* == フォントサイズ設定 ==================================== */

.graylink					{font-size:80%;line-height:140%;}
.graylink a:link				{color:#333333;}
.graylink a:visited			{color:#333333;}
.graylink a:hover				{color:#3366FF;}
.graylink a:active				{color:#3366FF;}


.graylink2					{font-size:90%;line-height:160%;}
.graylink2 a:link				{color:#333333;}
.graylink2 a:visited			{color:#333333;}
.graylink2 a:hover				{color:#3366FF;}
.graylink2 a:active				{color:#3366FF;}


.whitelink					{color:#FFFFFF;}
.whitelink a:link				{color:#FFFFFF;}
.whitelink a:visited			{color:#FFFFFF;}
.whitelink a:hover				{color:#FFFFFF;}
.whitelink a:active				{color:#FFFFFF;}
.jp1s {  font-size: 70%; line-height: 140%}
.jp1 {  font-size: 80%; line-height: 150%}
.jp2 {  font-size: 0.9em; line-height: 160%}
.jp3 {  font-size: 1em; line-height: 160%}
.jp32 {  font-size: 1em; line-height: 140%}
.jp3l {  font-size: 1em; line-height: 180%}

.jp33l {  font-size: 1em; line-height: 180%}
.jp4 {  font-size: 120%; line-height: 140%}
.jp4blue {  font-size: 120%; line-height: 140%; color: #537ECB; font-weight:bold}
.jp4whiteb {  font-size: 120%; line-height: 140%; color: #fff; font-weight:bold}
.jp2l { font-size: 85%; line-height: 160%}
.jp6 {
	font-size: 140%;
	line-height: 140%;}
.jp8 {
	font-size: 160%;
	line-height: 140%;
}
.t {line-height: 180%}

.jp10 {
	font-size: 200%;
	line-height: 150%;
}


.ad_tit {
	font-size: 160%;
	line-height: 140%;
	color: #002d9f;
	font-weight:bold;
}

.alart {   color: #FF0000;}
.alart2 {   color: #339966; font-weight:bold}
.orange {   color: #f46a34;}
.blue {   color: #264baa;}
.blue2 {   color: #537ECB;}
.blue3 {   color: #243c7a;}

.white {   color: #FFFFFF;}
.purple {   color: #561156;}
.green {   color: #6FBF34;}
.yellow{color: #FFFDB9}
.qa_q {
	font-size: 110%;
	line-height: 140%;
	color: #561156;
}
.orangebg {  background-color:#f46a34; }
.greenbg {  background-color:#6FBF34; }
.greenbg2 {  background-color:#227f31; }
.bluebg {  background-color:#264baa; }
.bluebg2 {  background-color:#537ECB; }
.yellowbg {  background-color:#FFFDB9; }
.purplebg {  background-color:#561156; }
.contact {
	font-size: 90%;
	line-height: 140%;
	padding-left: 6px;
	background-color: #EFEFEF;
}

img {border: 0;}
form{margin: 0;padding: 0;}


/* ================================================ */
/* == リンク色設定 ===================================== */
/* ================================================ */

a:link			{color: #3366FF;text-decoration: none;}
a:visited		{color: #3366FF;text-decoration: none;}
a:hover		{color: #FF6666;text-decoration: underline;}
a:active		{color: #3366FF;text-decoration: none;}





/* ================================================ */
/* == スタイル設定 ==================================== */
/* ================================================ */

.newxs{width: 30px;}
.newsm{width: 70px;}
.newsl{width: 120px;}

 /*Googleカスタム検索フォーム用 */
.gsc-control-cse * {    box-sizing: content-box;}
.gsc-input {    line-height: 1;}

  
/* Opacity #1 画像をマウスオーバーで光らせる*/
.ho	a {transition: 1.0s ;}
.ho	img { transition-duration: 0.5s;}
.ho	a:hover {opacity: 0.5 ;} 

 /* 字下げ1文字 */
.jisage{
 margin-left:1em;
 text-indent:-1em;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
}

body {
	margin:0;
	background-color: #FFFFFF;
	font-family:  "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",meiryo, "ＭＳ Ｐゴシック", "MS PGothic",helvetica, arial ;
	color:#333333;
	
}

body#index {
	margin:0;
	background-color: #FFFFFF;
	background-image:none;
	font-family:   "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",meiryo, "ＭＳ Ｐゴシック", "MS PGothic",helvetica, arial;
	color:#333333;
}

#nobg {
	margin:0;
	background-color: #FFFFFF;
	background-image:none;
	font-family:  "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",meiryo, "ＭＳ Ｐゴシック", "MS PGothic",helvetica, arial;
	color:#333333;
}


/*コピーライト*/
.copyright	{
	font-family: verdana, sans-serif;
	font-size: 70%;
	color: #036;
}



/* 20120422追記 */
p.pankuzu			{font-size:80%;text-decoration: none;}
.sidenavi .graylink	{font-size:12px;}


/* マージン／パディング */
.pd12			{padding:12px; }
.pd6 	{padding:6px; }
.mgl12 	{margin-left: 12px; }
.mgl24 	{margin-left: 12px; }
.mg6 {margin:6px; }
.mgt6 {margin-top:6px; }
.mgr12	{margin-right: 12px; }
.mgr24	{margin-right: 24px; }
.mgtb12	{margin-top: 12px; margin-bottom: 12px; }
.mg12 {margin:12px; }
.mg20 {margin: 3px 20px}

.block_blue a {
  width:200px;
    font-size:90%;
    font-weight:bold;
    text-decoration:none;
    display:block;
    text-align:center;
    padding:8px 0 10px;
    color:#fff;
    background-color:#2751C7;
    border-radius:5px;

}

/* link */
.block_blue a:link    {color:#fff; text-decoration:none;} 
.block_blue a:visited {color:#fff; text-decoration:none;}
.block_blue a:hover   {color:#fff; background:#2C81C7;} 
.block_blue a:active  {color:#fff; background:#2C81C7;} 

 /* 囲み */

.kakomi1 {
	display:block;
    background:#FFFFee;
	color:#333;
	border:1px solid #CCC;
	margin: 0 auto;
	padding: 20px;
	 border-radius: 12px;        /* CSS3草案 */  
    -webkit-border-radius: 12px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 12px;   /* Firefox用 */ 

}

.gyaku {
	transform: scaleX(-1);
}
 /* 下のボーダー点線 */
.dash_bottom{   
    border-bottom:1px dashed #ccc;  
    padding:.4em .4em  
} 

.dash_bottom_no{   
    border-bottom:1px dashed #FFF;  
    padding:.4em .4em  
} 
 /* 下のボーダー線 */
.line_bottom{   
    border-bottom:1px solid green;  
    padding:.4em .4em  
}

.line_bottom2{   
    border-bottom:1px solid #f46a34;  
    padding:.4em .4em  
} 


 /* 行間調整 */
sup,
sub {
    height: 0;
    line-height: 1;
    vertical-align: baseline;
    _vertical-align: bottom;
    position: relative;
}
 
sup {
    bottom: 1ex;
}
 
sub {
    top: .5ex;
}

 /* テーブル */
.table1{
  border-collapse: collapse; 
  border: 1px solid #ccc;
}

.table1 th{
	background-color:#EEEEEE;
  border-collapse: collapse; 
  border: 1px solid #ccc;

}

.table1 td{
  border-collapse: collapse; 
  border: 1px solid #BBB;
}

/* youtubeレスポンシブ*/
.video{
  position:relative;
  width:100%;
  padding-top:56.25%;
}
.video iframe{
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
}


/* 枠線の削除 */


.bx-wrapper{
  margin: 0 !important;
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  border: none !important;
  background: none !important;
}
.bx-wrapper img {
	  width: 100% !important;
  height: auto !important;
    display: block;
    margin: 0 auto;
}
.bx-viewport{
    width: 100%;
    margin: 0px auto;

}

/* �@メニューボタンのスタイル */
.menu {
  display: flex;
  position: relative;
z-index: 1000;

}
.menu .menu_list {
  width: 25%;

}
.menu .menu_list > a {
  border-left: 1px  solid #ddd;
border-top: 1px  solid #ddd;
	border-bottom: 1px  solid #ddd;
  display: block;
  padding: 10px;
  text-align: center;
  transition: .3s;
	
color: #333;
}
.menu .menu_list > a:hover {
  color: #fff;
  background: #264baa;
}

 
/* �Aメガメニューのスタイル */
.menu_contents {
  background: #fffaf4;
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
	padding: 20px 40px 40px 40px;
 
}
.menu_contents li {
  width: 100%;
	padding: 12px;
}
.menu_contents li a {
  color: #333;
}




#menu-btn-check {
    display: none;}


.menu-btn {
    position: fixed;
    top: 10px;
    right: 10px;
    display: flex;
    height: 50px;
    width: 50px;
    justify-content: center;
    align-items: center;
    z-index: 90;
    background-color: #264baa;
	border-radius: 10px;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
    content: '';
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background-color: #ffffff;
    position: absolute;
}
.menu-btn span:before {
    bottom: 8px;
}
.menu-btn span:after {
    top: 8px;
}


#menu-btn-check:checked ~ .menu-btn span {
    background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
}


.menu-content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 80;
    background-color: #264baa;
}
.menu-content ul {
    padding: 20px 10px 0;
}
.menu-content ul li {
    border-bottom: solid 1px #ffffff;
    list-style: none;
}
.menu-content ul li a {
    display: block;
    width: 100%;
    font-size: 15px;
    box-sizing: border-box;
    color:#ffffff;
    text-decoration: none;
    padding: 9px 15px 10px 0;
    position: relative;
}
.menu-content ul li a::before {
    content: "";
    width: 7px;
    height: 7px;
    border-top: solid 2px #ffffff;
    border-right: solid 2px #ffffff;
    transform: rotate(45deg);
    position: absolute;
    right: 11px;
    top: 16px;
}


.menu-content {
    width: 50%;
    height: 300px;
    position: fixed;
    top: 70px;
    left: 100%;/*leftの値を変更してメニューを画面外へ*/
    z-index: 80;
    background-color: #264baa;
    transition: all 0.5s;/*アニメーション設定*/
}

#menu-btn-check:checked ~ .menu-content {
    left: 50%;/*メニューを画面内へ*/
}





/*右メニュー*/

.right_links {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    font-size: .9em;
    justify-content: center;
    align-items: center;
    z-index: 80;
}


 /* 見出し */


.midashi_tit {
	padding: 0 0 .2em 0;
	border-bottom: 3px solid #3143ab;
	font-size: 2em;
	text-align: center;
	width: 400px;
	margin: 0 auto;
}



.midashi_a {
	padding: .5em;
	border: 1px solid #ccc;
	font-size: 1.7em;
	border-left: 6px solid #f46a34;

}
.midashi_a span {
	display: block;
	margin-bottom: .2em;
	font-weight:bold;
	
	font-size: .7em;
}

.midashi_b {
	padding: .25em 0 .5em .75em;
	border-left: 6px solid #3143ab;
	border-bottom: 1px solid #ccc;
}


.midashi_c {
	padding: .5em;
	border: 1px solid #ccc;
	font-size: 1.7em;
	border-left: 6px solid #3143ab;

}
.midashi_c span {
	display: block;
	margin-bottom: .2em;
	font-weight:bold;
	
	font-size: .7em;
}


.midashi_d {
	padding: .5em;
	border: 1px solid #ccc;
	font-size: 1.7em;
	border-left: 6px solid #7AC63A;
}
.midashi_d span {
	display: block;
	margin-bottom: .2em;
	font-weight:bold;
	font-size: .7em;
}



.midashi_e {
	padding: .5em;
	border: 1px solid #ccc;
	font-size: 1.7em;
	border-left: 6px solid #5599EE;
}
.midashi_e span {
	display: block;
	margin-bottom: .2em;
	font-weight:bold;
	font-size: .7em;
}



.midashi_f {
	padding: .3em;
	border: 1px solid #ccc;
	font-size: 1.7em;
	border-left: 6px solid #ac63d2;
    
}
.midashi_f span {
	display: block;
	margin-bottom: .2em;
	font-weight:bold;
	
	font-size: .7em;
}



.midashi_g {
	padding: .5em;
	border: 1px solid #ccc;
	font-size: 1.7em;
	border-left: 6px solid #cd9723;

}
.midashi_g span {
	display: block;
	margin-bottom: .2em;
	font-weight:bold;
	
	font-size: .7em;
}


 .selector01{
	background:#FCFCFC;
	border-left:7px double #7EBA03;
	padding:.4em .5em;
	width:100%;
	margin:0px;
	font-size:140%;
	border-bottom:1px solid #ccc;
}

.selector02{
	background:#FCFCFC;
	padding:.4em .5em;
	width:98%;
	margin:5px;
	font-size:140%;
	line-height: 1.5em;
	border:1px solid #ccc;
}


.selector02_1{
	background:#FCFCFC;
	padding:.4em .5em;
	width:98%;
	margin:5px;
	font-size:1em;
	line-height: 1.5em;
	border:1px solid #ccc;
}



.accordion {
margin: 5px auto;

}
.toggle {
display: none;
}
.option {
position: relative;
margin-bottom: 5px;
}
.title,
.content {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0);
transition: all 0.3s;
}
.title {
border: solid 1px #FAE29D;
padding: 0.7em;
display: block;
color: #333;
font-weight: bold;
font-size: 1.1em;	
border-radius: 6px;
background-color: #FEF5D5;
}
.title::after,
.title::before {
content: "";
position: absolute;
right: 1.25em;
top: 1.25em;
width: 2px;
height: 0.75em;
background-color: #999;
transition: all 0.3s;
}
.title::after {
transform: rotate(90deg);
}
.content {
max-height: 0;
overflow: hidden;

}
.content p {
margin: 0 0 10px  0;
padding: 0.5em 1em 1em;
font-size: 1em;
line-height: 1.5;
}
.toggle:checked + .title + .content {
max-height: 500px;
transition: all 1.5s;
}
.toggle:checked + .title::before {
transform: rotate(90deg) !important;
}



/* モーダルCSS */
.modalArea {
  display: none;
  position: relative;
  z-index: 10; /*サイトによってここの数値は調整 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modalBg {
  width: 100%;
  height: 100%;

}

.modalWrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
  width: 80%;
	height: 500px;
  max-width: 500px;
  padding: 10px 20px;
  background-color: #fff;
 border: solid 1px #B8B8B8;	
}

.closeModal {
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  cursor: pointer;
}


/* 以下ボタンスタイル */


#openModal {
 color: #4473FF;
  cursor: pointer;	
  transform:translate(-50%,-50%);
}


/* モーダルCSS */
.modalArea2 {
  display: none;
  position: relative;
  z-index: 10; /*サイトによってここの数値は調整 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modalBg2 {
  width: 100%;
  height: 100%;

}

.modalWrapper2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
  width: 80%;
	height: 500px;
  max-width: 500px;
  padding: 10px 20px;
  background-color: #fff;
 border: solid 1px #B8B8B8;	
}

.closeModal2 {
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  cursor: pointer;
}


/* 以下ボタンスタイル */


#openModal2 {
 color: #4473FF;
  cursor: pointer;	
  transform:translate(-50%,-50%);
}