@charset "utf-8";

/* Theme: MyTheme */
:root {
  --global-menu-height: 169px;
}
@media screen and (max-width: 750px){
  :root {
  --global-menu-height: 22vw;
  }
}
/* base
---------------------------------------------*/

* {margin:0;padding:0;}

a:link,a:visited {
	color: #2236cf;
	text-decoration:underline;
}
a:hover,a:active {
	color: #d90909;
	text-decoration:underline;
}
.pagetop a{text-decoration: none;
   vertical-align: middle;
    color: #fff;}
body {
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
  background:#ffffff;
  text-align:center;
 scroll-behavior: smooth;
  font-size:20px;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", 游ゴシック, YuGothic,  Verdana, メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    color: #383d5c;
	-webkit-text-size-adjust: 100%;
}
#wrap{max-width: 750px;
margin: 0 auto;
}
img{ display:block;
border: none;
max-width:100%;
height: auto;
margin:-1px auto;}

footer{font-size:1em;
padding:2em 0 3em;
background:#5b4128;
color: #fff !important;
}
footer a{    text-decoration: none !important;
color: #fff !important;
	}

/* layout
---------------------------------------------*/
.top{    position: fixed !important;
      z-index: 100;
    }
.top-margin{padding-top:var(--global-menu-height);}
.btn-box1{    width: 42%;
    position: absolute;
    top: 50%;
    left: 75%;
    height: auto;
    transform: translate(-50%, -50%);
  }
  .top .formring{     width: 100%;
    position: absolute;
    top: 48%;
    left: 50%;
    height:78px;
    transform: translate(-50%, -50%);}
.formring{    width: 88.5%;
    position: absolute;
    top: 45%;
    left: 50%;
    height: 167px;
    transform: translate(-50%, -50%);
  pointer-events: none;}
/* 親コンテナ */
.image-container {
  position: relative; /* 子要素の位置基準を設定 */
  max-width: 750px; /* 大きな画像の最大幅 */
  width: 100%; /* 画面幅に合わせて縮小 */
  margin: 0 auto; /* センター揃え（必要なら） */
}
/* btn */
.btn-box{    width: 90%;
    position: absolute;
    top: 0;
    left: 50%;
    height: auto;}
.btn-box2{    width: 60%;
    position: absolute;
    bottom: 25px;
    left: 50%;
	transform: translateX(-50%);
    height: auto;}
/* 大きな画像 */
.large-image {
  width: 100%; /* 親コンテナに合わせる */
  height: auto; /* アスペクト比を維持 */
}

/* 小さい画像 */
.small-image {
  position: absolute; /* 親画像を基準に配置 */
  transform: translate(-50%, -50%); /* 完全に中央を基準にする */
  height: auto; /* 小さい画像のアスペクト比を維持 */
}
.l-btn {    width: 88.5%;
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 46%;
    height: auto;
}
.t-btn {width: 74.8%;
    position: absolute;
    transform: translate(-50%, 0%);
    left: 50%;
    top: 12%;
    height: auto;
}
.item1{     width: 24.4%;
    height: auto;
    position: absolute;
    bottom: 2%;
    left: 19.4%;
    transform: translate(-50%, -50%);
}
.item2{      width: 38.2%;
  height: auto; /* 小さい画像のアスペクト比を維持 */
    position: absolute;
    bottom: 0;
    left: 28%;
    transform: translate(-50%, 0%) !important;
}
.arrow1{   width: 17.8%;
 position: absolute; /* 親画像を基準に配置 */
  top: -3%; /* 上から30%の位置（例） */
  left: 50%; /* 左から50%の位置（例） */
}
ol,
ul{
	list-style-position: inside;
	padding-left:10px;
}
ol li,
ul li{
	text-align:left;
}

/* utilities
---------------------------------------------*/
.c{color:#fff600;}
.b{font-weight:bold;}
.y{background-color: #ffff66;}
.l{font-size:1.2em;    line-height: 130%;}
.ll{font-size:1.5em;    line-height: 130%;}
.u {  text-decoration: none;
background: linear-gradient(rgba(255, 204, 255,0) 80%, rgb(255, 244, 171) 20%);
background-repeat: no-repeat;
background-size: 0% 100%;
transition: background-size 2.5s;
}

.position-r{position: relative;}

/* components
---------------------------------------------*/
.play-button {
  position: absolute;
  top: 49%;
  left: 50%;
        width: 100px;
    height: 75px;
  background: url('path_to_play_icon.png') no-repeat center center;
  background-size: 70%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: all 0.3s ease;
}
iframe{max-width: 80%;}
.video-container {width: 100%;
max-width: 100%;
margin:0 auto;
position: relative;
  background:url(../images/webp/FEpay_10.webp);
	background-size:100% auto;
background-repeat:repeat-y;
    height: auto;

}

.box{width:1100px;
height:450px;
border:1px solid #000;
display: block;
margin:0 auto;}
.pagetop{width:72px;
height:72px;
font-size: 24px;
padding: 1em;
background: #5b4128;
border-radius: 5px;
display: block;
    line-height: 0.9;
position: fixed;
bottom:25px;
right:25px;
margin:0 auto;}

/* pages - home
---------------------------------------------*/
.text-hm3{font-family: "hiragino-mincho-pron", sans-serif;
font-weight: 300;
font-style: normal;
 -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.text-hm6{font-family: "hiragino-mincho-pron", sans-serif;
font-weight: 600;
font-style: normal;
 -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;}


/* animations
---------------------------------------------*/
.animated-element {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}

.animated-element.animate {
  opacity: 1;
}
.up-down{
animation: up-down 1.5s forwards ease-out;
    animation-iteration-count: infinite;}
.btn-box{
animation: pulse 1s forwards ease-out;
    animation-iteration-count: infinite;}

   /* 親要素に表示設定 */
    .btn-box {
      display: inline-block;
      overflow: hidden;
    }

    /* 画像の初期状態 */
    .btn-box img {
      display: block;
      width: 100%; /* 画像サイズをレスポンシブ対応に */
      filter: brightness(1); /* 初期は少し暗くする */
      transition: filter .3s ease; /* 滑らかなアニメーション */
    }

    /* Hover時の状態 */
    .btn-box:hover img {
      filter: brightness(1.2); /* 明るくする */
    }
    .reflection-img:hover img {
      filter: brightness(1.2); /* 明るくする */
    }
    .l-btn:hover, .t-btn:hover{
      filter: brightness(1.2); /* 明るくする */
    }
  #target {
      opacity:0;
            transition: opacity 1s ease-out;  /* フェードアウトにスムーズなトランジションを追加 */
    }
#target2 {
      opacity:0;
            transition: opacity 0.3s ease-in-out;  /* フェードアウトにスムーズなトランジションを追加 */
}
@keyframes moveBackground {
      0% {
        transform: scaleX(0);
      }
      100% {
        transform: scaleX(0.75); /* 70%のところで停止 */
      }
    }
@keyframes up-down{0% {
    transform: translate(-50%, -50%) translateY(0px);
}

50% {
    transform: translate(-50%, -50%) translateY(var(--up-down-swing, 15%));
}
100% {
    transform: translate(-50%, -50%) translateY(0px);
}
}
@keyframes pulse{
0% {
    transform: translate(-50%, 0%) scaleX(1);
}

50% {
    transform: translate(-50%, 0%) scale( 1.05);
}
100% {
    transform: translate(-50%, 0%) scaleX(1);
}
}
/* 点滅 */
.blinking{
 -webkit-animation:blink 1s ease-in-out infinite alternate;
    -moz-animation:blink 1s ease-in-out infinite alternate;
    animation:blink 1s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0.2;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity: 0.2 ;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity: 0.2 ;}
    100% {opacity:1;}
}
/* ring */
.ring::after {
    animation-delay: 0.4s;
}

.ring::before, .ring::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 100vh;
    box-shadow: 0 0 50px rgba(53, 250, 148, 0.53) inset;
    animation-name: ring;
}

.ring, .ring::before, .ring::after {
    animation-iteration-count: infinite;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
}

.ring {
    --ring-border-radius: 1em;
}

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

.ring {
    --ring-border-radius: 1em;
}

.btn {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    background-color: transparent;
    border-width: 1px;
    border-color: transparent;
    border-radius: 0.25rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
    cursor: pointer;
    user-select: none;
    display: inline-block;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
@keyframes ring {
0% {
    transform: scale(0.95);
    opacity: 1;
}

90% {
    opacity: 0.1;
}
100% {
    transform: scale(var(--ring-scale, 1.3));
    opacity: 0;
}
}
/* フェードインのアニメーション */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.btn1 .reflection-img{width:78%;
height:auto;
}
.btn2 .reflection-img{width:38%;
height:auto;
}

.reflection-img {border-radius: 100vh;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
}

.reflection {
    position: absolute;
    top: -50%;
    left: 0;
    height: 100%;
    width: 30px;
    background-color: #fff;
    opacity: 0;
    transform: rotate(45deg);
    animation: reflection 3s ease-in-out infinite;
}
.btn1 {        width: 100%;

    position: relative;
    transform: translate(-50%, 0%);
    top: 1%;
    left: 50%;
    height: auto;
		    padding-top: 20px;
    padding-bottom: 10px;
}
.btn1-gb-a{background:url(../images/webp/FEpay2_11.webp);
background-size: 100% 100%;
background-repeat:repeat;}
.btn2-gb-a{background:url(../images/webp/FEpay_19_16.webp);
background-size: 100% 100%;
background-repeat:repeat;}
.btn1-gb-b{background:url(../images/webp/FEpay_19_18.webp);
background-size: 100% 100%;
background-repeat:repeat;}
.btn1-gb-c{background:url(../images/webp/FEpay2_07.webp);
background-size: 100% 100%;
background-repeat:repeat;}
.btn2-gb-b{background:url(../images/webp/FEpay_28.webp);
background-size: 100% 100%;
background-repeat:repeat;}
.btn2-gb-c{background:url(../images/webp/FEpay_19_11.webp);
background-size: 100% 100%;
background-repeat:repeat;}
.btn2 {    width:  100%;

    position: relative;
    transform: translate(-50%, 0%);
    top: 1%;
    left: 50%;
    height: auto;
		display: flex;
    justify-content: center;
    align-items: flex-start;
		padding-top: 10px;
    padding-bottom: 12px;

}
.btn2a{       left: 3%;}
.btn2b{       left: -2%;}

.btn2-gb-c .btn2a{   left:1.5%;}
.btn2-gb-c .btn2b{   left: 0%;}
/* キーフレームアニメーション */
@keyframes reflection {
    0% { transform: scale(0) rotate(45deg); opacity: 0; }
    80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { transform: scale(4) rotate(45deg); opacity: 1; }
    100% { transform: scale(50) rotate(45deg); opacity: 0; }
}
/* ring2 */
.ring2::after {
    animation-delay: 0.4s;
}

.ring2::before, .ring2::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 100vh;
      box-shadow: 0 0 50px rgba(255, 50, 50, 0.53) inset;
    animation-name: ring;
}

.ring2::before, .ring2::after {
    animation-iteration-count: infinite;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
}

.ring2 {
    --ring-border-radius: 1em;
}
.ring2.hidden {
  display: none; /* リングを非表示にする */
}
*, ::after, ::before {
    box-sizing: border-box;
}

.ring2 {
    --ring-border-radius: 1em;
}

/* responsive
---------------------------------------------*/
@media only screen and
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 2dppx) {
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}
@media screen and (min-width: 751px){
	.sp{display:none;}
}
@media screen and (max-width: 750px){
	body{font-size:4.5vw;}
  #wrap, .top{overflow: hidden;}
iframe {
    position: relative;
                max-width: 80vw;
        height: 42vw;
    top: 0vw;
}
	.pc{display:none;}
    .top .formring{        height: 11vw;
    }
.formring{        height: 22vw;
    }
.play-button {
  top: 48%;}
.topimg {
    padding: 2vw;
}
.topbox{max-width: 100%;
    height: 3.5vh;
    top: 4vw;}
.topbox-text {font-size:4vw;}
.pagetop{ width: 8vw;
    height: 8vw;
    font-size: 4vw;
    text-align: center;
    padding: 3vw;
    background: #5b4128;
    border-radius: 4px;
    display: block;
    line-height: 0.9;
    position: fixed;
    bottom: 5vw;
    right: 2%;
    margin: 0 auto;
}
.text-center{        position: absolute;
                top: 2px;
        left: 0;
        transform: translate(50%, 50%);}

.btn-box2{bottom:4vw;}
.modal{padding:0;}
.modal-box1{    bottom: 20vw;}
.modal-box2{    bottom: 3vw;}
.modal-text{    font-size: 6.5vw;}
	footer br{display:inherit;}
#container{width: 100%;}
.btn1{  padding-top: 3vw;
        padding-bottom: 1vw;}
.btn2{  padding-top: 2vw;
        padding-bottom: 2vw;}
}
