@charset "utf-8";

/* ---------------------------------------------

スライダー

--------------------------------------------- */

.sliderArea {
background: #fff;
overflow: hidden;
margin-bottom: 1em;
}
.sliderWide {
max-width: 100%;
margin: 0 auto;
padding: 10px 0 30px 0;
}
.sliderWide .slick-arrow {
opacity: 0;
transition-duration: 0.3s;
}
.sliderWide:hover .slick-arrow {
opacity: 1;
}
.slider {
max-width: 840px;
margin: 0 auto;
padding: 0;
}
.slider .slick-list {
  overflow: visible;
}
.slider .slick-track {}
.slider .slick-slide {
  padding: 0 5px;
  opacity: .5;
  transition-duration: 0.3s;
}
.slider .slick-slide.slick-current {
  opacity: 1;
}
.slider .slick-slide a {
  display: block;
}
.slider .slick-slide a:hover {
  display: block;
  opacity: .7;
}
.slider img {
  height: auto;
  width: 100%;
}
.slick-prev, .slick-next {
  z-index: 1;
}
.slick-dots {
  bottom: -33px;
}

/* ----------------------------------------------------

index01

----------------------------------------------------- */
#index01 {
max-width: 1280px;
min-width: 1100px;
min-height: 600px;
margin: 0 auto;
padding: 0 1em;
text-align: center;
}

index01box {
width: 86%;
text-align: left;
margin: 0 auto;
}

.index01box_l {
width:41%;
float:left;
text-align: left;
}

.index01box_l h2 {
font-size: 5.8rem;
color :#082A5B;
line-height: 1.4;
letter-spacing: 0.05em;
}

.index01box_l h3 {
display: inline-block;
font-size: 2.0rem;
font-weight: 500;
letter-spacing: 0.1em;
color :#000;
padding-bottom: 1em;
border-bottom: 1px dashed #CCC;
margin-bottom: 1.2em;
}

.index01box_l ul {
position:relative;
line-height: 1.6;
padding:0;
margin:0 0 0 0.5em;
}

.index01box_l ul:before {
content:"";
position:absolute;
top: 1.2em;
left:0.4em;
height:100%;
border-left: 1px solid #082A5B;
}

.index01box_l ul li {
font-size: 1.6rem;
position: relative;
padding-left: 2em;
line-height: 3.1;
letter-spacing: 0.1em;
background-image: url("../images/img_li.png");
background-position: 0 1.2em ;
background-repeat: no-repeat;
background-size: 12px 12px;
}

.index01box_l ul li:last-child::before {
content:"";
position: absolute;
top: 2em;
left: 0;
width: 1em;
height: 100%;
background-color:#FFF;
}

.index01box_l ul li a {
color: #082A5B;
font-weight: 500;
text-decoration: none;
transition: 0.6s;
position: relative;
}

.index01box_l ul li a:hover {
color :#4C8AD0;
}

.index01box_r {
width:59%;
height: 600px;
float:right;
text-align: left;
background-image: url("../images/map202302.svg");
background-position: left top;
background-repeat: no-repeat;
background-size: 600px 600px;
position: relative;
}

.map {
width : 600px;
height: 600px;
}

.index01box_r p {
width: 380px;
font-size: 1.4rem;
padding: 1em 0 0 2em;
background-color: #FFF;
position: absolute;
right: 0;
bottom: 0;
}

@media screen and (max-width: 768px) {
    /* スライダー */
    .sliderArea {
    margin-bottom: 0;
    }
    .sliderWide {
    padding-top: 0.8em;
    }
    /* 導入部分　*/
    #index01 {
    max-width: 100%;
    min-width: 100%;
    }
    index01box {
    width: 100%;
    }
    .index01box_l {
    width: 100%;
    float: none;
    }
    .index01box_l h2 {
    font-size: 3.2rem;
    letter-spacing: 0;
    margin-bottom: 0.2em;
    }
    .index01box_l h3 {
    font-size: 1.6rem;
    line-height: 1.5;
    }
    .index01box_r {
    width: 100%;
    padding-top: 320px;
    margin-bottom: 2em;
    height: auto;
    float: none;
    background-position: center top;
    background-size: 300px 300px;
    }
    .index01box_r p {
    width: 96%;
    margin: 0 auto;
    position: inherit;
    padding: 0;
    }
}

/* ----------------------------------------------------

TOPICS

----------------------------------------------------- */
#index_topic {
max-width: 1280px;
min-width: 1100px;
margin: 0 auto ;
padding: 5em 0;
text-align: center;
position: relative;
}

#index_topic h3 {
display: block;
width: 200px;
height: 200px;
font-size: 3.0rem;
font-weight: 300;
line-height: 200px;
background-color: #F4B21B;
border-radius: 100px;
text-align: center;
text-decoration: none;
position: absolute;
top:0;
left: 0;
}

.index_topicbox {
width: 86%;
text-align: left;
border: 3px solid #E6E6E6;
border-radius: 20px;
padding: 50px 120px;
margin: 0 auto;
}

.index_topicbox dl {
width: 100%;
padding: 1em 1em;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
border-bottom: 1px solid #E6E6E6;
background-image: url("../images/img_arrow.svg");
background-position: right center;
background-repeat: no-repeat;
background-size: 12px 20px;
position: relative;
}

.index_topicbox dl dt {
width: 130px;
color: #000;
font-size: 2.6rem;
font-weight: 700;
text-align: left;
line-height: 1.2;
}

.index_topicbox dl dt span {
display: block;
font-size: 1.5rem;
font-weight: 500;
}

.index_topicbox dl dd {
flex: 1;
text-align: left;
font-weight: 500;
line-height: 1.3;
}

.index_topicbox dl dd span {
display: block;
width: 110px;
height: 24px;
font-size: 1.3rem;
color: #FFF;
margin-bottom: 0.3em;
background-color: #4C8AD0;
border-radius: 12px;
text-align: center;
letter-spacing: 0.1em;
line-height: 24px;
}

.index_topicbox dl dd span.event {
background-color: #F4B21B;
}
.index_topicbox dl dd a {
color: #333;
text-decoration: none;
transition: 0.6s;
}

.index_topicbox dl dd a::before {
content: "";
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
}

.index_topicbox dl dd a:hover {
color:#4C8AD0;
}

p.more {
position: absolute;
right: 40px;
bottom: 0;
}

p.more a {
display: block;
width: 110px;
height: 110px;
line-height: 110px;
color: #FFF;
background-color: #4C8AD0;
border-radius: 55px;
text-align: center;
text-decoration: none;
transition: 0.6s;
}

p.more a:hover {
background-color: #666;
}

@media screen and (max-width: 768px) {
    /* TOPICS　*/
    #index_topic {
    max-width: 100%;
    min-width: 100%;
    padding: 2.3em 0 1em 0;
    }
    #index_topic h3 {
    font-size: 1.6rem;
    font-weight: 500;
    width: 80px;
    height: 80px;
    border-radius: 40px;
    line-height: 80px;
    }
    .index_topicbox {
    width: 90%;
    padding: 1.5em 1em 0 1em;
    }
    .index_topicbox dl dt {
    width:100%;
    font-size: 2rem;
    margin-bottom: 0.2em;
    }
    .index_topicbox dl dt span {
    display: inline-block;
    margin-right: 1em;
    }
    .index_topicbox dl dd span {
    margin-bottom: 1em;
    }
    p.more {
    position: inherit;
    text-align: right;
    margin-top: 1em;
    right: 1em;
    }
    p.more a {
    font-weight: 500;
    width: auto;
    height: auto;
    font-size: 1.4rem;
    line-height: 1.2;
    color: #111;
    background-color: #FFF;
    border-radius: 0;
    text-align: right;
    transition: 0.6s;
    position: relative;
    }
    p.more a::after {
    content: "→";
    top: 1.5em;
    right: 0;
    padding-left: 1em;
    }
}



/* ----------------------------------------------------

フッターリンク

----------------------------------------------------- */
#footerlink {
width: 96%;
margin: 0 auto 2em auto;
text-align: center;
}

.footerlinkbox {
}

.footerlinkbox ul {
width: 100%;
display: flex;
}

.footerlinkbox ul li {
width: 100%; /* 可能な限り最大で表示 */
text-align: center;
margin: 0 0.5em;
}

.footerlinkbox ul li a img {
transition: 0.6s;
}

.footerlinkbox ul li a:hover img {
opacity: 0.5;
}

@media screen and (max-width: 768px) {
    #footerlink {
    margin: 0 auto;
    }
    .footerlinkbox ul {
    display:inline;
    font-size: 0;
    }
    .footerlinkbox ul li {
    width: 48%;
    margin: 0 1% 1em 1%;
    display:inline-block;
    }
}