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

/*------------------------------------------------
　Web Font
------------------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&display=swap');
/*
font-family: 'Mochiy Pop One', sans-serif;
*/

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@300;400;500;700&display=swap');
/*
font-family: 'M PLUS Rounded 1c', sans-serif;
*/

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');
/*
font-family: 'DM Sans', sans-serif;
*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');
/*
font-family: 'Noto Sans JP', sans-serif;
*/

/*=============================================================
	ページの先頭に戻る
==============================================================*/
#pageTop {
	position: fixed;
	bottom: 20px;
	right: 8px;
	z-index: 9999;
}
 
#pageTop a {
display: block;
z-index: 999;
border-radius: 30px;
width: 60px;
height: 60px;
background-color: #FF7125;
color: #fff;
font-size: 20px;
text-decoration: none;
text-align: center;
vertical-align: middle;
line-height: 55px;
border: 1px solid #fff;
}
 
#pageTop a:hover {
	text-decoration: none;
	opacity: 0.5;
}

/*=======================================================================
	COMMON BASE
========================================================================*/
html {
  font-size: 62.5%;
}

body {
font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, sans-serif;
-webkit-text-size-adjust: 100%;
line-height: 1.6;
font-size: 1.6rem;
width: 100%;
height: 100%;
background-color: #ffffff;
margin: 0;
color: #333333;
font-weight: 300;
}

a:link,
a:visited {
  color: #1e87f0;
}
a:hover {
  color: #f01e1e;
}

hr {
  width: 100%;
  height: 1px;
  background-color: #bbb;
  border: 0;
  margin-top: 30px;
}



/* ================================================================================================== */
/* PC用　1000px以上　のスタイル */
/* ================================================================================================== */


/*------------------------------------------------
　COMMON
------------------------------------------------*/
.sp_br {
display: none;
}

.pc_br {
display: block;
}

.menu_br {
display: none;
}

/*===================================================
	header
====================================================*/
header {
width: 100%;
height: 100px;
background-color: #fff;
border-top: 5px solid #208dcc;
}

header .header_inner {
width: 100%;
height: 100px;
max-width: 1000px;
margin: 0 auto;
position: relative;
}

header .header_inner .header_logo {
width: 150px;
height: auto;
position: absolute;
bottom: 20px;
left: 10px;
}

header .header_inner .header_logo img {
width: 100%;
height: auto;
}

header .header_inner .header_name {
width: auto;
height: auto;
position: absolute;
bottom: 20px;
right: 10px;
color: #208DCC;
font-family: 'M PLUS Rounded 1c', sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 100%;
}

header .header_inner .instagram {
width: 40px;
height: 40px;
position: absolute;
top: 10px;
right: 60px;
}

header .header_inner .instagram img {
width: 100%;
height: auto;
}

header .header_inner .line {
width: 40px;
height: 40px;
position: absolute;
top: 10px;
right: 10px;
}

header .header_inner .line img {
width: 100%;
height: auto;
}

/*===================================================
	nav
====================================================*/
nav {
width: 100%;
height: 70px;
background-image: url(../images/bg_nav_pc.gif);
background-repeat: repeat-x;
background-position: left top;
background-size: auto 70px;
}

nav ul {
width: 100%;
height: 70px;
max-width: 1000px;
margin: 0 auto;
position: relative;
border-right: 1px solid #fff;
}

nav ul li {
width : calc(100% / 6) ;
height: 70px;
border-left: 1px solid #fff;
position: relative;
float: left;
transition: 0.3s;
}

nav ul li:hover {
background-color: #52BBD0;
}

nav ul li a {
width : 100%;
height: 70px;
}


nav ul li .nav_icon {
width : 100%;
height: 40px;
text-align: center;
float: left;
display: flex;
align-items: center;
justify-content: center;
}

nav ul li .nav_icon img {
width : 27px;
height: 27px;
}

nav ul li .nav_text {
width : 100%;
height: 30px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
font-family: 'M PLUS Rounded 1c', sans-serif;
font-size: 14px;
line-height: 100%;
font-weight: 700;
color: #FFFFFF;
float: left;
clear: left;
}

/*===================================================
	main
====================================================*/

.main {
width: 100%;
float: left;
clear: both;
position: relative;
}

.main .inner {
width: 100%;
max-width: 1000px;
height: auto;
margin: 0 auto;
position: relative;
padding: 60px 20px;
}

.main_bg {
background-image: url(../images/bg_main_pc.png);
background-repeat: repeat-x;
background-position: center top;
}

/*===================================================
	title h1
====================================================*/

.title {
width: 100%;
max-width: 1000px;
height: auto;
margin: 0 auto;
position: relative;
}

.title h1 {
height: 80px;
float: left;
display: flex;
align-items: center;
font-weight: bold;
font-size: 24px;
line-height: 100%;
color: #208DCC;
padding-left: 55px;
}

.title .icon_about {
background-image: url(../images/title_about.svg);
background-repeat: no-repeat;
background-position: left 10px center;
background-size: 40px 40px;
}

.title .icon_areamap {
background-image: url(../images/title_areamap.svg);
background-repeat: no-repeat;
background-position: left 10px center;
background-size: 40px 40px;
}

.title .icon_guidance {
background-image: url(../images/title_guidance.svg);
background-repeat: no-repeat;
background-position: left 10px center;
background-size: 40px 40px;
}

.title .icon_access {
background-image: url(../images/title_access.svg);
background-repeat: no-repeat;
background-position: left 10px center;
background-size: 40px 40px;
}

.title .icon_faq {
background-image: url(../images/title_faq.svg);
background-repeat: no-repeat;
background-position: left 10px center;
background-size: 40px 40px;
}

.title .title_en {
height: 80px;
float: right;
display: flex;
align-items: center;
font-weight: bold;
font-size: 14px;
color: #52bad0;
text-align: right;
line-height: 100%;
padding-right: 10px;
}

.title .bar {
width: 100%;
height: 10px;
position: relative;
background-image: -webkit-linear-gradient(0deg,rgba(100,193,209,1.00) 0%,rgba(28,142,218,1.00) 100%);
background-image: -moz-linear-gradient(0deg,rgba(100,193,209,1.00) 0%,rgba(28,142,218,1.00) 100%);
background-image: -o-linear-gradient(0deg,rgba(100,193,209,1.00) 0%,rgba(28,142,218,1.00) 100%);
background-image: linear-gradient(90deg,rgba(100,193,209,1.00) 0%,rgba(28,142,218,1.00) 100%);
float: left;
clear: both;
display: block;
border-radius: 5px;
}

/*===================================================
	h2
====================================================*/

h2 {
height: 80px;
float: left;
display: flex;
align-items: center;
font-weight: bold;
font-size: 25px;
line-height: 100%;
color: #208DCC;
padding-left: 30px;
background-image: url(../images/icon_maru.svg);
background-repeat: no-repeat;
background-position: left 0px center;
background-size: 24px 24px;
}

/*===================================================
	banner
====================================================*/
.banner_box {
width: 100%;
height: auto;
float: left;
clear: both;
background-color: #b0dde6;
}

.banner_box .banner {
width: 100%;
height: auto;
max-width: 1000px;
margin: 20px auto 20px auto;
position: relative;
text-align: center;
}

.banner_box .banner li {
width: 200px;
height: auto;
display: inline-block;
padding: 0 10px;
}

.banner_box .banner li img {
width: 100%;
height: auto;
transition: 0.3s;
border-radius: 5px;
}

.banner_box .banner li a img:hover {
opacity: 0.8;
}

.banner_box .banner2 {
width: 100%;
height: auto;
max-width: 1000px;
margin: 0px auto 20px auto;
position: relative;
text-align: center;
}

.banner_box .banner2 li {
width: auto;
height: 130px;
display: inline-block;
padding: 0 10px;
}

.banner_box .banner2 li img {
width: auto;
height: 100%;
transition: 0.3s;
}

.banner_box .banner2 li a img:hover {
opacity: 0.8;
}

/*===================================================
	footer
====================================================*/
footer {
width: 100%;
height: auto;
float: left;
background-color: #208dcc;
}

footer .inner {
width: 100%;
height: auto;
max-width: 1000px;
margin: 0 auto;
position: relative;
color: #fff;
padding: 20px;
text-align: center;
display: flex;
align-items: center;
}

footer .inner .footer_logo {
width: 28%;
height: auto;
padding-right: 40px;
}

footer .inner .footer_logo img {
width: 100%;
height: auto;
}

footer .inner a img {
transition: 0.3s;
}

footer .inner a img:hover {
opacity: 0.8;
}

footer .inner .footer_info {
width: auto;
height: auto;
color: #fff;
padding-right: 30px;
}

footer .inner .footer_info .add {
text-align: left;
font-size: 15px;
font-weight: bold;
margin-bottom: 15px;
}

footer .inner .footer_info .info {
width: auto;
text-align: left;
font-size: 14px;
font-weight: bold;
}

footer .inner .footer_info .info a {
color: #fff;
font-weight: bold;
text-decoration: underline;
}

footer .inner .footer_contact {
width: 27%;
height: auto;
border-left: 1px solid #fff;
padding: 10px 0px 10px 20px;
text-align: right;
}

footer .inner .footer_contact .tel {
width: 100%;
height: auto;
float: right;
}

footer .inner .footer_contact .tel img {
width: 100%;
height: auto;
}

footer .inner .footer_contact .icon {
width: 100%;
height: auto;
margin-top: 20px;
display: block;
float: right;
text-align: right;
}

footer .inner .footer_contact .icon li {
width: 45px;
height: auto;
margin: 0px 5px;
display: inline-block;
vertical-align: top;
}

footer .inner .footer_contact .icon img {
width: 100%;
height: auto;
}

.copyright {
width: 100%;
height: auto;
position: relative;
float: left;
clear: both;
color: #fff;
font-size: 10px;
background-color: #24a0d3;
padding: 10px;
text-align: center;
}



/*===================================================
	contents
====================================================*/



/*--PC用　1000px以上　のスタイル END--*/
/* ================================================================================================== */
/* Tablet用　1000px以下　専用のスタイル */
/* ================================================================================================== */
@media only screen and (max-width: 1000px) {

/*------------------------------------------------
　COMMON
------------------------------------------------*/

}/*--Tablet用　1000px以下　専用のスタイル END--*/

/* ================================================================================================== */
/* SP用　768px以下　専用のスタイル */
/* ================================================================================================== */
@media only screen and (max-width: 768px) {

/*------------------------------------------------
　COMMON
------------------------------------------------*/
.sp_br {
display: block;
}

.pc_br {
display: none;
}


/*===================================================
	header
====================================================*/
header {
width: 100%;
height: 70px;
background-color: #fff;
border-top: 5px solid #208dcc;
}

header .header_inner {
width: 100%;
height: 70px;
max-width: 1000px;
margin: 0 auto;
position: relative;
}

header .header_inner .header_logo {
width: 100px;
height: auto;
position: absolute;
bottom: 15px;
left: 10px;
}

header .header_inner .header_logo img {
width: 100%;
height: auto;
}

header .header_inner .header_name {
width: auto;
height: auto;
position: absolute;
bottom: 15px;
right: 10px;
color: #208DCC;
font-family: 'M PLUS Rounded 1c', sans-serif;
font-weight: 700;
font-size: 14px;
line-height: 100%;
}

header .header_inner .instagram {
width: 32px;
height: 32px;
position: absolute;
top: 4px;
right: 50px;
}

header .header_inner .instagram img {
width: 100%;
height: auto;
}

header .header_inner .line {
width: 32px;
height: 32px;
position: absolute;
top: 4px;
right: 10px;
}

header .header_inner .line img {
width: 100%;
height: auto;
}

/*===================================================
	nav
====================================================*/

nav ul li .nav_text {
width : 100%;
height: 30px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
font-family: 'M PLUS Rounded 1c', sans-serif;
font-size: 13px;
line-height: 110%;
font-weight: 700;
color: #FFFFFF;
float: left;
clear: left;
}

/*===================================================
	title h1
====================================================*/

.title {
width: 100%;
max-width: 1000px;
height: auto;
margin: 0 auto;
position: relative;
}

.title h1 {
height: 50px;
float: left;
display: flex;
align-items: center;
font-weight: bold;
font-size: 18px;
line-height: 100%;
color: #208DCC;
padding-left: 42px;
}

.title .icon_about {
background-image: url(../images/title_about.svg);
background-repeat: no-repeat;
background-position: left 10px center;
background-size: 28px 28px;
}

.title .icon_areamap {
background-image: url(../images/title_areamap.svg);
background-repeat: no-repeat;
background-position: left 10px center;
background-size: 28px 28px;
}

.title .icon_guidance {
background-image: url(../images/title_guidance.svg);
background-repeat: no-repeat;
background-position: left 10px center;
background-size: 28px 28px;
}

.title .icon_access {
background-image: url(../images/title_access.svg);
background-repeat: no-repeat;
background-position: left 10px center;
background-size: 28px 28px;
}

.title .icon_faq {
background-image: url(../images/title_faq.svg);
background-repeat: no-repeat;
background-position: left 10px center;
background-size: 28px 28px;
}

.title .title_en {
height: 50px;
float: right;
display: flex;
align-items: center;
font-weight: bold;
font-size: 12px;
color: #52bad0;
text-align: right;
line-height: 100%;
padding-right: 10px;
}

.title .bar {
width: 100%;
height: 5px;
position: relative;
background-image: -webkit-linear-gradient(0deg,rgba(100,193,209,1.00) 0%,rgba(28,142,218,1.00) 100%);
background-image: -moz-linear-gradient(0deg,rgba(100,193,209,1.00) 0%,rgba(28,142,218,1.00) 100%);
background-image: -o-linear-gradient(0deg,rgba(100,193,209,1.00) 0%,rgba(28,142,218,1.00) 100%);
background-image: linear-gradient(90deg,rgba(100,193,209,1.00) 0%,rgba(28,142,218,1.00) 100%);
float: left;
clear: both;
display: block;
border-radius: 0px;
}

/*===================================================
	h2
====================================================*/

h2 {
height: 40px;
float: left;
display: flex;
margin-bottom: 20px;
align-items: center;
font-weight: bold;
font-size: 20px;
line-height: 100%;
color: #208DCC;
padding-left: 28px;
background-image: url(../images/icon_maru.svg);
background-repeat: no-repeat;
background-position: left 0px center;
background-size: 22px 22px;
}

/*===================================================
	banner
====================================================*/
.banner_box {
width: 100%;
height: auto;
float: left;
clear: both;
background-color: #b0dde6;
}

.banner_box .banner {
width: 100%;
height: auto;
max-width: 1000px;
margin: 20px auto 20px auto;
position: relative;
text-align: center;
}

.banner_box .banner li {
width: 40%;
height: auto;
display: inline-block;
padding: 0 10px;
}

.banner_box .banner li img {
width: 100%;
height: auto;
transition: 0.3s;
border-radius: 5px;
}

.banner_box .banner li a img:hover {
opacity: 0.8;
}

.banner_box .banner2 {
width: 100%;
height: auto;
max-width: 1000px;
margin: 0px auto 20px auto;
position: relative;
text-align: center;
}

.banner_box .banner2 li {
width: auto;
height: 130px;
display: inline-block;
padding: 0 10px;
}

.banner_box .banner2 li img {
width: auto;
height: 100%;
transition: 0.3s;
}

.banner_box .banner2 li a img:hover {
opacity: 0.8;
}

/*===================================================
	footer
====================================================*/
footer {
width: 100%;
height: auto;
float: left;
background-color: #208dcc;
}

footer .inner {
width: 100%;
height: auto;
max-width: 1000px;
margin: 0 auto;
position: relative;
color: #fff;
padding: 20px;
text-align: center;
display: flex;
align-items: center;
flex-wrap: wrap;
}

footer .inner .footer_logo {
width: 100%;
height: auto;
padding-right: 0px;
}

footer .inner .footer_logo img {
width: 200px;
height: auto;
}

footer .inner .footer_info {
width: 100%;
height: auto;
color: #fff;
padding-right: 0px;
text-align: center;
}

footer .inner .footer_info .add {
width: 100%;
height: auto;
text-align: center;
font-size: 15px;
font-weight: bold;
margin-top: 30px;
margin-bottom: 15px;
}

footer .inner .footer_info .info {
width: 100%;
text-align: center;
font-size: 14px;
font-weight: bold;
}

footer .inner .footer_info .info a {
color: #fff;
font-weight: bold;
text-decoration: underline;
}

footer .inner .footer_contact {
width: 100%;
height: auto;
text-align: center;
border-left: none;
padding: 20px 0px 0px 0px;
}

footer .inner .footer_contact .tel {
width: 100%;
height: auto;
float: left;
margin-top: 10px;
}

footer .inner .footer_contact .tel img {
width: 200px;
height: auto;
}

footer .inner .footer_contact .line {
width: 100%;
height: auto;
margin-top: 25px;
float: left;
clear: left;
}

footer .inner .footer_contact .line img {
width: 50px;
height: auto;
}

/*===================================================
	main
====================================================*/

.main {
width: 100%;
float: left;
clear: both;
position: relative;
}

.main .inner {
width: 100%;
max-width: 1000px;
height: auto;
margin: 0 auto;
position: relative;
padding: 40px 15px;
}

.main_bg {
background-image: url(../images/bg_main_pc.png);
background-repeat: repeat-x;
background-position: center top;
}

}/*--SP用　768px以下　専用のスタイル END--*/

/* ================================================================================================== */
/* SP用　640px以下　専用のスタイル */
/* ================================================================================================== */
@media only screen and (max-width: 640px) {

/*------------------------------------------------
　COMMON
------------------------------------------------*/

.menu_br {
display: block;
}

/*===================================================
	nav
====================================================*/
nav {
width: 100%;
height: 60px;
background-image: url(../images/bg_nav_pc.gif);
background-repeat: repeat-x;
background-position: left bottom;
background-size: auto 70px;
}

nav ul {
width: 100%;
height: 60px;
max-width: 1000px;
margin: 0 auto;
position: relative;
border-right: 1px solid #fff;
}

nav ul li {
width : calc(100% / 6) ;
height: 60px;
border-left: 1px solid #fff;
position: relative;
float: left;
transition: 0.3s;
}

nav ul li:hover {
background-color: #52BBD0;
}

nav ul li a {
width : 100%;
height: 60px;
}

nav ul li .nav_icon {
width : 100%;
height: 30px;
text-align: center;
float: left;
display: flex;
align-items: center;
justify-content: center;
}

nav ul li .nav_icon img {
width : 22px;
height: 22px;
}

nav ul li .nav_text {
width : 100%;
height: 30px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
font-family: 'M PLUS Rounded 1c', sans-serif;
font-size: 11px;
line-height: 110%;
font-weight: 700;
color: #FFFFFF;
float: left;
clear: left;
}

/*===================================================
	banner
====================================================*/
.banner_box {
width: 100%;
height: auto;
float: left;
clear: both;
background-color: #b0dde6;
}

.banner_box .banner {
width: 100%;
height: auto;
max-width: 1000px;
margin: 20px auto 20px auto;
position: relative;
text-align: center;
}

.banner_box .banner li {
width: 40%;
height: auto;
display: inline-block;
padding: 0 5px;
}

.banner_box .banner li img {
width: 100%;
height: auto;
transition: 0.3s;
border-radius: 5px;
}

.banner_box .banner li a img:hover {
opacity: 0.8;
}


.banner_box .banner2 {
width: 100%;
height: auto;
max-width: 1000px;
margin: 0px auto 20px auto;
position: relative;
text-align: center;
}

.banner_box .banner2 li {
width: auto;
height: 100px;
display: inline-block;
padding: 0 5px;
}

.banner_box .banner2 li img {
width: auto;
height: 100%;
transition: 0.3s;
}

.banner_box .banner2 li a img:hover {
opacity: 0.8;
}

/*===================================================
	footer
====================================================*/
footer {
width: 100%;
height: auto;
float: left;
background-color: #208dcc;
}

footer .inner {
width: 100%;
height: auto;
max-width: 1000px;
margin: 0 auto;
position: relative;
color: #fff;
padding: 20px 10px;
text-align: center;
display: flex;
align-items: center;
flex-wrap: wrap;
}

footer .inner .footer_logo {
width: 100%;
height: auto;
padding-right: 0px;
}

footer .inner .footer_logo img {
width: 160px;
height: auto;
}

footer .inner .footer_info {
width: 100%;
height: auto;
color: #fff;
padding-right: 0px;
text-align: center;
}

footer .inner .footer_info .add {
width: 100%;
text-align: center;
font-size: 13px;
font-weight: bold;
margin-top: 20px;
margin-bottom: 10px;
}

footer .inner .footer_info .info {
width: 100%;
text-align: center;
font-size: 11px;
font-weight: bold;
line-height: 200%;
}

footer .inner .footer_info .info a {
color: #fff;
font-weight: bold;
text-decoration: underline;
}

footer .inner .footer_contact {
width: 100%;
text-align: center;
border-left: none;
padding: 10px 0px 0px 0px;
}

footer .inner .footer_contact .tel {
width: 100%;
height: auto;
float: left;
margin-top: 10px;
}

footer .inner .footer_contact .tel img {
width: 200px;
height: auto;
}

footer .inner .footer_contact .icon {
width: 100%;
height: auto;
margin-top: 20px;
display: block;
text-align: center;
}

footer .inner .footer_contact .icon li {
width: 45px;
height: auto;
float: none;
margin: 0px 5px;
display: inline-block;
vertical-align: top;
}

footer .inner .footer_contact .icon img {
width: 100%;
height: auto;
}



}/*--SP用　640px以下　専用のスタイル END--*/