@charset "UTF-8";
@font-face { 
    font-family: 'mplus-2p-regular';
    src: url('https://mplus-webfonts.osdn.jp/mplus-2p-regular.eot');
    src: url('https://mplus-webfonts.osdn.jp/mplus-2p-regular.eot?#iefix') format('embedded-opentype'),
        url('https://mplus-webfonts.osdn.jp/mplus-2p-regular.woff') format('woff'),
        url('https://mplus-webfonts.osdn.jp/mplus-2p-regular.ttf') format('truetype');
    font-family: 'mplus-2p-bold';
    src: url('https://mplus-webfonts.osdn.jp/mplus-2p-bold.eot');
    src: url('https://mplus-webfonts.osdn.jp/mplus-2p-bold.eot?#iefix') format('embedded-opentype'),
        url('https://mplus-webfonts.osdn.jp/mplus-2p-bold.woff') format('woff'),
        url('https://mplus-webfonts.osdn.jp/mplus-2p-bold.ttf') format('truetype');
}

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent; 
}

img {
    vertical-align: top;
    margin: 0;
    padding: 0;
}

html {
    width: 100%;
    height: 100%;
}

body {
    width: 100%;
    height: 100%;
    background: repeat url("../img/pattern.png");
    background-size: calc(90vw * (150 / 1920));
}

a:link, a:visited, a:hover, a:active {
    color: #000000;
}

.section_title {
    display: flex;
    align-items: center;
    width: 100%;
    background: #ffffff;
    padding-bottom: calc((90vw / 1920) * 20);
}

.section_title_l {
    display: flex;
    align-items: center;
    width: 50%;
    height: calc((90vw / 1920) * 65); 
    text-align: left;
    font-size: calc((90vw / 1920) * 24);
    font-family: mplus-2p-bold;
    background: #4cafe2;
    color: #000000;
}

.section_title_r {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 50%;
    height: calc((90vw / 1920) * 65); 
    background: #4cafe2;
}

.section_title_l img,
.section_title_r img {
    height: calc((90vw / 1920) * 52);
}

.section_title_r img {
    padding-right: calc((90vw / 1920) * 20);
}

#container {
    position: relative;
    width: 90vw;
    margin: 0 5vw;
    filter: drop-shadow(0 0 0.75rem #909090);
    background: #ffffff;
}

#content-kv {
    position: absolute;
    top: 0;
    left: 0;
    width: 90vw;
    height: calc(90vw * (1411 / 1920));
    background: #ffffff;
    z-index: 1;
}

#content-kv img {
    width: 100%;
}

#goods {
    position: relative;
    top: calc((90vw / 1920) * 1411);
    width: 100%;
    background: #ffffff;
    padding-bottom: calc(((90vw / 1920) * 170));
    z-index: 5;
}

#goods_menu_wrapper {
    display: block;
    width: 90vw;
    margin: 0 5vw;
    z-index: 10;
}

#goods_menu {
    display: flex;
    justify-content: space-around;
    width: 100%;
    background: #ffffff;
}

.goods_menu_absolute {
    position: absolute;
    top: calc((90vw / 1920) * 1411);
}

.goods_menu_fixed {
    position: fixed;
    top: 0;
}

.goods_menu_caption {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 49%;
    height: calc((90vw / 1920) * 45);
    background: #ffffff;
    border: calc((90vw / 1920) * 5) solid #4cafe2;
    text-align: center;
}

.goods_menu_caption::before,
.goods_menu_caption::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  width: 0;
  height: 0;
  margin: auto;
}
.goods_menu_caption::before {
  bottom: calc((90vw / 1920) * -20);
  border-style: solid;
  border-color: #4cafe2 transparent transparent transparent;
  border-width: calc((90vw / 1920) * 19) calc((90vw / 1920) * 19) 0 calc((90vw / 1920) * 19);
  z-index: 10;
}
.goods_menu_caption::after {
  bottom: calc((90vw / 1920) * -12);
  border-style: solid;
  border-color: #ffffff transparent transparent transparent;
  border-width: calc((90vw / 1920) * 13) calc((90vw / 1920) * 13) 0 calc((90vw / 1920) * 13);
  z-index: 10;
}

.goods_menu_caption:hover,
.goods_menu_caption_selected {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 49%;
    height: calc((90vw / 1920) * 45);
    background: #4cafe2;
    border: calc((90vw / 1920) * 5) solid #4cafe2;
    text-align: center;
}

.goods_menu_caption:hover::before,
.goods_menu_caption:hover::after,
.goods_menu_caption_selected::before,
.goods_menu_caption_selected::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  width: 0;
  height: 0;
  margin: auto;
}

.goods_menu_caption:hover::before,
.goods_menu_caption_selected::before {
  bottom: calc((90vw / 1920) * -20);
  border-style: solid;
  border-color: #4cafe2 transparent transparent transparent;
  border-width: calc((90vw / 1920) * 19) calc((90vw / 1920) * 19) 0 calc((90vw / 1920) * 19);
  z-index: 10;
}

.goods_menu_caption:hover::after,
.goods_menu_caption_selected::after {
  bottom: calc((90vw / 1920) * -12);
  border-style: solid;
  border-color: #4cafe2 transparent transparent transparent;
  border-width: calc((90vw / 1920) * 13) calc((90vw / 1920) * 13) 0 calc((90vw / 1920) * 13);
  z-index: 10;
}

.goods_menu_caption a,
.goods_menu_caption:hover a,
.goods_menu_caption_selected a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: calc((90vw / 1920) * 24);
    font-family: mplus-2p-bold;
    text-decoration: none;
    line-height: calc(((90vw / 1920) * 24) * 2);
}

.goods_menu_caption a {
    color: #000000;
}

.goods_menu_caption:hover a,
.goods_menu_caption_selected a {
    color: #ffffff;
}

.goods_title {
    display: block;
    width: 100%;
    padding: calc((90vw / 1920) * 50) 0 0;
}

.goods_title_l,
.goods_title_r {
    display: inline-block;
    font-size: calc((90vw / 1920) * 24);
    font-family: mplus-2p-bold;
    color: #000000;
}

.goods_title_l {
    width: 70%;
    text-align: left;
}

.goods_title_r {
    width: 26%;
    text-align: right;
}

.goods_underline {
    width: 98%;
    border: 0;
    border-top: calc((90vw / 1920) * 5) solid #4cafe2;
    margin-top: 0;
    margin-bottom: calc((90vw / 1920) * 10);
}

.display_half_wrapper {
    display: flex;
    justify-content:
    space-around; width: 100%;
}

.goods_half_2blocks {
    width: 33%;
    display: block;
    text-align: center;
}

.goods_half_2blocks .goods_img {
    width: 46%;
    height: calc((90vw * 0.33) * 0.46);
}

.goods_half_2blocks .goods_img:before {
    padding-top: 100%
}

.goods_half_3blocks {
    width: 49%;
    display: block;
    text-align: center;
}

.goods_half_3blocks .goods_img {
    width: 30%;
    height: calc((90vw * 0.49) * 0.3);
}

.goods_half_4blocks {
    width: 65%;
    display: block;
    text-align: center;
}

.goods_half_4blocks .goods_img {
    width: 21%;
    height: calc((90vw * 0.65) * 0.21);
}

.display_full_wrapper {
    display: flex;
    justify-content:
    space-around; width: 100%;
}

.goods_full_6blocks {
    width: 99%;
    display: block;
    text-align: center;
}

.goods_full_6blocks .goods_img {
    width: 14%;
    height: calc((90vw * 0.99) * 0.14);
}

.goods_img_wrapper_center {
    text-align: center; 
}

.goods_img_wrapper_left {
    text-align: left; 
}

.goods_img {
    position: relative;
    padding: calc((90vw / 1920) * 4);
}

.goods_img:hover {
    top: calc((90vw / 1920) * -5);
    left: calc((90vw / 1920) * -5);
    filter: drop-shadow(0.3rem 0.3rem 0.3rem #909090);
}

.nobr {
    display: none;
}

#goods_set,
#goods_single {
    position: relative;
    top:  calc(((90vw / 1920) * 65) + ((90vw / 1920) * 45) + ((90vw / 1920) * 20));
    width: 100%;
    background: #ffffff;
}

#overview {
    position: relative;
    top: calc((90vw / 1920) * 1411);
    width: 100%;
    height: calc(((90vw / 1920) * 65) + ((90vw / 1920) * 399) + ((90vw / 1920) * 859) + ((90vw / 1920) * 20) + ((90vw / 1920) * 610) + ((90vw / 1920) * 20));
}

#overview_content {
    display: flex;
    justify-content: center;
    background: #ffffff;
    height: calc(((90vw / 1920) * 399) + ((90vw / 1920) * 859) + ((90vw / 1920) * 20) + ((90vw / 1920) * 610));
}

#overview_text {
    position: absolute;
    top: calc((90vw / 1920) * 65);
    left: 0;
    width: calc(90vw * (1228 / 1920));
    padding: calc((90vw / 1920) * 36) 0 0 calc((90vw / 1920) * 72);
    background: #ffffff;
    font-size: calc((90vw / 1920) * 22);
    font-family: mplus-2p-regular;
    color: #000000;
}

#overview_map {
    position: absolute;
    top: calc((90vw / 1920) * 65);
    left: calc(90vw * (1228 / 1920));
    width: calc(90vw * (692 / 1920));
}

#overview_map img {
    width: 100%;
}

#overview_img {
    position: absolute;
    top: calc(((90vw / 1920) * 65) + ((90vw / 1920) * 399));
    left: 0;
    display: flex;
    justify-content: space-around;
    width: 100%;
}

#overview_img img {
    width: calc((90vw / 1920) * 928);
    height: calc((90vw / 1920) * 859);
}

#overview_tools {
    position: absolute;
    top: calc(((90vw / 1920) * 65) + ((90vw / 1920) * 399) + ((90vw / 1920) * 859) + ((90vw / 1920) * 20));
    left: 0;
    display: flex;
    justify-content: space-around;
    width: 100%;
}

#overview_tools img {
    width: calc((90vw / 1920) * 1881);
    height: calc((90vw / 1920) * 611);
}

#overview_tools div {
    position: absolute;
    top: calc((90vw / 1920) * 440);
    left: calc((90vw / 1920) * 580);
    width: calc((90vw / 1920) * 480);
    height: calc((90vw / 1920) * 48);
}

#overview_tools div a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#caution {
    position: relative;
    top: calc((90vw / 1920) * 1411);
    width: 100%;
    background: #ffffff;
}

#caution_text {
    width: calc(90vw - ((90vw / 1920) * 144));
    padding: calc((90vw / 1920) * 36) calc((90vw / 1920) * 72) calc((90vw / 1920) * 144) calc((90vw / 1920) * 72);
    font-size: calc((90vw / 1920) * 18);
    font-family: mplus-2p-regular;
    color: #000000;
}

#share {
    height: calc(((90vw / 1920) * 58) + ((90vw / 1920) * 30));
    text-align:center;
    background: #ffffff;
    padding-bottom: calc(((90vw / 1920) * 30));
}

#share a {
    padding: 0 calc((90vw / 1920) * 100);
}

#share a img {
    width: calc((90vw / 1920) * 58);
}

#footer {
    height: calc(((90vw / 1920) * 20) * 1.5 * 12);
    background: #ffffff;
    text-align:center;
    font-size: calc((90vw / 1920) * 20);
    font-family: mplus-2p-medium;
    color: #4cafe2;
}

#btn_top {
    display: none;
    position: fixed;
    right: calc((90vw / 1920) * 20);
    bottom: calc((90vw / 1920) * 20);
    width: calc((90vw / 1920) * 196);
    height: calc((90vw / 1920) * 220);
    background: no-repeat center/100% url("../img/pagetop.png");
    z-index: 15;
    text-align: center;
}

#modal_box {
    position: fixed;
    display: none;
    z-index: 30;
}

#btn_modal_close {
    position: absolute;
    top: calc((90vw / 1920) * -60);
    width: calc((90vw / 1920) * 46);
}

#btn_modal_discend {
    position: absolute;
    top: calc((90vw / 1920) * 420);
    left: calc((90vw / 1920) * -68);
    width: calc((90vw / 1920) * 48);
}

#btn_modal_ascend {
    position: absolute;
    top: calc((90vw / 1920) * 420);
    left: calc((90vw / 1920) * 740);
    width: calc((90vw / 1920) * 48);
}

#modal_title {
    display: flex;
    align-items: center;
    width: 100%;
    height: calc((90vw / 1920) * 40);
    background: #4cafe2;
    text-indent: calc((90vw / 1920) * 40);
    font-size: calc((90vw / 1920) * 18);
    font-family: mplus-2p-bold;
    color: #000000;
}

#modal_content {
    width: 100%;
    background: #ffffff;
}

#img_title,
#img_description {
    display: block;
    width: calc((90vw / 1920) * 640);
    padding: calc((90vw / 1920) * 10) 0 0 calc((90vw / 1920) * 40);
    font-size: calc((90vw / 1920) * 18);
    font-family: mplus-2p-bold;
    color: #000000;
}

#modal_img {
    width: calc((90vw / 1920) * 720);
}

.modal_box {
    width: calc((90vw / 1920) * 720);
}

.modal_box_book {
    width: calc((90vw / 1920) * 1040);
    height: calc((90vw / 1920) * 780);
}

.btn_modal_close {
    left: calc((90vw / 1920) * 660);
}

.btn_modal_close_book {
    left: calc((90vw / 1920) * 1000);
}

.img_description_book {
    position: relative;
    left: calc((90vw / 1920) * 440);
    top: calc((90vw / 1920) * -700);
    display: block;
    width: calc((90vw / 1920) * 560);
}

.modal_img_book {
    position: relative;
    left: calc((90vw / 1920) * -120);
}

#modal_bg {
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
    z-index: 20;
}

@media screen and (max-width: 960px) {
    .section_title_l,
    .section_title_r {
        height: calc((90vw / 1920) * 90); 
    }

    .section_title_r img {
        height: calc(((90vw / 1920) * 52) * 1.5);
    }
    
    .goods_menu_caption,
    .goods_menu_caption:hover,
    .goods_menu_caption_selected {
        height: calc((90vw / 1920) * 70);
    }

    .section_title_l,
    #title_l,
    .goods_menu_caption a,
    .goods_menu_caption:hover a,
    .goods_menu_caption_selected a,
    .goods_title_l,
    .goods_title_r {
        font-size: calc((90vw / 1920) * 48);
    }

    .goods_menu_caption a,
    .goods_menu_caption:hover a,
    .goods_menu_caption_selected a {
        line-height: calc(((90vw / 1920) * 48) * 1.5);
    }

    #caution_text {
        font-size: calc((90vw / 1920) * 36);
    }

    #overview {
        height: calc(((90vw / 1920) * 90) + ((90vw / 1920) * 399) + ((90vw / 1920) * 859) + ((90vw / 1920) * 20) + ((90vw / 1920) * 610) + ((90vw / 1920) * 20));
    }

    #overview_text {
        top: calc((90vw / 1920) * 90);
        font-size: calc((90vw / 1920) * 44);
    }

    #overview_map {
        top: calc((90vw / 1920) * 90);
    }

    #overview_img {
        top: calc(((90vw / 1920) * 90) + ((90vw / 1920) * 399));
    }

    #overview_tools {
        top: calc(((90vw / 1920) * 90) + ((90vw / 1920) * 399) + ((90vw / 1920) * 859) + ((90vw / 1920) * 20));
    }

    .display_half_wrapper,
    .display_full_wrapper {
        display: block;
    }

    .goods_half_2blocks,
    .goods_half_3blocks,
    .goods_half_4blocks,
    .goods_full_6blocks {
        width: 99%;
    }

    .goods_half_2blocks .goods_img,
    .goods_half_3blocks .goods_img,
    .goods_half_4blocks .goods_img,
    .goods_full_6blocks .goods_img {
        width: 30%;
        height: calc((90vw * 0.99) * 0.3);
    }

    .goods_img_wrapper_center,
    .goods_img_wrapper_left {
        text-align: center;
    }

    #goods_set,
    #goods_single {
        top:  calc(((90vw / 1920) * 90) + ((90vw / 1920) * 70) + ((90vw / 1920) * 20));
    }

    .nobr {
        display: inline;
    }

    #btn_top {
        width: calc((90vw / 1920) * 392);
        height: calc((90vw / 1920) * 440);
    }
}
@media screen and (max-width: 960px) and (orientation: portrait) {
    #btn_modal_close {
        top: calc((90vw / 1920) * -120);
        width: calc((90vw / 1920) * 92);
    }
    
    #btn_modal_discend {
        top: calc((90vw / 1920) * 840);
        left: calc((90vw / 1920) * -136);
        width: calc((90vw / 1920) * 96);
    }
    
    #btn_modal_ascend {
        top: calc((90vw / 1920) * 840);
        left: calc((90vw / 1920) * 1480);
        width: calc((90vw / 1920) * 96);
    }
    
    #modal_title {
        height: calc((90vw / 1920) * 60); 
        font-size: calc((90vw / 1920) * 32);
    }

    #img_title,
    #img_description {
        font-size: calc((90vw / 1920) * 32);
    }

    #modal_img {
        width: calc((90vw / 1920) * 1440);
    }
    
    .modal_box {
        width: calc((90vw / 1920) * 1440);
    }
    
    .modal_box_book {
        width: calc((90vw / 1920) * 2080);
        height: calc((90vw / 1920) * 1560);
    }
    
    .btn_modal_close {
        left: calc((90vw / 1920) * 1320);
    }
    
    .btn_modal_close_book {
        left: calc((90vw / 1920) * 2000);
    }
    
    .img_description_book {
        position: relative;
        left: calc((90vw / 1920) * 880);
        top: calc((90vw / 1920) * -1400);
        display: block;
        width: calc((90vw / 1920) * 1120);
    }
    
    .modal_img_book {
        position: relative;
        left: calc((90vw / 1920) * -120);
    }
}