/* reform */

#reform-top {
    width: 90vw;
    height: 75vh;
    position: relative;
    padding: 0 50px;
    box-sizing: border-box;
}

#reform-top .reform-txt {
  background: #fff;
  padding: 80px;
  position: absolute;
  left: calc(20% - 50px);
  left: -webkit-calc(20% - 50px);
  top: 50%;
  left: 30%;
  transform: translate(-50%,-50%);
  z-index: 5;
  text-align: center;
  opacity: 0.7;
}

#reform-top .reform-txt h2 {
  font-family: 'Abel', sans-serif;
    font-weight: 700;
    font-size: 36px;
    letter-spacing: 0.6em;
    padding-left: 10px;
}

#reform-top .reform-txt h3 {
  font-size: 16px;
  opacity: 0.8;
  font-weight:normal;
}

.item-content {
  margin-top: 6em;
}

.item-image {
  position: absolute;
  top: 0;
  right: -5vw;
  width: 90vw;
  height: 100%;
  background: url(../img/slide_1.jpg) no-repeat center;
  background-size: cover;
}


.item-bg {
  background: #FFEFEF;
    position: relative;
    height: 100%;
    width: 90vw;
    margin: auto;
    padding: -100px;
}

.item-bg:before {
  left: 50%;
    width: 50%;
    height: 100%;
    content: "";
    position: absolute;
    background: #F5B2B2;
    opacity: 0.1;
}

.content-copy1 {
    width: 100%;
    position: relative;
    padding-top: 6em;
}

.text-box {
    max-width: 1280px;
    margin: 0 auto;
    box-sizing: border-box;
    background: #fff;
    padding: 100px 120px;
    width: 80vw;
}

.text-box h2 {
    font-size: 2.2em;
    color: #333;
    opacity: 0.9;
    font-weight: normal;
    line-height: 1.3em;
}

.text-box p {
    margin-top: 50px;
}

#content-box {
  display: grid;
  padding: 50px 0 100px;
}

.content-item {
  max-width: 1280px;
    width: 80vw;
    height: 500px;
    margin: 50px auto 0;
    padding: 50px;
    box-sizing: border-box;
    background: #fff;
    display: flex;
    position: relative;
}

#content-box .content-item .text-box-in {
    top: 50%;
    transform: translate(0,-50%);
    position: relative;
}

#content-box .content-item .image-box {
    width: 55%;
    box-sizing: border-box;
    order: 1;
}

#content-box .content-item .image-box .image {
    width: 100%;
    height: 100%;
    background: url(../img/reform01.jpg) no-repeat top;
    background-size: cover;
}

#content-box .content-item .text-box-item {
    max-width: 1280px;
    margin: 0 auto;
    box-sizing: border-box;
    background: #fff;
    padding: 100px 90px;
    width: 40vw;
}

.text-box-item h2 {
    font-size: 2.2em;
    color: #333;
    opacity: 0.9;
    font-weight: normal;
    line-height: 1.3em;
}

.text-box-item p {
    margin-top: 50px;
}

#content-box .content-item2 {
  max-width: 1280px;
    width: 80vw;
    height: 500px;
    margin: 6em auto 0;
    padding: 50px;
    box-sizing: border-box;
    background: #fff;
    display: flex;
    position: relative;
    flex-direction: row-reverse;
}

#content-box .content-item2 .text-box-in {
    top: 50%;
    transform: translate(0,-50%);
    position: relative;
}

#content-box .content-item2 .image-box {
    width: 55%;
    box-sizing: border-box;
    order: 1;
}

#content-box .content-item2 .image-box .image {
    width: 100%;
    height: 100%;
    background: url(../img/reform01.jpg) no-repeat top;
    background-size: cover;
}

#content-box .content-item2 .text-box-item {
    max-width: 1280px;
    margin: 0 auto;
    box-sizing: border-box;
    background: #fff;
    padding: 100px 90px;
    width: 40vw;
}

#content-box .content-item2 .text-box-item h2 {
    font-size: 2.2em;
    color: #333;
    opacity: 0.9;
    font-weight: normal;
    line-height: 1.3em;
}

#content-box .content-item2 .text-box-item p {
    margin-top: 50px;
}

#content-box .content-item2 .image-box .image {
    width: 100%;
    height: 100%;
    background: url(../img/reform02.jpg) no-repeat top;
    background-size: cover;
}

.content-item3 {
  max-width: 1280px;
    width: 80vw;
    height: 500px;
    margin: 6em auto 0;
    padding: 50px;
    box-sizing: border-box;
    background: #fff;
    display: flex;
    position: relative;
}

#content-box .content-item3 .text-box-in {
    top: 50%;
    transform: translate(0,-50%);
    position: relative;
}

#content-box .content-item3 .image-box {
    width: 55%;
    box-sizing: border-box;
    order: 1;
}

#content-box .content-item3 .image-box .image-finish {
    width: 100%;
    height: 100%;
    background: url(../img/reform_finish.jpg) no-repeat top;
    background-size: cover;
}

#content-box .content-item3 .text-box-item {
    max-width: 1280px;
    margin: 0 auto;
    box-sizing: border-box;
    background: #fff;
    padding: 100px 90px;
    width: 40vw;
}

#content-box .content-item3 .text-box-item h2 {
    font-size: 2.2em;
    color: #333;
    opacity: 0.9;
    font-weight: normal;
    line-height: 1.3em;
}

#content-box .content-item3 .text-box-item p {
    margin-top: 50px;
}

.content-copy2 {
    width: 100%;
    position: relative;
    padding-top: 6em;
}

.content-copy2 .text-box {
    max-width: 1280px;
    margin: 0 auto;
    box-sizing: border-box;
    background: #fff;
    padding: 100px 120px;
    width: 80vw;
}

.content-copy2 .text-box h2 {
    font-size: 2.2em;
    color: #333;
    opacity: 0.9;
    font-weight: normal;
    line-height: 1.3em;
}

/* repaire */

#repaire-top {
    width: 90vw;
    height: 75vh;
    position: relative;
    padding: 0 50px;
    box-sizing: border-box;
}

#repaire-top .repaire-txt {
  background: #fff;
  padding: 80px;
  position: absolute;
  left: calc(20% - 50px);
  left: -webkit-calc(20% - 50px);
  top: 50%;
  left: 33%;
  transform: translate(-50%,-50%);
  z-index: 5;
  text-align: center;
  opacity: 0.8;
}

#repaire-top .repaire-txt h2 {
  font-family: 'Abel', sans-serif;
    font-weight: 700;
    font-size: 36px;
    letter-spacing: 0.6em;
}

#repaire-top .repaire-txt h3 {
  font-size: 16px;
  opacity: 0.8;
  font-weight: normal;
  letter-spacing: 0.4em;
}

.item-content {
  margin-top: 6em;
}

.repaire-image {
  position: absolute;
  top: 0;
  right: -5vw;
  width: 90vw;
  height: 100%;
  background: url(../img/repaired-top.jpg) no-repeat center;
  background-size: cover;
}

.reform-image {
  position: absolute;
  top: 0;
  right: -5vw;
  width: 90vw;
  height: 100%;
  background: url(../img/reform_bg.jpg) no-repeat center;
  background-size: cover;
}


.item-bg {
  background: #FFEFEF;
    position: relative;
    height: 100%;
    width: 90vw;
    margin: auto;
    padding: -100px;
}

.item-bg:before {
  left: 50%;
    width: 50%;
    height: 100%;
    content: "";
    position: absolute;
    background: #F5B2B2;
    opacity: 0.1;
}

.content-copy1 {
    width: 100%;
    position: relative;
    padding-top: 6em;
}

.text-box {
    max-width: 1280px;
    margin: 0 auto;
    box-sizing: border-box;
    background: #fff;
    padding: 100px 120px;
    width: 80vw;
}

.text-box h2 {
    font-size: 2.2em;
    color: #333;
    opacity: 0.9;
    font-weight: normal;
    line-height: 1.3em;
}

.text-box p {
    margin-top: 50px;
}

#content-box {
  display: grid;
  padding: 50px 0 100px;
}

.content-item {
  max-width: 1280px;
    width: 80vw;
    height: 500px;
    margin: 50px auto 0;
    padding: 50px;
    box-sizing: border-box;
    background: #fff;
    display: flex;
    position: relative;
}

#content-box .content-item .text-box-in {
    top: 50%;
    transform: translate(0,-50%);
    position: relative;
}

#content-box .content-item .image-box {
    width: 55%;
    box-sizing: border-box;
    order: 1;
}

#content-box .content-item .image-box .image-repaire {
    width: 100%;
    height: 100%;
    background: url(../img/repair_01.jpg) no-repeat top;
    background-size: cover;
}

#content-box .content-item .image-box .image-reform {
    width: 100%;
    height: 100%;
    background: url(../img/reform01.jpg) no-repeat top;
    background-size: cover;
}


#content-box .content-item .text-box-item {
    max-width: 1280px;
    margin: 0 auto;
    box-sizing: border-box;
    background: #fff;
    padding: 100px 90px;
    width: 40vw;
}

.text-box-item h2 {
    font-size: 2.2em;
    color: #333;
    opacity: 0.9;
    font-weight: normal;
    line-height: 1.3em;
    text-align: center;
}

.text-box-item p {
    margin-top: 50px;
}

#content-box .content-item2 {
  max-width: 1280px;
    width: 80vw;
    height: 500px;
    margin: 6em auto 0;
    padding: 50px;
    box-sizing: border-box;
    background: #fff;
    display: flex;
    position: relative;
    flex-direction: row-reverse;
}

#content-box .content-item2 .text-box-in {
    top: 50%;
    transform: translate(0,-50%);
    position: relative;
}

#content-box .content-item2 .image-box {
    width: 55%;
    box-sizing: border-box;
    order: 1;
}

#content-box .content-item2 .image-box .image-reform {
    width: 100%;
    height: 100%;
    background: url(../img/reform_02.jpg) no-repeat top;
    background-size: cover;
}

#content-box .content-item2 .text-box-item {
    max-width: 1280px;
    margin: 0 auto;
    box-sizing: border-box;
    background: #fff;
    padding: 100px 90px;
    width: 40vw;
}

#content-box .content-item2 .text-box-item h2 {
    font-size: 2.2em;
    color: #333;
    opacity: 0.9;
    font-weight: normal;
    line-height: 1.3em;
}

#content-box .content-item2 .text-box-item p {
    margin-top: 50px;
}

#content-box .content-item2 .image-box .image {
    width: 100%;
    height: 100%;
    background: url(../img/reform02.jpg) no-repeat top;
    background-size: cover;
}

.content-item3 {
  max-width: 1280px;
    width: 80vw;
    height: 500px;
    margin: 6em auto 0;
    padding: 50px;
    box-sizing: border-box;
    background: #fff;
    display: flex;
    position: relative;
}

#content-box .content-item3 .text-box-in {
    top: 50%;
    transform: translate(0,-50%);
    position: relative;
}

#content-box .content-item3 .image-box {
    width: 55%;
    box-sizing: border-box;
    order: 1;
}

#content-box .content-item3 .image-box .image-reform {
    width: 100%;
    height: 100%;
    background: url(../img/reform_03.jpg) no-repeat top;
    background-size: cover;
}

#content-box .content-item4 .image-box .image-reform {
    width: 100%;
    height: 100%;
    background: url(../img/reform_04.jpg) no-repeat top;
    background-size: cover;
}


#content-box .content-item3 .text-box-item {
    max-width: 1280px;
    margin: 0 auto;
    box-sizing: border-box;
    background: #fff;
    padding: 100px 90px;
    width: 40vw;
}

#content-box .content-item3 .text-box-item h2 {
    font-size: 2.2em;
    color: #333;
    opacity: 0.9;
    font-weight: normal;
    line-height: 1.3em;
}

#content-box .content-item3 .text-box-item p {
    margin-top: 50px;
}

.content-copy2 {
    width: 100%;
    position: relative;
    padding-top: 6em;
}

.content-copy2 .text-box {
    max-width: 1280px;
    margin: 0 auto;
    box-sizing: border-box;
    background: #fff;
    padding: 100px 120px;
    width: 80vw;
}

.content-copy2 .text-box h2 {
    font-size: 2.2em;
    color: #333;
    opacity: 0.9;
    font-weight: normal;
    line-height: 1.3em;
}

/* bridal */

#bridal-top {
    width: 90vw;
    height: 75vh;
    position: relative;
    padding: 0 50px;
    box-sizing: border-box;
}

#bridal-top .bridal-txt {
  background: #fff;
  padding: 80px;
  position: absolute;
  left: calc(20% - 50px);
  left: -webkit-calc(20% - 50px);
  top: 50%;
  left: 30%;
  transform: translate(-50%,-50%);
  z-index: 5;
  text-align: center;
  opacity: 0.8;
}

#bridal-top .bridal-txt h2 {
  font-family: 'Abel', sans-serif;
    font-weight: 700;
    font-size: 36px;
    letter-spacing: 0.6em;
}

#bridal-top .bridal-txt h3 {
  font-size: 16px;
  opacity: 0.8;
  font-weight: normal;
  letter-spacing: 0.3em;
}

.item-content {
  margin-top: 6em;
}

.bridal-image {
  position: absolute;
  top: 0;
  right: -5vw;
  width: 90vw;
  height: 100%;
  background: url(../img/bridal-top.jpg) no-repeat center;
  background-size: cover;
}


.item-bg {
  background: #FFEFEF;
    position: relative;
    height: 100%;
    width: 90vw;
    margin: auto;
    padding: -100px;
}

.history-bg {
      background: #FFEFEF;
    position: relative;
    height: 100%;
    width: 90vw;
    margin: auto;
    padding: -100px;
    padding-bottom: 12vh;
}

.history-bg:before {
  left: 50%;
    width: 50%;
    height: 100%;
    content: "";
    position: absolute;
    background: #F5B2B2;
    opacity: 0.1;
}

.history-page-bg {
    background: #FFEFEF;
    position: relative;
    height: 100%;
    width: 90vw;
    margin: auto;
    padding: -100px;
    padding-bottom: 12vh;
}

.history-page-bg:before {
    left: 50%;
    width: 50%;
    height: 100%;
    content: "";
    position: absolute;
    background: #F5B2B2;
    opacity: 0.1;
}

.item-bg:before {
  left: 50%;
    width: 50%;
    height: 100%;
    content: "";
    position: absolute;
    background: #F5B2B2;
    opacity: 0.1;
}

.content-copy1 {
    width: 100%;
    position: relative;
    padding-top: 6em;
}

.text-box {
    max-width: 1280px;
    margin: 0 auto;
    box-sizing: border-box;
    background: #fff;
    padding: 100px 160px;
    width: 80vw;
}

.text-box p {
    margin-top: 50px;
    font-size: 16px;
}

.text-box h2 {
    font-size: 2.2em;
    color: #333;
    opacity: 0.9;
    font-weight: normal;
    line-height: 1.3em;
}

.text-box p {
    margin-top: 50px;
}

#content-box {
  display: grid;
  padding: 5em 0 100px;
}

.content-item {
  max-width: 1280px;
    width: 80vw;
    height: 500px;
    margin: 50px auto 0;
    padding: 50px;
    box-sizing: border-box;
    background: #fff;
    display: flex;
    position: relative;
}

#content-box .content-item .text-box-in {
    top: 50%;
    transform: translate(0,-50%);
    position: relative;
}

#content-box .content-item .image-box {
    width: 55%;
    box-sizing: border-box;
    order: 1;
}

#content-box .content-item .image-box .image-bridal {
    width: 100%;
    height: 100%;
    background: url(../img/study.jpg) no-repeat top;
    background-size: cover;
}

#content-box .content-item .text-box-item {
    max-width: 1280px;
    margin: 0 auto;
    box-sizing: border-box;
    background: #fff;
    padding: 0px 50px;
    width: 40vw;
}

.text-box-item p {
    margin-top: 50px;
}

#content-box .content-item2 {
  max-width: 1280px;
    width: 80vw;
    height: 500px;
    margin: 6em auto 0;
    padding: 50px;
    box-sizing: border-box;
    background: #fff;
    display: flex;
    position: relative;
    flex-direction: row-reverse;
}

#content-box .content-item2 .text-box-in {
    top: 50%;
    transform: translate(0,-50%);
    position: relative;
}

#content-box .content-item2 .text-box-in h2{
  font-size: 1.7em;
}

#content-box .content-item2 .image-box {
    width: 55%;
    box-sizing: border-box;
    order: 1;
}

#content-box .content-item2 .image-box .image-repaire {
    width: 100%;
    height: 100%;
    background: url(../img/repair_02.jpg) no-repeat top;
    background-size: cover;
}

#content-box .content-item2 .text-box-item {
    max-width: 1280px;
    margin: 0 auto;
    box-sizing: border-box;
    background: #fff;
    padding: 0px 50px;
    width: 40vw;
}

#content-box .content-item2 .text-box-item h2 {
    font-size: 2.2em;
    color: #333;
    opacity: 0.9;
    font-weight: normal;
    line-height: 1.3em;
    text-align: center;
}

#content-box .content-item2 .text-box-item p {
    margin-top: 50px;
}

#content-box .content-item2 .image-box .image-bridal {
    width: 100%;
    height: 100%;
    background: url(../img/select.jpg) no-repeat top;
    background-size: cover;
}

#content-box .content-item3 .image-box .image-repaire {
    width: 100%;
    height: 100%;
    background: url(../img/repair_03.jpg) no-repeat top;
    background-size: cover;
}

.repaired-h2 {
  font-size: 1.7em;
    color: #333;
    opacity: 0.9;
    font-weight: normal;
    line-height: 1.3em;
}

.content-item3 {
  max-width: 1280px;
    width: 80vw;
    height: 500px;
    margin: 6em auto 0;
    padding: 50px;
    box-sizing: border-box;
    background: #fff;
    display: flex;
    position: relative;
}

#content-box .content-item3 .text-box-in {
    top: 50%;
    transform: translate(0,-50%);
    position: relative;
}

#content-box .content-item3 .image-box {
    width: 55%;
    box-sizing: border-box;
    order: 1;
}

#content-box .content-item3 .image-box .image-bridal {
    width: 100%;
    height: 100%;
    background: url(../img/suprise.jpg) no-repeat top;
    background-size: cover;
}

#content-box .content-item3 .text-box-item {
    max-width: 1280px;
    margin: 0 auto;
    box-sizing: border-box;
    background: #fff;
    padding: 0px 50px;
    width: 40vw;
}

#content-box .content-item3 .text-box-item h2 {
    font-size: 2.2em;
    color: #333;
    opacity: 0.9;
    font-weight: normal;
    line-height: 1.3em;
    text-align: center;
}

#content-box .content-item3 .text-box-item p {
    margin-top: 50px;
}

.content-copy2 {
    width: 100%;
    position: relative;
    padding-top: 6em;
}

.content-copy2 .text-box {
    max-width: 1280px;
    margin: 0 auto;
    box-sizing: border-box;
    background: #fff;
    padding: 100px 120px;
    width: 80vw;
}

.content-copy2 .text-box h2 {
    font-size: 2.2em;
    color: #333;
    opacity: 0.9;
    font-weight: normal;
    line-height: 1.3em;
}

#content-box .content-item4 {
  max-width: 1280px;
    width: 80vw;
    height: 500px;
    margin: 6em auto 0;
    padding: 50px;
    box-sizing: border-box;
    background: #fff;
    display: flex;
    position: relative;
    flex-direction: row-reverse;
}

#content-box .content-item4 .text-box-in {
    top: 50%;
    transform: translate(0,-50%);
    position: relative;
}

#content-box .content-item4 .image-box {
    width: 55%;
    box-sizing: border-box;
    order: 1;
}

#content-box .content-item4 .image-box .image {
    width: 100%;
    height: 100%;
    background: url(../img/reform01.jpg) no-repeat top;
    background-size: cover;
}

#content-box .content-item4 .text-box-item {
    max-width: 1280px;
    margin: 0 auto;
    box-sizing: border-box;
    background: #fff;
    padding: 0px 50px;
    width: 40vw;
}

#content-box .content-item4 .text-box-item h2 {
    font-size: 2.2em;
    color: #333;
    opacity: 0.9;
    font-weight: normal;
    line-height: 1.3em;
    text-align: center;
}

#content-box .content-item4 .text-box-item p {
    margin-top: 50px;
}

.reform-finish {
  text-align: center;
}

#content-box .content-item4 .image-box .image-bridal {
    width: 100%;
    height: 100%;
    background: url(../img/design.jpg) no-repeat top;
    background-size: cover;
}

.content-item5 {
  max-width: 1280px;
    width: 80vw;
    height: 500px;
    margin: 6em auto 0;
    padding: 50px;
    box-sizing: border-box;
    background: #fff;
    display: flex;
    position: relative;
}

#content-box .content-item5 .text-box-in {
    top: 50%;
    transform: translate(0,-50%);
    position: relative;
}

#content-box .content-item5 .image-box {
    width: 55%;
    box-sizing: border-box;
    order: 1;
}

#content-box .content-item5 .image-box .image-bridal {
    width: 100%;
    height: 100%;
    background: url(../img/ourrings.jpg) no-repeat top;
    background-size: cover;
}

#content-box .content-item5 .text-box-item {
    max-width: 1280px;
    margin: 0 auto;
    box-sizing: border-box;
    background: #fff;
    padding: 0px 30px;
    width: 40vw;
}

#content-box .content-item .text-box-in  h2{
  font-size: 1.7em;
  color: #333;
  opacity: 0.9;
  font-weight: normal;
  line-height: 1.3em;
}

#content-box .content-item2 .text-box-item h2{
  font-size: 1.7em;
  color: #333;
  opacity: 0.9;
  font-weight: normal;
  line-height: 1.3em;
}

#content-box .content-item5 .text-box-item h2 {
    font-size: 2.2em;
    color: #333;
    opacity: 0.9;
    font-weight: normal;
    line-height: 1.3em;
}

#content-box .content-item5 .text-box-item p {
    margin-top: 50px;
}

/* weddingring */
.content-copy3 {
    width: 100%;
    position: relative;
    padding-top: 6em;
}

.content-item6 {
  max-width: 1280px;
    width: 80vw;
    height: 500px;
    margin: 50px auto 0;
    padding: 50px;
    box-sizing: border-box;
    background: #fff;
    display: flex;
    position: relative;
}

#content-box .content-item6 .text-box-in {
    top: 50%;
    transform: translate(0,-50%);
    position: relative;
}

#content-box .content-item6 .image-box {
    width: 55%;
    box-sizing: border-box;
    order: 1;
}

#content-box .content-item6 .image-box .image-bridal {
    width: 100%;
    height: 100%;
    background: url(../img/marriage-top.jpg) no-repeat top;
    background-size: cover;
}

#content-box .content-item6 .text-box-item {
    max-width: 1280px;
    margin: 0 auto;
    box-sizing: border-box;
    background: #fff;
    padding: 0px 30px;
    width: 40vw;
}

.text-box-item h2 {
    font-size: 1.7em;
    color: #333;
    opacity: 0.9;
    font-weight: normal;
    line-height: 1.3em;
}

.text-box-item p {
    margin-top: 50px;
}

#content-box .content-item7 {
  max-width: 1280px;
    width: 80vw;
    height: 500px;
    margin: 6em auto 0;
    padding: 50px;
    box-sizing: border-box;
    background: #fff;
    display: flex;
    position: relative;
    flex-direction: row-reverse;
}

#content-box .content-item7 .text-box-in {
    top: 50%;
    transform: translate(0,-50%);
    position: relative;
}

#content-box .content-item7 .image-box {
    width: 55%;
    box-sizing: border-box;
    order: 1;
}

#content-box .content-item7 .image-box .image {
    width: 100%;
    height: 100%;
    background: url(../img/reform01.jpg) no-repeat top;
    background-size: cover;
}

#content-box .content-item7 .text-box-item {
    max-width: 1280px;
    margin: 0 auto;
    box-sizing: border-box;
    background: #fff;
    padding: 0px 50px;
    width: 40vw;
}

#content-box .content-item7 .text-box-item h2 {
    font-size: 2.2em;
    color: #333;
    opacity: 0.9;
    font-weight: normal;
    line-height: 1.3em;
}

#content-box .content-item7 .text-box-item p {
    margin-top: 50px;
}

#content-box .content-item7 .image-box .image-bridal {
    width: 100%;
    height: 100%;
    background: url(../img/custum.jpg) no-repeat top;
    background-size: cover;
}

.content-item8 {
  max-width: 1280px;
    width: 80vw;
    height: 500px;
    margin: 6em auto 0;
    padding: 50px;
    box-sizing: border-box;
    background: #fff;
    display: flex;
    position: relative;
}

#content-box .content-item8 .text-box-in {
    top: 50%;
    transform: translate(0,-50%);
    position: relative;
}

#content-box .content-item8 .image-box {
    width: 55%;
    box-sizing: border-box;
    order: 1;
}

#content-box .content-item8 .image-box .image-bridal {
    width: 100%;
    height: 100%;
    background: url(../img/special.jpg) no-repeat top;
    background-size: cover;
}

#content-box .content-item8 .text-box-item {
    max-width: 1280px;
    margin: 0 auto;
    box-sizing: border-box;
    background: #fff;
    padding: 0px 30px;
    width: 40vw;
}

#content-box .content-item8 .text-box-item h2 {
    font-size: 2.2em;
    color: #333;
    opacity: 0.9;
    font-weight: normal;
    line-height: 1.3em;
}

#content-box .content-item8 .text-box-item p {
    margin-top: 50px;
}

.content-copy2 {
    width: 100%;
    position: relative;
    padding-top: 6em;
}

.content-copy2 .text-box {
    max-width: 1280px;
    margin: 0 auto;
    box-sizing: border-box;
    background: #fff;
    padding: 100px 120px;
    width: 80vw;
}

.content-copy2 .text-box h2 {
  font-size: 2.2em;
      color: #333;
      opacity: 0.9;
      font-weight: normal;
      line-height: 1.3em;
      font-weight: 700;
      letter-spacing: 0.6em;
}


/* ページ内スクロール */
#bridal-top .engagering {
  background: #fff;
      padding: 15px;
      position: absolute;
      left: calc(20% - 50px);
      left: -webkit-calc(20% - 50px);
      top: 77%;
      /* right: 9%; */
      left: -1%;
      /* transform: translate(-50%,-50%); */
      z-index: 5;
      text-align: center;
      opacity: 0.8;
        }

    #bridal-top .weddingring {
      background: #fff;
          padding: 30px;
          position: absolute;
          left: calc(20% - 50px);
          left: -webkit-calc(20% - 50px);
          top: 80%;
          /* right: 9%; */
          left: 24%;
          /* transform: translate(-50%,-50%); */
          z-index: 5;
          text-align: center;
        }

/* item */

        .item-image {
          position: absolute;
          top: 0;
          right: -5vw;
          width: 90vw;
          height: 100%;
          background: url(../img/slide_05.jpg) no-repeat center;
          background-size: cover;
        }


/* ページ内遷移 */
.engagering h2 {
  font-family: 'Abel', sans-serif;
  font-size: 16px;
  font-weight: normal;
  line-height: 20px;
}


/* アイテムサムネイル */
.itemwrap {
  display: inline-grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  grid-template-rows: 300px 300px ;
  margin-top: 2px;
  margin-left: 2px;
  margin-right: 2px;
  gap: 2px;
}

.itemwrap2 {
  display: inline-grid;
  grid-template-columns: 1fr 1fr 1fr 1.5fr;
  grid-template-rows: 300px 300px;
  margin-top: -6px;
  gap: 2px;
  margin-left: 2px;
  margin-right: 2px;
}

.itemwrap3 {
  display: inline-grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr ;
  grid-template-rows: 300px 300px;
  margin-top: 2px;
  gap: 2px;
  margin-left: 2px;
  margin-right: 2px;
  grid-auto-flow: dense;
}



.item-bg.custom {
  margin-top: 100px;
  padding-bottom: 1px;
}

.bridal-bg {
  background: #FFEFEF;
    position: relative;
    height: 100%;
    width: 90vw;
    margin: auto;
    padding-bottom: -100px;
}
.thumbnail {
}

.thumbnail img {
  width: auto;
  /* height: 100%; */
  height: -webkit-fill-available;
  max-width: 100%;
  object-fit: cover;
}

.big-box1 {
  grid-row: 1 / 3;
}

.big-box2 {
  grid-column: 4;
  grid-row: 1/3;
}

.big-box3 {
  grid-row: span 2;
  grid-column: span 1;
}

footer {
    display: table;
    width: 95%;
    height: 100%;
    padding: 50px;
    box-sizing: border-box;
    font-family: 'Abel', sans-serif;
    color: #777;
    padding-left: 100px;
}

.footer-nav {
    font-size: 0.9rem;
    float: left;
    display: flex;
}

.footer-nav li:nth-child(1) {
    margin-right: 50px;
}

.footer-nav li svg {
    width: 100px;
    fill: #777;
}

footer a  {
  display: block;
  padding-top: 25px;
}

footer li:nth-child(1) a {
    padding-top: 0;
}

.footer-nav li {
    margin-right: 30px;
}

footer p {
    float: right;
    font-size: 0.8rem;
    display: block;
    padding-top: 25px;
}


.fadein {
  opacity: 0;
  transform: translateY(20px);
  transition: all 1s;
}

#item-top {
    width: 90vw;
    height: 75vh;
    position: relative;
    padding: 0 50px;
    box-sizing: border-box;
}

#item-top .item-txt {
    background: #fff;
    padding: 80px;
    position: absolute;
    left: calc(20% - 50px);
    left: -webkit-calc(20% - 50px);
    top: 50%;
    left: 27%;
    transform: translate(-50%,-50%);
    z-index: 5;
    text-align: center;
    opacity: 0.7;
}

#item-top .item-txt h2 {
    font-family: 'Abel', sans-serif;
    font-weight: 700;
    font-size: 36px;
    letter-spacing: 0.6em;
    padding-left: 10px;
}

#item-top .item-txt h3 {
  font-size: 16px;
  opacity: 0.8;
  font-weight: normal;
}

.grid {
    width: 90vw;
    list-style: none;
    margin: 100px auto;
    padding: 0;
}

.grid li {
  display: block;
  float: left;
  padding: 3px;
  width: 23.99999%;
}


.grid li a, .grid li img {
    outline: none;
    border: none;
    display: block;
    max-width: 100%;
}

#history-top {
    width: 90vw;
    height: 75vh;
    position: relative;
    padding: 0 50px;
    box-sizing: border-box;
}

#history-top .history-txt {
    background: #fff;
    padding: 80px;
    position: absolute;
    left: calc(20% - 50px);
    left: -webkit-calc(20% - 50px);
    top: 50%;
    left: 24%;
    transform: translate(-50%,-50%);
    z-index: 5;
    text-align: center;
    opacity: 0.7;
}

#history-top .history-txt h2 {
    font-family: 'Abel', sans-serif;
    font-weight: 700;
    font-size: 36px;
    letter-spacing: 0.6em;
    padding-left: 10px;
}

#history-top .history-txt h3 {
    font-size: 16px;
    opacity: 0.8;
    font-weight: normal;
}

.history-image {
    position: absolute;
    top: 0;
    right: -5vw;
    width: 90vw;
    height: 100%;
    background: url(../img/slide_1.jpg) no-repeat center;
    background-size: cover;
}

.history-content {
    margin-top: 6em;
}

.history-content-box {
    width: 100%;
    position: relative;
    padding-top: 6em;
}

.history-text-box h2 {
    font-size: 2.2em;
    color: #333;
    opacity: 0.9;
    font-weight: normal;
    line-height: 1.3em;
    font-weight: 700;
    letter-spacing: 0.6em;
    text-align: center;
}

.history-text-box {
    max-width: 1280px;
    margin: 0 auto;
    box-sizing: border-box;
    background: #fff;
    padding: 100px 160px;
    width: 80vw;
}

.history-text-box p {
    margin-top: 80px;
    line-height: 2em;
    font-size: 1.2em;
    margin-bottom: 80px;
}

.history-text-box .name {
  margin-top: 50px;
  font-size: 1.5em;
  text-align: end;
}

.history-text-box .name span {
  margin-left: 2em;
}

.access-image {
    position: absolute;
    top: 0;
    right: -5vw;
    width: 90vw;
    height: 100%;
    background: url(../img/access.jpg) no-repeat center;
    background-size: cover;
}

#access-top {
  width: 90vw;
  height: 75vh;
  position: relative;
  padding: 0 50px;
  box-sizing: border-box;
}

#access-top .access-txt {
    background: #fff;
    padding: 80px;
    position: absolute;
    left: calc(20% - 50px);
    left: -webkit-calc(20% - 50px);
    top: 50%;
    left: 25%;
    transform: translate(-50%,-50%);
    z-index: 5;
    text-align: center;
    opacity: 0.7;
}

.access-content {
    margin-top: 6em;
}

#access-top .access-txt h2 {
    font-family: 'Abel', sans-serif;
    font-weight: 700;
    font-size: 36px;
    letter-spacing: 0.6em;
}

#access-top .access-txt h3 {
    font-size: 16px;
    opacity: 0.8;
    font-weight: normal;
}

.access-txt h3 {
    font-size: 16px;
    opacity: 0.7;
    letter-spacing: 0.7em;
}

.item-content {
  margin-top: 6em;
}

.type1 {
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-left: 5em;
    padding-right: 5em;
    min-height: 0%;
}

.type2 {
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-left: 5em;
  padding-right: 5em;
  flex-direction: row-reverse;
  min-height: 0%;
}

.ac-img {
  width: 50%;
  min-height: 0%;
}

.ac-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ac-textwrap {
  width: 50%;
  display: flex;
  background-color: #fff;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;

}

.ac-text-box {
  text-align: center;
  padding: 5em;
  font-size: 18px;
  line-height: 1.8;
}

/* Effect 1: opacity */
.grid.effect-1 li.animate {
	-webkit-animation: fadeIn 0.65s ease forwards;
	animation: fadeIn 0.65s ease forwards;
}

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

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

/* Effect 2: Move Up */
.grid.effect-2 li.animate {
	-webkit-transform: translateY(200px);
	transform: translateY(200px);
	-webkit-animation: moveUp 0.65s ease forwards;
	animation: moveUp 0.65s ease forwards;
}

@-webkit-keyframes moveUp {
	0% { }
	100% { -webkit-transform: translateY(0); opacity: 1; }
}

@keyframes moveUp {
	0% { }
	100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
}

/* Effect 3: Scale up */
.grid.effect-3 li.animate {
	-webkit-transform: scale(0.6);
	transform: scale(0.6);
	-webkit-animation: scaleUp 0.65s ease-in-out forwards;
	animation: scaleUp 0.65s ease-in-out forwards;
}

@-webkit-keyframes scaleUp {
	0% { }
	100% { -webkit-transform: scale(1); opacity: 1; }
}

@keyframes scaleUp {
	0% { }
	100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
}

/* Effect 4: fall perspective */
.grid.effect-4 {
	-webkit-perspective: 1300px;
	perspective: 1300px;
}

.grid.effect-4 li.animate {
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: translateZ(400px) translateY(300px) rotateX(-90deg);
	transform: translateZ(400px) translateY(300px) rotateX(-90deg);
	-webkit-animation: fallPerspective .8s ease-in-out forwards;
	animation: fallPerspective .8s ease-in-out forwards;
}

@-webkit-keyframes fallPerspective {
	0% { }
	100% { -webkit-transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; }
}

@keyframes fallPerspective {
	0% { }
	100% { -webkit-transform: translateZ(0px) translateY(0px) rotateX(0deg); transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; }
}

/* Effect 5: fly (based on http://lab.hakim.se/scroll-effects/ by @hakimel) */
.grid.effect-5 {
	-webkit-perspective: 1300px;
	perspective: 1300px;
}

.grid.effect-5 li.animate {
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform-origin: 50% 50% -300px;
	transform-origin: 50% 50% -300px;
	-webkit-transform: rotateX(-180deg);
	transform: rotateX(-180deg);
	-webkit-animation: fly .8s ease-in-out forwards;
	animation: fly .8s ease-in-out forwards;
}

@-webkit-keyframes fly {
	0% { }
	100% { -webkit-transform: rotateX(0deg); opacity: 1; }
}

@keyframes fly {
	0% { }
	100% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; }
}

/* Effect 6: flip (based on http://lab.hakim.se/scroll-effects/ by @hakimel) */
.grid.effect-6 {
	-webkit-perspective: 1300px;
	perspective: 1300px;
}

.grid.effect-6 li.animate {
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform-origin: 0% 0%;
	transform-origin: 0% 0%;
	-webkit-transform: rotateX(-80deg);
	transform: rotateX(-80deg);
	-webkit-animation: flip .8s ease-in-out forwards;
	animation: flip .8s ease-in-out forwards;
}

@-webkit-keyframes flip {
	0% { }
	100% { -webkit-transform: rotateX(0deg); opacity: 1; }
}

@keyframes flip {
	0% { }
	100% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; }
}

/* Effect 7: helix (based on http://lab.hakim.se/scroll-effects/ by @hakimel) */
.grid.effect-7 {
	-webkit-perspective: 1300px;
	perspective: 1300px;
}

.grid.effect-7 li.animate {
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
	-webkit-animation: helix .8s ease-in-out forwards;
	animation: helix .8s ease-in-out forwards;
}

@-webkit-keyframes helix {
	0% { }
	100% { -webkit-transform: rotateY(0deg); opacity: 1; }
}

@keyframes helix {
	0% { }
	100% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); opacity: 1; }
}

/* Effect 8:  */
.grid.effect-8 {
	-webkit-perspective: 1300px;
	perspective: 1300px;
}

.grid.effect-8 li.animate {
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: scale(0.4);
	transform: scale(0.4);
	-webkit-animation: popUp .8s ease-in forwards;
	animation: popUp .8s ease-in forwards;
}

@-webkit-keyframes popUp {
	0% { }
	70% { -webkit-transform: scale(1.1); opacity: .8; -webkit-animation-timing-function: ease-out; }
	100% { -webkit-transform: scale(1); opacity: 1; }
}

@keyframes popUp {
	0% { }
	70% { -webkit-transform: scale(1.1); transform: scale(1.1); opacity: .8; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
	100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
}

@media screen and (max-width: 900px) {
	.grid li {
		width: 50%;
	}
}

@media screen and (max-width: 400px) {
	.grid li {
		width: 100%;
	}
}

#news-top {
    width: 90vw;
    height: 75vh;
    position: relative;
    padding: 0 50px;
    box-sizing: border-box;
}

#news-top .news-txt {
    background: #fff;
    padding: 80px;
    position: absolute;
    left: calc(20% - 50px);
    left: -webkit-calc(20% - 50px);
    top: 50%;
    left: 30%;
    transform: translate(-50%,-50%);
    z-index: 5;
    text-align: center;
    opacity: 0.7;
}

.news-image {
    position: absolute;
    top: 0;
    right: -5vw;
    width: 90vw;
    height: 100%;
    background: url(../img/slide_4.jpg) no-repeat center;
    background-size: cover;
}

#news-top .news-txt h2 {
    font-family: 'Abel', sans-serif;
    font-weight: 700;
    font-size: 36px;
    letter-spacing: 0.6em;
    padding-left: 10px;
}

.news-bg {
    background: #FFEFEF;
    position: relative;
    height: 100%;
    width: 90vw;
    margin: auto;
    padding: -100px;
    padding-bottom: 12em;
}


.news-content {
    margin-top: 6em;
}

.news-inner-txt {
    display: block;
    width: 100%;
    height: auto;
    max-width: 1380px;
    margin: 0 auto;
    padding: 50px 0px;
}

.news-inner-txt h2 {
    font-family: 'Abel', sans-serif;
    font-weight: 700;
    font-size: 36px;
    letter-spacing: 0.5em;
    /* line-height: 1em; */
    text-align: center;
    /* top: 11px; */
}

.news-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 80%;
    margin: 50px auto 0;
}

.single-news-title {
    font-size: 2.2em;
    color: #333;
    opacity: 0.9;
    font-weight: normal;
    line-height: 1.3em;
    font-weight: 700;
    letter-spacing: 0.2em;
    padding: 0;
    padding-bottom: 10px;
    font-size: 30px;
}

.single-news-title h1 {
    font-family: Noto Serif JP,source-han-serif-japanese;
}

.news-img {
  padding-top: 50px;
}

.single-content-box {
    width: 100%;
    position: relative;
    padding-top: 6em;
}

.single-text-box {
    max-width: 1280px;
    margin: 0 auto;
    box-sizing: border-box;
    background: #fff;
    padding: 80px 100px;
    width: 80vw;
}

.single-bg {
    background: #FFEFEF;
    position: relative;
    height: 100%;
    width: 90vw;
    margin: auto;
    padding: -100px;
    padding-bottom: 12vh;
}

.single-bg:before {
    left: 50%;
    width: 50%;
    height: 100%;
    content: "";
    position: absolute;
    background: #F5B2B2;
    opacity: 0.1;
}

.single-news-date {
  font-family: Brown-Regular,sans-serif;
    font-weight: 400;
    font-size: 15px;
    letter-spacing: 2px;
    color: #8b8b8b;
}

.single-news-date {
  color: #FFF;
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 10px;
    padding: 0 5px;
    font-size: 0.8rem;
    border-radius: 3px;
    background: #229473;
}

.single-img {
  height: 65vh;
    width: 65vw;
    width: auto\9;
    margin: 0 auto;
    object-fit: cover;
    padding-bottom: 20px;
    padding-top: 20px;
}

.btn-container {
  text-align: center;
  padding-top: 40px;
}

.btn-container .s-btn {
  display: inline-block;
    width: 120px;
    text-align: center;
    background-color: #229473;
    border: 2px solid #229473;
    font-size: 16px;
    color: #229473;
    text-decoration: none;
    font-weight: bold;
    padding: 10px 24px;
    /* border-radius: 4px; */
    position: relative;
    margin: 5px;
    font-family: Noto Serif JP,source-han-serif-japanese;
}

.s-btn::before {
  left: 0;
}

.s-btn::after {
    right: 0;
}

.s-btn::before, .s-btn::after {
    content: "";
    display: block;
    background-color: #fff;
    width: 51%;
    height: 100%;
    position: absolute;
    top: 0;
    transition: .2s;
}

.s-btn span {
    position: relative;
    z-index: 1;
}

.article-body {
  padding-top: 30px;
}

.single-text-box .category {
  color: #229473;
    display: inline-block;
    margin-bottom: 10px;
    padding: 0 5px;
    font-size: 0.8rem;
    border: 1px solid #229473;
    border-radius: 3px;
	margin-right: 10px;
}

.single-text-box .category a {
  color: #229473;
}

 .tags {
    color: #229473;
    display: inline-block;
    margin-bottom: 10px;
    padding: 0 5px;
    font-size: 0.8rem;
    border: 1px solid #229473;
    border-radius: 3px;
}

.post-content-area {
  padding-top: 20px;
  padding-bottom: 50px;
}

/* wp css */
.post-content-area h2 {
    position: relative;
    font-family: Noto Serif JP,source-han-serif-japanese;
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 40px;
    margin: 60px auto 40px;
}

.post-content-area h2:before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    left: 0;
    bottom: -10px;
    border-bottom: 1px solid #000;
}

.post-content-area h3 {
    position: relative;
    font-size: 20px;
    font-weight: 700;
    color: #000;
    margin: 40px auto 20px;
    padding: 0 0 0 10px;
}

.post-content-area h3:before {
    content: "";
    position: absolute;
    display: block;
    width: 5px;
    height: calc(100% - 10px);
    top: 5px;
    left: 0;
    background-color: #229473;
}


.post-content-area p {
  line-height: 1.8;
  font-size: 18px;
}

/* media */


@media screen and (max-width: 900px){
.grid li {
    width: 49%;
}
}


/* ipad (768px) */
@media screen and (max-width: 768px) , (max-device-width : 768px) {
  .text-box-item h2 {
      font-size: 1.7em;
  }

  #content-box .content-item2 .text-box-item h2 {
    font-size: 1.7em;
    }
  }

  #content-box .content-item4 .text-box-item h2 {
      font-size: 1.7em;
  }

  #content-box .content-item5 .text-box-item h2 {
      font-size: 1.7em;
  }

  #content-box .content-item3 .text-box-item h2 {
      font-size: 1.7em;
  }

  #content-box .content-item7 .text-box-item h2 {
      font-size: 1.7em;
  }

  #content-box .content-item8 .text-box-item h2 {
      font-size: 1.7em;
  }

  .text-box h2 {
      font-size: 2.2em;
      color: #333;
      opacity: 0.9;
      font-weight: normal;
      line-height: 1.3em;
    font-weight: 700;
    letter-spacing: 0.6em;
  }


.text-box h3 {
      font-size: 16px;
      opacity: 0.8;
      font-weight: normal;
}

}