@charset "utf-8";

/*----------------------------------------------------
	リセット　＆　基本設定
----------------------------------------------------*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, img {
	margin: 0;
	padding: 0;
}

address, caption, cite, code, dfn, em, strong, th, var {
	font-style: normal;
}

table {
	border-collapse: collapse; border-spacing: 0;
}

caption, th {
	text-align: left;
}

q:before, q:after {
	content: ''; 
}

object, embed {
	vertical-align: top;
}

hr, legend {
	display: none; 
}

h1, h2, h3, h4, h5, h6 { 
	font-size: 100%; 
}

img, abbr, acronym, fieldset { 	
	border: 0; 
}

ul,li { 
	list-style-type: none; 
}

a, p ,div, img {
display: block;
}

body,html{
position: relative;
width: 100%;
}

body {
	font-family: "游ゴシック",YuGothic,"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	color: #222;
	line-height: 1.75em;
	font-size: 62.5%;
  font-weight: 500;
	animation: fadeIn 2s ease 0s 1 normal;
	-webkit-animation: fadeIn 2s ease 0s 1 normal;
}
@media all and (-ms-high-contrast:none) {
	body {
		/*font-family: "メイリオ",Meiryo,"游ゴシック",YuGothic,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif;*/
		font-weight: normal;
		color: #353535;
	}
}

a:link{
	color: #333;
	text-decoration: none;
	line-height: 0;
}

a:hover{
	color: #333;
	text-decoration: underline;
}

a:visited{
	color: #333;
	text-decoration: none;
}

.blink a img{
color:#111;
-webkit-transition: opacity .8s ease-out;
-moz-transition: opacity .8s ease-out;
-ms-transition: opacity .8s ease-out;
transition: opacity .8s ease-out;
}

.blink a:hover img{
opacity: .4;
-webkit-opacity: .4;
-moz-opacity: .4;
filter: alpha(opacity=40);	/* IE lt 8 */
-ms-filter: "alpha(opacity=40)"; /* IE 8 */
}

table th{
padding: 8px 20px;
box-sizing: border-box;
}

table td{
padding: 11px 20px;
box-sizing: border-box;
}

.wf-sawarabimincho {
font-family: "Sawarabi Mincho";
font-weight: 900;
color: #0075c2;
text-shadow:2px 2px 0 #FFF, -2px -2px 0 #FFF,
              -2px 2px 0 #FFF, 2px -2px 0 #FFF,
              0px 2px 0 #FFF,  0 -2px 0 #FFF,
              -2px 0 0 #FFF, 2px 0 0 #FFF;
}

/*----------------------------------------------------
	positionなど
----------------------------------------------------*/
.position-r{
position: relative;
}

.inline{
display: inline !important;
}

/*----------------------------------------------------
	画像の透過
----------------------------------------------------*/
/* 画像が少し浮き出る透過 */
.box-pop-img {
  overflow: hidden;
}
.box-pop-img img {
  width: 100%;
  transition: transform .3s linear;
}
.box-pop-img a:hover img {
  -webkit-transform: scale(1.03);
  -moz-transform: scale(1.03);
  -o-transform: scale(1.03);
  -ms-transform: scale(1.03);
  transform: scale(1.03);
  opacity: 0.8;
}

/*----------------------------------------------------
	フロートなど
----------------------------------------------------*/
.fl{
	float:left !important;
}

.fr{
	float:right !important;
}

.cf::after {
    content : " ";
    display : block;
    clear : both;
}

.w100p{
display: inline-block;
width:100% !important;
height: auto !important;
}

.w100-100{
display: inline-block;
width: 100%;
height: 100%;
}

.w48p{
float: left;
width: 48%;
margin: 0 1%;
}

.h100px{
height: 100px;
}

.border-tb{
padding: 15px 0;
border-top: 1px solid #aaa;
border-bottom: 1px solid #aaa;
}


/*----------------------------------------------------
	マージン
----------------------------------------------------*/
.mb10{
margin-bottom: 10px;
}

.mb20{
margin-bottom: 20px;
}

.mb90{
margin-bottom: 90px !important;
}

.mt10{
margin-top: 10px !important;
}

.mt20{
margin-top: 20px !important;
}

.mt30{
margin-top: 30px !important;
}

.mt40{
margin-top: 40px !important;
}

.mt70{
margin-top: 70px !important;
}

.mt90{
margin-top: 90px !important;
}

.mb70{
margin-bottom: 70px !important;
}

.m-none{
margin: 0 !important;
}

.pa15{
padding: 15px;
}

.txt-right{
text-align: right;
}

.txt-center{
text-align: center;
}

/*----------------------------------------------------
	線・色
----------------------------------------------------*/
.border999{
border: 1px solid #999;
}

.bg-white{
background: #fff;
}

.bg-glay{
background: #f2f8fc;
}

.bg-lglay{
background: #f3f3f3;
}

.c-blue{
color: #1983c8;
}

.inline-blue{
display: inline-block;
color: blue !important;
line-height: 1.5em !important;
}


/*----------------------------------------------------
	フォントなど
----------------------------------------------------*/
.font-b{
	font-weight:bold;
}

.font-middle{
font-size: 1.2rem;
}

.font-large{
font-size: 1.4rem;
}

.ta-c{
text-align: center;
}


/*----------------------------------------------------
	画像
----------------------------------------------------*/
.ofi{
object-fit: cover;
font-family: 'object-fit: cover;'
}


/*----------------------------------------------------
	コンテンツ
----------------------------------------------------*/
/*----------ハンバーガーアイコン----------*/
.hamburger {
  position: absolute;
  display: block;
  width: 32px;
  height: 20px;
  top: 50%;
  right: 16px;
  margin-top: -10px;
  z-index: 99999;
  transition: all .4s;
  box-sizing: border-box;
}
.hamburger  span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #333;
  margin: 0 auto;
}
.hamburger  span:nth-of-type(1) {
  top: 0;
}
.hamburger  span:nth-of-type(2) {
  top: 9px;
}
.hamburger  span:nth-of-type(3) {
  bottom: 0;
}

.hamburger  span:nth-of-type(1) {
  -webkit-animation: menu-ber01 .75s forwards;
  animation: menu-ber01 .75s forwards;
}
.hamburger  span:nth-of-type(2) {
  transition: all .25s .25s;
  opacity: 1;
}
.hamburger  span:nth-of-type(3) {
  -webkit-animation: menu-ber02 .75s forwards;
  animation: menu-ber02 .75s forwards;
}

.active span:nth-of-type(1) {
  -webkit-animation: active-menu-ber01 .75s forwards;
  animation: active-menu-ber01 .75s forwards;
}
.active span:nth-of-type(2) {
  opacity: 0;
}
.active span:nth-of-type(3) {
  -webkit-animation: active-menu-ber03 .75s forwards;
  animation: active-menu-ber03 .75s forwards;
}

@-webkit-keyframes menu-ber01 {
  0% {
    -webkit-transform: translateY(8px) rotate(45deg);
  }
  50% {
    -webkit-transform: translateY(8px) rotate(0);
  }
  100% {
    -webkit-transform: translateY(0) rotate(0);
  }
}


@keyframes menu-ber01 {
  0% {
    transform: translateY(8px) rotate(45deg);
  }
  50% {
    transform: translateY(8px) rotate(0);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}


@-webkit-keyframes menu-ber02 {
  0% {
    -webkit-transform: translateY(-8px) rotate(-45deg);
  }
  50% {
    -webkit-transform: translateY(-8px) rotate(0);
  }
  100% {
    -webkit-transform: translateY(0) rotate(0);
  }
}


@keyframes menu-ber02 {
  0% {
    transform: translateY(-8px) rotate(-45deg);
  }
  50% {
    transform: translateY(-8px) rotate(0);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}


@-webkit-keyframes active-menu-ber01 {
  0% {
    -webkit-transform: translateY(0) rotate(0);
  }
  50% {
    -webkit-transform: translateY(10px) rotate(0);
  }
  100% {
    -webkit-transform: translateY(10px) rotate(45deg);
  }
}


@keyframes active-menu-ber01 {
  0% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(10px) rotate(0);
  }
  100% {
    transform: translateY(10px) rotate(45deg);
  }
}


@-webkit-keyframes active-menu-ber03 {
  0% {
    -webkit-transform: translateY(0) rotate(0);
  }
  50% {
    -webkit-transform: translateY(-8px) rotate(0);
  }
  100% {
    -webkit-transform: translateY(-8px) rotate(-45deg);
  }
}


@keyframes active-menu-ber03 {
  0% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-8px) rotate(0);
  }
  100% {
    transform: translateY(-8px) rotate(-45deg);
  }
}

@keyframes fadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}


/* アコーディオン */
#panel {
  width: 100%px;
}
 
#panel > dt{
  position: relative;
  border-bottom: solid 1px #4c9ed4;
  background-color: #fff;
  box-sizing: border-box;
  color: #004673;
  cursor: pointer;
  padding: 22px 20px;
  font-weight: bold;
  line-height: 1em;
}

#panel > dt a{
display: block;
/*padding: 8px 0 7px 0;*/
}

#panel > dd {
  margin: 0;
  padding: 0;
}

.dd-none{
height: 0;
border: none !important;
}

#panel ul{
width: 100%;
padding: 7px 20px;
background: #f2f8fc;
box-sizing: border-box;
}

#panel li {
width: 100%;
padding: 0;
border-bottom: 1px dotted #004673;
background: #f2f8fc;
}

#panel span{
position: absolute;
right: 20px;
}

#panel dd a,#panel a:hover,#panel a:visited{
color: #fff;
text-decoration: none;
}


#panel dd li a,#panel dd a:hover,#panel dd a:visited{
padding: 19px 0;
color: #004673;
text-decoration: none;
}

#panel dt li a,#panel dt a:hover,#panel dt a:visited{
padding: 19px 0;
color: #004673;
text-decoration: none;
}

.dt-box{
  position: relative;
  border-bottom: solid 1px #4c9ed4;
  background-color: #fff;
  box-sizing: border-box;
  color: #004673;
  cursor: pointer;
  padding: 0 20px !important;
  font-weight: bold;
  line-height: 1em;
}

.dt-a:link,
.dt-a:hover,
.dt-a:visited{
display: block !important;
width: auto;
height: auto !important;
padding: 22px 0 !important;
line-height: 1em;
}

.sub-box{
display: inline-block;
width: 100%;
margin-top: 28px;
}

.sub-sub-box{
display: inline-block;
width: 100%;
margin-top: 35px;
}

.sub-box p{
padding: 7px 0 4px;
color: #222;
font-size: 0.9rem;
font-weight: bold;
text-align: center;
}

.sub-sub{
display: block;
width: 66%;
margin: 0 17% 12px;
padding: 11px 0 7px;
border: 2px solid #66acda;
border-radius: 4px;
box-sizing: border-box;
font-size: 0.95rem;
font-weight: bold;
text-align: center;
line-height: 1.45em !important;
}

.sub-sub-sub-box{
display: flex;
justify-content: space-between;
width: 66%;
margin: 0 17% 0;
}

.sub-sub-sub{
display: inline-block;
width: 48%;
margin: 0;
padding: 12px 0 7px;
border: 2px solid #66acda;
border-radius: 4px;
box-sizing: border-box;
font-size: 0.95rem;
font-weight: bold;
text-align: center;
line-height: 1.45em !important;
}

.sub-sub-sub:hover,
.sub-sub:hover{
text-decoration: none;
}

.rotate{
transform: rotate(90deg);
}

.flex-start{
align-items: flex-start;
}

.space-between{
justify-content: space-between !important;
}

.space-around{
justify-content: space-around !important;
}

.top-border{
width: 100%;
margin-bottom: 9px;
padding-bottom: 4px;
border-bottom: 2px solid #4c9ed4;
line-height: 1;
}

.cap{
width: 100%;
font-size: 0.975rem;
font-weight: bold;
text-align: center;
}