@charset "utf-8";

@import url("https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap");

/* Rest
-----------------------------------------------------------------------*/
html, body, div, span, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, address, cite,del,em, img,
small, strike,  sub, sup,
b, u, i, center,dl, dt, dd, ol, ul, li,
form, label, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header,
menu, nav, section,time, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    box-sizing: border-box;
}
article, main, aside, details, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body{
    min-width: 320px;
	-webkit-highlight: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-user-select: text;
	-webkit-text-size-adjust: 100%;
	-webkit-overflow-scrolling: touch;
	text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	font-smoothing: antialiased;
}
article{
    z-index: 1;
    position: relative;
}
ol, ul {
    list-style: none;
}

.clearfix {
  display: inline-block;
  /* Hides from IE-mac \*/note
  *zoom: 1;
  display: block;
  /* End hide from IE-mac */
}
.clearfix:after {
  content: " ";
  display: block;
  height: 0;
  visibility: hidden;
  clear: both;
}

html{
    font-size: 10px;
}
@media screen and (max-width: 748px){
    html{
        font-size: 1.333vw;
    }
}

.wrap{
	overflow:hidden;
}

#content-area{
    font-family: "Kosugi Maru", serif;
    color: #555555;
    line-height: 2;
    background: url("../images/bg01.png") 50% 0 no-repeat;
    background-size: cover;
    background-attachment: fixed;
    overflow: hidden;
}

.content-inner{
	max-width: 748px;
	margin: 0 auto;
	padding: 0;
    background: #f2e9d6;
    box-shadow: rgba(185, 202, 220, 0.7) 0px 0px 20px 5px;
}
.content-inner img{
    width: 100%;
}
.content-inner ul.note-list{}
.content-inner ul.note-list li{
	text-indent: -1em;
	padding-left: 1em;
    text-align: left;
}
.content-inner .btn a,
.content-inner .btn span{
    display: block;
    transition: opacity .4s;
}
.content-inner .btn a:hover{
    opacity: .7;
}
.content-inner .over{
    transition: opacity .4s;
}
.content-inner .over:hover{
    opacity: .7;
}

.content-top{
    background: url("../images/bg02.png") 50% 0 no-repeat;
    background-size: 100% auto;
    margin-bottom: 1%;
    padding: 4.3% 0 0;
}
.content-top .top-logo{
    width: 55.615%;
    margin: 0 auto;
}
.content-top h1.top-ti{
    width: 100%;
    margin: 4% auto 5.48%;
}
.content-top .top-slide{
    padding: 0 8.556%;
    position: relative;
}
.content-top .top-txt{
    text-align: center;
    background: url("../images/bg03t.png"),url("../images/bg03b.png");
    background-size: 100% auto,100% auto;
    background-repeat: no-repeat,no-repeat;
    background-position: 50% 0,50% 100%;
    padding: 13.77% 0 14.04%;
    text-shadow: 0px 0px 10px rgba(255, 255, 255, 1);
}
.content-top .top-txt p{
    font-size: 2.4rem;
}
.content-top .top-txt p + p{
    margin-top: 6.67%;
}

.content-sec{}
.content-sec .sec-block{
    padding: 0 10.7%;
}

.content-sec .sec-block .note-list{
    font-size: 1.8rem;
}
.content-sec .sec-block .note-list li{}
.content-sec .sec-block .note-list li + li{
    margin-top: 0.5em;
}
.content-sec .sec-block .note-list{
    color: #747686;
}
.content-sec .sec-block .note-list a{
    color: #747686;
    text-decoration: underline;
}

.content-sec #sec-sale.sec-block{}
.content-sec #sec-sale.sec-block .sale-block{
    color: #747686;
    background: url("../images/bg04t.gif"),url("../images/bg04b.gif"),url("../images/bg04.gif");
    background-size: 100% auto,100% auto,100% auto;
    background-repeat: no-repeat,no-repeat,repeat-y;
    background-position: 0 0,0 100%,0 0;
    padding: 8.5% 5.1% 6.8%;
    line-height: 1.5;
}
.content-sec #sec-sale.sec-block .sale-block .item{}
.content-sec #sec-sale.sec-block .sale-block .item + .item{
    margin-top: 8.3%;
    padding-top: 11.36%;
    background: url("../images/line01.png") 50% 0 no-repeat;
}
.content-sec #sec-sale.sec-block .sale-block h2{
    font-size: 2rem;
    text-align: center;
    font-weight: bold;
    margin-bottom: 5.1%;
    background-size: 100% auto;
}
.content-sec #sec-sale.sec-block .sale-block .note-list{
    background: #ffffff;
    padding: 5.1%;
    border-radius: 1rem;
}

.content-sec #sec-att.sec-block{
    margin-top: 6.68%;
}
.content-sec #sec-att.sec-block .att-block{
    line-height: 1.5;
    background: #ffffff;
}
.content-sec #sec-att.sec-block .att-block h2{
    font-size: 2.6rem;
    color: #ffffff;
    background: #bfab84;
    padding: 0.2em 0;
    text-align: center;
    position: relative;
    cursor: pointer;
}
.content-sec #sec-att.sec-block .att-block h2:before{
    content: "";
    right: 12px;
    width: 20px;
    height: 19px;
    clip-path: polygon(50% 19px, 0% 0%, 20px 0%);
    transform: translateY(-50%);
    position: absolute;
    top: 50%;
    background: #ffffff;
    transition: 0.3s;
}
.content-sec #sec-att.sec-block .att-block h2.active:before{
    transform: translateY(-50%) rotate(180deg);
}
@media screen and (max-width: 748px){
    .content-sec #sec-att.sec-block .att-block h2:before{
        content: "";
        right: 1.6vw;
        width: 2.67vw;
        height: 2.54vw;
        clip-path: polygon(50% 2.54vw, 0% 0%, 2.67vw 0%);
    }
}
.content-sec #sec-att.sec-block .att-block h2 span{
    font-size: 2.2rem;
}
.content-sec #sec-att.sec-block .att-block .note-list{
    padding: 3.4% 5.1%;
    display: none;
    border: 1px #bfab84 solid;
    border-top: none;
}

.content-sec #sec-goods.sec-block{
    margin-top: 5.35%;
    padding-bottom: 69.5%;
    background: url("../images/bg05.png") 50% 100% no-repeat;
    background-size: 100% auto;;
}
.content-sec #sec-goods.sec-block iframe{
    width: 100%;
}


.content-btm{
    margin-top: 10.7%;
    padding: 0 5.33% 0;
}
.content-btm .link-list{}
.content-btm .link-list .btn{
    line-height: 1;
}
.content-btm .link-list .btn + .btn{
    margin-top: 4.48%;
}
.content-btm .follow-link{
    margin-top: 22.4%;
}
.content-btm .follow-link h3{
    font-size: 2.8rem;
    text-align: center;
}
.content-btm .follow-link h3 span{
    color: #86b3e0;
}
.content-btm .follow-link .btn{
    margin-top: 5%;
}


/* .share */
.share{
    margin-top: 7%;
    padding-top: 17.38%;
    background: url("../images/bg06.png") 50% 0 no-repeat;
    background-size: 100% auto;
}
.share h2{
    width: 34.9%;
    margin: 0 auto;
}
.share .snsBtn{
    display: flex;
    justify-content: center;
    margin-top: 5.33%;
}
.share .snsBtn li{
    width: 8.93%;
    line-height: 1;
}
.share .snsBtn li + li{
    margin-left: 2%;
}
.share .snsBtn li a{
    display: block;
    transition: opacity 0.4s;
}
.share .snsBtn li a:hover{
    opacity: 0.7;
}
.share .snsCap{
    margin-top: 4.27%;
    padding: 0 5.33%;
}
.share .snsCap h3{
    font-size: 1.6rem;
    margin-bottom: 1em;
    text-align: center;
}
.share .snsCap ul li{
    font-size: 1.4rem;
}

.btm-note{
    margin-top: 2em;
    padding: 0 5.33% 9.33%;
}
.btm-note ul{}
.btm-note ul li{
    font-size: 1.4rem;
    text-align: right !important;
}
@media screen and (max-width: 748px){
    .share .snsCap h3{
        font-size: 2.2rem;
    }
    .share .snsCap ul li{
        font-size: 2rem;
    }
    .btm-note ul li{
        font-size: 2rem;
    }
}


/* animation */
.inview_fadein,
.inview_fadeins > *,
.inview_fadein_item,
.inview_fadeins_item > * {
	opacity: 0;
}
.inview_fadein_end:nth-child(10n+1) {animation: anime01 1.5s cubic-bezier(.23,1,.32,1) .2s forwards;}
.inview_fadein_end:nth-child(10n+2) {animation: anime01 1.5s cubic-bezier(.23,1,.32,1) .4s forwards;}
.inview_fadein_end:nth-child(10n+3) {animation: anime01 1.5s cubic-bezier(.23,1,.32,1) .6s forwards;}
.inview_fadein_end:nth-child(10n+4) {animation: anime01 1.5s cubic-bezier(.23,1,.32,1) .8s forwards;}
.inview_fadein_end:nth-child(10n+5) {animation: anime01 1.5s cubic-bezier(.23,1,.32,1) 1s forwards;}
.inview_fadein_end:nth-child(10n+6) {animation: anime01 1.5s cubic-bezier(.23,1,.32,1) 1.2s forwards;}
.inview_fadein_end:nth-child(10n+7) {animation: anime01 1.5s cubic-bezier(.23,1,.32,1) 1.4s forwards;}
.inview_fadein_end:nth-child(10n+8) {animation: anime01 1.5s cubic-bezier(.23,1,.32,1) 1.6s forwards;}
.inview_fadein_end:nth-child(10n+9) {animation: anime01 1.5s cubic-bezier(.23,1,.32,1) 1.8s forwards;}
.inview_fadein_end:nth-child(10n) {animation: anime01 1.5s cubic-bezier(.23,1,.32,1) 2s forwards;}

.inview_fadein_item_end:nth-child(3n+1) {animation: anime01 1.5s cubic-bezier(.23,1,.32,1) .2s forwards;}
.inview_fadein_item_end:nth-child(3n+2) {animation: anime01 1.5s cubic-bezier(.23,1,.32,1) .4s forwards;}
.inview_fadein_item_end:nth-child(3n) {animation: anime01 1.5s cubic-bezier(.23,1,.32,1) .6s forwards;}

@keyframes anime01 {
	0% {transform:translate(0, 50px); opacity: 0;}
	100% {transform:translate(0, 0); opacity: 1;}
}


/* slide */
.top-slide .slide-button-prev{
    width: 40px;
    height: 45px;
    clip-path: polygon(0% 50%, 40px 0%, 40px 45px);
    background: #077bb6;
    position: absolute;
    top: 50%;
    left: 52px;
    transform: translateY(-50%);
    z-index: 1;
    cursor: pointer;
}
.top-slide .slide-button-next{
    width: 40px;
    height: 45px;
    clip-path: polygon(40px 50%, 0% 0%, 0% 45px);
    background: #077bb6;
    position: absolute;
    top: 50%;
    right: 52px;
    transform: translateY(-50%);
    z-index: 1;
    cursor: pointer;
}

.top-slide .swiper-pagination{
	bottom: -35px;
}
.top-slide .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.top-slide .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 22.5px;
}
.top-slide .swiper-pagination-bullet{
    background-color: #ded0b5;
    opacity: 1;
    height: 14px;
    width: 14px;
}
.top-slide .swiper-pagination-bullet.swiper-pagination-bullet-active{
    background-color: #71a0b7;
}
@media screen and (max-width: 748px){
    .top-slide .slide-button-prev{
        width: 5.3476vw;
        height: 6.016vw;
        clip-path: polygon(0% 50%, 5.3476vw 0%, 5.3476vw 6.016vw);
        left: 6.95vw;
    }
    .top-slide .slide-button-next{
        width: 5.3476vw;
        height: 6.016vw;
        clip-path: polygon(5.3476vw 50%, 0% 0%, 0% 6.016vw);
        right: 6.95vw;
    }

    .top-slide .swiper-pagination{
        bottom: -4.68vw;
    }
    .top-slide .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
    .top-slide .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
      margin: 0 3vw;
    }
    .top-slide .swiper-pagination-bullet{
        background-color: #ded0b5;
        opacity: 1;
        height: 1.87vw;
        width: 1.87vw;
    }
}