@charset "UTF-8";
@import url("grid.css");

/* アイヌコタンの歴史など */

.mb50 {
    margin-bottom: 5rem;
}

.mb100 {
    margin-bottom: 10rem;
}

.left {
    text-align: left;
}

ul{
    list-style: none;
}

.pc {
    display: block;
}

.sp {
    display: none;
}

@media (max-width : 767px) {
    .sp {
        display: block;
    }

    .pc {
        display: none;
    }
}


/* font */

.main_history h4,
.main_history h3 {
    /* font-family: HGS明朝B; */
    font-family: 'ヒラギノ明朝 ProN','Hiragino Mincho ProN','Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ＭＳ 明朝', 'MS Mincho','ＭＳ Ｐ明朝','MS PMincho','HGS明朝B',sans-serif;
}

.main_history h3 {
    text-align: center;
    font-size: 2em;
    letter-spacing: .6vw;
}

.main_history p {
    text-align: justify;
    line-height: 2;
    font-size: 1.2em;
}

.main_history table {
    line-height: 2;
    font-size: 1.2em;
}

.font_go {
    font-family: initial;
    font-size: initial;
}

.add_info {
    font-size: 1em;
    line-height: 1.2;
}

.event_box h3 {
    text-align: left;
    font-size: 1.6em;
}

.tour_box h3.tour_catch {
    font-size: 1.3em;
}

table.facility-table {
    line-height: 1.6;
}

@media (max-width : 767px) {
    .main_history p,
    .main_history table,
    .main_history ul, .main_history a {
        line-height: 2;
        font-size: .84em;
    }

    .main_history h3 {
        font-size: 1.6em;
        letter-spacing: .6vw;
    }

    .event_info .span-6 h3{
        font-size: 1.1em;
    }

    .tour_info .span-6 h3 {
        font-size: 2em;
        line-height: 1.2;
    }

    .tour_box h3.tour_catch, .tour_box h3 span.font-go{
        font-size: 1em;
    }
}

/* main */

body {
    background-color: #003b60;
    color: #fff;
    position: relative;
}

main.main_history {
    background-image: url(../images/history/history_side_pc.png), url(../images/history/history_side_pc.png);
    background-repeat: repeat-y;
    background-position: top left, top right;
    background-size: 4%;
    margin: 0;
    /* background-attachment: fixed; */
}

.main_history img {
    width: 100%;
}

.tour_span {
    letter-spacing: .7em;
}

.main_history a {
    color: #fff;
}

.main_history a:hover {
    opacity: 0.5;
}

.main_history h3 {
    margin-bottom: 1em;
}


.wrapper_history {
    width: 90%;
    max-width: 1200px;
}

.ainu_history{
    padding: 100px 0;
}

.history_ttl {
    margin: 0 auto 2em;
    width: 90%;
    max-width: 855px;
    position: relative;
}

.history_ttl_txt {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

table.facility-table {
    width: 100%;
}

table.facility-table th,
table.facility-table td {
    border-bottom: none;
    padding: 0;
    position: relative;
    vertical-align: top;
    padding-top: .4em;
    padding-bottom: .4em;
}

table.facility-table td {
    padding-left: 1em;
}

table.facility-table td:before {
    content: ':';
    position: absolute;
    left: 0;
}

.event_box,
.tour_box {
    margin-bottom: 50px;
}

#event .history_ttl,
.tour_info .history_ttl {
    width: 100%;
    margin: 0 0 3em;
}

.event_box h4 {
    display: flex;
    align-items: center;
}

.event_box h4::after {
    content: '';
    flex-grow: 1;
    height: 1px;
    background: #b93c39;
    margin-left: .4em;
}

.tour_box h3 {
    text-align: left;
    line-height: 1.6;
    margin-bottom: 0;
}

.tour_bar, .tour_bar6{
    position: relative;
}

.tour_bar::after{
    content: "／";
    padding: 0 .5em;
}

.tour_bar6::after{
    content: "／";
    padding: 0 1.2em;
}

.para{
    display: none;
}

.tour_list{
    margin-top: 1.5em;
}

.tour_info{
    padding-bottom: 200px;
}

table.tour_list{
    width: 100%;
}

table.tour_list th, table.tour_list td{
    border-bottom: none;
}

table.tour_list th{
    width: 25%;
    vertical-align: top;
    padding: 0;
}

table.tour_list td{
    padding: 0 0 0 2em;
    position: relative;
}

table.tour_list td::before{
    content:"/";
    position: absolute;
    left: 1em;
}

p.small_font {
    font-size: .8em;
}

th.long_th {
    width: 30%;
}

@media (max-width : 767px) {

    .main_history .container {
        padding: 20px 0;
    }

    main.main_history {
        background-image: none;
        background-size: 0;
    }

    main.main_history .span-6 {
        width: 90%;
        margin: 0 auto;
    }

    main.main_history .history_content_right {
        width: 90%;
        margin: 0 auto;
    }

    .history_content_center p.mb20 {
        margin-bottom: 2em;
    }

    /* .main_history ul li{
        margin-bottom: 0;
    } */

    .main_history h3 {
        margin: 0 auto 1em;
        width: 90%;
    }

    .ainu_theater .history_ttl_txt {
        top: 35%;
        left: 50%;
        transform: translate(-50%, -35%);
    }

    table.facility-table {
        margin-bottom: 30px;
        line-height: 1.5;
    }

    table.facility-table th {
        width: 25%;
    }

    .ainu_ponchise table.facility-table {
        margin-bottom: 0;
    }

    #event .history_ttl, .tour_info .history_ttl{
        margin-bottom: 1.5em;
    }

    .event_info .span-6 h3{
        width: 100%;
        margin-bottom: .5em;
    }

    .tour_info .span-6 h3 {
        width: 100%;
        margin-bottom: 1em;
    }

    .ainu_history{
        padding: 0;
    }

    .history_content_center picture{
        margin-bottom: 2em;
    }

    .event_box:last-child{
        margin-bottom: 0;
    }

    .tour_info .mb50{
        margin-bottom: 1.5em;
    }

    .tour_info{
        padding-bottom: 100px;
    }

    #pagetop {
        bottom: 10px;
    }

    .span-9 {
        width: 90%;
        margin: 0 auto;
    }

}

@media (min-width : 1200px) {

main{
    overflow: hidden;
}

section{
    position: relative;
}

.para{
    display: block;
    position: absolute;
    z-index: -1;
}

.history_ttl {
    background-color: #003b60;
    padding: .5em;
}

.para_kaku1{
    width: 200px;
    right: -6%;
    top: 0;
}

.para_kaku2{
    width: 300px;
    left: -10%;
    top: 38%;
}

.para_bar1{
    width: 300px;
    right: -13%;
    top: 23%;
}

.para_bar2{
    width: 300px;
    left: -10%;
    top: 10%;
}

.para_kaku3{
    width: 200px;
    right: -7%;
    top: -3%;
    /* top: -30%; */
}

.para_kaku4{
    width: 300px;
    left: -10%;
    top: 50%;
    /* top: 15%; */
}

.para_bar3{
    width: 300px;
    right: -13%;
    top: 60%;
    /* top: 25%; */
}

.para_bar4{
    width: 300px;
    left: -10%;
    top: -10%;
    /* top: -40%; */
}

.para_kaku5{
    width: 150px;
    right: -1em;
    top: .5em;
    /* top: -500px; */
}

.para_bar5{
    width: 300px;
    left: -13%;
    top: -20%;
    /* top: -110%; */
}
}