html, body {
    height: 100%;
}

#index article{
    position: relative;
    height: 100%;
    z-index: 999;
}

#index article .row {
    height: 100%;
}

#index article section {
    display: flex;
    align-items: center;
	justify-content: center;
	align-items: center;
    height: 100%;
}


#index article .hpam {
    background-image: url(/img/synthesis/index01.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #464646;
}

#index article .shukkeien {
    background-image: url(/img/synthesis/index02.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #464646;
}

#index .fixed {
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -232px;
    margin-top: -228px;
}

#index .more a{
    position: relative;
    display: inline-block;
    border: 1px solid #999999;
    color: #999999;
    padding: .5rem 2.5rem .5rem 3rem;
}

#index .more a:hover {
    text-decoration: none;
}

#index .more a::before{
    position: absolute;
    content: " ";
    top: 1rem;
    left: 1.5rem;
    width: 8px;
    height: 8px;
    border-top: 1px solid #999999;
    border-right: 1px solid #999999;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
#index .syuyu {
    padding: 1rem;
    background: #FFF;
    color: #222;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

#index .syuyu.pc {
    position: fixed;
    right: 0;
    bottom: 50px;
    z-index: 9999;
}

#index .syuyu:hover {
    text-decoration: none;
}

#index .syuyu .body::before{
    position: absolute;
    content: " ";
    top: 50%;
    margin-top: -15px;
    right: 1rem;
    width: 30px;
    height: 30px;
    border-top: 1px solid #31281e;
    border-right: 1px solid #31281e;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.sp {
    display: none !important;
}

.pc {
    display: block !important;
}

#course .header,
#menu .header{
    align-items: center;
	justify-content: center;
	align-items: center;
}

#course .header .row > div,
#menu .header .row > div {
    position: relative;
    height: 100%;
    padding: 2.5rem 2rem 2rem;
}

#menu .header .right {
    padding-top: 3rem;
    padding-left: 2rem;
}

#course .header .left,
#menu .header .left{
    text-align: center;
}

#course .header .left {
    background: none;
}

#course .header .right,
#menu3 .header .right{
    position: relative;
    padding: 1rem 2rem 2rem;
}

#course .header .title,
#menu .header .title {
    display: inline-block;
    font-size: 2.5rem;
    text-align: left;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

#course .header .title,
#menu .header .title {
margin-top: 1rem;
/* margin-left: -1rem; */
}

#menu .breadcrumb {
    position: absolute;
    left: 1rem;
    top: 5px;
    width: calc(100% - 4rem);
}

#menu .body > a {
    height: 100%;
}

#menu .body .left {
    display: block;
    position: relative;
    background-image: url(/img/synthesis/menu02.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #464646;
}

#menu .body .right {
    display: block;
    position: relative;
    background-image: url(/img/synthesis/menu03.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #464646;
}

#course footer,
#menu footer {
    background: #9f525a;
    color: rgb(124, 118, 118);
    font-size: .75rem;
    padding: .5rem 1rem;
    color: #FFF;
}

#course footer a,
#menu footer a {
    color: #FFF;
}

#course footer .right,
#menu footer .right{
    text-align: right;
}

#menu .body div {
    color: #FFF;
}

.breadcrumb {
    padding: 0;
    margin: 0;
    background: none;
}

.breadcrumb li{
    color: #9f525a !important;
}

.breadcrumb a {
    color: #808080;
}

.breadcrumb-item+.breadcrumb-item::before{
    display: inline-block;
    padding-right: .5rem;
    color: #808080;
    content: ">";
    padding-left: .25rem;
}

#course .logo {
    position: relative;
    padding-top: 248px;
}

#course .logo img{
    z-index: 999;
    position: absolute;
    left: 50%;
    top: -5rem;
    margin-left: -248px;
}

#course .main-image {
    z-index: 998;
    position: relative;
}

#course .main-image h1{
    text-align: center;
    color: #FFF;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 80%;
    height: 3.2rem;
}

#course .main-image h1 small {
    display: block;
    font-size: 1rem;
}

#course ul,
#course li {
    list-style: none;
    display: inline-block;
    margin: 0;
    padding: 0;
}

#course .route {
    margin-top: 170px;
    padding-bottom: 100px;
    text-align: center;
}

#course .viechle {
    width: 800px;
    margin: 0 auto;
    background: #851f2f;
    padding: 1rem 0;
    z-index: 999;
}

#course .viechle .item{
    position: relative;
    border-right: 1px solid #AAA;
    padding-top: 2rem;
    color: #FFF;
}

#course .viechle .item a{
    color: #FFF;
}


#course .viechle .item a span {
    position: relative;
    display: inline-block;
    padding-left: .5rem;
}

#course .viechle .item a span:before{
    position: absolute;
    content: "";
    left: -.5rem;
    top: .4rem;
    width: 12px;
    height: 12px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #FFF;
}

#course .viechle .item a span:after{
    position: absolute;
    content: "";
    left: calc(-.5rem + 5px);
    top: calc(.4rem + 3px);
    box-sizing: border-box;
    width: 3px;
    height: 3px;
    border: 3px solid transparent;
    border-left: 3px solid #851f2f;
}

#course .viechle .item a:hover{
    text-decoration: none;
}

#course .viechle .item:last-child {
    border: none;
}

#course .viechle .item img{
    position: absolute;
    bottom: 2rem;
    left: 50%;
    margin-left: -65px;
}

#course .spot {
    padding-top: 100px;
    max-width: 1140px;
    margin: 0 auto;
    grid-template-columns: 1fr 1fr 1fr;
}

#course .spot .item {
    position: relative;
}

#course .spot .item .name{
    position: absolute;
    left: -.1rem;
    bottom: -.25rem;
    font-size: 1.75rem;
    text-align: left;
    padding: .5rem;
    background: #FFF;
    color: #FFF;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

#course .spot .item:nth-child(1) .name{
    background: #be0009;
}

#course .spot .item:nth-child(2) .name{
    background: #00a99d;
}

#course .spot .item:nth-child(3) .name{
    background: #603813;
}

#course .ship{
    max-width: 1226px;
    margin: 0 auto;
    margin-bottom: 80px;
}

#course .ship h3{
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 3.5rem;
    margin-bottom: 3rem;
}

#course .bus{
    max-width: 1226px;
    margin: 0 auto;
    margin-bottom: 80px;
}

#course .bus h3{
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 3.5rem;
    margin-bottom: 3rem;
}

#course .news {
    position: relative;
}

#course .news .limit span,
#course .news .limit a{
    display: inline-block;
    border-left: 1px solid #b2b2b2;
    padding: 0 1rem;
}

#course .news .limit .first {
    border: 0;
}

#course .news .limit a {
    color: #a32b3b;
}

#course .news .item {
    border-bottom: 1px solid #eeeeee;
    padding: 1rem 0;
}

#course .news .tag {
    display: inline-block;
    border-radius: 100px;
    line-height: 1.5;
    background: #967c0b;
    color: #FFF;
    font-size: .85rem;
    padding: 0 1.5rem 2px;;
}

#course .news .hpam .tag {
    background: #a32b3b;
}

#course .news .date {
    padding-left: 1rem;
    display: inline-block;
    color: #967c0b;
    margin-bottom: .5rem;
}

#course .news .hpam .date {
    color: #a32b3b;
}

#course .news .page {
    margin: 2rem 0;
}

#course .news .page span,
#course .news .page a{
    display: inline-block;
    border-radius: 10000px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: #f2f1ee;
    color: #9f525a;
    margin: 0 1rem;
}

#course .news .page a:hover {
    text-decoration: none;
}

#course .news .page span {
    border: 3px solid #9f525a;
    line-height: 44px;
}

#course .btn {
    background: #f2f1ee;
    color: #851f2f;
    border-radius: 100px;
    padding: .75rem 0;
    font-size: .85rem;
}

.lang {
    position: fixed;
    right: 0;
    top: 0;
}

.lang select{
    background: url(/img/synthesis/lang.png);
    border: none;
    border-radius: 0;
    color: #FFF;
}

.lang select.bg-none{
    background: none;
}


@media (min-width: 1400px) {
    #menu article .header,
    #course article{
        width: 1400px !important;
        margin: 0 auto;
        padding-bottom: 5rem;
    }
}

@media (max-width:1150px) and (min-width: 767.98px)  {
	#index article .shukkeien,
	#index article .hpam {
		z-index: 9999;
	}
}

@media (min-width: 767.98px) {
    #index, #menu, #menu article {
        height: 100%;
    }

    #menu {
        overflow: hidden;
    }

    #menu .header {
        height: 25%;
    }

    #menu .body {
        height: 75%;
    }

    #menu .body > div {
        height: 100%;
    }

    #course footer,
    #menu footer {
        position: fixed;
        left: 0;
        bottom: 0;
        gap: 0;
    }

    #menu .body div {
        position: absolute;
        font-size: 3rem;
    }
    
    #menu .body .left .title {
        right: 3rem;
        top: 20px;
    }
    
    #menu .body .left .title small {
        display: block;
        font-size: 1rem;
    }
    
    #menu .body .right .title {
        -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
        left: 1rem;
        top: 1rem;
    }
    
    #menu .body .right .title small {
        font-size: 1.25rem;
        -webkit-writing-mode: horizontal-tb;
        -ms-writing-mode: tb-lr;
        writing-mode: horizontal-tb;
    }

    #index .footer {
        position: fixed;
        bottom: 10px;
        right: 10px;
        z-index: 9999;
        color: #999999;
    }

    #menu,
    #course{
        background: url(/img/synthesis/syuyu16.jpg) repeat-y;
        background-size:90%;
    }

    #course article{
        width: 100%;
        margin: 0 auto;
    }

    #course .route {
        background: url(/img/synthesis/syuyu09.png)no-repeat 50% 40px;
    }

    #course .news .limit{
        position: absolute;
        right: 0;
        top: 0;
    }

    #course footer,
    #menu footer {
        width: 100%;
    }
}

@media (max-width: 767.98px) and (-ms-high-contrast:none){
    #index article .block > div{
        margin-right: 10px;
    } 

    #index article .block > div {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #index article .block > div.more.sp {
        display: flex !important;
    }
}

@media (max-width: 767.98px) {
    footer .row > div{
    }

    #menu {
        overflow-x: hidden;
    }

    #course {
        overflow-x: hidden;
    }

    #course .news .limit{
        text-align: center;
        padding-bottom: 1rem;
        border-bottom: 1px dotted #000000;
        margin: 0 15px;
    }

    #course .news .item {
        margin: 0 15px;
    }

    .sp {
        display: block !important;
    }

    .pc {
        display: none !important;
    }

    #index article{
        grid-template-columns: 1fr;
    }

    #index article section{
        padding: 5rem 0;
    }

    #index article img{
        width: 100%;
    }

    #index article div.mb-4 {
        margin-bottom: 0 !important;
    }

    #index article .block{
        padding: 2rem;
        display: grid;
        display: -ms-grid;
        gap: 10px;
        grid-template-columns: 1.5fr 2fr 1fr;
        -ms-grid-columns: 1.5fr 2fr 1fr;
        align-items: center;
        justify-content: center;
    }

    #index article .block > div {
        -ms-grid-column: 1;
        -ms-grid-column-span: 1;
    }
    
    #index article .block > div:nth-child(2) {
        -ms-grid-column: 2;
    }
    
    #index article .block > div:nth-child(3) {
        -ms-grid-column: 3;
    }

    #index .fixed {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -15%;
        margin-top: -15%;
    }

    #index .fixed img{
        width: 50%;
    }

    #index .more a{
        width: 30px;
        height: 30px;
        padding: 1rem;
    }

    #index .more a::before{
        left: .6rem;
        top: .75rem;
    }

    #index .syuyu .body {
        grid-template-columns: 1fr 2fr;
    }

    #index .syuyu .body img{
        width: 100%;
    }

    #index .syuyu .body::before{
        width: 20px;
        height: 20px;
        top: 1rem;
        right: .5rem;
    }

    footer {
        background: #9f525a;
        color: #FFF;
        padding: 1rem;
        font-size: .75rem;
    }

    #menu .left {
        padding: 1rem 0 !important;
    }

    #menu .left img {
        width: 50%;
    }

    #menu .right {
        padding: 1.5rem 0 !important;
         text-align: center;
    }

    #menu .right .title{
        font-size: 1.5rem;
        text-align: center;
    }

    #menu .body .left,
    #menu .body .right {
        height: 300px;
    }

    #menu .body .left .title,
    #menu .body .right .title {
        font-size: 1.5rem;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        width: 80%;
        height: 3.2rem;
    }

    #menu .body {
        align-items: center;
        justify-content: center;
        align-items: center;
    }

    #menu .body > a {
        display: flex;
        text-align: center;
        align-items: center;
        justify-content: center;
        align-items: center;
    }

    #menu .body small {
        display: block;
        font-size: .5rem;
    }

    #course footer .left,
    #menu footer .left {
        padding: 0 1rem !important;
        padding-bottom: .5rem !important;
    }

    #course footer .right,
    #menu footer .right {
        text-align: left;
        padding: 0 1rem !important;
    }

    #menu section,
    #course section {
        /* margin-right: -15px; */
    }

    #course .logo img {
        width: 60%;
        margin-left: -30%;
        top: -1rem;
    }

    #course .viechle {
        width: 100%;
    }

    #course .header .left, #menu .header .left {
        background: #e0c6ca !important;
    }

    #course .header .right, #menu .header .right {
        padding: 1rem;
        text-align: center;
    }

    #course .header .right .title, #menu .header .right .title{
        text-align: center;
        font-size: 1.75rem;
    }

    #course .main-image h1 {
        font-size: 1.25rem;
    }

    #course .main-image h1 small{
        font-size: .75rem;
    }

    #course .logo {
        text-align: left;
        padding: 0 15px;
        padding-top: 130px;
        font-size: .9rem;
    }

    #course .logo p {
        text-align: left;
    }

    #course .route {
        margin-top: 50px;
        margin-bottom: 0;
    }

    #course .viechle li img {
        width: 70%;
        margin-left: -35%;
    }

    #course .viechle {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    #course .viechle li {
        padding-top: 50px;
    }

    #course .spot {
        gap: 0;
        padding-top: 0;
    }

    #course .spot li .name {
        font-size: 1rem;
        left: 0;
        bottom: 0;
    }

    #course .ship,
    #course .bus {
        grid-template-columns: 1fr;
        gap: 0;
    }

    #course .ship h3,
    #course .bus h3 {
        padding: 15px;
        font-size: 2rem;
        margin: 0;
    }

    #course .ship p,
    #course .bus p {
        padding: 15px;
    }

    #course .bus {
        margin-bottom: 50px;
    }

    #course .buttons {
        text-align: center;
        background: #006595;
        align-items: center;
        justify-content: center;
        align-items: center;
        font-size: .85rem;
        padding: 0 15px;
    }

    #course .buttons > div {
        padding: 0;
    }

    #course .buttons a {
        color: #FFF;
        display: flex;
        height: 100%;
        align-items: center;
        justify-content: center;
        align-items: center;
        padding: 5px;
        flex-wrap: wrap;
        height: 60px;
    }

    #course .buttons a.active{
        background: #FFF;
        color: #006595;
        border: 1px solid #006595;
    }

    #course .buttons a small {
        display: block;
        font-size: .2rem;
    }

    #course .buttons a:hover,
    #course .buttons a:active {
        text-decoration: none;
    }

    #menu .header .title,
    #course .header .title {
        width: 100%;
        text-align: center;
        font-size: 2rem;
        margin: 0 !important;
        /* padding-left: 15px; */
    }

    #course .header .row > div, #menu .header .row > div {
        padding: 1rem 0 1rem 0;
    }

    #course .viechle .item {
        font-size: .85rem;
    }

    #course .viechle .item img {
        bottom: 2.25rem
    }

    #course .viechle .item img{
        width: 60%;
        margin-left: -30%;
    }

    #course .spot > div{
        padding: 0;
    }

    #course .spot .item .name{
        font-size: 1rem;
        left: 0;
        bottom: 0;
    }

    #course .route {
        padding-bottom: 3rem;
    }

    #course .ship, #course .bus {
        /* margin-right: -15px; */
    }

    #course .header, #menu .header {
        /* margin-right: -30px; */
    }

    .sp-section {
        padding: 0 15px !important;
    }

    #course footer,
    #menu footer {
        margin-right: -15px !important;
    }
}

@media (max-width: 767.98px) and (min-width: 500px){
    #course .logo {
        padding-top: 250px;
    }
    #course .route {
        margin-top: 120px;
    }
}