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


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


.main_visual {
    max-width: 1920px;
    width: 100%;
    height: 620px;
    margin: 0 auto;
    background-image: url(../img/common/mv_back.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.main_visual h1 {
    max-width: 700px;
    width: 92%;
    margin: 0 auto 0;
}
.main_visual img {
    width: 100%;
    height: auto;
}
/*------------------
header
-------------------*/
.pc_header {
    background-color: #3fa9f5;
}
.pc_header .pc_nav {
    max-width: 1080px;
    width: 100%;
    margin: 0 auto;
    padding: 2em 0;
}
.pc_header ul {
    display: flex;
    justify-content: space-around;
}
.pc_header ul li {

}
.pc_header ul li img {
    margin-right: 8px;
    width: auto;
    height: auto;
}
.pc_header ul li a {
    color: #fff;
    font-size: 18px;
    font-weight: 500;
}
/*------------------
search
-------------------*/
.main_contents .search_box {
    margin-bottom: 0rem;
}
.main_contents .search_box h2 {
    background-image: url(../img/top/h2bk_g.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.main_contents .search_box .serch_wrap {
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.main_contents .search_box .serch_wrap .map {
    width: 48%;    
}
.main_contents .search_box .serch_wrap .map img {
    width: 100%;
    height: auto;
}
.main_contents .search_box .serch_wrap .area_list {
    width: 38%;
}
.main_contents .search_box .serch_wrap .area_list ul {
    text-align: left;
}
.main_contents .search_box .serch_wrap .area_list ul li {
    margin-bottom: 1em;
}
.main_contents .search_box .serch_wrap .area_list ul li a {
    width: 100%;
    font-size: 1.2em;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.main_contents .search_box .serch_wrap .area_list ul li:nth-child(1) a {
    background-color: rgba(244, 137, 120, 0.3);
}
.main_contents .search_box .serch_wrap .area_list ul li:nth-child(2) a {
    background-color: rgba(244, 212, 78, 0.3);
}
.main_contents .search_box .serch_wrap .area_list ul li:nth-child(3) a {
    background-color: rgba(139, 201, 239, 0.3);
}
.main_contents .search_box .serch_wrap .area_list ul li:nth-child(4) a {
    background-color: rgba(177, 211, 102, 0.3);
}
.main_contents .search_box .serch_wrap .area_list ul li:nth-child(5) a {
    background-color: rgba(241, 177, 76, 0.3);
}
.main_contents .search_box .serch_wrap .area_list ul li a img {
    
}
.main_contents .search_box .serch_wrap .area_list ul li a .h_icon {
    width: 73px;
}
.main_contents .search_box .serch_wrap .area_list ul li a .arrow {
    margin-right: 1em;
    width: 20px;
}
/*------------------
event
-------------------*/
.main_contents .event_box {
    background-color: rgba(211, 237, 251, 0.5);
}
.main_contents .event_box h2 {
    background-image: url(../img/top/h2bk_w.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.main_contents .event_box ul {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
.main_contents .event_box ul li {
    width: 43%;
    background-color: #fff;
    border-radius: 20px;
    padding: 1.5em;
}
.main_contents .event_box ul li h3 {
    font-weight: 500;
    font-size: 1.4em;
    color: #fff;
    margin-bottom: 1em;
    background-color: #3fa9f5;
    padding: 0.3em;
    line-height: 1.5;
    border-radius: 10px;
}
.main_contents .event_box ul li h3 span {
    font-size: 0.7em;
}
.main_contents .event_box ul li .event_guide {
    text-align: left;
    font-size: 0.84em;
    padding: 0.5em;
}
.button p {
    color: #ffffff;
    padding: 1em 0;
    max-width: 500px;
    font-size: 0.84em;
    font-weight: 500;
    width: 70%;
    display: block;
    background-color: #929292;
    margin: 2rem auto 1rem;
    border-radius: 30px;
    max-width: 360px;
}
/*------------------
case
-------------------*/
.main_contents .case_box h2 {
    background-image: url(../img/top/h2bk_g.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.main_contents .case_box .cases {
    display: flex;
    justify-content: space-between;
}
.main_contents .case_box .cases .list_wrap {
    width: 48%;
    background-color: #fbf2cd47;
    padding: 2%;
    border-radius: 30px;
}
.main_contents .case_box .cases .list_wrap h3 {
    color: #ffffff;
    font-size: 1.5em;
    background-color: #e3c345;
    margin: -1.5em auto 1em;
    letter-spacing: 2px;
    width: 60%;
    border-radius: 10px;
}

.main_contents .case_box ul .co_wrap {
    display: flex;
    justify-content: space-between;
}
.main_contents .case_box ul .co_wrap .img {
    width: 40%;
}
.main_contents .case_box ul .co_wrap img {
    width: 100%;
    height: auto;
}
.main_contents .case_box ul .co_wrap .r_wrap {
    width: 55%;
}
.main_contents .case_box ul .co_wrap .r_wrap .in_list {
    list-style-type: circle;
    margin-left: 1em;
}
.main_contents .case_box ul .co_wrap .r_wrap p,
.main_contents .case_box ul .co_wrap .r_wrap li {
    text-align: left;
}
.main_contents .case_box ul .co_wrap .r_wrap .button a {
    padding: 0.5em 0;
    max-width: 500px;
    font-size: 0.84em;
    font-weight: 500;
    width: 200px;
    display: block;
    background-color: #e3c345;
    margin: 1rem auto 1rem;
    border-radius: 30px;
    box-shadow: 0px 5px 0px 0px rgb(224 224 224);
    max-width: 360px;
}
.main_contents .case_box ul .co_wrap .r_wrap .button a:hover {
    opacity: 0.8;
    transform: translate(0px, 5px);
    box-shadow: none;
   transition: all 0.3s ease;
}
/*------------------
manual
-------------------*/
.main_contents .manual_box {
    background-color: rgba(211, 237, 251, 0.5);
}
.main_contents .manual_box h2 {
    background-image: url(../img/top/h2bk_w.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.main_contents .manual_box .manual_wrap {
     display: flex;
    justify-content: space-between;
    margin-bottom: 5em;
}
.main_contents .manual_box .manual_wrap .w_type {
    width: 31%;
    background-color: #fff;
    border-radius: 16px;
    padding: 2em;
}
.main_contents .manual_box .manual_wrap .w_type h3 {
    background-color: #3fa9f5;
    padding: 0.5em 0.5em;
    color: #fff;
    border-radius: 12px;
    margin: -2.5em auto 0;
    text-align: left;
    font-size: 1.2em;
}
.main_contents .manual_box .manual_wrap .w_type:nth-child(1) h3 span:nth-child(1) {
    background-color: #85b88c;
}
.main_contents .manual_box .manual_wrap .w_type:nth-child(2) h3 span:nth-child(1) {
    background-color: #e8cf67;
}
.main_contents .manual_box .manual_wrap .w_type:nth-child(3) h3 span:nth-child(1) {
    background-color: #8bb8d4;
}
.main_contents .manual_box .manual_wrap .w_type h3 span:nth-child(1) {
    /*background-color: #8c8c8c;*/
    display: inline-block;
    border: 1px solid;
    padding: 0.2em 0.4em;
    border-radius: 8px;
    margin-right: 12px;
}
.main_contents .manual_box .manual_wrap #bwa h3 span:nth-child(2) {
    letter-spacing: 0.1em;
}
.main_contents .manual_box .manual_wrap .w_type .step {
    margin-top: 1em;
}
.main_contents .manual_box .manual_wrap .w_type .step > li {
    margin-top: 0.5em;
}
.main_contents .manual_box .manual_wrap .w_type .step > li p {
    text-align: left;
    font-size: 0.84em;
    margin-bottom: 0.5em;
}
.main_contents .manual_box .manual_wrap .w_type .step > li img {
   width: 100%;
   height: auto;
}
.main_contents .manual_box .manual_movie {
    display: flex;
    justify-content: space-between;
}
.main_contents .manual_box .manual_movie li {
    width: 48%;
    padding: 2%;
    background-color: #fff;
    border-radius: 10px;
}
.main_contents .manual_box .manual_movie li h3 {
    color: #ffffff;
    font-size: 1.5em;
    background-color: #40a9f5;
    margin: -1.5em auto 1em;
    letter-spacing: 2px;
    width: 60%;
    border-radius: 10px;
}
.main_contents .manual_box .manual_movie li video {
    width: 100%;
}
/*------------------
contact
-------------------*/
.main_contents .contact_box {
    background-image: url(../img/top/contact_back.jpg);
    background-position: center;
    background-size: cover;
}
.main_contents .contact_box h2 {
    margin-bottom: 30px;
}
.main_contents .contact_box .contact_wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 3em;
    color: #3fa9f5;
}
.main_contents .contact_box .contact_wrap .tt {
    font-weight: 500;
}
.main_contents .contact_box .contact_wrap .mail {
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    padding: 2em 1em;
    min-width: 36%;
    margin-right: 5%;
}
.main_contents .contact_box .contact_wrap .tel {
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    padding: 2em 1em;
    min-width: 36%;
}
.main_contents .contact_box .contact_wrap a {
    margin-top: 1em;
    font-size: 1.2em;
    border-radius: 50px;
}
.main_contents .contact_box .contact_wrap a img {
    width: 30px;
    height: auto;
    margin-right: 8px;
}
.main_contents .contact_box .contact_wrap .tel .number {
    /*font-size: 2.5em;
    font-weight: 500;
    letter-spacing: 1px;*/
}

@media screen and (max-width:501px) {
.main_visual {
    max-width: 3428px;
    height: 50vh;
    background-position: bottom;
}
.main_contents h2 {
    margin-bottom: 30px;
}
/*------------------
serch
-------------------*/
.main_contents .search_box .serch_wrap {
    display: block;
}
.main_contents .search_box .serch_wrap .map {
    width: 100%;
    margin-bottom: 1.7em;
}
.main_contents .search_box .serch_wrap .area_list {
    width: 100%;
}
.main_contents .search_box .serch_wrap .area_list ul li a {
    font-size: 1em;
}
.main_contents .search_box .serch_wrap .area_list ul li a .h_icon {
    width: 43px;
}
.main_contents .search_box .serch_wrap .area_list ul li a .arrow {
    width: 14px;
}
/*------------------
event
-------------------*/
.main_contents .event_box ul {
    display: block;
}
.main_contents .event_box ul li {
    width: 100%;
    padding: 1em;
    margin-bottom: 1.5em;
}
.main_contents .event_box ul li h3 {
    font-size: 1.1em;
    padding-bottom: 0.7em;
}
.main_contents .event_box ul li h3 span {
    font-size: 0.64em;
}
/*------------------
case
-------------------*/
.main_contents .case_box .cases {
    display: block;
}
.main_contents .case_box .cases .list_wrap {
    width: 100%;
    margin-top: 3.5em;
}
.main_contents .case_box .cases .list_wrap h3 {
    font-size: 1.2em;
}
.main_contents .case_box ul .co_wrap .r_wrap .button a {
    width: 100%;
    margin: 1rem 0 1rem auto;
    max-width: 150px;
    font-size: 0.7em;
}
.main_contents .manual_box .manual_movie {
    display: block;
}


/*------------------
manual
-------------------*/
.main_contents .manual_box .manual_wrap {
    display: block;
}
.main_contents .manual_box .manual_wrap .w_type {
    width: 100%;
    margin-bottom: 4em;
}
.main_contents .manual_box .manual_wrap .w_type h3 span:nth-child(1) {
    padding: 0.7em 0.6em;
    font-size: 12px;
}
.main_contents .manual_box .manual_movie li {
    width: 100%;
    margin-top: 3em;
}
.main_contents .manual_box .manual_movie li h3 {
    font-size: 1.2em;
    width: 80%;
}



/*------------------
contact
-------------------*/
.main_contents .contact_box .read {
    font-size: 13px;
    text-align: left;
}
.main_contents .contact_box .contact_wrap {
    display: block;
}
.main_contents .contact_box .contact_wrap .mail {
    min-width: 100%;
    margin-right: 0%;
    margin-bottom: 1.2em;
}

}