@charset "UTF-8";

/* index.html ======================================================== */

@import url('https://fonts.googleapis.com/css?family=Prata');

@media (min-width:768px) {}

@media (min-width:1025px) {
    body {
        line-height: 2;
        letter-spacing: .025em
    }
}

.header,
body {
    background-color: #fff;
}

@-webkit-keyframes expand {
    from {
        padding-top: 0;
        padding-bottom: 0
    }
    to {
        padding-top: 1.25em;
        padding-bottom: 1.25em
    }
}

@keyframes expand {
    from {
        padding-top: 0;
        padding-bottom: 0
    }
    to {
        padding-top: 1.25em;
        padding-bottom: 1.25em
    }
}


.fixed-bg {
    margin: auto;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -10;
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
    -moz-animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation-name: crossfadein;
    -moz-animation-name: crossfadein;
    animation-name: crossfadein;
    -webkit-animation-duration: duration_fadeinms;
    -moz-animation-duration: duration_fadeinms;
    animation-duration: duration_fadeinms;
}

.fixed-bg .crossfade:nth-of-type(1),
.fixed-bg .crossfade:nth-of-type(2),
.fixed-bg .crossfade:nth-of-type(3),
.fixed-bg .crossfade:nth-of-type(4){
    -webkit-animation-name: crossfade;
    -moz-animation-name: crossfade;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-duration: 21s;
    -moz-animation-duration: 21s;
}

.fixed-bg .crossfade:nth-of-type(1) {
    background-image: url(/images/index/1920/fixed-bg1.jpg);
    animation-name: crossfade;
    animation-iteration-count: infinite;
    animation-duration: 21s;
    -webkit-animation-delay: 17s;
    -moz-animation-delay: 17s;
    animation-delay: 17s
}

.fixed-bg .crossfade:nth-of-type(2) {
    background-image: url(/images/index/1920/fixed-bg2.jpg);
    animation-name: crossfade;
    animation-iteration-count: infinite;
    animation-duration: 21s;
    -webkit-animation-delay: 13s;
    -moz-animation-delay: 13s;
    animation-delay: 13s
}



.fixed-bg .crossfade:nth-of-type(3) {
    background-image: url(/images/index/1920/fixed-bg3.jpg);
    animation-name: crossfade;
    animation-iteration-count: infinite;
    animation-duration: 21s;
    -webkit-animation-delay: 9s;
    -moz-animation-delay: 9s;
    animation-delay: 9s;
}

.fixed-bg .crossfade:nth-of-type(4) {
    background-image: url(/images/index/1920/fixed-bg4.jpg);
    animation-name: crossfade;
    animation-iteration-count: infinite;
    animation-duration: 21s;
    -webkit-animation-delay: 5s;
    -moz-animation-delay: 5s;
    animation-delay: 5s;
}

.fixed-bg .crossfade:nth-of-type(5) {
    background-image: url(/images/index/1920/fixed-bg5.jpg);
    -webkit-animation-name: crossfade, bg;
    -moz-animation-name: crossfade, bg;
    animation-name: crossfade, bg;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-duration: 21s;
    -moz-animation-duration: 21s;
    animation-duration: 21s;
    background-position: top;
}


.fixed-bg .crossfade {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center
}

@-webkit-keyframes crossfade {
    0%,
    18.18182% {
        opacity: 1
    }
    21.81818%,
    96.36364% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@keyframes crossfade {
    0%,
    18.18182% {
        opacity: 1
    }
    21.81818%,
    96.36364% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@-webkit-keyframes crossfadein {
    0%,
    60% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@keyframes crossfadein {
    0%,
    60% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@keyframes bg {
    0% {
        background-position: top;
    }
    50% {
        background-position: bottom;
    }
    100% {
        background-position: top;
    }

}


.fixed-bg .crossfade:nth-of-type(4) {
    background-position: 65% top
}

.fixed-bg .crossfade:nth-of-type(2),
.fixed-bg .crossfade:nth-of-type(3) {
    background-position: 43% top
}

.fixed-bg .crossfade:nth-of-type(1) {
    background-position: 55% top
}

@media (min-width:1024px) {
    .fixed-bg .crossfade:nth-of-type(1),
    .fixed-bg .crossfade:nth-of-type(2),
    .fixed-bg .crossfade:nth-of-type(3),
    .fixed-bg .crossfade:nth-of-type(4),
    .fixed-bg .crossfade:nth-of-type(5) {
        background-position: center center
    }
}

@media (max-width:1024px) {
    .fixed-bg .crossfade:nth-of-type(5) {
        background-image: url(/images/index/640/fixed-bg.jpg);
    }

    .fixed-bg .crossfade:nth-of-type(4),
    .fixed-bg .crossfade:nth-of-type(5) {
        background-position: center bottom;
    }
    .fixed-bg .crossfade:nth-of-type(1) {
        background-image: url(/images/index/640/fixed-bg5.jpg);
    }
    .fixed-bg .crossfade:nth-of-type(2) {
        background-image: url(/images/index/640/fixed-bg2.jpg);
    }
    .fixed-bg .crossfade:nth-of-type(3) {
        background-image: url(/images/index/640/fixed-bg3.jpg);
    }
}


@keyframes fadeIn {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

#top.slider {
    height: 100vh;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}


#topics.section,
#fair.section,
#concept.section,
#wedding.section,
#dress.section{
    padding-bottom: 1em;
}


/* =================================================
   PC Style
================================================== */


.section-inner{
    padding: 30px 15px;
    max-width: 1130px;
    margin: 0 auto;
}

.section-header {
padding-bottom: 80px;
}

.section-header h3 {
font-size: 18px;
color: #656565;
}

.section-heading{
    padding: 0;
}

.section-heading span.section-heading-span{
font-family: 'Prata', serif;
font-size: 40px;
letter-spacing: .05em;
width: 100%;
}
.section-heading span.en{

}

.hr_icon{
position: relative;
display: inline-block;
padding: 0 55px;
}

.hr_icon span:after{
content: '◆';
font-size: .5em;
color: #44403b;
}

.hr_icon:before, .hr_icon:after{
content: '';
position: absolute;
top: 50%;
display: inline-block;
width: 45px;
height: 1px;
background-color: #44403b;
}

.hr_icon:before {left:0;}
.hr_icon:after {right: 0;}




/* ------------- sp ------------- */

@media (max-width:768px) {

    .section-inner{
        padding: 15px;
    }
    .section-heading span.section-heading-span{
    font-size: 30px;
    }
    .section-header h3 {
    font-size: 14px;
    }
    .section-header {
    padding-bottom: 40px;
    }

}




/* ------------- md ------------- */

@media (max-width:1024px) {

}
/* ------------- sp ------------- */
@media (max-width:768px) {

}


/* ===== TOP Contents ===== */

#top_contents{
    background-color: #FFF;
}
#top_contents .section-inner{
    padding-left:0;
    padding-right:0;
    width: 100%;
    max-width: 1440px;
}

#banner_slides li {
    padding: 0 10px;
}


.topics_banner{
    text-align: center;
    padding-top: 3%;
}

/* ------------- sp ------------- */
@media (max-width:768px) {
 #top_contents {
    padding-bottom: 10px;
 }
}


/* ===== TOPICS ===== */

@media (min-width:1024px) {
    .new{
        position: absolute;
        padding: 40px;
        background-color: rgba(255, 255, 255, 0.7);
        bottom: 30px;
        right: 30px;
        width: 340px;
        height: 340px;
        border-radius: 50%;
        text-align: center;
        margin: 0 auto; 
    }

    .new h3{
        font-size: .8em;
        padding-bottom: 1em;
    }

    .new .section-heading span.section-heading-span{
        font-size: 1.3em;
        padding-top: .5em;
    }

    .new .section-heading{
        padding-top: .5em;
    }

    #topics .section-inner{
        padding: 0;
    }

}


.topics-contents {
    width: 100%;
    padding: 3px 0;
    font-size: 80%;
}

.topics-contents-date{
    font-family: 'Noto Sans JP';
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.topics-contents-date span{
    color: #ab892f;
    font-weight: bold;
}

.topics{
    padding: 2em;
}

video{
    max-width: 100%;
}



.pop{
    max-width: 380px;
    height: auto;
    position: absolute;
    bottom: 0%;
}

.youtube_fram{
    width: 768px;
    height: 432px;
}

@media (max-width:768px) {
    .youtube_fram{
        width: 560px;
        height: 315px;
    }
}
@media (max-width:580px) {
    .youtube_fram{
        width: 320px;
        height: 180px;
    }
}


@media (max-width:1023px) {
    .new{
        position: initial;
        text-align: center;
        display: flex;
    }
    .topics_header{
        padding: 0 15px;
    }
    .new .left{
        text-align: left;
        padding: 0 15px;
    }

    #topics.section{
        background-color: #FFF;
        padding-top: 5%;
    }

    #topics .section-inner {

        width: 100%;
        max-width: 1024px;
        margin:  0 auto;
    }
    .topics-contents{
        width: 100%;
    }
    #topics .section-heading{
        padding: 0;
    }

}


@media (max-width:600px) {
    .new{
        display: block;
    }
    .topics_header{
        padding-bottom: 30px;
    }
    .pop{
        position: relative;
        width: 100%;
        text-align: center;
    }

}


/* ===== FAIR ===== */

#fair.section {
    background-color: #FFF;
    padding-bottom: 50px;
}

#fair .section-inner {
    padding-top: 100px;
    background-image: url(../images/index/section-heading_bg.jpg);
    background-repeat: no-repeat;
}

#fair .section-header {
    background-color: rgba(255, 255, 255, 0);
}

.fiar-contents {
    width: 30%;
    margin: 0 auto;
}

.fair-contents-date {
    padding: 0 15px;
    width: 100%;
}

.fair-contents-img{
    width: 100%;
    height: 280px;
    background-size: cover;
    background-position: center;
}

.fiar-contents .fair-contents-date .titel {
    font-size: 16px;
    color: #555;
    text-align: left;
    line-height: 1.5;
    padding: 22px 0 0;
}


/* ------------- md ------------- */

@media (max-width:1024px) {
    .fair-contents-img{
        height: 280px;
    }
}
/* ------------- sp ------------- */
@media (max-width:768px) {
    #fair.section {
        padding-bottom: 30px;
        padding-top: 30px;
    }
    .fair-contents-img{
        height: 220px;
    }
    .fair-contents-date {
        padding: 15px;
    }
}

/* ------------- xs_sp ------------- */

@media (max-width:425px) {
    .inner_flex{
        display:flex;
        margin-bottom: 15px;
    }
    .fair-contents-date {
        padding: 0;
        clear: both;
    }
    .fair-contents-img{
        height: 120px;
        width: 120px;
    }
    .fiar-contents .fair-contents-date .titel {
        width: auto;
        padding-left: 10px;
        padding-top: 5px;
        font-size: .8rem;
    }
    .fiar-contents .kuwasiku-anchor {
        width: 120px;
        height: 28px;
        font-size: 10.5px;
        line-height: 27px;
    }

    #fair .section-inner {
        padding-top: 50px;
        background-size: contain;
    }
}

/* ===== PLAN ===== */


#plan.section{
    background-color: #FFF;
    padding-bottom: 80px;
}

#plan .section-header {
    background-color: rgba(255, 255, 255, 0);
    padding-bottom: 0;
}

.plan {
    margin: 0 auto; 
    background-color: #fae6de;
    background-image: url(../images/index/plan_bg.gif);
    max-width: 1000px;
}

.plan .section-header,
.plan .plan_text{
    padding: 20px 40px 0;
}

.plan .plan_inner{
    display: flex;
    padding: 0;
}

.plan_img{
    background-image: url(https://mariagehikone.jp/page/wp-content/uploads/2018/01/40.jpg); 
    background-size: contain;
    background-repeat: no-repeat;
    flex-grow: 2;
    height: 230px;
    min-width: 230px;
}

.plan_text{
    flex-grow: 2;
}

/* ------------- md ------------- */

@media (max-width:1023px) {

    .plan {
        padding: 5px 15px 30px;
    }

}
/* ------------- sp ------------- */
@media (max-width:768px) {
    #plan.section{
        background-color: #FFF;
        padding-bottom: 40px;
    }
    .plan_img{
        margin-top: 20px;
        height: 200px;
        min-width: 200px;
    }
}
/* ------------- xs_sp ------------- */

@media (max-width:600px) {
    .plan_img{
        height: 130px;
        min-width: 130px;
    }
    .plan .plan_text{
        padding: 20px 20px 0;
    }

}

@media (max-width:425px) {
    .plan .plan_inner{
        display: block;
    }
    .plan_img{
        background-size:cover;
        background-position: center;
        height: 160px;
        width: 100%;
    }
    .plan .plan_text{
        padding: 20px 0 0;
    }
}


/* ===== CONCEPT ===== */

#concept.section{
    height: auto;
    padding: 0;
    margin: 0 auto;
    background-color: #FFF;
}

#concept .section-inner{
    padding: 30px;
}

#concept_bg{
    margin: 0 auto;
    max-width: 2000px;
    background-image: url(../images/index/concept_bg.jpg);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 87px 0 58px;
}

#concept .section-header {
    background-color: rgba(255, 255, 255, 0);
    padding-bottom: 0;
}

#concept .section-heading {
    padding-bottom: 10px;
    text-align: left;
}

#concept .section-heading-span {
    font-size: 32px;
}

#concept h1{
  font-size: 80px;
  color: #c9ad6b;
  line-height: 1.1;
  font-family: "AlexBrush-Regular", "Yu Mincho", YuMincho, serif;
  text-align: left;
}


#concept h1 span{
    display: block;
    margin-bottom: 20px;
    font-size: 18px;
  font-family: "Yu Mincho", YuMincho, serif;    
}

#concept .section-header h3{
    text-align: left;
}

.concept {
    max-width: 480px;
    padding: 18px 0 0;
    font-size: 14px;
}
/* ------------- sp ------------- */
@media (max-width:768px) {
    #concept p{
        font-size: 12px;
    }
    #concept #concept_bg {
        padding: 47px 0 0;
        background-attachment: scroll;
        background-position: right center;
        background-size: initial;
        background-image: url(../images/index/concept_bg_sp.jpg);
        background-image: unset;
    }
    #concept .section-heading-span {
        font-size: 19px;
        color: #555;
    }
    #concept .section-header h3{
        color: #333;
    }
    #concept.section{
        background-color: rgba(255,255,255,.8);
    }

    #concept .section-inner{
        padding: 30px 20px;
    }
}



/* ===== WEDDING ===== */

#wedding.section{
    background-color:#fdf6f6;
    padding-top: 100px;
    padding-bottom: 0;
}

#wedding .section-header {
    background-color: rgba(255, 255, 255, 0);
}

#wedding .section-inner{
    padding-bottom: 130px;
}

.wediing-chapel,
.wediing-shinden{
    width: 48%;
    height: 430px;
    margin: 1%;
}
#wedding .wediing-banquet,
#wedding .wediing-cuisine {
    height: 400px;
    width: 48%;
    margin: 1%;
}

#wedding .wediing-chapel:after{
    background-image: url(../images/chapel/1920/main.jpg);
}
#wedding .wediing-banquet:after{
    background-image: url(../images/banquet/1920/main.jpg);
}
#wedding .wediing-shinden:after{
    background-image: url(../images/shinden/1920/main.jpg);
}
#wedding .wediing-cuisine:after{
    background-image: url(../images/cuisine/1920/main.jpg);
}

.bg-scale {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 60px 0;
}
.bg-scale:after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -ms-transition: all .5s ease-out;
    transition: all .5s ease-out;
}

.bg-scale .inner{
    padding: 15px;
    color: #FFF;
}
.bg-scale .inner:before {
    z-index: 10;
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border: 1.5px solid #FFF;
    padding-top: 40px;
}

.bg-scale .inner h2{
    position: relative;
    z-index: 100;
    font-size: 48px;
    padding-top: 95px;
}

.bg-scale .inner h3{
    padding-bottom: 15px;
    font-size: 24px;
}
.bg-scale .inner p{
    max-width: 370px;
    margin: 0 auto;
    padding: 0 20px;
}

@media (max-width:1024px) {
    .bg-scale .inner h2{
        padding-top: 15px;
        position: relative;
        z-index: 100;
    }
    .bg-scale .inner h3,
    .bg-scale .inner p{
        position: relative;
        z-index: 100;
    }
    .bg-scale .inner:before {
        background-color: rgba(255, 255, 255, 0.7);
    }
    
    .bg-scale .inner{
        color:#44403b;
    }
}

@media (min-width:1025px) {

    .bg-scale .inner h2{
        -webkit-transition:padding-top .5s ease-out;
        -moz-transition:padding-top .5s ease-out;
        -ms-transition:padding-top .5s ease-out;
        transition:padding-top .5s ease-out;
    }
    
    .bg-scale .inner h3{
        opacity: 0;
    }

    .bg-scale .inner p{
        opacity: 0;
        padding: 20px 15px 0;
    }

    .bg-scale .inner:hover > div{
        position: relative;
        z-index: 100;
    }

    .bg-scale:hover:after {
        -moz-transform: scale(1.2);
        -webkit-transform: scale(1.2);
        -ms-transform: scale(1.2);
        transform: scale(1.2);
        -webkit-transition: all 5s ease-out;
        -moz-transition: all 5s ease-out;
        -ms-transition: all 5s ease-out;
        transition: all 5s ease-out;
    }
    .bg-scale .inner:hover:before {
        background-color: rgba(27, 15, 1, 0.7);
        -webkit-transition: all 1s ease-out;
        -moz-transition: all 1s ease-out;
        -ms-transition: all 1s ease-out;
        transition: all 1s ease-out;
        padding-top: 0;
    }

    .bg-scale .inner:hover h2{
        padding-top: 0;
        -webkit-transition: all .7s ease-out;
        -moz-transition: all .7s ease-out;
        -ms-transition: all .7s ease-out;
        transition: all .7s ease-out;
    }

    .bg-scale .inner:hover h3,
    .bg-scale .inner:hover p{
        opacity: 1;
        padding-top: 0;
        -webkit-transition: all 1.5s ease-out;
        -moz-transition: all 1.5s ease-out;
        -ms-transition: all 1.5s ease-out;
        transition: all 1.5s ease-out;
    }

}


.bg-scale .inner p.view{
    margin-top: 15px;
    width: 200px;
    font-size: 18px;
    border-bottom: 1px #FFF solid;
}

/* ------------- sp ------------- */
@media (max-width:768px) {

    #wedding.section{
        padding-top: 40px;
    }
    #wedding .section-inner{
        padding-bottom: 55px;
    }
    .wediing-chapel,
    .wediing-shinden{
        height: 330px;
    }
    #wedding .wediing-banquet,
    #wedding .wediing-cuisine {
        height: 300px;
    }

    .bg-scale {
        position: relative;
        overflow: hidden;
        text-align: center;
        padding: 30px 0;
    }
    .bg-scale .inner h2 {
        padding-top: 0;
    }
}
/* ------------- xs_sp ------------- */

@media (max-width:600px) {
    .plan_img{
        height: 130px;
        min-width: 130px;
    }
    #wedding .wediing-banquet,
    #wedding .wediing-cuisine {
        width: 100%;
    }

    .bg-scale .inner h2{
        font-size: 40px;
    }

}

/* ===== DRESS ===== */

#dress.section{
    background-color: #FFF;
    padding: 100px 0 40px;
    background-image: url(../images/index/dress-bg.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

#dress .section-header {
    background-color: rgba(255, 255, 255, 0);
    padding: 0 15px 72px;
}

#dress .section-inner {
    max-width: 2000px;
    margin: 0 auto;
}

.dress-text {
    margin: 20px auto 0;
    text-align: center;
    max-width: 44em;
}
#dress .dress-icon{
    margin-bottom: 70px;
    width: 100%;
    display: flex;
    align-items: center;
}

.dress-icon img{
    max-width: 140px;
    padding: 0 10px;
    height: auto;
    margin: 0 auto;
}

.dress-icon img:hover{
    opacity: .6;
}

/* ------------- sp ------------- */
@media (max-width:768px) {
    #dress.section{
        padding : 40px 0 0;
    }
}
@media (max-width:560px) {
    .dress-icon img{
        max-width: 100%;
    }
    #dress .section-header {
        padding-bottom: 45px;
    }
    #dress .dress-icon{
        margin-bottom: 40px;
    }
}

/* ===== PICKUP ===== */

#pickup.section{
    background-color: #FFF;
    padding: 0 0;
}

#pickup .section-header {
    background-color: rgba(255, 255, 255, 0);
    padding-bottom: 40px;
}
#pickup .section-inner {
    padding-top: 60px;
    background-image: url(../images/index/pickup-section-heading_bg.jpg);
    background-repeat: no-repeat;
    background-position: top center;
}

/* titel */

.co_2{
    flex-grow: 2;  
}
.co_3{
    flex-grow: 3;
}
.co_4{
    flex-grow: 4;
}

.double{
    width:100%;
    text-align:center;
}
.double h3{
    position:relative;
    display:inline-block;
}
.double h3:before,
.double h3:after{
    content:"";
    display:block;
    width:50px;
    height:5px;
    border-top:1px solid #c9ad6b;
    border-bottom:2px solid #c9ad6b;
    position:absolute;
    top:50%;
    margin-top:-2px;
}
.double h3:before{left:-74px;}
.double h3:after{right:-74px;}


    .text-content .double{
        margin-top: -30px;
    }
.l-card {
  overflow: hidden;
  width: 29%;
  max-width: 300px;
  padding: 0;
  margin: 15px;
  border: 1px solid #ddd;
  border-bottom:2px solid #dac38c;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px rgba(0, 0, 0, 0.1);
}

.text-content {
  padding: 10px 0 0;
  border-top:5px solid #dac38c;
}
.text-content .title {
  font-size: 30px;
  color: #c9ad6b;
  font-family: "AlexBrush-Regular", "Yu Mincho", YuMincho, serif;
}
.text-content .caption {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: #666;
  text-align: center;
  font-size: 16px;
  line-height: 1.6;
}

.text-content .fairy_img{
    padding: 5px 0 10px 30px;
}

.content-meta {
  overflow: hidden;
  width: 100%;
  font-size: 12px;
  text-align: right;
}
.date {
  color: #aaa;
}


/*ここからthumbnailのスタイル設定*/
.l-thumbnail {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: auto;
}
.thumbnail-wrapper {
  display: block;
  margin: 0;
  padding: 0;
}
.thumbnail-wrapper::after {
  transition: opacity 0.3s, width 0.8s 0.1s, height 0.8s 0.1s, border-width 0.4s 0.1s;
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0px;
  height: 0px;
  border-radius: 50%;
  border: 0px solid #f9c4ba;
  background: rgba(242, 157, 141, 0.4);
  opacity: 0;
}

.thumbnail-wrapper.l-card_img{
  transition: 0.5s;
  display: block;
  max-width: 100%;
    height: 190px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.l-card_img.l-card_1{
    background-image: url(../images/index/wedding-chapel-bg.jpg);
}
.l-card_img.l-card_2{
    background-image: url(../dress/marry/images/marry_dress_lp-banner_new.jpg);
}
.l-card_img.l-card_3{
    background-image: url(../images/index/topics/pickup_banner_mps.jpg);
}

.more-text {
  transition: 0.5s;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  width: 100%;
  color: #fff;
  font-size: 16px;
  letter-spacing: 1px;
  text-align: center;
  opacity: 0;
}
.l-card:hover .thumbnail-wrapper::after {
  opacity: 1;
  width: 400px;
  height: 400px;
  border-width: 90px;
}
.l-card:hover .thumbnail-wrapper.l-card_img{
  transform: scale(1.1);
}
.l-card:hover .more-text {
  opacity: 1;
  letter-spacing: 8px;
}

/* ------------- sp ------------- */
@media (max-width:768px) {
    .l-card{
        width: 29%;
    }

    .text-content .double{
        margin-top: 0;
    }

    .text-content > img{
        display: none;
    }
    .text-content .caption{
        font-size: 13px;    
    }
    .caption br{
        display: none;
    }
    #pickup .section-inner {
        background-size: contain;
    }
}

/* ========== CONTENTS ========== */

#contents.section{
    background-color: #FFF;
    padding: 0 ;
}

#contents .section-header {
    background-color: rgba(255, 255, 255, 0);
}

#contents .container{
    flex-wrap: wrap-reverse;
}
#contents .blog{
    width: 45%;
    max-width: 450px;
}
#contents .pickup_bar{
    width: 55%;
    max-width: 570px;
}

#contents .insta{
    flex-grow: 3;
}
#contents .section-header {
    padding-bottom: 50px;
}
#contents a:hover{
    opacity: .5;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

/* ===== BLOG ===== */
.blog{
    border-right: solid .75px #999;
    padding-left: 40px;
    padding-right: 40px;
}

.blog-contents{
    padding-bottom: 15px;
    margin: 0 auto;
}

.blog .blog-contents-img{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 30px;
    background-size: contain;
}

.blog .blog-contents-date{
    font-size: .9em;
    width: auto;
    flex-grow: 3;
}

.blog .imghvr-fade{
    display: flex;
    margin: 0;
}

@media screen and (max-width: 1023px) {
    .blog{
        border: none;
        padding-left: 0;
        padding-right: 0;
    }
    #contents .blog{
        width: 100%;
    }
    #contents .pickup_bar{
        width: 100%;
        max-width: 100%;
    }

}

/* ===== BANNER ===== */



.pickup_bar{
    background-color: #FFF;
    margin: 0 auto;
    text-align: center;
    padding: 0 50px;
}

@media (max-width:1023px) {
    .pickup_bar{
        margin-bottom: 40px;
        display: flex;
        flex-wrap: wrap;
        padding: 0;
    }
    .pickup_bar > p {
        width: 50%;
        padding: 0 10px 10px;
    }
}

/* ------------- sp ------------- */
@media (max-width:767px) {
    .pickup_bar{
        padding: 0;
    }
    .pickup_bar > p {
        width: 90%;
        margin: 0 auto;
        padding: 0;
    }

}

/* ===== INSTAGRAM ===== */
#insta-img{
    background-color: #fdf6f6;
    margin: 40px auto 0;
    text-align: center;
    padding: 40px 0 80px;

}

.instagram-img ul {
    max-width: 1100px;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    margin-top: 50px;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
}

.instagram-img ul li {
    width: 180px;
    height: 180px;
    margin: 0;
    list-style-type: none;
    overflow: hidden;
    position: relative;
}

.instagram-img ul li img{
    max-width: unset;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media screen and (max-width: 1100px) {
    .instagram-img ul li {
        width: 153px;
        height: 153px;
    }
    .instagram-img ul {
        padding: 0 20px;
    }
}

@media screen and (max-width: 767px) {
    .instagram-img ul {
        padding: 0 ;
    }
    #insta-img{
        margin-top: 20px;
        padding: 40px 0 ;
    }
}

@media screen and (max-width: 500px) {
    .instagram-img ul li {
        width: 105px;
        height: 105px;
    } 
}




/* ===== REPORE ===== */

@media (min-width:769px) {
    .pc_on{
        display: block;
    }
    .sp_on{
        display: none;
    }
}
@media (max-width:768px) {
    .pc_on{
        display: none;
    }
    .sp_on{
        display: block;
    }
}



#report.section{
    background-color: #dac38c;
}

#report .section-header {
    background-color: rgba(255, 255, 255, 0);
    width: 35%;
    margin: 0 auto;
    padding-bottom: 0;
}

#report .section-heading{
    padding: 20px 0 10px;
    color: #FFF;
}
#report .section-header h3{
    color: #fff;
}

.report {
    margin: 0 auto; 
    width: 100%;
    max-width: 1200px;
    padding: 4% 0;
}

.report-contents{
    width: 50%;
}


#report .hr_icon:before,
#report .hr_icon:after {
    background-color: #FFF;
}


#report .hr_icon span:after{
    color: #FFF;
}


/* レポート個別表示 */

#report_slides {
    margin: 0 auto;
    width: 65%;
}

.report-contents {
    margin: 0 auto;
}


.report-contents .report-contents-date{
    padding: .8em;
    width: 90%;
    margin: 0 auto;
    text-align: center;
    background-color: #FFF;
    box-shadow: 6px 8px 20px -6px rgba(0,0,0,0.10);
    -moz-box-shadow: 6px 8px 20px -6px rgba(0,0,0,0.10);
    -webkit-box-shadow: 6px 8px 20px -6px rgba(0,0,0,0.10);
}

/* タイトル設定 */
.report-contents .report-contents-date .titel{
    font-size: 1.5em;
    color: #ab892f;
    text-align: right;
    line-height: 1;
    margin: -1.3em .3em .3em 0;
    position: relative;
    z-index: 1;
}

/* 画像設定 */
.report-contents-img{
    background-size: cover;
    width: 100%;
    height: 200px;
    background-position: center;
    padding: 0;
    margin: 0 auto;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-transition: all 0.35s ease;
    transition: all 0.35s ease;
}
.report-contents-img:hover{
    -webkit-filter: none;
    filter: none;
}


@media (max-width:1024px) {

    .report-contents-img{
        width: 100%;
        height:180px;
    }
}
@media (max-width:768px) {
    #report .section-header {
        width: 100%;
        padding-bottom: 5%;
    }
    #report_slides {
        width: 100%;
    }
}
@media (max-width:560px) {
    .report-contents .report-contents-date {
        padding: .5em;
        width: 94%;
    }
    .report-contents-img{
        height:130px;
    }

    .slick-next {
        right: 0;
    }
    .slick-prev {
        right: 0;
    }
}





.header,
body {
    background-color: #fff;
    /*color: #ad8e46;*/
}

.section-heading {
    color: #7b7474;
}

.section-header h3 {
    /*color: #c9ad6b;*/
}

.hr_icon:before,
.hr_icon:after {
    background-color: #dac38c;
}


.hr_icon span:after{
    color: #dac38c;
}