@charset "utf-8";

/* reset */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
    border: 0;
}

/* ---------------------------------------------------
 * base
/* ---------------------------------------------------*/

html {
    font-size: 62.5%;
    /*適宜変更お願いします*/
    width: 100%;

	scroll-behavior: smooth;
}

body {
    text-align: center;
    font-size: 10px;
    font-family: 'Noto Sans JP', YuGothic, 'Yu Gothic', 'ヒラギノ角ゴシック', 'Hiragino Sans', sans-serif;
    color: #000000;
    line-height: 1.75;
    width: 100%;
    background-color: #fff;
    font-weight: 400;
    /*適宜変更お願いします*/
    font-feature-settings: "palt"1;
    /*自動カーニング*/
}


a {
    color: #181818;
}

.color {
    color: #F2B2CC;
}

a:hover {
    /*opacity: 0.8;*/
    text-decoration: none;
}

p {
    text-align: justify;
    hanging-punctuation: allow-end;
    /*文字のぶら下げ*/
}

#footer {
    background-color: #F2B2CC;
    color: #181818;
    font-size: 1.8em;
    padding: 1.5em;
    text-align: center;
}

#wrap {
    background: #fff;       /* コンテンツ部分の背景 */
    max-width: 750px;      /* 中央カードの横幅 */
    margin: 0 auto;      /* 中央寄せ */
    box-shadow:
        0 0 15px rgba(132, 132, 132, 0.08),
        0 0 40px rgba(0,0,0,0.12),
        0 0 80px rgba(118, 118, 118, 0.1);
    border-radius: 8px;     /* 角丸 */
}

#section-01 .container > picture {
    display: block;
}

#section-01 .container > picture img {
    display: block;
    width: 100%;
    height: auto;
}


/* ---------------------------------------------------
 * common（PC　min-width: 1023px）
/* ---------------------------------------------------*/
.wrap {
    width: 750px;
    max-width: 100%;
}

.container {
    position: relative;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;

}

.fixed_btn	{
	position: fixed;
	right: 0;
	left: 0;
	margin: 0;
	bottom: 5%;
	z-index: 9999999;
    width: 450px;
}

.btn,.formBtn {
    margin: auto;
    visibility: visible;
	transition: transform 0.3s ease, filter 0.3s ease;
}

.btn:hover {
    filter: brightness(100%);
	transform: scale(1.00);
}

.fixed_btn:hover {
    filter: brightness(100%);
}

.btn_area1 {
    position: absolute;
    z-index: 999;
    bottom: 20%;
    left:0%;
    right: 0%;
    margin:auto;
	width: 100%;

}

.btn_area2 {
    position: absolute;
    z-index: 999;
    bottom: 30%;
    left:0%;
    right: 0%;
    margin:auto;
	width: 100%;
}

.btn_area3 {
    position: absolute;
    z-index: 999;
    bottom: 30%;
    left:0%;
    right: 0%;
    margin:auto;
	width: 100%;
}

.shine_btn {
  position: relative;
  display: inline-block;
  overflow: hidden;
  border-radius: 9999px;
}

.shine_btn img {
  display: block;
  width: 100%;
  height: auto;
}

.shine_btn::before {
  content: "";
  position: absolute;
  left: 0;
  width: 12%;

  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.2) 30%,
    rgba(255, 255, 255, 0.9) 50%,
    rgba(255, 255, 255, 0.2) 70%,
    transparent 100%
  );

  transform: translateX(-150%) skewX(-20deg);
  animation: shine 3s infinite;
  pointer-events: none;
  z-index: 2;
}

.shine_btn01::before {
  top: 10%;
  height: 80%;
}

.shine_btn02::before {
  top: 25%;
  height: 55%;
}

.shine_btn03::before {
  top: 5%;
  height: 80%;
}

@keyframes shine {

  0% {
    transform: translateX(-150%) skewX(-20deg);
  }

  25% {
    transform: translateX(950%) skewX(-20deg);
  }

  100% {
    transform: translateX(950%) skewX(-20deg);
  }

}

/* 画面外セクションの描画を後回し */
	#section-03,
	#section-04,
	#section-05,
	#section-06,
	#section-07,
	#section-08,
	#section-09,
	#section-10,
	#section-11,
	#section-12,
	#section-13,
	#section-14,
	#section-15,
	#section-16,
	#section-17,
	#section-18,
	#section-19,
	#section-20,
	#section-21,
	#section-22,
	#section-23,
	#section-24,
	#section-25,
	#section-26,
	#section-27,
	#section-28,
	#section-29,
	#section-30,
	#section-31,
	#section-32,
	#section-33,
	#section-34,
	#section-35,
	#section-36,
	#section-37,
	#section-21	{
		content-visibility: auto;
		contain-intrinsic-size: auto 1000px;
	}



/*-----------------タブレットサイズ-----------------------
@media (min-width: 600px) and (max-width: 1023px) {
    body {
        font-size: 3.2rem;
    }
    .-pc {
        display: none;
    }
    .-sp {
        display: block;
    }
    .wrap {
        max-width: 100%;
        width: 100%;
    }
}
----------------------------------------*/

/*-----------------スマホサイズ-----------------------*/

@media screen and (max-width:600px) {

    /*ボタンの記述*/

    .fixed_btn	{
        position: fixed;
        right: 2%;
        z-index: 9999999;
        width: 95%;
        font-size: 0.8em;
    }

    .fixed_btn p{
        font-size: 0.5em;
    }

    .-pc {
        display: none;
    }

    .-sp {
        display: block;
    }

    body {
        font-size: 4.2vw;
    }

    .wrap {
        max-width: 100%;
        width: 100%;
    }

    #footer {
        color: #181818;
        font-size: 0.8em;
        padding: 1.5em;
        text-align: center;
        padding-bottom: 10%;
    }

    #footer a {
        color: #181818;
    }

    .btn_area1 {
        bottom: 20%;
        left: 0;
        right: 0;
        width: 95%;
    }

    .btn_area2 {
        width: 95%;
    	bottom: 25%;
    }

    .btn_area3{
        width: 95%;
        bottom: 25%;
    }


    section#section-01,
    section#section-02,
    section#section-03,
    section#section-04,
    section#section-05,
    section#section-06,
    section#section-07,
    section#section-08,
    section#section-09,
    section#section-10,
    section#section-11,
    section#section-12,
    section#section-13,
    section#section-14,
    section#section-15,
    section#section-16,
    section#section-17,
    section#section-18,
    section#section-19,
    section#section-20,
    section#section-21,
    section#section-22,
    section#section-23,
    section#section-24,
    section#section-25,
    section#section-26,
    section#section-27,
    section#section-28,
    section#section-29,
    section#section-30,
    section#section-31,
    section#section-32,
    section#section-33,
    section#section-34,
    section#section-35,
    section#section-36,
    section#section-37,
    section#section-38,
    section#section-39,
    section#section-40,
    section#section-41,
    section#section-42,
    section#section-43,
    section#section-44,
    section#section-45,
    section#section-46,
    section#section-47,
    section#section-48,
    section#section-49,
    section#section-50,
	section#btn_section {
        background: none !important;
    }
}

/*----------------------------------------*/