@charset "UTF-8";

@font-face {
    font-family: 'Clarendon LT Std';
    src: url(../fonts/ClarendonLTStd-Bold.otf);
}

@font-face {
    font-family: 'Roboto Condensed';
    src: url(../fonts/RobotoCondensed-Bold.ttf);
}

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

#Wrap , .wrapBottom , .wrapTop{
    width: 100%;
}

.path {
    width: 1000px;
    text-align: left;
    font-size: 12px;
    line-height: 1;
    padding-top: 5px;
    font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    margin: 0 auto 20px;
}

.path a {
    color: #000;
    text-decoration: none;
}

.OCEANS_lp{
    width: 100%;
    font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
    background-color: #947A51;
}

.OCEANS_lp img{
    width: 100%;
}

.OCEANS_lp .relative{
    position: relative;
    width: 1200px;
    margin: 0 auto 60px;
}

.OCEANS_lp figure{
    width: 1200px;
    margin: 0 auto;
}

.OCEANS_lp .coupon{
    position: absolute;
    right: 170px;
    bottom: 115px;
    font-family: Clarendon LT Std;
    font-size: 20px;
    color: #987753;
}

.OCEANS_lp .copybtn{
    position: absolute;
    right: 90px;
    bottom: 121px;
    font-family: 'Roboto Condensed';
    font-size: 16px;
    color: #fff;
    background-color: #987753;
    padding: 1px 15px;
    border-width: 0;
}

.OCEANS_lp .copy{
    display: none;
    position: absolute;
    right: 186px;
    bottom: 98px;
    font-size: 11px;
    color: #000;
}


.OCEANS_lp section{
    margin: 0 auto;
}

.OCEANS_lp .column{
    background-color: #b4b1b1;
}

.OCEANS_lp h2{
    padding-top: 60px;
    font-size: 35px;
    font-family: 'Roboto Condensed';
    text-align: center;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

.OCEANS_lp ul{
    width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-top: 30px;
    padding-bottom: 70px;
}

.OCEANS_lp li{
    width: 485px;
    padding-bottom: 30px;
}

#Foot {
    margin: 0 auto;
}


/* for pc */
@media only screen and (min-width: 768px) {

/*** ▽検索窓▽ ***/

.search-box {
    border: 1px solid #000;
    right: 40px;
    padding: 20px;
	background: #fff;
}

.search-box p {
    font-size: 13px;
    text-align: center;
    letter-spacing: 0.1em;
}

.search-box .btn-close {
    top: -14px;
    right: -14px;
    position: absolute;
}

.search-box .btn-close img {
    width: 16px;
    background: #fff;
    padding: 5px;
}

.search-box #hSearch {
    position: relative;
}

.search-box #hSearch .box {
    padding: 0;
    margin-top: 10px;
}

.search-box #hSearch .box .text {
	background: #eee;
    border: none;
    width: 220px;
    height: 26px;
    padding: 10px;
}

.search-box #hSearch .btnH {
    position: absolute;
    top: 0;
    right: 0;
}

.search-box #hSearch .btnH img {
    width: 20px;
	padding: 13px;
}
}


/* for sp */
@media only screen and (max-width: 767px) {

    /* .pc_only{
        display: none;
    } */
    
    #Wrap {
        width: 100%;
        text-align: left;
        margin: 0px auto;
    }
    .wrapTop {
        width: 100%;
    }
    #Foot {
        width: 100%;
        clear: both;
    }
    #Contents {
        overflow: hidden;
        margin-top: 0 !important;
    }
    
    .path {
        margin: calc(45 * (100vw / 1125));
        padding: 0 !important;
        font-size: calc(30 * (100vw / 1125)) !important;
        overflow: hidden;
        width: auto;
        line-height: 1.75;
    }
    
    .path a {
        color: #000;
        text-decoration: none;
    }
    
    .OCEANS_lp{
        /* position: relative; */
        width: 100%;
        font-family: 'Roboto Condensed', sans-serif;
        font-weight: 400;
        font-style: normal;
    }
    
    .OCEANS_lp img{
        width: 100%;
    }
    
    .OCEANS_lp .relative{
        position: relative;
        width: calc(750* (100vw / 750));
        margin: 0 auto calc(60* (100vw / 390));
    }

    .OCEANS_lp figure{
        width: calc(750 * (100vw / 750));
        margin: 0 auto;
        position: relative;
    }
    
    .OCEANS_lp .coupon{
        position: absolute;
        right: calc(244* (100vw / 750));
        bottom: calc(318* (100vw / 750));
        font-family: Clarendon LT Std;
        font-size: calc(40* (100vw / 750));
        color: #987753;
        z-index: 99;
    }
    
    .OCEANS_lp .copybtn{
        position: absolute;
        right: calc(314* (100vw / 750));
        bottom: calc(280* (100vw / 750));
        font-family: 'Roboto Condensed';
        font-size: calc(28* (100vw / 750));
        color: #fff;
        background-color: #987753;
        padding:calc(2* (100vw / 750)) calc(30* (100vw / 750));
        border-width: 0;
        z-index: 99;
    }
    
    .OCEANS_lp .copy{
        display: none;
        position: absolute;
        right: calc(273* (100vw / 750));
        bottom: calc(220* (100vw / 750));
        font-size: calc(22* (100vw / 750));
        color: #000;
        z-index: 99;
    }
    
    .OCEANS_lp section{
        margin: 0 auto;
    }
    
    .OCEANS_lp .column{
        background-color: #b4b1b1;
    }
    
    .OCEANS_lp h2{
        padding-top: calc(60 * (100vw / 390));
        font-size: calc(90 * (100vw / 1125));
        text-align: center;
        color: #fff;
        line-height: 1;
        font-weight: bold;
        margin: 0;
    }
    
    .OCEANS_lp ul{
        width: calc(1000 * (100vw / 1125));
        margin: 0 auto;
        list-style: none;
        padding: calc(20 * (100vw / 390)) 0 calc(65 * (100vw / 390)); 
    }
    
    .OCEANS_lp li{
        width: 100%;
        padding-bottom: calc(15 * (100vw / 390));
    }
    
    .OCEANS_lp .down{
        position: relative;
        padding-bottom: 0;
    }
    
    .OCEANS_lp .down a::before{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 95%;
        background-color: rgba(0, 0, 0, 0.4) 
    }
    
    .OCEANS_lp .down_text{
        position: absolute;
        top: calc(70* (100vw / 750 ));
        left: calc(160* (100vw / 750 )); 
        color: #fff;
        z-index: 1;
        font-size: calc(40* (100vw / 750 ));
        font-weight: bold;
    }
    
    .search-box {
        position: fixed;
        bottom: 0;
        background: #fff;
        border: calc(2* (100vw / 750)) solid #000;
        padding: calc(40* (100vw / 750));
        width: calc(666* (100vw / 750));
        top: calc(128* (100vw / 750))!important;
        right: unset;
    }
    
    .search-box p {
        font-size: calc(22* (100vw / 750));
        text-align: center;
        margin: 0 0 calc(20* (100vw / 750));
    }
    
    .search-box #hSearch {
        list-style: none;
        padding: 0;
        margin: 0;
        position: relative;
    }
    
    .search-box #hSearch .box .text {
        background: #eee;
        border: navajowhite;
        width: 96%;
        height: calc(70* (100vw / 750));
        padding: 2%;
    }
    
    .search-box #hSearch .btnH img {
        width: calc(40* (100vw / 750));
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        right: 5%;
    }
    
    .search-box .btn-close img {
        width: calc(30* (100vw / 750));
        top: calc(20* (100vw / 750));
        right: calc(20* (100vw / 750));
        position: absolute;
    }
    
    /* 追加 */
    /* .coupon {
        font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic", "メイリオ", sans-serif;
        font-size: calc(78 * (100vw / 1125));
        color: #60370e;
        letter-spacing: .01em;
        margin: 0 auto;
        position: absolute;
        top: calc(3875 * (100vw / 1125));
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
    } */
    
    #pagetop {
        display: none;
    }
    
    .page-share-btn {
        z-index: 99;
    }
    
    figure {
        pointer-events: none;
        -webkit-touch-callout:none;
        -webkit-user-select:none;
        -moz-touch-callout:none;
        -moz-user-select:none;
        touch-callout:none;
        user-select:none;
    }
    

    .btn-small{
        position: fixed;
        top: calc(300* (100vw / 750));
        right: 0;
      }
      .btn-small img{
        width: calc(80* (100vw / 750));
      }
      .search-box {
        display: none;
        /* top: calc(110* (100vw / 750))!important; */
        top: 0!important;
        bottom: unset;
        width: calc(670* (100vw / 750));
        border-right: none;
        border-left: none;
        z-index: 999999;
      }


}