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

/***************************************

			Ｆacebook用

****************************************/

@media screen and (max-width: 640px) {

/* Facebookプラグイン用 */

.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe[style]{
    
}	

}

/***************************************

			スマートフォン用

****************************************/


/***************************************

				構造

****************************************/
	
	.box {
		width: 100%;
		display: block;
		background-color: #fff;
		padding: 20px;
		box-sizing: border-box;
	}
	
	.box1-1 {
		width: 100%;
		margin: 0 0 2% 0;
	}
	
	.box1-2 {
		width: 100%;
	}

	.box2 {
		width: 100%;
		display: block;
		background-color: #fff;
		padding: 5px;
		box-sizing: border-box;
	}

	.box2-1 {
		width: 100%;
		text-align: center;
		display: block;
	}
	
	.box2-2 {
		width: 100%;
		display: block;
	}

	.box3 {
		width: 100%;
		display: block;
		margin-bottom: 30px;
	}

	.box3_border {
		width: 100%;
		display: block;
		padding-bottom: 30px;
		margin-bottom: 30px;
		border-bottom: 1px dashed #bfbfbf;
	}

	.box3_border span {
		display: block;
	}
	
	.textarea {
		width: 100%;
		padding: 10px;
		margin-bottom: 20px;
	}
	
	.photobox {
		display: block;
		width: 100%;
		padding: 10px;
		text-align: center;
	}
	
	.photobox p {
		width: 100%;
		margin-bottom: 25px;
	}
	
	.photobox span {
		display: block;
		width: 100%;
		font-size: 75%;
		text-align: center;
	}
	
	.center {
		display: block;
		text-align: center;
	}

	.box3-1 {
		width: 100%;
		padding: 0;
		margin-bottom: 10px;
	}
	
	.box3-2 {
		padding: 0;
		width: 100%;
	}
	
		
	
/***************************************

				構造

****************************************/



/***************************************

				▼ヘッダー▼

****************************************/

@media screen and (max-width: 1000px) {


#fixed {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	padding-bottom: 20px;
	background-color: #002f99;
	z-index: 999;
}
	
	#sp_logo {
		display: block;
		width: 70%;
		height: auto;
		margin-top: 20px;
	}

#header {
	margin-top: 85px;
}
	
		input#pure-toggle-left {
			display: none;
		}
	
		input#pure-toggle-right {
			display: none;
		}

		iframe#twitter-widget-0 {
			vertical-align: bottom;
		}

	
		#headerbox {
			width: 100%;
			display: block;
			margin: 0;
			padding: 10px;
			box-sizing: border-box;
		}
		
		#logo {
			display: none;
		}
		
		#headmenu {
			width: auto;
			/*margin-top: 28px;*/
		}
		
		#headmenu ul {
			display: flex;
			flex-wrap: wrap;
			margin: 0 auto;
			/*width: 270px;*/
			justify-content: space-between;
		}
		
		#headmenu ul li {
			display: inline-block;
			width: 47%;
			margin-right: 0px;
			margin-top: 2px;
			margin-bottom: 10px;
			text-align: center;
		}
		#headmenu ul li a {
			display: block;
			font-size: 9pt;
			color: #000;
			padding: 0 2.5px;
		}
		
		#headmenu ul li i {
			display: inline-block;
			padding-right: 5px;
		}
		
		#headmenu ul li#font-chenge {
			display: none;
		}
		
		#headmenu ul li#lang-chenge ul#langselect li {
			text-align: center;
			border: solid 1px #333;
		}
		
		p#Size {
			display: inline-block;
			font-size: 9pt;
			vertical-align: middle;
		}
		
		ul#fontsize {
			display: inline-block;
			vertical-align: middle;
			border-right: 2px solid #bfbfbf;
		}
		
		ul#fontsize li {
			padding: 0 3px;
			width: auto;
			border: 1px solid #000;
			margin-right: 5px;
			float: left;
		}
		
		ul#fontsize li a {
			display: block;
			font-size: 9pt;
			text-align: center;
			vertical-align: middle;
		}

		#headmenu ul li.m-1 {
			display: inline-block;
			/*width: 100%;*/
		}

		ul#fontsize li.changes {
			background-color: #bfbfbf;
		}
		
		ul#fontsize li.changes a {
			display: block;
			color: #fff;
		}
		
		#headmenu ul li#font-chenge span {
			display: inline-block;
			border: 1px solid #64ace2;
		}
		
		#headmenu ul li#font-change span a {
			display: inline-block;
			padding: 3px 7px;
		}
	
	
/* グローバルナビゲーション */

	#nav {
		width: 100%;
		margin: 0;
		padding: 0;
	}

	#nav ul {
		display: block;
		padding-top: 75px;
	}

	#nav ul li {
		width: 100%;
		border-right: none;
		background-color: #002f99;
		border-bottom: 1px solid #fff;
	}

	#nav ul li#w24 {
		width: 100%;
	}
	
	#nav ul li#w22 {
		width: 100%;
	}
		
	#nav ul li:first-child {
		border-left: none;
	}

	#nav ul li:last-child {
		width: 100%;
	}

	#nav ul li a {
		display: block;
		font-size: 100%;
		padding: 20px;
		font-size: 120%;
		color: #fff;
		text-align: left;
		text-decoration: none;
	}
	
	ul.submenu {
			padding-top: 0 !important;
		}
	
	ul.submenu li {
		padding-left: 1em;
		background-color: #00619d !important;
	}
	
	ul.submenu li:first-child {
		border-top: 1px solid #fff !important;
	}
	
	ul.submenu li:last-child {
		border-bottom: none !important;
	}
	
	}
	
	
/***************************************

				▲ヘッダー▲

****************************************/

span#menubtn {
	display: block;
	color: #fff;
	padding-top: 15px;
	text-align: center;
	margin-left: -4px;
}


.sp {
	display: block;
}

.pc {
	display: none;
}

#wrap {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

#contents {
	width: 100%;
	height: auto;
}

#contents img {
	max-width: 100%;
	height: auto;
}

/* メインビジュアル */

#visual {
	width: 100%;
	height: 100%;
	background: url(../images/bg_main.png) no-repeat;
	background-size: cover;
	background-position: bottom center;
}


/* メインエリア */

#main {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 20px 20px 50px 20px;
	background-color: #002f99;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

#main h1 {
	display: none;
}

	#col3 {
		width: 100%;
		margin: 0 0 40px 0;
		display: block;
		box-sizing: border-box;
	}
	
	#col3 .section {
		width: 100%;
		margin-bottom: 5%;
	}
	
	.color {
		width: auto;
		height: auto;
		padding: 10px;
	}
	
	.color p {
		display: block;
		font-size: 140%;
		font-weight: normal;
		color: #fff;
		text-align: center;
		line-height: 1.4;		
	}
	
	.icon {
		padding-top: 10px;
	}
	
	#color1 {
		background-color: #005bab;	
	}
	#color2 {
		background-color: #6355a1;
	}
	
	#color3 {
		background-color: #7d4697;
	}
	
	.section section {
		background-color: #fff;
		padding: 20px;
	}
	
	.section section p {
		font-size: 95%;
	}
	
	.section section p.tit {
		display: block;
		font-size: 120%;
		margin-bottom: 20px;
		font-weight: bold;
		text-align: center;
	}
	
	.section section p.detail_btn {
		margin-top: 20px;
		border: 1px solid #bfbfbf;
		border-radius: 5px;
		position: relative
	}
	
	.section section p.detail_btn a {
		display: block;
		padding: 8px 8px 8px 1em;
		text-decoration: none;
	}
	
	.section section p.detail_btn i {
		display: inline-block;
		font-size: 150%;
		color: #002f99;
		position: absolute;
		right: 20px;
		top: 10px;
	}
	
	#col2 {
		width: 100%;
		margin: 40px 0;
		display: block;
		box-sizing: border-box;	
	}
	
	.facebook {
		width: 100%;
		margin-bottom: 60px;
		padding: 10px 0;
		background-color: #fff;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		text-align: center;
	}
	
	.bunner {
		width: 100%;
		text-align: center;
	}
	
	.bunner ul {
		width: 100%;
	}
	
	.bunner ul li {
		width: 100%;
		display: block;
		margin-bottom: 10px;
	}


/* フッター */
	
	#footer {
		width: 100%;
		background-color: #fff;
		padding: 20px;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
	}
	
	p#footer_logo {
		float: none;
		margin-right: 20px;
	}
	
	#footer small {
		vertical-align: bottom;
		font-size: 85%;
		margin-bottom: 20px;
		padding-top: 0;
		display: block;
		line-height: 1.8;
	}

	.top-banner {
		width: 100%;
		display: block;
		margin: 0 auto;
		text-align: center;
	}
	.top-banner img {
		width: 100%;
		margin: 0 0 10px;
	}


/***************************************

				PC用

****************************************/

@media screen and (min-width:1000px) {
	
	#sp_logo {
		display: none;
	}
	
	
/***************************************

				構造

****************************************/
	
	.box {
		width: 100%;
		display: flex;
		background-color: #fff;
		padding: 20px 20px 20px 0;
		box-sizing: border-box;
	}
	
	.box1-1 {
		width: 22%;
		margin: 0 2% 0 0;
		padding: 20px 20px 20px 0;
	}
	
	.box1-2 {
		width: 80%;
		padding: 20px;
	}
	
	.box2 {
		width: 100%;
		display: flex;
		background-color: #fff;
		padding: 20px;
		box-sizing: border-box;
	}
	
	.box2-1 {
		width: auto;
	}
	
	.box2-2 {
		width: 80%;
	}
	
	.box3 {
		width: 100%;
		display: flex;
		margin-bottom: 30px;
	}
	
	.box3_border {
		width: 100%;
		padding-bottom: 30px;
		margin-bottom: 30px;
		border-bottom: 1px dashed #bfbfbf;
	}
	
	.textarea {
		width: 70%;
		padding: 10px;
		margin-right: 2%;
	}
	
	.photobox {
		width: 28%;
		padding: 10px;
	}
	
	.photobox p {
		width: 100%;
		margin-bottom: 25px;
	}
	
	.photobox span {
		display: block;
		width: 100%;
		font-size: 75%;
		text-align: left;
	}
	
	.box3-1 {
		width: 18%;
		margin-right: 2%;
		margin-bottom: 0;
	}
	
	.box3-2 {
		padding: 10px;
		width: 80%;
	}
	
	
/***************************************

				▲構造▲

****************************************/
	
	
	
/***************************************

				▼ヘッダー▼

****************************************/
	
	#header {
	margin-top: 0;
	position: relative;
	z-index: 9999999;
}
	
	button.drawer-toggle {
		display: none !important;
	}

		iframe#twitter-widget-0 {
			vertical-align: bottom;
		}

	
		#headerbox {
			width: 100%;
			display: flex;
			margin: 0;
			padding: 10px;
			box-sizing: border-box;
		}
		
		#logo {
			width: 35%;
			/*margin-right: 120px;*/
			margin-right: 45px;
		}


/* Firefoxのみ */
		@-moz-document url-prefix() {
	#logo {
			width: 35%;
			/*margin-right: 120px;*/
			margin-right: 45px;
		}
}
/* Firefoxのみ */

/* Google Chromeのみ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
	#logo {
			width: 30%;
			/*margin-right: 120px;*/
			margin-right: 45px;
		}
}
/* Google Chromeのみ */

/*Safariだけに適用されるCSSハック*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
  ::i-block-chrome, #logo {
			width: 35%;
			margin-right: 120px;
		}
}
/*Safariだけに適用されるCSSハック*/


		#headmenu {
			width: auto;
			margin-top: 10px;
		}
		
		#headmenu ul {
			display: flex;
		}
		
		#headmenu ul li {
			width: auto;
			margin-right: 2px;
			margin-top: 2px;
		}
		#headmenu ul li a {
			display: block;
			font-size: 9pt;
			color: #000;
			padding: 0 2.5px;
		}
		#headmenu ul li#lang-chenge ul#langselect li {
			width:45px;
		}
		
		
		#headmenu ul li i {
			display: inline-block;
			padding-right: 5px;
		}
		
		#headmenu ul li#font-chenge {
			display: inline-block;
			margin-top: 0;
			margin-right: 0;
			padding: 2px 6px;
			border: 1px solid #bfbfbf;
			width:150px;
		}
		
		p#Size {
			display: inline-block;
			font-size: 9pt;
			vertical-align: middle;
		}
		
		ul#fontsize {
			display: inline-block;
			vertical-align: middle;
			border-right: 2px solid #bfbfbf;
		}
		
		ul#fontsize li {
			padding: 0 3px;
			width: auto;
			border: 1px solid #000;
			margin-right: 5px;
			float: left;
		}
		
		ul#fontsize li a {
			display: block;
			font-size: 8pt;
			text-align: center;
			vertical-align: middle;
		}

		#headmenu ul li.m-1 {
			margin-top: 7px;
		}

		ul#fontsize li.changes {
			background-color: #bfbfbf;
		}
		
		ul#fontsize li.changes a {
			display: block;
			color: #fff;
		}
		
		#headmenu ul li#font-chenge span {
			display: inline-block;
			border: 1px solid #64ace2;
		}
		
		#headmenu ul li#font-change span a {
			display: inline-block;
			padding: 3px 7px;
		}
	
	
/* グローバルナビゲーション */	


	#nav {
		width: 100%;
		margin: 0;
		padding: 0;
		display: block;
	}

	#nav ul {
		display: flex;
	}

	#nav ul li {
		width: 12%;
		border-right: 1px solid #7b7e84;
	}
	
	#nav ul li#w24 {
		width: 24%;
	}
	
	#nav ul li#w22 {
		width: 22%;
	}
		
	#nav ul li:first-child {
		border-left: 1px solid #7b7e84;
	}

	#nav ul li:last-child {
		width: 18%;
	}

	#nav ul li a {
		display: block;
		font-size: 100%;
		padding: 5px 15px;
		color: #000;
		text-align: center;
		text-decoration: none;
	}
	
	#nav ul li a:hover {
		background-color: #002f99;
		color: #fff;
	}
	
	
	
		ul.submenu {
			position: relative;
			z-index: 99999;
			width: 320px !important;
			background-color: #fff;
		}
		
		ul.submenu li {
			background-color: #fff;
			border-left: 0 !important;
			border-right: 0 !important;
		}
		
		ul.submenu li a {
			display: block;
			padding: 15px !important;
			padding-left: 1.5em !important;
			text-align: left !important;
			border-bottom: 1px solid #000 !important;
		}
	
		ul.submenu li:hover {
			background-color: #002f99;
		}
		
		ul.submenu li:hover a {
			color: #fff !important;
		}
	
		ul.submenu li:first-child {
			border: none;
		}
		
		ul.submenu li:last-child {
			border: none !important;
		}
	
		
#dropmenu li {
  position: relative;
}
#dropmenu li a {
	
}
#dropmenu li ul {
  list-style: none;
  position: absolute;
  z-index: 100;
  top: 100%;
  left: 0;
  width: 100%;
  margin: 0;
  padding: 0;
	display: block;
}
#dropmenu li ul li {
  overflow: hidden;
  width: 100%;
  height: 0;
  color: #fff;
  transition: .2s;
}
		
		#dropmenu li ul li:last-child {
			width: 100%;
			border-bottom: 0 !important;
		}
		
#dropmenu li ul li a {
	
}
#dropmenu > li:hover > a {   }
#dropmenu > li:hover li:hover > a {   }
#dropmenu li:hover > ul > li {
  overflow: visible;
  height: auto;
}
#dropmenu li ul li ul {
  top: 0;
  left: 100%;
}
#dropmenu li:last-child ul li ul {
  left: -100%;
  width: 100%;
}
#dropmenu li ul li ul li a {   }
#dropmenu li:hover ul li ul li:hover > a {  }
#dropmenu li ul li ul:before {
  position: absolute;
  content: "";
  top: 13px;
  left: -20px;
  width: 0;
  height: auto;
  border: 5px solid transparent;
}
#dropmenu li:last-child ul li ul:before {
  position: absolute;
  content: "";
  top: 13px;
  left: 200%;
  margin-left: -20px;
}
	
	
	
/***************************************

				▲ヘッダー▲

****************************************/
	
	.sp {
	display: none;
}

	.pc {
	display: block;
}
	
	
	.container {
		width: 1000px;
		margin: 0 auto;
	}
	
	
	#main h1 {
	display: block;
	}
	
	#col3 {
		width: 100%;
		margin: 40px 0;
		display: flex;
		box-sizing: border-box;
	}
	
	#col3 .section {
		width: 33%;
		margin: 0 25px 0 0;
	}
	
	.section#last {
		margin: 0;
	}
	
	.color {
		width: auto;
		height: 135px;
		padding: 10px;
	}
	
	.color p {
		display: block;
		font-size: 140%;
		font-weight: normal;
		color: #fff;
		text-align: center;
		line-height: 1.4;		
	}
	
	.icon {
		padding-top: 10px;
	}
	
	#color1 {
		background-color: #005bab;	
	}

	p#color {
		vertical-align: bottom;
		margin-top: 47px;
	}

	#color2 {
		background-color: #6355a1;
	}
	
	#color3 {
		background-color: #7d4697;
	}
	
	.section section {
		height: auto;
		background-color: #fff;
		padding: 15px 30px 30px 30px;
	}
	
	.section section p {
		font-size: 95%;
	}
	
	.section section p.tit {
		display: block;
		font-size: 120%;
		margin-bottom: 20px;
		font-weight: bold;
		text-align: center;
	}
	
	.section section p.detail_btn {
		margin-top: 20px;
		border: 1px solid #bfbfbf;
		border-radius: 5px;
		position: relative
	}
	
	.section section p.detail_btn a {
		display: block;
		padding: 8px 8px 8px 1em;
		text-decoration: none;
	}
	
	.section section p.detail_btn i {
		display: inline-block;
		font-size: 150%;
		color: #002f99;
		position: absolute;
		right: 20px;
		top: 10px;
	}
	
	#col2 {
		width: 100%;
		margin: 40px 0;
		display: flex;
		box-sizing: border-box;	
	}
	
	.facebook {
		width: 80%;
		margin: 0 40px 0 0;
		padding: 10px;
		background-color: #fff;
	}
	
	.bunner {
		width: 35%;
	}
	
	.bunner ul {
		width: 100%;
	}
	
	.bunner ul li {
		width: 100%;
		display: block;
		margin-bottom: 10px;
	}
	
	/* フッター */
	
	#footer {
		width: 100%;
		background-color: #fff;
		padding: 20px;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
	}
	
	p#footer_logo {
		float: none;
		margin-right: 20px;
	}
	
	#footer small {
		vertical-align: bottom;
		font-size: 85%;
		margin-bottom:20px;
		padding-top: 0;
		display: block;
		line-height: 1.8;
	}
	
	#footer small b {
		font-size:115%;	
	}
	
	.top-banner {
		width: 1000px;
	}
	.top-banner img {
		width: 285px;
		margin: 15px;
	}

	#headmenu ul li#lang-chenge,
	.fb_iframe_widget{
		margin-top:5px;
	}
}