@charset "UTF-8";
/* CSS Document */
body {
	font-family:'Roboto','Hiragino Sans','Meiryo','Hiragino Kaku Gothic ProN',sans-serif;
	color: #323232;
	font-size: 14px;
}
html{
    scroll-behavior: smooth;
}
a {
	text-decoration: none;
	color: #323232;
}
ul {
  list-style: none;
}

.footer_fl_area {
	width: 100%;
	background-color: #FFF;
	position: fixed;
  	bottom: 0;
  	z-index: 10000;
	opacity: 0.9;
}
.footer_fl_area_in {
	max-width: 700px;
	width: 90%;
    padding: 1% 0;
    margin: 0 auto;
    display: flow-root;
}
.footer_fl_title_area {
	padding: 0 0 1% 0;
}
.footer_fl_title {
	text-align: center;
	font-family:'游明朝 Medium',serif;
	color: #323232;
	font-size: clamp(15px, 3vw, 25px);
	margin: 0 auto;
}
.footer_fl_left {
	width: 48%;
	float: left;
}
.footer_fl_right {
	width: 48%;
	float: right;
}
.footer_fl_left_btn img {
	width: 100%;
}
.footer_fl_right_btn img {
	width: 100%;
}

.page_top_area {
		width: 100%;
		background-color: #e4e4e4;
		margin: 40px 0 0 0;
	}
	.page_top {
		max-width: 120px;
		margin: 0 auto;
		text-align: center;
		padding: 10px 0 ;
	}
	.page_top_icon {
    	vertical-align: middle;
	}

@media screen and (min-width: 900px) {
/*ここにPC用スタイルを記述*/
#container_sp {
	display: none;
	}
	header {
		width: 100%;
		padding: 1.5% 0;
		background-color: #fff;
	}
	.header_in {
		max-width: 1095px;
		width: 100%;
		margin: 0 auto;
	}
	.logo {
		float: left;
	}
	.global-nav {
		width: 81%;
		float: right;
	}
	.nav1,.nav2,.nav3 {
		float: left;
		position: relative;
		width: 195px;
		height: 50px;
		border-left-style: solid;
		border-left-width: 1px;
		border-left-color: #adadad;
		margin: auto 0 auto 2%;		
	}
	.nav4 {
		float: left;
		position: relative;
		width: 195px;
		height: 50px;
		border-left-style: solid;
		border-left-width: 1px;
		border-left-color: #adadad;
		border-right-style: solid;
		border-right-width: 1px;
		border-right-color: #adadad;
		margin: auto 0 auto 2%;		
	}
	.nav_icon {
		position: absolute;
		top: 28%;
    	left: 4%;
		right: auto;
		bottom: auto;
	}
	.nav_main {
		margin: 5% 0 0 13%;
		line-height: 16px;
	}
	.nav_sub {
		margin: 0 0 0 13%;
		line-height: 16px;
	}
	.nav_icon {
		font-size: 10px;
		color: #00c8f0;
	}
	.nav_main {
		font-size: 14px;
	}
	.nav_sub {
		font-size: 10px;
		color: #00c8f0;
	}
header {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 10000;
}
	

	footer {
		clear: both;
		width: 100%;
		background-color: #fff;
		margin: 0 auto;
	}
	.footer_area {
		width: 470px;
		height: 103px;
		margin: 0 auto;
		padding: 3% 0 10% 0;
	}
	.footer_logo {
		float: left;
	}
	.footer_text {
		float: right;
	}
	.footer_main {
		margin: 12% 0 0 0;
		font-size: 14px;
		color: #00c8f0;
	}
	.footer_sub {
		font-size: 10px;
	}
	.copy {
		clear: both;
		text-align: center;
		background-color: #00c8f0;
		color: #fff;
	}
	.bottom_area {
		height: 152px;
	}
	
}
 
@media screen and (max-width: 899px) {
/*ここにipad（タブレット）以下のスタイルを記述*/
#container_pc {
	display: none;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  background: #fff;
}

.logo {
	width: 30%;
}

/* ここから下がハンバーガーメニューに関するCSS */
  
/* チェックボックスを非表示にする */
.drawer_hidden {
  display: none;
}

/* ハンバーガーアイコンの設置スペース */
.drawer_open {
  display: flex;
  height: 60px;
  width: 60px;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 100;/* 重なり順を一番上にする */
  cursor: pointer;
}

/* ハンバーガーメニューのアイコン */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: #00c8f0;
  transition: 0.5s;
  position: absolute;
}

/* 三本線の一番上の棒の位置調整 */
.drawer_open span:before {
  bottom: 8px;
}

/* 三本線の一番下の棒の位置調整 */
.drawer_open span:after {
  top: 8px;
}

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer_input:checked ~ .drawer_open span {
  background: rgba(255, 255, 255, 0);
}

/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer_input:checked ~ .drawer_open span::before {
  bottom: 0;
  transform: rotate(45deg);
}

#drawer_input:checked ~ .drawer_open span::after {
  top: 0;
  transform: rotate(-45deg);
}
  
/* メニューのデザイン*/
.nav_content {
  width: 80%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 100%; /* メニューを画面の外に飛ばす */
  z-index: 99;
  background: #fff;
  transition: .5s ease-in-out;
}

/* メニュー黒ポチを消す */
.nav_list {
  list-style: none;
}

/* アイコンがクリックされたらメニューを表示 */
#drawer_input:checked ~ .nav_content {
  left: 20%;/* メニューを画面に入れる */
}
	
#drawer_input:checked ~ .hamburger-bg-cover {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 97;
	background: #00c8f0;
	opacity: 0.8;
	display: block;
	}
	.nav_list {
		margin: 20% 0 0 5%;
	}
	.nav_item {
		padding: 10% 0;
		border-top-style: solid;
		border-top-width: 1px;
		border-top-color: #00c8f0;
	}
	.nav_item2 {
		padding: 10% 0;
		border-top-style: solid;
		border-top-width: 1px;
		border-top-color: #00c8f0;
		border-bottom-style: solid;
		border-bottom-width: 1px;
		border-bottom-color: #00c8f0;
	}
	.nav_list li.nav_item a,.nav_list li.nav_item2 a {
		color: #00c8f0;
		font-size: 20px;
	}
	span.nav_icon {
		font-size: 20px;
	}
	
	
header {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 10000;
}
	
	footer {
		clear: both;
		width: 100%;
		background-color: #fff;
		margin: 0 auto;
	}
	.footer_area {
		margin: 0 auto;
		padding: 3% 0 ;
	}
	.footer_logo {
		width: 40%;
    	padding: 5% 0;
    	margin: 0 auto;
	}
	.footer_text {
		text-align: center;
		margin: 0 auto;
		padding: 0 0 5% 0;
	}
	.footer_main {
		margin: 0 auto;
		font-size: 14px;
		color: #00c8f0;
	}
	.footer_sub {
		margin: 0 auto;
		font-size: 10px;
	}
	.copy {
		text-align: center;
		background-color: #00c8f0;
		color: #fff;
		font-size: 8px;
		padding: 1% 0;
	}
	.bottom_area_sp {
		padding: 20% 0 0 0;
	}
	
}