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

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

/*--------------------------------------
layout style
--------------------------------------*/
.contents_wraper {
    display: flex;
    justify-content: space-between;
    padding: 57px 0 0 0;
}
.link_button_area a {
    display: block;
    width: 280px;
    color: #fff;
    font-size: 16px;
    text-align: left;
    text-decoration: none;
    background-color: #EB414D;
    padding: 22px 0 22PX 40PX;
    border-radius: 30px;
    border: solid 2px #fff;
    background-image: url("../../img/common/icn_arrow02@2x.png");
    background-repeat: no-repeat;
    background-position: 230px center;
    background-size: 21px;
    margin: 0 auto;
    box-sizing: border-box;
}
input[type="submit"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
}
.link_button_area {
    position: relative;
    z-index: 100;
}
/*--------------------------------------
main_left style
--------------------------------------*/
.m_content_l {
    width: 37%;
    height: 100vh;
    text-align: center;
    background-color: #46B5D6;
    background-image: url("../../img/page/bg_img_bottom@2x.png");
    background-repeat: no-repeat;
    background-size:contain;
    background-position: center bottom;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    padding-top:57px;
}
.main_img_in {
    /*    width: 85%;
        height: 450px;
        max-height: 450px;
        min-height: 225px;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
    */  
    padding: 90px 0 0 0;
}
.main_img_in img {
    max-height: 40vh;
    width: auto;
}
.h3_title_style.teremin_link {
    font-size: 20px;
    color: #fff;
    line-height: 1.45;
}
.h3_title_style.teremin_link span {
    display: block;
    font-size: 11px;
    line-height: 1.18;
    letter-spacing: 0.12em;
    margin-top: 18px;
}
.main_img_area {
    position: relative;
}
.link_main_area {
    width: 212px;
    height: auto;
    border: solid 2px #fff;
    border-radius: 50%;
    position: absolute;
    bottom: -160px;
    left: 0;
    right: 0;
    margin: auto;
}
.link_main_area.box1:hover {
    opacity: 0.7;
}
.link_main_in a {
    text-decoration: none;
}
.link_main_area.box1:hover ::after {
    transform: rotate(360deg);
    transition: 1s; 
}
.link_main_area.box1::before {
    content: "";
    display: block;
    padding-top: 100%;
}
.link_main_in {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
}
.link_main_in::after {
    content: "";
    width: 44px;
    height: 40px;
    background-image: url("../../img/page/img_dog@2x.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: absolute;
    bottom: 6px;
    right: 0;
    transform: rotate(13deg);
}
.link_main_in::before {
    content:"";
    width: 8px;
    height: 40px;
    background-image: url("../../img/page/icn_arrow.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: absolute;
    bottom: -25px;
    left: 0;
    right: 0;
    margin: auto;
}

/*--------------------------------------
main_middle style
--------------------------------------*/
.m_content_m {
    width: 58%;
    background-color: #8ACBDE;
    margin-left: 37%;
    padding: 78px 20px 20px 20px;
    box-sizing: border-box;
}
/*section01*/
.m_section_01 {
    margin-bottom: 40px;
    position: relative;
}
.m_section_01 .h2_title_style::before {
    content: "";
    width: calc(100% / 3);
    min-height: 219px;
    height: auto;
    background-image: url("../../img/page/img_bgimg01@2x.png");
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: -40px;
    left: -47px;
    z-index: 0;
}
.m_section_01 .h2_title_style::after {
    content: "";
    width: calc(100% / 3);
    min-height: 219px;
    height: auto;
    background-image: url("../../img/page/img_bgimg02@2x.png");
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: -40px;
    right: -47px;
    z-index: 0;
}
.s01_block_li_wrapper {
    position: relative;
    z-index: 100;
}
.m_section_top {
    display: flex;
    justify-content:flex-start;
    align-items: center;
    z-index: 100;
    position: relative;
}
.link_m_area {
    margin-right: 4.7%;
}
.link_m_area a:hover {
    opacity: 0.7;
}
.m_content_m img {
    max-width: 100%;
    height: auto;
}
.m_section_01 .h2_title_style {
    text-align: center;
    margin-top: 18px;
    margin-bottom: -40px;
    position: relative;
    z-index: 10;
}
.h2_title_style img {
    position: relative;
    z-index: 100;
}
.s01_block_ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.s01_block_li{
    width: calc((100% - 20px) / 3);
    margin-bottom: 20px;
    background-color: #fff;
    border-radius: 5px 5px 20px 20px;
    position: relative;
}
.s01_block_li a {
    text-decoration: none;
}
/* Drupal用 */
.s01-block-ul {
    display: flex;
    flex-wrap: wrap;
/*    justify-content: space-between;*/
}
.s01-block-li{
    width: calc((100% - 20px) / 3);
    margin-bottom: 20px;
    background-color: #fff;
    border-radius: 5px 5px 20px 20px;
    position: relative;
    margin-right: 1.1%;
}
.s01-block-li:nth-of-type(3n) {
    margin-right: 0;
}
.s01-block-li a {
    text-decoration: none;
}


/*.s01_block_li a:hover {
    opacity: 0.7;
}*/
.comingsoon:hover {
    opacity: 1 !important;
    cursor: default;
}
.s01_block_li::after {
    width: calc((100% - 20px) / 3);
    content: "";
    display: block;
}
.s01_block_li_detail {
    width: 100%;
    height: auto;
    background: #fff;
    border-radius: 0 0 20px 20px;
    padding: 16px;
    box-sizing: border-box;
    z-index: 100;
    position: relative;
}
.s01_block_li_detail_in {
    width: 100%;
    font-size: 12px;
    color: #0097CC;
    display: flex;
    justify-content: space-between;
    position: absolute;
    bottom: 12px;
    left: 0;
    padding: 0 10px;
    margin: 0 auto;
    box-sizing: border-box;
}
/*.s01_block_li_img_area {
    position: relative;
}*/
.s01_block_li_in {
    overflow: hidden;
    border-radius: 6px;
}
.h3_s01_title_style {
    font-size: 20px;
    color: #222222;
    margin-bottom: 25px;
    line-height: 1.6;
}
.h3_s01_title_style span{
    font-size: 14px;
    display: block;
}
.news_num {
    width: 60px;
    height: 80px;
    color: #0098D7;
    font-size: 28px;
    line-height: 61px;
    text-align: center;
    background-image: url("../../img/page/bg_img_num@2x.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    z-index: 1000;
    position:absolute;
    top: -15px;
    left: -10px;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-style: normal;
}
.news_num span {
    font-size: 22px;
    font-weight: normal;
}
.s01_block_li_img_in {
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    width: 100%;
    max-height: 205px;
    border-radius: 4px 4px 0 0;
    overflow: hidden;
}
.s01_block_li_img_in img {
    width: 100%;
}
.s01_block_li_img_in:hover {
    transform: scale(1.1);
    transition-duration: 0.8s;
}
.m_section_01::before {
    content: "";
    width: calc(100% / 3);
    min-height: 219px;
    height: auto;
    background-image: url("../../img/page/img_bgimg02@2x.png");
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    bottom: -100px;
    left: -47px;
    z-index: 0;
}
.m_section_01::after {
    content: "";
    width: calc(100% / 3);
    min-height: 219px;
    height: auto;
    background-image: url("../../img/page/img_bgimg01@2x.png");
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    bottom: -100px;
    right: -47px;
    z-index: 0;
}


/*section02*/
.m_content_m_in {
    max-width: 880px;
    margin: 0 auto;
}
.m_section_02 {
    position: relative;
    z-index: 100;
    margin-bottom: 50px;
}
.h2_title_style.type_img {
    width: 100%;
    height: 148px;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
    border-radius: 10px 10px 0 0;
}
.museum_report_area {
    background-color: rgba(247,247,247,0.4);
    padding: 30px;
    border-radius: 0 0 10px 10px;
}
.museum_report_li {
    background-color: #fff;
    border-radius: 10px;
    padding: 20px 20px 30px 20px;
    position: relative;
    box-sizing: border-box;
}
/* Drupal用 */
.museum-report-li {
    background-color: #fff;
    border-radius: 10px;
    padding: 20px 20px 30px 20px;
    position: relative;
    box-sizing: border-box;
}
/*-- Drupal用 */

.museum_report_li_title {
    font-size: 20px;
    color: #222222;
    margin-bottom:24px;
}
.museum_report_li:nth-child(1),.museum_report_li:nth-child(2)  {
    margin-bottom: 30px;
}
.museum_report_li img {
    width: 100%;
    height: 144px;
}
.museum_report_li {
    width: 48%;
}
.museum_report_li a {
    text-decoration: none;
}
/* Drupal用 */
.museum-report-li:nth-child(1),.museum-report-li:nth-child(2)  {
    margin-bottom: 30px;
}
.museum_report_li_img {
    position: relative;
}
.museum_report_li_img img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    max-width: initial;
}
.museum-report-li {
    width: 48%;
}
.museum-report-li a {
    text-decoration: none;
}
/*-- Drupal用 */

/*section03*/
.m_section_03 {
    margin-bottom: 40px;
}
.m_section_03 .h2_title_style {
    text-align: center;
    margin-bottom: 30px;
}
.m_sec03_wrapper {
    position: relative;
}
.chara_ul {
    display: flex;
    align-items: baseline;
    justify-content: center;
    margin-top: -120px;
    z-index: 100;
    position: relative;
    margin-bottom: 30px;
}
.chara_li {
    margin: 0 15px;
}
.chara_ul .chara_li img {
    width: 100%;
}
.museum_report_li_details_in {
    width: 100%;
    font-size: 12px;
    color: #0097CC;
    display: flex;
    justify-content: space-between;
    position: absolute;
    bottom: 0;
    left: 0;
}
.museum_report_ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
/* Drupal用 */
.museum-report-ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
/*-- Drupal用 */

.museum_report_li_details {
    padding: 24px 0 30px 0;
    position: relative;
}
.museum_report_li_cate {
    line-height: 1.3;
}
.report_num span{
    font-size: 22px;
}
.report_num {
    width: 60px;
    height: 80px;
    color: #FAFF71;
    font-size: 28px;
    line-height: 61px;
    text-align: center;
    background-image: url("../../img/page/bg_img_num02@2x.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    z-index: 1000;
    position: absolute;
    top: -15px;
    left: -10px;
    font-family: 'Barlow Semi Condensed', sans-serif;
}
.museum_report_li_img {
    width: 100%;
    height: 144px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.museum_report_li_in {
    overflow: hidden;
    border-radius: 5px;
}
.museum_report_li_img:hover {
    transform: scale(1.1);
    transition-duration: 0.8s;
}
.museum_info_banner_area {
    text-align: center;
    margin-bottom: 40px;
}
.museum_info_banner_area a:hover {
    opacity: 0.6;
}
.site_notice_area p {
    font-size: 13px;
    line-height: 1.54;
    color: #fff;
    background-color: rgba(255,255,255,0.18);
    padding: 13px 20px;
    border-radius: 10px;
    text-align: center;
    display: inline-block;
}
.site_notice_area {
    text-align: center;
}

/*section03*/
.m_section_04 {
    max-width: 680px;
    margin: 0 auto 40px auto;
}
.search_area .search {
    border: none;
    width: 680px;
    max-width: 100%;
    height: 60px;
    font-size: 16px;
    color: #2F95D1;
    text-align: center;
    background-color: #DCF3FA;
    border-radius: 50px;
    margin: 0 auto;
    background-image: url("../../img/common/icn_bg_search@2x.png");
    background-repeat: no-repeat;
    background-size: 26px;
    background-position: 36px center;
}
.search_area .submit {
    width: 23px;
    height: 8px;
    background-image: url("../../img/common/icn_arrow03@2x.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size:contain;
    position: absolute;
    right: 30px;
    top: 0;
    bottom: 0;
    margin: auto;
}
.search_area {
    margin-bottom: 30px;
}
.search_area form {
    max-width: 680px;
    position: relative;
}
.m_section_04 .h2_title_style {
    text-align: center;
    margin-bottom: 20px;
}
.hushtag_list_ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 -10px;
}
.hushtag_list_li{
    margin: 0 5px 10px 5px;
}

.hushtag_list_li a{
    font-size: 13px;
    color: #0097CC;
    white-space: nowrap;
    text-decoration: none;
    background-color: #fff;
    border-radius: 13px;
    padding: 8px 10px;
    display: inline-block;
}
.hushtag_list_li.viewmore a{
    background-color: #0097CC;
    color: #fff;
}
.hushtag_list_li.viewmore img {
    padding-left: 20px;
}
/* Drupal用 start */
.hushtag_list_li a:before { 
    content:"#"; 
}
/* Drupal用 End */
/*--------------------------------------
relation company style
--------------------------------------*/
.relation_co_ul {
    display: flex;
    justify-content: space-between;
}
.relation_co_li {
    width: calc((100% - 20px) / 3);
}


/*--------------------------------------
SP STYLE

--------------------------------------*/
@media screen and (max-width: 767px) {
    .main_content {
        padding: 0;
    }
    .main_img_in {
        padding: 60px 0 0 0;
    }
    .contents_wrapper {
        display: block;
    }
    .m_content_l {
        width: 100%;
        position: relative;
        top: 0;
    }
    .m_content_m {
        width: 100%;
        background-color: #8ACBDE;
        margin-left: inherit;
        padding: 0;
        overflow: hidden;
        border: solid 20px transparent;
    }
    .m_section_top {
        display: block;
    }
    .link_m_area {
        text-align: center;
    }
    .link_m_area {
        margin-right: 0;
    }
    .link_m_area:nth-child(2) {
        display: none;
    }
    .m_section_01 .h2_title_style::before,
    .m_section_01 .h2_title_style::after{
        display: none;
    }
    .s01_block_li {
        width: calc((100% - 20px) / 2);
    }
    .m_section_01::after,
    .m_section_01::before{
        display: none;
    }
    .chara_ul {
        display: flex;
        justify-content: center;
        margin-bottom: 10px;
        flex-wrap: wrap;
        margin: -44px -20px 23px -20px;
    }
    .chara_li {
        margin: -15px 10px 0 10px;
        width: calc((100% - 120px) / 3);
    }
    .chara_li:nth-child(1) {
        order: 1;
    }
    .hushtag_list_ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin: 0 auto;
        width: 100%;
    }
    .relation_co_ul {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        text-align: center;
    }
    .relation_co_li {
        width: 100%;
        margin-bottom: 15px;
    }
    .relation_co_li:last-child {
        margin-bottom: 0;
    }
    .hushtag_list_li {
        margin: 0 1px 10px 1px;
    }
    #openModal {
        display: none;
    }
    .museum_report_ul {
        display: flex;
    }
    .museum_report_li{
        margin-bottom: 30px;
    }
    .museum_report_li:last-chidl{
        margin-bottom: 0;
    }
    /* Drupal用 */
    .museum-report-ul {
        display: flex;
    }
    .museum-report-li{
        margin-bottom: 30px;
    }
    .museum-report-li:last-chidl{
        margin-bottom: 0;
    }
    /*- Drupal用 */
    .m_content_l {
        padding-top: 0;
    }
    .m_section_01 .h2_title_style {
        margin-bottom: 0;
    }	
}

@media screen and (max-width: 767px) {
    .s01_block_ul {
        justify-content: center;
    }
    .s01_block_li {
        width: 81%;
    }
    /* Drupal用 */
    .s01-block-ul {
        justify-content: center;
    }
    .s01-block-li {
        width: 81%;
    }
    /*--Drupal用 */
    .museum_report_ul {
        display: flex;
        justify-content: center;
    }
    .museum_report_li {
        width: 100%;
    }
    /* Drupal用 */
    .museum-report-ul {
        display: flex;
        justify-content: center;
    }
    .museum-report-li {
        width: 100%;
    }
    /*--Drupal用 */
}

/*文字の重なり調整用---20191101*/
@media screen and (max-width: 1120px){
    .h3_s01_title_style,h3.museum_report_li_title {font-size: 14px; line-height: 1.3;}
}
@media screen and (max-height: 980px){
    .m_content_l {background-image: none;}
}