@charset "UTF-8";
/* CSS Document */

:root {
    --color1: #2e3192;
    --color2: #0071bc;
}


body {
	font-family:  "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "Helvetica Neue", HelveticaNeue, Helvetica, Arial, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	line-height: 1.5;
	font-size: 16px;
    
    min-height: 100vh;
    position: relative;/*←相対位置*/
    padding-bottom: 43px;/*←footerの高さ*/
    box-sizing: border-box;/*←全て含めてmin-height:100vhに*/
}
@font-face { font-family: "Yu Gothic M"; src: local("Yu Gothic Medium"); }
@font-face { font-family: "Yu Gothic M"; src: local("Yu Gothic Bold"); font-weight: bold; 
}

p {margin-bottom: 1em;}
 .sp_only { display: none;}


.bold {font-weight: bold;}
.align-left { text-align: left; }
.align-center { text-align: center; }
.align-right { text-align: right; }
.f-left {float: left;}
.f-right {float: right;}

.clear {
    display: block;
    content: "";
    clear: both;
}
.red {
    color: #CB0003;
}
.att,
.list_att li{
	padding-left: 1em;
	text-indent: -1em;
	font-feature-settings :normal;
}
img {max-width: 100%;}
small { font-size: 0.85em; }
strong { font-weight: bold; }

a {outline: none;}

.youtube {
  position:relative;
  width:100%;
  padding-top:56.25%;
}
.youtube  iframe{
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
}

.flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.flex2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.col-10 { width: 7.5%; }
.col-20 { width: 17.5%; }
.col-25 { width: 23.5%; }
.col-30 { width: 27.5%; }
.col-33 { width: 30.5%; }
.col-40 { width: 37.5%; }
.col-45 { width: 42.5%; }
.col-50 { width: 47.5%; }
.col-60 { width: 57.5%; }
.col-70 { width: 67.5%; }
.col-80 { width: 77.5%; }
.col-90 { width:87.5%; }
.col-100 { width:100%; }


/*グローバルナビ*/



nav.spNav { display: none; }
#g_nav ul {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
#g_nav ul li {
     text-align: left;
    position: relative;
    
}
#g_nav ul li a {
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    font-size: 1.1rem;
    margin: 0 10px;
    text-align: left;
}
#g_nav ul li a:hover {
    color: #84D8FF;
}

#g_nav ul li ul {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	padding: 0;
	z-index: 99999;
	display: block;
}

#g_nav ul li ul li {
	width: 100%;
	display: block;
	padding: 0;
	overflow: hidden;
	max-height: 0;
	transition: 0.3s;
	opacity: 0;
}

#g_nav ul li:hover ul li {
	max-height: 6em;
	overflow:visible; 
	background: rgba(0,0,0,0.70);
	
	border-top: 1px solid rgba(255,255,255,0.50);
	opacity: 1;
    
   
}
#g_nav ul li ul li a {
    padding: 5px 0 ;
    display: inline-block;
    font-size: 0.9em;
}



/*　フッター　*/
footer {
    text-align: center;
    border-top: 1px solid #ccc;
    background-color: #555;
    color: #FFFFFF;
    padding: 10px;
    box-sizing: border-box;
     position: absolute;/*←絶対位置*/
    bottom: 0; /*下に固定*/
    width: 100%;
}
footer p {
    margin: 0;
}
/*　メイン　*/
.inner {
    width: 95%;
    max-width: 1280px;
    margin: 0 auto;
}


/* スマホ */
@media all and (max-width:764px){
    .sp_only { display: block;}
    .pc_only {display: none;}
    
    /*----------　スマホメニュー --------------*/
/*ナビメニューのスタイルを指定*/
nav.spNav {
	z-index: 2; /*重ね順を変更*/
	background: #fff;/*背景を白にする*/
	color: #000; /*文字色を黒にする*/
	text-align: center; /*テキストを中央揃え*/
	width: 100%; /*全幅表示*/
	transition: all 0.6s; /*アニメーションの時間を指定*/
	display: block;
	max-height: 0;
	overflow: hidden;
}

nav.spNav ul{
	background: #fff; 
	width: 100%;
	margin: 0 auto;
	padding: 0;
}

nav.spNav ul li{
	list-style-type: none;
	padding: 0;
	width: 100%;
	border-top: 1px solid #bbb;
}
nav.spNav ul li:last-child {
	border-bottom: 1px solid #bbb;
}


nav.spNav ul li a {
	display: block;
	color: #000;
	text-decoration: none;
	padding: 10px 0;
}

/*トグルボタンが押されたときに付与するクラス*/
nav.spNav.active{
	max-height: 500px;
}

/*トグルボタンのスタイルを指定*/
.Toggle {
	display: block;
	width: 42px;
	height: 42px;
	cursor: pointer;
	z-index: 3;
	border: 1px solid #999;
	background-color:  #fff;
	border-radius: 5px;
	position: relative;
	float: right;
	margin: 10px;
}
 
.Toggle span {
    display: block;
    position: absolute;
    width: 30px;
    border-bottom: solid 3px #000;
    -webkit-transition: .35s ease-in-out;	/*変化の速度を指定*/
    -moz-transition: .35s ease-in-out;		/*変化の速度を指定*/
    transition: .35s ease-in-out;			/*変化の速度を指定*/
    left: 6px;
}
 
.Toggle span:nth-child(1) {
    top: 9px;
}
 
.Toggle span:nth-child(2) {
    top: 18px;
}
 
.Toggle span:nth-child(3) {
    top: 27px;
}
 
/* 最初のspanをマイナス45度に */
.Toggle.active span:nth-child(1) {
    top: 18px;
    left: 6px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
 
/* 2番目と3番目のspanを45度に */
.Toggle.active span:nth-child(2),
.Toggle.active span:nth-child(3) {
    top: 18px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}
    /**/
    
    .flex [class^="col-"] {
		width: 100%;
		margin: 0 auto 30px;
	}

}