@charset "utf-8";

/*
#################################
 
	全体
 
#################################
*/

/*アンカーへのスクロール*/
html {
  scroll-behavior: smooth;
}

#howtouse { 
  scroll-margin-top: 90px;   /* PC時ヘッダー80px＋余裕10px */
}


@media screen and (max-width: 767px) {
  #howtouse { 
    scroll-margin-top: 75px; /* 65px＋余裕10px */
  }
}

/*アンカーへのスクロール-終*/


main{
        margin-top: 80px;
        overflow:hidden; 
}

html,body{
    font-family: "Noto Sans JP", sans-serif;
}

body {
  margin: 0;
  min-height: 100vh;
}

/*背景グラデ*/
body {
  margin: 0;
  min-height: 100vh;
  background-color:#f5f5f5;
}
section {
  background: transparent; /* セクション自体は透過 */
}
/*背景グラデ-終*/

/* リンクの下線を消す */
a {
  text-decoration: none;
}

/* リストの「・」を消す */
ul, ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

section{
    background-color:#FFFFFF;
    width:100%;
    margin:0 auto 0 auto; 
    padding-bottom: 100px;
}

header,footer{font-size:15px;}
main{font-size:15px;}

main h2{
font-weight:normal;
margin:0;
}

h2 {
  font-size: 3rem;
  font-weight: bold;
}
.h2l{font-size:90px;}
.h2s{font-size:60px;}

.subtitle{
position:absolute;
top:-45px;
}

.subtitle p{
margin:0;
font-weight: bold;
}




/* 下からふわっと出る初期状態 */
.fadeUp {
  opacity: 0;
  transform: translateY(50px);
}

/* 発火時 */
.is-fadeUp {
  animation: fadeUpAnime 0.6s forwards;
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}




/*
#################################
	全体-レスポンシブ
#################################*/
@media screen and (max-width: 767px) {

html, body {
  overflow-x: hidden;
}



    
    body{
        max-width:767px;
    }
    
    
    main {
    margin-top: 65px;
        max-width:767px;
        width: 100%;
}
    
    section {
    width:100%;
    padding:0 0 50px 0;
    margin:0 auto 0 auto; 

        
}
    
/*.subtitle{
    transform:scale(0.8);
}*/
.h2l{
font-size:70px;
}

.h2s{
font-size:40px;
}

.subtitle p{
font-size:0.8rem;
}

}

/*
#################################
	CTAボタン
#################################*/
/*オレンジボタン*/
.orangebutton {
        width:20rem;
  margin: 30px auto 15px auto;
  display: inline-block;
  border-radius: 9999px; /* pill-shaped */
  background: linear-gradient(to bottom, #FF7F30, #FF4000); /* オレンジグラデーション */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* ドロップシャドウ */
  border: 4px solid white; /* 白フチ */
  padding: 20px 0;
  text-align: center;
}

.orangebutton a {
  margin: 0 auto;
  display: inline-block;
  backgrond-color:#ffffe0;
  font-size: 1.8rem;
  font-weight: 700;
  color: #FFFFFF;
  text-decoration: none;
  width: 100%;
  height: 100%;
}

.grabutton {
        width:20rem;
  margin: 30px auto 0 auto;
  display: inline-block;
  border-radius: 9999px; /* pill-shaped */
  background: linear-gradient(to bottom, #FF7F30, #FF4000); /* オレンジグラデーション */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* ドロップシャドウ */
  border: 4px solid white; /* 白フチ */
  padding: 14px 0;
  text-align: center;
}

.grabutton a {
  margin: 0 auto;
  display: inline-block;
  backgrond-color:#ffffe0;
  font-size: 1.3rem;
  font-weight: 700;
  color: #FFFFFF;
  text-decoration: none;
  width: 100%;
  height: 100%;
}

.grabutton a:link,
.grabutton a:visited,
.grabutton a:hover,
.grabutton a:active {
  color: #FFFFFF;
}
/*黄色ボタン*/

.yelbutton{
  margin: 0 auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); 
    border-radius: 9999px;
    background-color:#FFF9C1;
    color:#000000;  
    /*padding: 0.8em 2em;*/
    text-align: center;
    border: 2px solid #FFF9C1; 
    width:20rem;
  padding:14px 0; 
}
.yelbutton a {
    margin:0 auto;
  font-size: 1.3rem;
  font-weight: 700;
  color: #000000;
  text-decoration: none;
  display: block;
  width: 100%;
  height: 100%;
}

.yelbutton a,
.yelbutton a:link,
.yelbutton a:visited,
.yelbutton a:hover,
.yelbutton a:active{
    color:#000000;
}



/*ボタンデザイン-終*/
.LPcta {
    padding: 90px 0;
    text-align:center;
    background-image: url("../img/logoback.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.ctatxt1{
    font-size:1rem;
    font-weight:normal;
    margin:0;
}

.ctatxt2{
    font-size:2rem;
    font-weight:bold;
    margin:10px 0 15px 0;
}


.ctabutton {
display:flex;
  flex-direction:column;
  align-items:center;   
  gap:12px;   
}

.arrow {
  width: 0;
  height: 0;
  margin: 0 auto 10px; /* 中央寄せ + 下に余白 */
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 20px solid red; /* 赤い逆三角 */
}

/*
#################################
	CTAボタン-レスポンシブ
#################################*/

@media screen and (max-width: 767px) {
  .LPcta {
        padding:30px 0 5px 0;
        background-image: url(../img/logoback.png);
        background-size: 570px auto;
        background-position: center -40px;
        background-repeat: no-repeat;
        min-height: 250px;
  }
.ctatxt1 {
    font-size: 0.7rem;}
.ctatxt2 {
    font-size: 1.5rem;}
    
 .grabutton {
     margin-top:0;
     width: 18rem;
 }   
.grabutton a {
    font-size: 1.2rem;
}
 .yelbutton {
     width: 18rem;
 }   
.yelbutton a{
    font-size: 1.2rem;
}

}


/*
#################################
	ヘッダー
#################################*/

header {
  position: fixed;  
  top: 0;            
  left: 0;
  width: 100%;      
  z-index: 1000;     
  background: #000;  
}

.header-css {
    background-color: #000000; 
    height:80px;
    max-width:1920px;
    width:100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-menu{
    display: flex;
}

.menu1 a:link,
.menu1 a:visited,
.menu1 a:active,
.menu2 a:link,
.menu2 a:visited,
.menu2 a:active {
    color:#FFFFFF;
}

.menu1 a:hover,
.menu2 a:hover{
    color:#8A8A8A;
}

.menu1 a,
.menu2 a{
    padding:5px 10px;
}

.header-menu{
    padding-right:10px;
}

/*
#################################
	ヘッダー-レスポンシブ
#################################*/
@media screen and (max-width: 767px) {
    
    header{
        font-size:0.85rem;
        max-width: 767px;
        width: 100%;
    }
    
.logo{
    transform: scale(0.8); 
    padding-top: 5px;
    }
    
.menu1 a,
.menu2 a{
    padding:5px 15px;
}

    .header-css {
    max-width:767px;
    width:100%;
    height:65px;
}

}



/*
#################################
	FV
#################################*/

.visually-hidden-fv{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;border:0;
}/*FV用*/


.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}/*h1用*/

.fv{
    max-width:1920px;
    position:relative;
    }

.FV-cta{
    width: 40%;
    height: 150px;
    position: absolute;
    bottom: 10%;
    left: 5%;
}

.FV-cta a {
    display: block;
    width: 100%;
    height:100%;
    color:transparent;
}

.fv img{
        width:100%;
}

.fv img.sp { display: none; }

.blur{
	animation-name:blurAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}

@keyframes blurAnime{
  from {
	filter: blur(10px);
	transform: scale(1.02);
  }

  to {
	filter: blur(0);
	transform: scale(1);
  }
}

/*
#################################
	FV-レスポンシブ
#################################*/
/*@media screen and (min-width: 375px) and (max-width: 768px)*/

@media screen and (max-width: 767px) {
    
    .fv{
    max-width:767px;
      width:100%;
    }
    
    .fv img.pc { display: none; }
  .fv img.sp { display: block; 
  width:100%;}

 .FV-cta {
    width: 100%;
    height: 110px;
    position: absolute;
    bottom: 0;
    left: 0;
}   
}


/*#################################
	#introduction)イントロ
#################################*/

#introduction{
    padding-bottom:0;
    padding-top: 30px;
}

.i-1{
    display:flex;
    justify-content: center;
}


.i-1txt p{
    font-size:3.5rem;
    font-weight:bolder;
    margin-bottom:20px;
}

.i-1txt p:last-child{
    font-size:2rem;
    font-weight:bold;
    margin-top:0;
}



.ii p{
    text-align: center;
    font-size: 0.7rem;
}


.ii img{
  display: block;
  margin: 0 auto; 
}


.ii-txt{
    font-size: 1.4rem;
    text-align: center;
}
.ii-txt strong{
    font-size: 1.8rem;
}



.i-2{
    display: flex
;
    justify-content: center;
    /* gap: 20px; */
    max-width: 1100px;
    margin: 40px auto;
    /* padding: 0 16px; */
    width: 95%;

}


.i-2 > figure{
flex: 0 0 calc((100% - 2 * 20px) / 3);
    display: flex
;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    background: #fffbe6;
    padding: 20px 16px;
    border-radius: 10px;
    margin: 5px;
}
.i-2 > figure img{
  display:block;
  max-width:100%;
  height:auto;
}


/*吹き出し*/

.iii-1{

    color:#FFFFFF;
    font-weight:bolder;
    text-align: center;
    font-size:2rem;
        margin:20px auto 20px auto;
}

.iii-1 {
      position: relative;
    background-color: red;
      border-radius: 90px;
      padding: 20px;
      width: 35rem;

    }

   /* .iii-1::after {
      content: '';
      position: absolute;
      bottom: -25px;
      left: 40px;
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-top-color: red;
      transform: rotate(0deg);
      z-index: 1;
    }*/

.iii-1::before {
    content: '';
    position: absolute;
    bottom: -28px;
    left: 50%;
    width: 0;
    height: 0;
    border: 16px solid transparent;
    border-top-color: red; /* ふち色 */
    transform: translateX(-50%);
    z-index: 0;
}


/*テキスト*/



.iii-2{
font-size:3.5rem;
font-weight:bold;
margin:0;

text-shadow:
  -3px -3px 0 white,
   0   -3px 0 white,
   3px -3px 0 white,
  -3px  0   0 white,
   3px  0   0 white,
  -3px  3px 0 white,
   0    3px 0 white,
   3px  3px 0 white;
   }

.iii-3{
font-size:5.5rem;
font-weight:bold;
margin:0;

text-shadow:
  -4px -4px 0 white,
   0   -4px 0 white,
   4px -4px 0 white,
  -4px  0   0 white,
   4px  0   0 white,
  -4px  4px 0 white,
   0    4px 0 white,
   4px  4px 0 white;
}

.iii-2,.iii-3{
    text-align:center;
}

.iii-red{
    color:red;
}

.iii-txt {
  position: relative;
  width: 100%;
  /*aspect-ratio: 16/9; */
  height: 500px;
  overflow: hidden;   /* はみ出しを隠す */
}


.iii-txt1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
  z-index: 2;
}

.LP2nd {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;     /* 画像を枠いっぱいに拡大トリミング */
  object-position: 50% 50%; /* ← ここで見せたい位置を調整 */
}



.iii-txt2{
    padding:10px 0;
    background-color:#FFFFFF;
    width:100%;
    position:relative;
    z-index: 0;
}

.meta-a{
    position:absolute;
    bottom:0;
    right:0;
  width: clamp(60px, 25vw, 255px);
  height: auto;
  /*margin-bottom: 10px;*/
  display: block;
z-index: -1; 
}


.iii-t-o2{
    width:90%;
    margin: 0 auto;

}


.iii-txt2 #disc{
    list-style: disc;
 padding-left: 1.5em; /* li のインデント */
    margin-left:2rem;
    font-size: 3rem;
    font-weight: bolder;
}

.note {
display: block; 
    margin-left: 3.5rem;
    font-size: 0.7em;
    color: #555;
    line-height: 1.4;
    text-align:end;
}

.iii-txt2 ul li{
    font-size: clamp(1.2rem, 3.7vw, 3rem);
    text-shadow: -2px -2px 0 white, 0 -2px 0 white, 2px -2px 0 white, -2px 0 0 white, 2px 0 0 white, -2px 2px 0 white, 0 2px 0 white, 2px 2px 0 white;
}

.iii-txt2-object{
    margin: 10px auto;
    width: 88%;
    z-index: 1;
    }

.iii-txt2-object small {
    font-size: 0.7rem;
    text-shadow: -2px -2px 0 white, 0 -2px 0 white, 2px -2px 0 white, -2px 0 0 white, 2px 0 0 white, -2px 2px 0 white, 0 2px 0 white, 2px 2px 0 white;
}







/*
#################################
	#introduction)レスポンシブ
#################################*/
@media screen and (max-width: 767px) {
.i-1{
flex-direction:column;
}

.i-1txt p {
    font-size: 2.5rem;
    font-weight: bolder;
    margin-bottom: 20px;
}

.i-1txt p:last-child {
    font-size: 1.5rem;

}

.i-1 img{
width:100%;
}

.i-2{
flex-direction: column;
}

.i-1txt{
margin-left:10px;

}


}


@media screen and (max-width: 767px) {
 .ii {
 display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start;
    align-items: center;
    text-align: left;
    gap: 16px;
    position: relative;
  }
  
   .i-2 > figure {
    min-height: 100px; 
   }

  .ii img {
    order: 1;
    margin: 0 auto 8px;
    width:20%;
  }

  .ii h3 {
    order: 2;
    margin: 0 0 4px;
    width:80%;
    font-size: 1.9rem;
  }
  
  .ii-txt strong{
        font-size: 2.2rem;
        }
  

  .ii p {
    order: 3;
    margin: 0;
  }
  
  
  .ii-p{
  position:absolute;
  width:100%;
  }
  
  .iip1{
        bottom: 20px;
        right: -40px;
  }

   .iip2{
        bottom: 20px;
        right: -40px;

  }
  
    .iip3{
        bottom: 15px;
        right: -40px;
  }

 
  
  
  }
  


@media screen and (max-width: 767px) {
    
#introduction {
    padding-top: 0;
}    
    
.iii-1{
width:85%;
margin:0 auto 20px auto;
font-size:1.3rem;
}

.iii-2 {
    font-size: 1.3rem;
    text-shadow: -2px -2px 0 white, 0 -2px 0 white, 2px -2px 0 white, -2px 0 0 white, 2px 0 0 white, -2px 2px 0 white, 0 2px 0 white, 2px 2px 0 white;
    }
    
.iii-3 {
    font-size: 2rem;
    text-shadow: -2px -2px 0 white, 0 -2px 0 white, 2px -2px 0 white, -2px 0 0 white, 2px 0 0 white, -2px 2px 0 white, 0 2px 0 white, 2px 2px 0 white;
    }

.orangebutton {
        width: 12rem;
        padding: 7px;
        margin: 15px auto 15px auto;    
    }
.orangebutton a {
    font-size: 1.1rem;
    
    }
    
.LP2nd{
display:none;
}

.LP2nd-sp{
        display: block;
        width: 100%;
}

.iii-txt1 {
    top: 55%;
    left: 50%;
}

.iii-txt2 #disc {
margin-left:0;
padding-left: 2rem;
margin-botom:0;}


.iii-txt2-object{
margin:0;
width:100%;

}

.iii-txt{
height:300px;
}

.iii-txt2 ul li{
    font-size:0.8rem;
}

.iii-txt2-object small {
font-size:0.3rem;
    
text-shadow: -1px -1px 0 white, 0 -1px 0 white, 1px -1px 0 white, -1px 0 0 white, 1px 0 0 white, -1px 1px 0 white, 0 1px 0 white, 1px 1px 0 white;
}
    
.note small{
    font-size: 0.45rem;
    display:block;
    }

.note{
    font-size: 0.3rem;
    margin-left:15px;
    flex-wrap: wrap;
    text-align:start;
}
    
    .iii-txt2 {
        padding:10px 0 5px 0;
    }



.meta-a {
    position: absolute;
    bottom: 0;
    right: -50px;
    width: 42%;
    }
    

    
    }



/*タブレット対応*/
@media screen and (min-width: 768px) and (max-width: 1279px) {
    
#introduction{
    padding-top: 30px;
}    
    
.i-1txt p {
    font-size: 3rem;
    margin-bottom:10px;
    margin-left:10px;
    }
.i-1txt p:last-child {
    font-size: 1.2rem;
    margin-left:19px;
    }
    
    .i-2 {
        width:85%;
        height:85%;
    }

    .iii-txt2-object {
        width:100%;
    }
    .iii-txt2 #disc {
        margin-left:0;
    } 
    
    .iii-txt2-object small {
        font-size: 0.8rem;}
    
    
    .iii-2 {
        font-size: 2.5rem;
    }
    
    .iii-3 {
        font-size: 3.5rem;
    }
    
    
}


/*
#################################
	ご利用方法
#################################*/

#howtouse .subtitle {
    right: 20px;
}

#howtouse .subtitle p {
    text-align: start;
    padding-right: 6px;
}
#howtouse{
    position: relative;
    padding-top: 110px;

}

#howtouse .h2l{
color:#FFD1A9;
}

.howto-a{
display:flex;
flex-wrap: wrap;
}

.howto-a figcaption{
    text-align:center;
}

.howto figure p{
    margin:10px 0 3px 0;
}



.howto {
    width: 50%;
    display: flex;
    justify-content: center;
}

.howto figcaption {
    margin-top: 20px;
    font-weight: bold;
}

.howto-b h3{
font-weight:bold;
text-shadow: 2px 2px 0 rgba(255, 209, 169, 1);
margin-bottom:0;
text-align: center;
font-size: 1.9rem;
}

.h3sub {
  margin: 10px 0 0 0;
text-align: center;
font-weight: bold;
}

.howto-b h4{
    color:#FFFFFF;
    background-color:#000000;
    text-align: center;
    padding: 15px 0;
    font-size: 1.3rem;
    border-radius: 60px;
    box-shadow: 4px 6px 0 rgba(255, 209, 169, 1);
    margin:10px 0 15px 0;

}

/*ご利用方法-スライダー*/
#howtouse {
  position: relative;
  padding: 50px 0;
  background: #fff;
  text-align: center;
}

.howto-heading {
  font-size: 1.6rem;
  font-weight: bold;
  background: red;
  color: #fff;
  border-radius: 50px;
  padding: 10px 30px;
  display: inline-block;
  margin-bottom: 30px;
}

.slider{
  position: relative;
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
  overflow: hidden;
  touch-action: pan-y;       /* 縦スクロール優先＋横スワイプ可 */
  cursor: grab;
    background-color: #f5f5f5;
    border-radius:20px;
    padding-top: 30px;
    padding-bottom: 30px;
}
.slider.dragging { cursor: grabbing; }

/* 横並びにして translateX で移動 */
.slider .track{
  display: flex;
  will-change: transform;
  transition: transform 0.35s ease;
}

.slide{
  flex: 0 0 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding-bottom: 10px;
}

/* 画像サイズは既存指定を踏襲（必要なら 100% に変更可） */
.slide img{
  width: 50%;
  height: auto;
/*border:dotted 5px #ff5555;
  border-radius: 10px;*/
  user-drag: none;
  -webkit-user-drag: none;
  pointer-events: none; /* ドラッグ中の選択防止 */
    padding: 0 0 0 20px;
}

.slide h3 { font-size: 1.5rem; margin-top: 15px; }
.slide h4 { font-size: 1.2rem; font-weight: bold; margin: 10px 0; }
.slide p  { font-size: 1rem; line-height: 1.6; color: #333; padding: 0 20px; }

/*画像・キャプション並び-PCのみ*/
.hb-caption {
    display: flex;
    align-items: center;
}

.hb-h4p{
    width:50%;
}
/* ドット */
.dots{
  display: flex;
  justify-content: center;
  margin: 20px 0 20px 0;
  gap: 8px;
}
.dots button{
  width: 12px; height: 12px;
  border-radius: 50%;
  border: none;
  background: #ccc;
  cursor: pointer;
  transition: background .3s;
}
.dots button.active{ background: #ff5555; }

.hb{
    margin:70px 0 20px 0;
}

.hbtitle{
    font-size:3rem;
    font-weight:bold;
    border-top:solid 7px red;
    border-bottom:solid 7px red;
    width:31rem;
    margin:0 auto 30px auto;
        padding: 0 0 5px 0;
}
.hbsmall{
    font-size:2.3rem;
}

.cash{
    display:flex;
    justify-content: center;
}

.hb1 p{
    margin:0;
    font-size: 2.2rem;
    padding: 5px 0 5px 5px;
    letter-spacing: 0.3rem;
    font-weight:bolder;
    }

.hb-1,
.hb-2{
    background-color:red;
    color:#FFFFFF;
    padding:10px 35px;
    width: 8.5rem;
    font-weight: bold;
    font-size: 1.7rem;
    text-align: center;
}


.hb1 small,
.hb2 small{
    display: block;
    text-align: right;

    font-size: 65%;
}


.hb2{
margin: 20px 0 0 0;
}

.hb2 p{
    margin:0;
    font-size: 1.7rem;
    padding: 5px 0 5px 5px;
     display:flex;
    justify-content: center;
    }

.adu1,
.adu2,    
.adu3,
.adu4{
    position: relative;
}

.chil1{
    position: absolute;
    top: -15px;
    transform: scale(0.8);
    left: -20px;
}

.chil2{
    position:absolute;
    top: 105px;
    right: -30px;
    /*transform: scale(1.2);*/
}

.chil3{
    position:absolute;
    bottom: 75px;
    right: -46px;
    transform: scale(0.9);
}

.chil4{
    position:absolute;
    bottom: 100px;
    left: 0;
    transform: scale(1.2);
}

.cash:first-child{
    margin-bottom:10px;
}

/*
#################################
	ご利用方法-レスポンシブ
#################################*/
@media screen and (max-width: 767px) {

#howtouse {
    padding-top: 45px;
    }

#howtouse .subtitle {
    right: 0;
}
    
.howto{
    width:100%;
    }

.howto-a {
    flex-direction: column;
}

.howto-b h3{
font-size:1.2rem;
}
.howto-b h4{
font-size:0.6rem;
padding: 7px 0;
box-shadow: 2px 3px 0 rgba(255, 209, 169, 1);
}





}

@media screen and (max-width: 767px) {
    .hb-caption{
    flex-direction: column;
    }
    
.slide img {
    width: 80%;
    padding:0;
    }
    
.slider {
padding-top:17px;
}
    
.hb-h4p{
width:100%;
}

.txt-l h4{
font-size:1.05rem;
} 

.dots{
margin:0 0 5px 0;;
}

.hbsmall {
    font-size: 1.3rem;
}
.hbtitle {
    font-size: 1.8rem;
    font-weight: bold;
    border-top: solid 7px red;
    border-bottom: solid 7px red;
    width: 20rem;
    margin: 0 auto 20px auto;
    padding: 0 0 5px 0;}
    
    .howto-heading {
    font-size: 1.5rem;
    }
    
.cash{
width:95%;
margin:0 auto;
}
    
.hb-1,
.hb-2{
padding:5px 5px;
font-size:1.3rem;
width: 7rem;
}



.hb1 p{
font-size: 1.25rem;
letter-spacing: 0rem;
}
.hb2 p{
font-size: 0.8rem;
letter-spacing: 0rem;
}

.hb1 small, .hb2 small{
font-size: 33%;
padding-right:10px;
}

.howto-b h4{
margin-bottom:10px;
}


    }



/*ご利用方法-タブレット対応*/

@media screen and (min-width: 768px) and (max-width: 1279px) {
    .txt-l h4 {
        font-size: 1rem;
    }
    
.slide p {
    font-size: 0.8rem;}

}

/*
#################################
	注意事項
#################################*/

.not-heading{
    border-top: 5px solid red;
    border-bottom: 5px solid red;
    font-weight: bold;
    font-size: 2.5rem;
    width: 11rem;
    text-align: center;
    margin: 0 auto;
    padding:5px 0;
}

.notice-box{
    overflow: hidden;
    max-width: 1080px;
    width: 60%;
    margin: 20px auto;
}

/* summary部分（質問） */
.not-a{
  position: relative;
  background: #e4f8ee; /* 質問背景 */
 padding: 15px 20px;
 font-weight: bold;
  cursor: pointer;
  list-style: none;
  font-size: 1.3rem;
    border-radius: 10px;
}

/* デフォルトの▶を消す */
.not-a::marker,
.not-a::-webkit-details-marker {
  display: none;
  content: none;
}

/* 「＋」アイコンを右側に追加 */
.not-a::after{
  content: "＋";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.8rem;
  color: #444;
  transition: 0.2s ease;
}

/* 展開時は「－」に切り替え */
details[open] > .not-a::after {
  content: "－";
}





/* 回答部分 */
.not-b {
  background: #ffffe0; /* 回答背景 */
  padding: 15px 20px;
  line-height: 1.6;
  margin:15px 0;
  border-radius: 10px;
}


.red{
    color:red;
}

section#notice {
    padding-top: 100px;
}


.not-c{
font-size:1rem;
text-align:center;

}

.not-c a{
border-bottom: 1px #666 dashed;
color:#000000;
}

.not-c a:visited,
.not-c a:link
.not-c a:hover{
color:#000000;

}

/*
#################################
	注意事項-レスポンシブ
#################################*/
@media screen and (max-width: 767px) {

.not-heading{
        font-size: 1.5rem;
        width: 10rem;
}

section#notice {
    padding-top: 45px;

}
.notice-box {
    width: 90%
}

.not-a {
font-size:1.1rem;
}

}

/*注意事項-タブレット対応*/

@media screen and (min-width: 768px) and (max-width: 1279px) {
    
    
    .notice-box {
        width:85%;
    }
}



/*
#################################
	─よくある質問
#################################*/
#qanda .subtitle{
    right:30px;
}

#qanda .subtitle p {
    text-align: start;
    padding:10px 6px 0 0;
}

.qa-heading{
    border-top: 5px solid red;
    border-bottom: 5px solid red;
    font-weight: bold;
    font-size: 2.5rem;
    width: 16rem;
    text-align: center;
    margin: 0 auto;
    padding:5px 0;
}

#qanda{
    position: relative;
    padding-top: 110px;
}

#qanda .h2l{
color:#FFA9F6;
}

#qanda .h2l2{
color:#DFA9FF;
padding: 0 0 0 5px;
}

.question{
    border-bottom:solid 3px #FFA9F6;
    padding: 0 0 5px 0;
    margin-bottom:0;
    font-size: 1.2rem;
    font-weight: bold;
}

.answer{
    background-color:#f2e5ff;
    padding: 10px 10px;
    line-height: 1.6rem;
    margin: 10px 0;
}

.qa-box {
  margin-bottom: 10px;
  overflow: hidden;
    max-width:1080px;
    width:60%;
    margin:20px auto;
}

/* summary部分（質問） */
.QA-q1,
.QA-q2{
  position: relative;
  background: #e4f8ee; /* 質問背景 */
  padding:50px 50px 50px 120px;
  font-weight: bold;
  cursor: pointer;
  list-style: none;
    font-size: 1.3rem;
    border-radius: 10px;
}

/* デフォルトの▶を消す */
.QA-q1::marker,
.QA-q2::marker,
.QA-q1::-webkit-details-marker,
.QA-q2::-webkit-details-marker {
  display: none;
  content: none;
}

/* 「＋」アイコンを右側に追加 */
.QA-q1::after,
.QA-q2::after {
  content: "＋";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.8rem;
  color: #444;
  transition: 0.2s ease;
}

/* 展開時は「－」に切り替え */
details[open] > .QA-q1::after {
  content: "－";
}

details[open] > .QA-q2::after {
  content: "－";
}

.QA-q1::before{
content: "";
  position: absolute;
  left: 1rem;
  top: 50%;
  width: 85px;
  height: 85px;
  background: url("../img/Q1.png") no-repeat center/contain;
  transform: translateY(-50%);
  transition: transform 0.3s ease;
}

.QA-q2::before{
content: "";
  position: absolute;
  left: 1rem;
  top: 50%;
  width: 85px;
  height: 85px;
  background: url("../img/Q2.png") no-repeat center/contain;
  transform: translateY(-50%);
  transition: transform 0.3s ease;
}





/* 回答部分 */
.QA-a {
  background: #ffe9c4; /* 回答背景 */
  padding:40px 20px 40px 120px;
  line-height: 1.6;
  border-radius: 10px;

}

.QA-a {
  position: relative;          /* ← これが基準点になる！ */
  line-height: 1.6;
}

/* アイコンの位置指定 */
.QA-a::before {
  content: "";
  position: absolute;
  left: 15px;                  /* 左余白（見た目で微調整） */
  top: 50%;                  /* テキスト高さに合わせて調整 */
  width: 85px;                 /* アイコンサイズ */
  height: 85px;
  background: url("../img/A1.png") no-repeat center/contain;
    transform: translateY(-50%);

}

/*
#################################
	よくある質問-レスポンシブ
#################################*/
@media screen and (max-width: 767px) {

#qanda {
    padding-top: 45px;
}

#qanda .subtitle {
    right: 0;
    }
    
.question{
font-size:0.9rem;
}

.answer{
font-size:0.8rem;
line-height: 1.2rem;
padding: 5px 10px;
margin: 10px 0 20px 0;
}


.qa-heading {
    font-size: 1.5rem;
    width: 10rem;

}


.qa-box {
    width: 90%;
    }
    
    
.QA-q1::before,
.QA-q2::before,
.QA-q3::before,
.QA-q4::before{
    width: 55px;
    height: 55px;
}

.QA-q1, .QA-q2 {
    padding: 20px 50px 20px 80px;
    font-size:1.1rem;
    }
.QA-a::before {
    width: 55px;
    height: 55px;
}

.QA-a {
    padding: 20px 10px 20px 80px;
}

}



/*よくある質問-タブレット対応*/

@media screen and (min-width: 768px) and (max-width: 1279px) {
    
    
    .qa-box {
        width:85%;
        
        
    }   
    
    
}

/*#################################
	YKとは
#################################*/

#ykinfo{
    background-color:#f5f5f5;
    padding-bottom:0;
    position: relative;
}

.yk-heading{
  position: relative;
  width: 100%;
  /*aspect-ratio: 16/9; */
  height: 600px;
  overflow: hidden;   /* はみ出しを隠す */
    background-color: transparent;
}
.ykinfo img{
  display: block;
  margin: 0 auto; 
}

.LP1st {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 10%;
}



.yk-ab {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 親の中央に配置 */
    max-width: 600px;
    width:90%;
    height: auto;
    background-color: rgba(0, 0, 0, 0.6); /* 半透明の黒背景 */
    color: #FFFFFF;
    padding: 20px; /* 必要に応じて内側余白 */
    box-sizing: border-box;
    border-radius: 10px; /* オプション：角を少し丸める */
}


.yk-ab h2{
    font-size:2.5rem;
    text-align: center;    
}

.yk-heading1{
    font-weight:bolder;
}


p.yk-heading2 {
    max-width: 600px;
    text-align: center;
    width: 90%;
    margin: 20px auto;
    line-height: 1.5rem;
}




.yk-link a{
    background-color:#000000;
    color:#FFFFFF;
    padding: 15px 30px;
    font-size: 20px;
    font-weight:bold;
}

.yk-link {
    display: flex;
    width: 290px;
    text-align: center;
    max-width: 300px;
    justify-content: space-between;
    margin: 0 auto;
}

.yk-link a:visited,
.yk-link a:link,
.yk-link a:hover{
    color:#FFFFFF;
}

.yk-txt{
    font-weight:bold;
    padding:20px 20px;
    background-color:#f5f5f5;
    width: 95%;
    height: auto;
    margin: 0 auto;
    font-size:1.5rem;
}

.yk-txt p{
    margin:0;
    padding-bottom:10px;
}

/*#################################
	YKとは-レスポンシブ
#################################*/

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

.LP1st{
display: none;
}

.LP1st-sp{
        display: block;
        width: 100%;
}
.yk-ab {
padding:30px 5px;
}
.yk-ab h2 {
    font-size: 1.5rem;
    }
    
p.yk-heading2 {
    margin: 0 auto;
        width: 95%;
        font-size: 0.8rem;
        padding: 5px 0 15px 0;
}

.yk-heading {
    height: 420px;
    }
.yk-txt {
    width: 90%;
    font-size:0.8rem;
}


}


/*YKとは-タブレット対応*/

@media screen and (min-width: 768px) and (max-width: 1279px) {
    
    .yk-txt {
        font-size:1.2rem;
    }
    
    
    
}

/*#################################
	実店舗紹介
#################################*/

#ourshop .heading h2{
    font-weight:bolder;
}

#ourshop .heading{
    background-color: rgba(0, 0, 0, 0.8); /* 半透明の黒背景 */
    color: #FFFFFF;
    width: 36rem;
    border-radius: 0 20px 20px 0;
    padding: 15px;
    position: absolute;
    top: 50px;

}

#ourshop .heading p{
    line-height: 2.3rem;
    font-size: 1.6rem;
    margin: 15px 0;
}



#ourshop{
    position: relative;
    padding-top: 110px;
    background-image: url(../img/akihabara-night.jpg);
   background-repeat: no-repeat;
}

#ourshop .subtitle{
     left: 50%;                /* 親の幅の50%地点に配置 */
  transform: translateX(-50%); /* 自身の幅の半分を戻す */
}

#ourshop .subtitle p{
text-align:center;
}

#ourshop .h2l{
color:#88FFF7;
}


.our{
display: flex;
justify-content: center;
background-color: #FFFFFF;
width: 85%;
border-radius: 20px;
margin: 0 auto;
padding: 200px 0;
}

figure.os {
    margin: 0 10px;
    text-align: center;
    width: 40%;
}


figure.os p {
font-size:0.9rem;
line-height: 1.4rem;
}

.os h3{
    font-size:1.5rem;
}

figure.os img{
    width:100%;
    height:auto;
}

.caption {
    font-size: 1.1rem;
    font-weight: bold;
    text-align: center;
    line-height: 1.8rem;
    margin-bottom:50px;
    }

.os figcaption{
padding-bottom:10px;
}



 .shop-prof{
     display:flex;
    font-weight: bold;
    width: 35rem;
    height: auto;
    background-color: rgba(0, 0, 0, 0.8);
    padding: 35px 20px;
    border-radius: 20px 0 0 20px;
    position: absolute;
    bottom: 50px;
    right: 0;
    font-size: 2rem;
}

.shop-prof img{
    width:20%;
    height:auto;
}

.shop-prof a{
    display: block;
    color: #FFFFFF;
    width:80%;
    padding-left: 10px;
    padding-top: 5px;
    

}

.shop-prof a span{
    width: 11rem;
    border-bottom: dashed #FFFFFF 2px;
    padding-bottom: 5px;
}



.shop-prof a:link,
.shop-prof a:visited{
    color:#FFFFFF;
}

.shop-prof a:hover{
    color:#6F6F6F;
}





/*
#################################
	実店舗紹介-レスポンシブ
#################################*/
@media screen and (max-width: 767px) {
    
    .shop-prof a {
  display: flex;               /* フレックスボックス化 */
  justify-content: center;     /* 横方向中央 */
  align-items: center;         /* 縦方向中央 */
  text-align: center;          /* 複数行テキスト用の中央揃え */
  color: #fff;
  text-decoration: none;
  padding: 10px;               /* すでに指定されているpaddingを維持 */
}

    
    
#ourshop {
    padding-top: 75px;
    padding-bottom: 70px;
    }
    
#ourshop .subtitle {
        width: 100%;
    }    
    
    .subtitle h2{
    text-align: center;
    }
    
    .caption {
    font-size: 0.7rem;
     line-height: 1.2rem;
    }
    
    figure.os{
    width: 100%;
    margin: 0 auto;
    }
    
    .os:first-of-type{
    margin-bottom:20px;
    }
    
    .os p:first-of-type{
    margin-bottom:0;
    }
    
    .os p:nth-of-type(2){
    margin-top:4px;
    margin-bottom:4px;
    }
    
    .os p:nth-of-type(3){
    margin-top:6px;
    margin-bottom:0;
    }
    .os p:nth-of-type(4){
    margin-top:4px;
    }
    
    #ourshop .heading {
    width:19rem;
    }
    #ourshop .heading h2 {
    font-size:2.3rem;
    }
    
    #ourshop .heading p {
        font-size: 0.8rem;
        line-height: 1rem;
        padding-top: 3px;
                margin: 5px 0;
    }
    
    .our{
    padding: 120px 0;
    width:90%;
    }
    
    .shop-prof {
    /*flex-direction: column;*/
    width: 16rem;
    padding:10px 20px;
    bottom: 40px;
   border-radius: 15px 0 0 15px;
    }
    
    .shop-prof a span {
    font-size:1rem;
    justify-content: center;
        
            border-bottom: dashed #FFFFFF 1px;
    }
    
    
    .shop-prof a{
    text-align: center;
    margin:0 auto;
    padding:0;
    }
    
    .shop-prof img {
    /*width: 30%;
    height:30%;*/
    margin: 0 auto;

    }
    
    figure.os img {
    width: 85%;
    height: auto;
}

.os h3 {
    font-size: 1.2rem;
}

figure.os p {
    font-size: 0.8rem;
    line-height: 1.2rem;
}
    

}


/*実店舗紹介-タブレット対応*/

@media screen and (min-width: 768px) and (max-width: 1279px) {
   figure.os p { 
       font-size: 0.7rem; }
    
    #ourshop .heading p {
    font-size: 1.6rem;
    line-height: 2rem;
    margin: 10px 0;
}
    
}

/*#################################
	フッター
#################################*/

footer{
    background-color: #000000;
    position: absolute;
    width: 100%;
    height: 95px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
footer ul{
    display:flex;
}

footer ul li a{
    padding:5px 10px;
}

footer ul li a:visited,
footer ul li a:link{
    color:#FFFFFF;
}
footer ul li a:hover{
    color:#8A8A8A;
}


footer p{
    text-align:center;
    margin:5px 0 0 0 ;
    font-size:0.7rem;
    padding:5px 0 0 0;
    color:#FFFFFF;
}

/*
#################################
	フッター-レスポンシブ
#################################*/
@media screen and (max-width: 767px) {

footer{
    width: 100%;
}

    .our{
flex-direction: column;
}
}