@charset "utf-8";

/*========= 紙芝居風レイアウトのためのCSS ===============*/

section.fixed {
  position: -webkit-sticky; /*Safari*/
  position: sticky;
  top: 0px; /*Header高さ分で止まるようにする*/
  /*装飾のためのCSS*/
  background: #fff;
  padding: 3vh 0 0 0;
  min-height: 53vh;
}
@media all and (min-width: 1680px) {
  section.fixed {
    min-height: 40vh;
  }
}

@media all and (min-width: 1366px) {
  section.fixed {
    min-height: 51vh;
  }
}

@media all and (min-width: 320px) and (max-width: 767px) {
  section.fixed {
    min-height: 38vh;
  }
}
@media all and (min-width: 768px)  {
  section.fixed {
    min-height: 27vh;
  }
}

section.fixed:nth-of-type(2n) {
  /*装飾のためのCSS*/
  color: #fff;
  text-align: center;
  padding: 300px 30px;
  min-height: auto;
}

section.fixed:last-of-type {
  padding: 170px 30px 100px 30px; /*最後のセクションだけ止まらないため、エリア内の情報が少ない時は、HEADER分の高さをpadding-topに追加して上部が見えるようにする*/
}

section.fixed:nth-of-type(2) {
  background: url("http://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/move02/6-5/img/rena-604317-unsplash.jpg")
    no-repeat center;
  background-size: cover;
}

section.fixed:nth-of-type(4) {
  background: url("http://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/move02/6-5/img/tj-holowaychuk-261414-unsplash.jpg")
    no-repeat center;
  background-size: cover;
}

/*＝＝＝＝＝＝＝＝＝＝＝タブレット以下の見え方＝＝＝＝＝＝＝＝＝＝＝＝＝*/

@media all and (min-width: 320px) and (max-width: 767px) {
  section.fixed,
  section.fixed:last-of-type {
    position: relative !important; /*sticky解除*/
    top: 0; /*70px⇒0pxに戻す*/
    min-height: auto;
    padding: 30px;
  }

  section.fixed:first-of-type {
    padding: 2vh 0 0 0; /*最初の要素は上部にHeaderの高さ以上の余白をとる*/
    min-height:7vh;
  }

  section.fixed:nth-of-type(2n) {
    padding: 100px 10px;
  }
}

/*========= レイアウトのためのCSS ===============*/

h1 {
  font-size: 1.2rem;
}

#container h2 {
  font-size: 1.2rem;
}

#container p {
  /* margin-top:20px; */
}

small {
  background: #333;
  color: #fff;
  display: block;
  text-align: center;
  padding: 20px;
}

#header {
  position: fixed; /*Header固定*/
  top: 0;
  height: 70px; /*高さ指定*/
  z-index: 2;
  width: 100%;
  /*装飾のためのCSS*/
  background: #333;
  color: #fff;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

#container {
  position: relative;
  z-index: 1; /*header とfooterを手前にするため数字を小さく*/
  display: block;
  max-width: 100vw;
  width:100%;
  padding: 0;
}
  @media all and (min-width: 320px) and (max-width: 767px) {
    #container {
      max-width:100%;
      padding: 0%;
    }
  }

#footer {
  position: relative;
  z-index: 2;
}

/* 成婚料金　ボタン */
/* ボタン共通設定 */
.btn04 {
  /*線の基点とするためrelativeを指定*/
  position: relative;
  /*ボタンの形状*/
  display: inline-block;
  padding: 10px 30px;
  color: #333;
  border: 1px solid #e6649a;
  text-decoration: none;
  outline: none;
  /*はみ出す背景色を隠す*/
  overflow: hidden;
  width: 30%;
  padding: 1rem;
  background-color: rgb(230, 100, 154, 0.5);
  margin: -2rem 0 4rem;
}

/*hoverした際のボタンの形状*/
.btn04:hover {
  color: #fff;
  border-color: transparent;
  /*色の変化を遅らせる*/
  transition-delay: 0.6s;
  text-decoration: none !important;
}

/*線の設定*/
.btn04 span {
  display: block;
  z-index: 2;
  font-size: 1rem;
  font-weight: 600;
}

/*== 線から塗に変化（中央から外） */

/*線の設定*/
.bordercenter span::before,
.bordercenter span::after {
  content: "";
  /*絶対配置で線の位置を決める*/
  position: absolute;
  /*線の形状*/
  width: 100%;
  height: 2px;
  background: #e6649a;
  /*アニメーションの設定*/
  transition: all 0.3s;
  transform: scale(0, 1);
  transform-origin: center;
}

/*上線*/
.bordercenter span::before {
  left: 0;
  top: 0;
}

/*下線*/
.bordercenter span::after {
  left: 0;
  bottom: 0;
}

/*hoverをすると線が伸びる*/
.bordercenter:hover span::before,
.bordercenter:hover span::after {
  transform: scale(1, 1);
}

/*背景の設定*/
.bordercenter::before {
  content: "";
  /*絶対配置で線の位置を決める*/
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  /*背景の形状*/
  height: 100%;
  width: 100%;
  background: rgb(116, 107, 171, 0.5);
  /*アニメーションの設定*/
  transition: all 0.3s;
  transform: scale(0, 1);
  transform-origin: center;
}

/*hoverをすると背景が伸びる*/
.bordercenter:hover::before {
  width: 100%;
  /*0.4秒遅れてアニメーション*/
  transition-delay: 0.4s;
  transform: scale(1, 1);
}

@media all and (max-width: 414px) {
  /* 成婚料金　ボタン */
  /* ボタン共通設定 */
  .btn04 {
    /*線の基点とするためrelativeを指定*/
    position: relative;
    /*ボタンの形状*/
    display: inline-block;
    padding: 10px 30px;
    color: #333;
    border: 1px solid #e6649a;
    text-decoration: none;
    outline: none;
    /*はみ出す背景色を隠す*/
    overflow: hidden;
    width: 80%;
    padding: 1rem;
    background-color: rgb(230, 100, 154, 0.5);
    margin: -2rem 0 4rem;
  }

  /*hoverした際のボタンの形状*/
  .btn04:hover {
    color: #fff;
    border-color: transparent;
    /*色の変化を遅らせる*/
    transition-delay: 0.6s;
    text-decoration: none !important;
  }

  /*線の設定*/
  .btn04 span {
    display: block;
    z-index: 2;
    font-size: 1rem;
    font-weight: 600;
  }
}
@media all and (min-width: 415px) and (max-width: 767px) {
  /* 成婚料金　ボタン */
  /* ボタン共通設定 */
  .btn04 {
    /*線の基点とするためrelativeを指定*/
    position: relative;
    /*ボタンの形状*/
    display: inline-block;
    padding: 10px 30px;
    color: #333;
    border: 1px solid #e6649a;
    text-decoration: none;
    outline: none;
    /*はみ出す背景色を隠す*/
    overflow: hidden;
    width: 50%;
    padding: 1rem;
    background-color: rgb(230, 100, 154, 0.5);
    margin: -2rem 0 4rem;
  }

  /*hoverした際のボタンの形状*/
  .btn04:hover {
    color: #fff;
    border-color: transparent;
    /*色の変化を遅らせる*/
    transition-delay: 0.6s;
    text-decoration: none !important;
  }

  /*線の設定*/
  .btn04 span {
    display: block;
    z-index: 2;
    font-size: 1rem;
    font-weight: 600;
  }
}