/*
Theme Name: 
*/
body {
    font-family: 'YakuHanJPs','Noto Sans JP', sans-serif;
    font-size: 16px;
    color: #484848;
    background: #fff9f0;
    line-height: 1.8;
    letter-spacing: 0.05em;
    text-align: justify;
    background: url(https://smith-bridal.com/wp/wp-content/uploads/2019/10/ring.jpg);
    background-size: cover;
    background-attachment: fixed;
}

a {color:#a58260;}
/*見出し*/
h1,h2,h3,h4,h5 {color: #595959;font-weight: normal;}
h1 {
    font-size: 11px;
    display: inline-block;
    line-height: 1.4;
    margin-left: 20px;
}
h2 {
    font-size: 42px;
    font-weight: normal;
    text-align: center;
    line-height: 1.5;
    margin-bottom: 30px;
}
.h2s {font-size: 36px}
h3 {font-size: 16px;}
h4 {font-size: 15px;}
h5 {font-weight: bold;}
p {line-height: 1.5}
.mincho {font-family: 'YakuHanJPs','Noto Serif JP', serif,"游明朝", "YuMincho","ヒラギノ明朝", serif;}

.fbox {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
}
.fb-center {justify-content: center;}
.fb-between {justify-content: space-between;}


/*カラム設定*/
.wrapper {
    margin:0 auto;
    max-width: 750px;
    background: #fff;
}
.inner {padding: 0 40px}

/*ヘッダー*/
header {padding: 20px 0 25px;max-width: 750px;margin: 0 auto}
.logo img {margin-right: 20px;width: 134px;}
.main {position: relative;left: 40px;z-index: 100;}
.main img {width: 100%;box-shadow: 0 0 15px #9e9e9e;}
.title-area {
    color: #fff;
    font-size: 44px;
    position: relative;
    top: -460px;
    letter-spacing: 0em;
    margin-bottom: -220px;
    z-index: 110;
}
.title {
    background: rgb(250,146,137);
    background: -moz-linear-gradient(45deg, rgba(250,146,137,1) 0%, rgba(254,198,127,1) 100%);
    background: -webkit-linear-gradient(45deg, rgba(250,146,137,1) 0%,rgba(254,198,127,1) 100%);
    background: linear-gradient(45deg, rgba(250,146,137,1) 0%,rgba(254,198,127,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fa9289', endColorstr='#fec67f',GradientType=1 );
    margin-bottom: 20px;
    padding: 10px 20px;
    display: inline-block;
}
.sub-title {
    background: #59493f;
    padding: 10px 20px;
    display: inline-block;
}
.content {
    margin-right: 40px;
    margin-bottom: 50px;
    padding-bottom: 10px;
}
.content .inner {padding:0 40px 0 40px;}
.gentei {
    background: #eee;
    padding-top: 150px;
    position: relative;
    top: -100px;
    margin-bottom: -50px;
}
.gentei li {margin-bottom: 5px;}
.kouhou {background: #e9e0d3;margin-bottom: 150px;}
.wax {background: #eee;margin-bottom: 100px;}
.casual {background: #e9e0d3;margin-bottom: 150px;}
.option {background: #eee;margin-bottom: 100px;}
.icon-ring2 {
    text-align: right;
    position: relative;
    top: 60px;
    margin-top: -60px;
    margin-right: 50px;
}
.icon-ring2 img{width: 99px;}
.u-line {
    background: linear-gradient(transparent 60%, #fff45c 60%);
    padding: 0 10px;
}
ul {margin: 30px;}
li {font-weight: bold}
.btn {
    width: 380px;
    text-align: center;
    margin: 40px auto;
    color:#fff;
    padding: 37px 0 30px;
    border-radius: 9px;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0px 4px 7px #000;
}
.btn01 {
    background: url(/lp/images/btn-bg-01.jpg);
    background-size: cover;
}
.btn02 {
    background: url(/lp/images/btn-bg-02.png);
    background-size: cover;
}
.btn03 {
    background: url(/lp/images/btn-bg-03.jpg);
    background-size: cover;
}
.btn04 {
    background: url(/lp/images/btn-bg-04.jpg);
    background-size: cover;
}
.btn05 {
    background: url(/lp/images/btn-bg-05.jpg);
    background-size: cover;
}
.btn06 {
    background: rgb(250,146,137);
background: -moz-linear-gradient(45deg, rgba(250,146,137,1) 0%, rgba(254,198,127,1) 100%);
background: -webkit-linear-gradient(45deg, rgba(250,146,137,1) 0%,rgba(254,198,127,1) 100%);
background: linear-gradient(45deg, rgba(250,146,137,1) 0%,rgba(254,198,127,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fa9289', endColorstr='#fec67f',GradientType=1 );
    padding: 0;
    width: 380px;
    text-align: center;
    margin: 40px auto;
    color:#fff;
    border-radius: 9px;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0px 4px 7px #000;
}
.btn06 a{color: #fff;display: block;padding: 27px 0 30px;text-decoration: none;}
.fa-calendar-alt {
    position: relative;
    top: 6px;
    margin-right: 10px;
}
.btn07 {
    background: url(/lp/images/btn-bg-07.jpg);
    background-size: cover;
}
.btn08 {
    background: #a58260;
    width: 380px;
     text-align: center;
    margin: 40px auto;
    color:#fff;
    border-radius: 9px;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0px 4px 7px #000;
}
.btn08 a{
    color: #fff;
    display: block;
    padding: 20px 0 18px;
    text-decoration: none;
}

.icon-bard {text-align: center;margin-bottom: 20px;}
.icon-bard img{width: 72px;}
.kouhou-area .h2s{margin-bottom: 10px}

.en_title {
    background: rgb(250,146,137);
    background: -moz-linear-gradient(45deg, rgba(250,146,137,1) 0%, rgba(254,198,127,1) 100%);
    background: -webkit-linear-gradient(45deg, rgba(250,146,137,1) 0%,rgba(254,198,127,1) 100%);
    background: linear-gradient(45deg, rgba(250,146,137,1) 0%,rgba(254,198,127,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fa9289', endColorstr='#fec67f',GradientType=1 );
    color: #fff;
    width: 300px;
    margin: 0 auto 100px;
    text-align: center;
}
.tate-title {
    writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode:vertical-rl;
    position: relative;
    top: -50px;
    font-size: 40px;
    color: #59493f
}
.kouhou img {
    width:100%;
    margin-top: -330px;
    right: -40px;
    position: relative;
    box-shadow: 0 0 15px #9e9e9e;
}
.wax img {
    width:100%;
    margin-top: -300px;
    right: -40px;
    position: relative;
    box-shadow: 0 0 15px #9e9e9e;
}
.casual img {
    width:100%;
    margin-top: -260px;
    right: -40px;
    position: relative;
    box-shadow: 0 0 15px #9e9e9e;
}
.option img {
    width:100%;
    margin-top: -260px;
    right: -40px;
    position: relative;
    box-shadow: 0 0 15px #9e9e9e;
}
.kouhou h3, .wax h3, .cusual h3, .casual h3, .option h3 {
    position: relative;
    top: -200px;
    margin-bottom: -100px;
    color: #000;
}
.kouhou h3 .title, .wax h3 .title, .casual h3 .title, .option h3 .title {
    font-size: 32px;
    background: #fff;
    padding: 0px 10px;
}
.kouhou h3 .sub-title, .wax h3 .sub-title, .casual h3 .sub-title, .option h3 .sub-title {
    font-size: 44px;
    background: #fff;
    padding: 0px 10px;
}
.kouhou-area .inner {padding: 0 0px 0 40px;}
.kouhou-area .tx {padding: 0 40px;}

/*PRICE*/
.price-title {
    background: url(/lp/images/price-bg.jpg);
    background-size: cover;
    height: 650px;
    color: #fff;
    text-align: center;
    padding: 200px 0 0;
    font-size: 36px;
}
.price {
    position: relative;
    top: -130px;
    background: #fff;
    width: 90%;
    margin-left: auto;
    padding: 20px 20px 40px;
    box-shadow: 0 0 15px #9e9e9e;
    margin-bottom: -70px;
}
.price .title {
    background: none;
    padding: 0;
    font-size: 22px;
    color: #f38f83;
}
.price .tx {width: 60%;font-size: 32px;padding-left: 20px;line-height: 1.5}
.price .img {width: 40%;text-align: center}
.price .img img{width: 37%;margin-top: 10px;}
.ex-area h3 {font-size: 32px;text-align: center;margin-bottom: 30px}
ul.slider {margin: 0}
.slide-area {margin-bottom: 50px}
.slick-slide img {border: none;width:100%;}
.slick-track {background-color: #fff!important;}
.slick-slide {margin: 0 10px;}


/*VOICE*/
.voice-area {background: #eee;margin: 120px 0 100px 40px;padding: 0 0 10px;}
.voice-area .inner {padding: 0 80px 0 40px}
.voice-area h2{font-size: 36px}
.icon-couple {
    position: absolute;
    margin-top: -50px;
}
.icon-couple img{width: 128px}
.voice-area .en_title {
    position: relative;
    top: -12px;
    margin: 0 auto 20px;
}
.voice {margin-bottom: 30px}
.voice img {width: 100%;margin-bottom: 10px;}
.more {text-align: right;cursor: pointer;}
.moretx {display: none;margin-top: 20px}
/*SHOP*/
.shop-title {
    background: url(/lp/images/main-shop.jpg);
    background-size: cover;
    height: 550px;
}
.shop-info {
    background: #fff;
    width: 90%;
    position: relative;
    top: -200px;
    box-shadow: 0 0 15px #9e9e9e;
    padding: 40px 20px 20px 40px;
    margin-bottom: -150px;
}
.shop-info .title {
    background: none;
    padding: 0;
    font-size: 22px;
    color: #f38f83;
}
.shop-info h2{font-size: 36px;text-align: left;}
.shop-area .inner{padding: 0 40px}

/*Contact*/
.contact .title{
    background: url(/lp/images/main-contact.jpg);
    background-size: cover;
    height: 500px;
    text-align: center;
    padding-top: 100px; 
    width: 100%;
    margin-bottom: 0;
}
.contact .en_title{margin: 0 auto 30px;}

.icon-phone {
    text-align: center;
    position: relative;
    top: -70px;
    margin-bottom: -30px;
}
.icon-phone img{width: 138px}
.contact .tx {
    background: #e9e0d3;
    padding-bottom: 10px;
}
.contact .inner {padding: 0 80px}

/*MODAL*/
.modal{
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    width: 100%;
    left: 0;
    z-index: 1000;
}
.modal__bg{
    background: rgba(0,0,0,0.8);
    height: 100vh;
    position: absolute;
    width: 100%;
}
.modal__content{
    background: #fff;
    left: 50%;
    padding: 0;
    position: absolute;
    top: 0;
    transform: translate(-50%,0);
    width: 750px;
    height: 100vh;
}
.mc {overflow: scroll;height: 100%;}
.modal-main {
    color: #fff;
    padding: 90px 0 90px 80px;
    margin-top: 80px;
}
.riyu {
    background: url(/lp/images/modal-main-riyu.jpg);
    background-size: cover;
}
.engraving {
    background: url(/lp/images/modal-main-engraving.jpg);
    background-size: cover;
}
.modal-wax {
    background: url(/lp/images/modal-main-wax.jpg);
    background-size: cover;
}
.modal-option {
    background: url(/lp/images/modal-main-option.jpg);
    background-size: cover;
}
.modal-casual {
    background: url(/lp/images/modal-main-casual.jpg);
    background-size: cover;
}
.modal-main .title-en {
    background: rgb(250,146,137);
    background: -moz-linear-gradient(45deg, rgba(250,146,137,1) 0%, rgba(254,198,127,1) 100%);
    background: -webkit-linear-gradient(45deg, rgba(250,146,137,1) 0%,rgba(254,198,127,1) 100%);
    background: linear-gradient(45deg, rgba(250,146,137,1) 0%,rgba(254,198,127,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fa9289', endColorstr='#fec67f',GradientType=1 );
    font-size: 22px;
    text-align: center;
    display: inline-block;
    padding: 0 15px;
}
.modal-main .title-jp {
    font-size: 40px;
    margin-top: 15px;
}
.modal__content .inner {
    padding: 0 80px;
    margin: 50px 0;
}
.modal__content p{
    font-size: 26px;
    line-height: 1.8;
    letter-spacing: 0;
    margin-bottom: 40px;
}
.modal__content p span{font-weight: bold;}
a.js-modal-close {
    color: #a58260;
    background: #59493f;
    width: 100px;
    height: 100px;
    display: block;
    border-radius: 50%;
    text-align: center;
    padding: 33px 0;
    text-decoration: none;
    position: fixed;
    right: 30px;
    top: 30px;
}
a.js-modal-close span{
    height: 1px;
    display: block;
    width: 50px;
    background: #fff;
    margin: 0 0 0 25px;
}
a.js-modal-close span:first-child{
    transform: rotate(45deg);
}
a.js-modal-close span:nth-child(2){
    transform: rotate(-45deg);
}
.close {margin-top: 20px;color:#fff;}
.icon-bard2 {text-align: center;}
.icon-bard2 img{width: 119px}
.modal-icon-ring2 {text-align: center;}
.modal-icon-ring2 img{width: 62px}
.modal-icon-ring2 h3{font-size: 26px;margin: 15px 0 40px;}
.item {
    width: 47%;
    margin-right: 6%;
    margin-bottom: 50px;
    font-size: 22px;
    line-height: 1.4;
}
.item:nth-child(2n) {margin-right: 0}
.item img {width: 100%;margin-bottom: 15px;}
.title-jp1 {
    background: #fff;
    color: #000;
    font-size: 32px;
    margin: 25px 0 8px 0;
    padding: 0 10px;
    display: inline-block;
}
.title-jp2 {
    background: #fff;
    color: #000;
    font-size: 44px;
    padding: 0 10px;
    display: inline-block;
}
.modal-shop {
    padding: 90px 0 0 0;
    margin-top: 40px;
    text-align: center;
}
.modal-shop .modal-icon-ring2 h3 {margin: 15px 0 15px;}
.shopitem {padding: 0 40px!important}
.shopitem .item{font-size: 20px;}
.shopitem h4{font-size: 22px;margin-bottom: 10px}
.modal-shop .title-en{}
.casual-item {margin-bottom: 50px}
.casual-main {margin-bottom: 50px}
.casual-main img{margin-bottom: 20px;width: 100%;}
.casual-item .item {
    width: 38%;
    margin-right: 6%;
    margin-bottom: 0px;
    font-size: 22px;
    line-height: 1.4;
    text-align: left;
}
.item-title {margin-bottom: 10px;font-size: 22px;}
.item-price {text-align: right;font-size: 22px}
.casual-item .tx {
    padding: 0;
    width: 56%;
    font-size: 14px
}


footer {text-align: center;font-size: 10px;margin-top: 50px}
.sp-cta-area {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    position: fixed;
    bottom: 30px;
    opacity: 0;
    transition: all 0.6s ease-in 0.4s;
    transform: translateY(20px);
    z-index: 150;
    width: 320px;
    right: 30px;
}
.sp-cta {
    width: 100%;
    text-align: center;
    background: rgb(250,146,137);
background: -moz-linear-gradient(45deg, rgba(250,146,137,1) 0%, rgba(254,198,127,1) 100%);
background: -webkit-linear-gradient(45deg, rgba(250,146,137,1) 0%,rgba(254,198,127,1) 100%);
background: linear-gradient(45deg, rgba(250,146,137,1) 0%,rgba(254,198,127,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fa9289', endColorstr='#fec67f',GradientType=1 );
    border-radius: 5px;
    height: 100px;
    box-shadow: 0 0 10px #ccc;
    line-height: 1.5;
}
.fa-calendar-alt {
    font-size: 38px;
    position: relative;
    top: 6px;
}
.sp-cta a{color: #fff;text-decoration: none;display: block;padding: 25px 0}
.scrollin .sp-cta-area{opacity: 1;transform: translateY(0);}

@media (max-width: 480px) {
    body {font-size: 13px;}
    .wrapper {overflow: hidden}
    h1 {margin-left: 10px;}
    .logo img {margin-right: 10px;width: 100px;}
    h1 {font-size: 10px;letter-spacing: 0;}
    .content {margin-right: 20px;}
    .gentei {padding-top: 65px;top: 55px;margin-bottom: 100px;}
    .main {left: 20px;}
    .title-area {
        font-size: 22px;
        top: -220px;
        margin-bottom: -220px;
    }
    .title, .sub-title{padding: 0px 10px;margin-bottom: 7px}
    .sub-title{padding: 0px 10px;}
    .inner {padding: 0 20px;}
    .content .inner {padding: 0 20px 0 40px;}
    h2 {font-size: 21px;}
    .icon-ring2 {
        top: 27px;
        margin-top: 0px;
        margin-right: 0px;
    }
    .icon-ring2 img {width: 49px;}
    ul {margin: 30px 0;}
    .btn {width: 100%;font-size: 13px;}
    .btn06, .btn08 {width: 100%;font-size: 13px;}
    .h2s {font-size: 18px;}
    .en_title {width: 56%;margin: 0 auto 100px;}
    .tate-title {top: -30px;font-size: 20px;letter-spacing: 0.08em;}
    .kouhou h3 .title, .wax h3 .title, .option h3 .title, .casual h3 .title {font-size: 16px;}
    .kouhou h3 .sub-title, .wax h3 .sub-title, .option h3 .sub-title, .casual h3 .sub-title {
        font-size: 22px;
    }
    .kouhou-area .inner {padding: 0 0px 0 20px;}
    .kouhou img {margin-top: -205px;right: -20px;}
    .kouhou img {margin-top: -180px;right: -20px;}
    .kouhou h3, .wax h3, .option h3, .casual h3 {top: -100px;margin-bottom: -40px;}
    .kouhou-area .tx {padding: 0 20px;}
    .wax img {margin-top: -160px;right: -20px;}
    .casual img {margin-top: -196px;right: -20px;}
    .option img {margin-top: -137px;right: -20px;}
    .price-title {
        height: 325px;
        padding: 75px 0 0;
        font-size: 18px;
    }
    .price .title {font-size: 11px;}
    .price .tx {
        width: 65%;
        font-size: 16px;
        padding-left: 10px;
    }
    .price .img {width: 35%;}
    .price .img img {width: 40%;}
    .voice-area {margin: 100px 0 0 20px;}
    .icon-couple {margin-top: -25px;}
    .icon-couple img {width: 64px;}
    .voice-area h2 {font-size: 18px;}
    .voice-area .inner {padding: 0 40px 0 20px;}
    .shop-info h2 {font-size: 18px;}
    .shop-info .title {font-size: 11px;}
    .shop-info {
        padding: 20px 20px 1px 40px;
        top: -30px;
        margin-bottom: 0px;
    }
    .shop-title {height: 275px;}
    .contact .title {height: 250px;padding-top: 50px;}
    .icon-phone {top: -35px;margin-bottom: -15px;}
    .icon-phone img {width: 69px;}
    .contact .inner {padding: 0 40px;}
    .contact .en_title {margin: 0 auto 20px;}
    .modal__content {width: 100%;}
    .modal-main {padding: 40px 0 40px 30px;margin-top: 50px;}
    .modal-main .title-en {font-size: 11px;}
    .modal-main .title-jp {font-size: 20px;}
    .modal__content .inner {padding: 0 20px;margin: 30px 0;}
    .modal__content p {font-size: 14px;margin-bottom: 20px;}
    .icon-bard2 img {width: 60px;}
    a.js-modal-close {
        width: 50px;
        height: 50px;
        padding: 16px 0;
        right: 20px;
        top: 20px;
    }
    a.js-modal-close span {width: 25px;margin: 0 0 0 13px;}
    a.js-modal-close span:first-child {position: relative;top: 1px;}
    .close {margin-top: 12px;font-size: 8px;}
    .title-jp1 {font-size: 16px;margin: 15px 0 5px 0;}
    .title-jp2 {font-size: 22px;}
    .modal-icon-ring2 img {width: 31px;}
    .modal-icon-ring2 h3 {font-size: 13px;margin: 5px 0 30px;}
    .item {font-size: 11px;margin-bottom: 30px;}
    .shopitem {padding: 0 20px!important;}
    .shopitem h4 {font-size: 11px;}
    .shopitem .item {font-size: 10px;text-align: left;}
    .modal-shop {padding: 40px 0 0 0;margin-top: 30px;}
    .modal-shop .modal-icon-ring2 h3 {margin: 5px 0 5px;}
    .ex-area h3 {font-size: 16px;margin-bottom: 20px;}
    .item img {margin-bottom: 10px;}
    .item-title {font-size: 20px;}
    .casual-item .tx{padding: 0;font-size: 12px}
    .item-price {font-size: 18px;}
    .sp-cta-area {
        bottom: 15px;
        width: 100%;
        padding: 0 20px;
        right: initial;
    }
    .sp-cta {height: auto;}
    .sp-cta a {padding: 10px 0;}
    .fa-calendar-alt {
        font-size: 28px;
        position: relative;
        top: 6px;
        line-height: 0!important;
    }
    footer {margin-bottom: 80px;}
    
}