@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;
}
@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;
}
}

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

.line {
position: relative;
display: inline-block;
text-decoration: none;
}
.line::after {
position: absolute;
bottom: -4px;
left: 0;
content: '';
width: 100%;
height: 1px;
background: #333;
transform: scale(0, 1);
transform-origin: center top;
transition: transform .3s;
}
.line:hover::after {
  transform: scale(1, 1);
}

.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: 12px 20px;
box-sizing: border-box;
}

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


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

.inline{
display: inline-block;
}

.inline{
display: inline !important;
}

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

/*----------------------------------------------------
	width
----------------------------------------------------*/
.w-auto {
  width: auto !important;
}

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

.fr{
	float:right !important;
}

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

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

.w90p{
width:90% !important;
margin: 0 5%;
}

.w80p{
width:80% !important;
margin: 0 10%;
}

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

.w80p-c{
width: 80%;
margin: 0 10%;
}

.w35p{
width: 35%;
}

.w50p{
width: 50%;
margin: 0 25%;
}

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

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


/*----------------------------------------------------
	Margin,Padding関連
----------------------------------------------------*/
.m-none{
margin: 0 !important;
}

.m-center {
  margin: 0 auto;
}

.mb20{
margin-bottom: 20px;
}

.mt10{
margin-top: 10px;
}

.mt20{
margin-top: 20px;
}

.mt30{
margin-top: 30px;
}

.mt40{
margin-top: 40px;
}

.mt70{
margin-top: 70px;
}

.mb10{
margin-bottom: 10px;
}

.mb30{
margin-bottom: 30px;
}

.mb20{
margin-bottom: 20px;
}

.mb40{
margin-bottom: 40px;
}

.mb50{
margin-bottom: 50px;
}

.mb70{
margin-bottom: 70px;
}

.mt70-b70{
margin: 70px 0;
}

.pa-5{
padding: 5px;
}

.pt30-b50{
padding: 30px 0 50px;
}

.pt80-b50{
padding: 80px 0 50px;
}

.pt60-b60{
padding: 60px 0;
}

.pt60-b0{
padding: 60px 0 0 0;
}

section{
margin-top: 70px;
}

.indent{
display: inline-block;
padding-left:1em;
text-indent:-1em;
}

.p20-border{
width: 100%;
padding: 18px 25px;
border: 1px solid #c9ad6b;
box-sizing: border-box;
}

.p-m20 p{
margin-bottom: 20px;
}

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

.border-blue{
border: 1px solid #67b7ec;
}

.border-b-blue{
border-bottom: 1px dotted #67b7ec;
}

.bg-white{
background: #fff;
}

.blue,.icon-aa{
color: #007acb !important;
}

.white{
color: #fff;
}

.l-blue{
color: #349fe5;
}

.ll-blue{
color: #7ac3f2;
}

.bg-blue{
background: #e5f3fc;
}

.bg-glay{
background: #f6f3ea;
}

.pink{
background: #f23d60;
color: #fff;
}



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

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

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

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

.ta-l{
text-align: left;
}

.ta-r{
text-align: right;
}

.ta-c-i{
text-align: center !important;
}

.ta-l-i{
text-align: left !important;
}

.ta-r-i{
text-align: right !important;
}

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

.img-h250 img{
width: 100%;
height: 250px;
}

.img-h270 img{
width: 100%;
height: 270px;
}

/*----------------------------------------------------
	メニュー関連
----------------------------------------------------*/
/* ハンバーガー */
.navToggle {
display: block;
position: fixed;
right: 0;
top: 0;
width: 48px;
height: 50px;
cursor: pointer;
z-index: 20;
background: #007acb;
text-align: center;
}

.navToggle span {
display: block;
position: absolute;
width: 30px;
border-bottom: solid 3px #eee;
-webkit-transition: .35s ease-in-out;
-moz-transition: .35s ease-in-out;
transition: .35s ease-in-out;
left: 9px;
}

.navToggle span:nth-child(1) {
top: 9px;
}

.navToggle span:nth-child(2) {
top: 18px;
}

.navToggle span:nth-child(3) {
top: 27px;
}

.navToggle span:nth-child(4) {
border: none;
color: #eee;
font-size: 9px;
font-weight: bold;
top: 31px;
}

.navToggle.active span:nth-child(1) {
top: 18px;
left: 9px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}

.navToggle.active span:nth-child(2),
.navToggle.active span:nth-child(3) {
top: 18px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}

/*----------ナビゲーション----------*/
#navigation{
position: fixed;
display: none;
width: 100%;
height: calc(100vh - 50px);
top: 50px;
left: 0;
background-color: #fff;
z-index: 10;
overflow: auto;
}
#navigation .navigation_inner{
display: table;
width: 100%;
height: auto;
}
#navigation .navigation_inner .navigation_menu{
display: table-cell;
vertical-align: middle;
}
#navigation .navigation_inner .navigation_menu{
float: left;
width: 90%;
height: auto;
margin: 16px 5% 0 5%;
padding: 15px 0;
background: #fff;
}
#navigation .navigation_inner .navigation_menu .navigation_item:first-child{
margin-top: 0;
}
#navigation .navigation_inner .navigation_menu .navigation_item a{
display: block;
position: relative;
text-decoration: none;
font-size: 2.4rem;
color: #333;
line-height: 40px;
text-align: center;
}


/* アコーディオン */
#panel {
width: 100%px;
}

#panel dt a:link,
#panel dt a:visited,
#panel dt a:hover{
color: #fff;
}

#panel > dt {
position: relative;
border-bottom: solid 1px #e5f3fc;
background-color: #4dabe9;
color: white;
cursor: pointer;
padding: 17px 20px;
font-weight: bold;
}

#panel > dd {
border: solid 3px #cce7f9;
margin: 0;
padding: 0;
}

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

#panel li {
width: 100%;
border-bottom: 1px dotted #67b7ec;
background: #fff;
}

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

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

#panel li a,#panel li a:hover,#panel li a:visited{
padding: 14px 0;
color: #222;
text-decoration: none;
}

#panel li a,#panel a:hover,#panel a:visited{
color: #222;
text-decoration: none;
}

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

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

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

.sub-sub{
display: block;
width: 70%;
margin: 0 15% 13px;
padding: 12px 0 12px;
border: 2px solid #4dabe9;
box-sizing: border-box;
font-size: 0.95rem;
font-weight: bold;
text-align: center;
}

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

.gnav{
display: flex;
justify-content: flex-end;
width: 910px;
height: 67px;
padding-right: 23px;
box-sizing: border-box;
}

.gnav >li > a{
display: block;
height: 90px;
padding: 0 23px 0 23px;
box-sizing: border-box;
color: #484848;
font-size: 1.115rem;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 95px;
}

.active{
color: #0187df !important;
}

.a-logo{
display: inline-block;
width: auto !important;
height: auto !important;
}

.gnav li a:hover{
color: #0187df;
text-decoration: none;
}

.gnav li {
  transition: all .3s ease-in-out;
}

.gnav > li:hover .megamenu {
  max-height: 9999px;
  opacity: 1;
}

/* mega */

.main-wrapper {
display: flex;
justify-content: center; 
width: 1010px;
margin: 0 auto;
}

.main-wrapper > li {
 margin-top: 0;
}

.hd-wrapper {
  padding: 20px 0 30px;
  overflow: hidden;
  position: relative;
}

.gnav-wrapper {
 display: inline-block;
 position: relative;
 z-index: 100;
 width: 100%;
 background: #fff;
  
}

.megamenu {
  position: absolute;
  z-index: 1;
  top: 90px;
  left: 0;
  width: 100%;
  height: 55px;
  max-height: 0;
  background: #66b5e9;
  opacity: 0;
  overflow: hidden;
  transition: all .375s ease-in;
  box-shadow:0 4px 8px rgba(0,0,0,0.1) inset;
}

.megamenu-inner li {
float: left;
  width: auto;
  padding: 0 18px;
  box-sizing: border-box;
}

.megamenu-inner .kamoku {
float: left;
  width: 60%;
  padding: 13px 10px 0 10px;
  box-sizing: border-box;
}

.megamenu-inner > li > a {
float: left;
width: 100%;
height: 40px;
margin-top: 2px;
padding-top: 18px;
background: none;
box-sizing: border-box;
color: #fff;
font-size: 0.95rem;
font-weight: bold;
text-align: center;
text-decoration: none;
}

.megamenu-inner > li > a:hover {
color: #fff;
}


.megamenu-inner-img {
float: left;
  margin: 0;
}

.megamenu-inner-text{
display: inline-block;
width: 100%;
height: 50px;
margin: 0;
padding: 0 0 0 0;
text-align: center;
line-height: 1em;
}

.mega-box{
float: left;
width: 100%;
height: 700px;
background: #000;
}


/* flexユーティリティ */
.justify-content-space-evenly {
  justify-content: space-evenly !important;
}

/* スクリーンリーダー用クラス */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}