@charset "UTF-8";
/*　ブレークポイント */
/* 背景画像　テキスト消去*/
/* フレックス*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

.attent-watashimo {
  font-family: "Noto Sans JP", "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
  font-weight: bold;
  font-size: 12px;
  line-height: 2;
  letter-spacing: 1px;
  -webkit-font-feature-settings: "palt" 1;
  font-feature-settings: "palt" 1;
}
@media screen and (max-width: 699px) {
  .attent-watashimo {
    font-size: 14px;
  }
}
.attent-watashimo h1,
.attent-watashimo h2,
.attent-watashimo h3,
.attent-watashimo h4 {
  font-weight: 700;
  line-height: 1;
}
.attent-watashimo p {
  font-size: 12px;
}
@media screen and (min-width: 700px) {
  .attent-watashimo p {
    font-size: 14px;
  }
}


.attent-watashimo img{
  max-width: 100%;
  height: auto;
}

.pc_none {
  display: none; }
  @media only screen and (max-width: 768px) {
    .pc_none {
      display: block; } }

.sp_none {
  display: block; }
  @media only screen and (max-width: 768px) {
    .sp_none {
      display: none; } }






.attent-watashimo .mainImg{
  max-width: 1000px;
  margin: 0 auto;
  padding: 50px 0 60px 0;
}

@media screen and (max-width: 700px) {
  .attent-watashimo .mainImg{
    padding: 25px 0 30px 0;
  }
}

.camp{
  background-image: url(/_var/attento/campaign/haitemimashita_active/img/camp_bg.jpg);
  background-size: 100% 100%;
  padding: 0 5% 80px 5%;
}

.camp .campBox{
  max-width: 880px;
  margin: 0 auto;
  border: solid #cfd7e9 10px;
  border-radius: 10px;
  padding: 50px;
  background-image: url(/_var/attento/campaign/haitemimashita_active/img/camp_box_bg.png);
  background-size: 100% 100%;
}
.camp .campBox h2{
  text-align: center;
}

.attent-watashimo .campBoxTxt{
  text-align: center;
  font-size: 21px;
  color: #0d3692;
  line-height: 1.4em;
  padding: 20px 0 0 0;
}

.camp .campBox h3{
  text-align: center;
  /* padding: 20px 0 0 0; */
}

.camp .campBox figure{
  text-align: center;
  padding: 10px 0;
}

@media screen and (max-width: 700px) {
  .camp{
    padding: 0 5% 40px 5%;
  }
  .camp .campBox{
    padding: 30px 15px;
    border: solid #cfd7e9 6px;
  border-radius: 6px;
  }
  .attent-watashimo .campBoxTxt{
    font-size: 16px;
  }
  .camp .campBox h3 img{
    width: 120px;
  }
}

.campDate{
  background-color: #0d3692;
  border-radius: 5px;
  display: flex;
  max-width: 670px;
  margin: 0 auto;
  border: solid 4px #0d3692;
}

.campDateTit{
  background-color: #fff;
  border-radius: 5px;
  font-size: 21px;
  color: #0d3692;
  padding: 10px 15px;
  line-height: 1em;
}

.campDateTxt{
  font-size: 21px;
  color: #fff;
  line-height: 1em;
  padding: 10px 15px;
  letter-spacing: 3px;
  text-align: center;
  flex: 1;
}

.campBt{
  text-align: center;
  padding: 60px 0 0 0;
}
.campBt a img{
  border-radius: 60px;
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
}



@media screen and (max-width: 700px) {
  .campDate{
    flex-direction: column;
  }
  .campDateTit{
    font-size: 14px;
    padding: 5px 8px;
    text-align: center;
  }
  .campDateTxt{
    font-size: 14px;
    padding: 8px 5px 3px 5px;
  }
  .campBt{
    max-width: 70%;
    margin: 0 auto;
    padding: 30px 0 0 0;
  }
}



.mov{
  padding: 80px 0 0 0;
  text-align: center;
  background-image: url(/_var/attento/campaign/haitemimashita_active/img/mov_bg.jpg);
  background-size: 100% 100%;
}

.movBox {
  position: relative;
  width: 100%;
  max-width: 768px;
  margin: 0 auto 50px auto;
  /* 16:9 ― 新ブラウザ用 */
  aspect-ratio: 16 / 9;
}
.movBox::before {
  content: "";
  display: block;
  padding-top: 56.25%; 
}
.movBox iframe {
  position: absolute;
  inset: 0; 
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 768px) {
  .movBox {
    width: calc(100% - 70px);  /* 35px × 2 */
  }
}


.mov h2{
  font-size: 36px;
color: #0d3692;
font-weight: bold;
padding: 0 0 50px 0;}
.mov .movTxt{
  font-size: 20px;
  color: #0d3692;
  padding: 0 0 50px 0;
}
.mov .movTxtFoot{
  font-size: 28px;
  color: #0d3692;
  padding: 0 0 80px 0;
}

@media screen and (max-width: 700px) {
  .mov h2{font-size: 28px; line-height: 1.3em;}
  .mov .movTxt{font-size: 16px;padding: 0 0 30px 0;}
  .mov .movTxtFoot{font-size: 22px;padding: 0 0 40px 0;}
}

.typeMenu{
  padding: 80px 0;
}
.typeMenu ul{
  display: flex;
  justify-content: center;
}
.typeMenu ul li{
  padding: 0 10px;
}

@media screen and (max-width: 700px) {
  .typeMenu{
    padding: 40px 0;
  }
  .typeMenu ul{
    flex-direction: column;
    align-items: center;
  }
  .typeMenu ul li{
    padding: 10px 0;
  }
}

/*----体験者の声----*/

.voice{
  background-color: #ecf6ff;
  padding: 80px 5%;
}
.voice h2{
  text-align: center;
  padding: 0 0 40px 0;
}

@media screen and (max-width: 700px) {
  .voice{
    padding: 40px 5%;
  }
  .voice h2 img{
    width: 250px;
  }
}


.sliderArea{
  max-width: 1000px;
  margin: 0 auto;
}
.slider_thumb{
  margin: 0 0 40px 0;
}
.thumb{
  max-width: 90%;
  margin: 0 auto;
}

@media screen and (max-width: 700px) {
  .slider_thumb{
    margin: 0 0 15px 0;
  }
  .thumb{
    max-width: 82%;
    margin: 0 auto;
  }
}

/* サムネイルスライダーのスライド間の余白 */
.thumb .slick-slide {
  margin-right: 10px; /* サムネイル同士の間隔 */
  border: 5px solid #fff;
}

/* 選択中のサムネイルのスタイル */
.thumb .slick-slide.active {
  border: 5px solid #0d3692; /* 選択中のサムネイルに枠をつける */
}

/* カスタム矢印ボタン */
.custom-prev,
.custom-next {
  background-color: transparent;
  border: none;
  font-size: 24px;
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  color: #333;
}

/* 左矢印 */
.custom-prev,
.custom-next{
  background-color: #c2cde4;
  height: 100%;
  color: #fff;
  padding: 10px;
  border-radius: 10px;
  font-size: 18px;
  font-weight: bold;
}
.custom-prev {
  left: -50px; /* 位置調整 */
}
.custom-next {
  right: -50px; /* 位置調整 */
}

.custom-prev span,
.custom-next span{
  display: block;
transform: scale(1, 1.8);
}

@media screen and (max-width: 700px) {
  .custom-prev,
.custom-next{
  background-color: #c2cde4;
  height: 100%;
  color: #fff;
  padding: 5px;
  border-radius: 5px;
  font-size: 16px;
  font-weight: bold;
}
.custom-prev {
  left: -35px; /* 位置調整 */
}
.custom-next {
  right: -35px; /* 位置調整 */
}
}



/* Slickのデフォルトドットスタイルを調整 */
.slick-dots{
  top: 106%;
}
.slick-dots li button:before{
	font-size:15px!important;
  color: #0d3692!important;
}

@media screen and (max-width: 700px) {
  .slick-dots li button:before{
    font-size:10px!important;
  }
  .slick-dots li{
    width:10px!important;
  }
}

.voiceBox{
  border-radius: 30px;
  background-color: #fff;
}
.voiceBox figure img{
  border-radius: 30px 30px 0 0;
}
.voiceBoxTxt{
  padding: 50px 5% 30px 5%;
}
.voiceBoxTxt ul{
  max-width: 900px;
  margin: 0 auto;
}
.voiceBoxTxt li{
  background-color: #eeeeee;
  font-size: 20px;
  line-height: 1.4em;
  padding: 30px;
  margin: 0 0 20px 0;
  color: #0d3692;
  border-radius: 20px;
}

@media screen and (max-width: 700px) {
  .voiceBox{
    border-radius: 15px;
  }
  .voiceBox figure img{
    border-radius: 15px 15px 0 0;
  }
  .voiceBoxTxt{
    padding:15px 3% 0px 3%;
  }
  .voiceBoxTxt li{
    font-size: 14px;
    padding: 15px;
    margin: 0 0 15px 0;
    border-radius: 10px;
  }
}


/*----応募概要----*/
.feature{
  padding: 80px 5% 0 5%;
}
@media screen and (max-width: 700px) {
  .feature{
    padding: 40px 5% 0 5%;
  }
}

.featureA,
.featureB,
.featureC{
  max-width: 1000px;
  border-radius: 15px;
  margin: 0 auto 80px auto;
}
@media screen and (max-width: 700px) {
.featureA,
.featureB,
.featureC{
  margin: 0 auto 40px auto;
}

}
.featureA{
  background-color: #f8eeeb;
  color: #0d3692;
}
.featureB{
  background-color: #eaeee9;
  color: #177e34;
}
.featureC{
  background-color: #ecf0f6;
  color: #0d3692;
}

.featureA .featureHead,
.featureB .featureHead,
.featureC .featureHead{
  line-height: 0;
  height: 20px;
}
.featureA .featureHead img,
.featureB .featureHead img,
.featureC .featureHead img{
  width: 100%;
  height: 20px;
  border-radius: 15px 15px 0 0;
}

@media screen and (max-width: 700px) {
  .featureA .featureHead,
.featureB .featureHead,
.featureC .featureHead{
  height: 10px;
}
.featureA .featureHead img,
.featureB .featureHead img,
.featureC .featureHead img{
  height: 10px;
}
}

.featureTitleBox{
  display: flex;
  align-items: center;
  justify-content: center;
  padding:50px 3% 30px 3%;
}

.featureA h2,
.featureB h2,
.featureC h2{
  text-align: center;
  padding: 0;
}
.featureA h2 img,
.featureB h2 img,
.featureC h2 img{
  width: 220px;
}
.attent-watashimo .featureA .featureACopy,
.attent-watashimo .featureB .featureBCopy,
.attent-watashimo .featureC .featureCCopy{
  font-size: 20px;
  text-align: left;
  line-height: 1.3em;
  padding: 0 0 0 60px;
}

@media screen and (max-width: 700px) {
  .featureTitleBox{
 flex-direction: column;
    padding:30px 3%;
  }

.featureA h2,
.featureB h2,
.featureC h2{
  padding: 0 0 30px 0;
}
.featureA h2 img,
.featureB h2 img,
.featureC h2 img{
  width: 200px;
}
.attent-watashimo .featureA .featureACopy,
.attent-watashimo .featureB .featureBCopy,
.attent-watashimo .featureC .featureCCopy{
  font-size: 22px;
  text-align: center;
  padding: 0;
}
}

.featureA .featureAImg,
.featureB .featureBImg,
.featureC .featureCImg{
  text-align: center;
  padding: 0 0 20px 0;
}

.featureA .featureAImg img,
.featureB .featureBImg img,
.featureC .featureCImg img{
  height: 360px;
  width: auto;
}
@media screen and (max-width: 700px) {
.featureA .featureAImg img,
.featureB .featureBImg img,
.featureC .featureCImg img{
  height: auto;
  width: auto;
}
}

.featureATxt,
.featureBTxt,
.featureCTxt{
  display: flex;
  justify-content: center;
  text-align: center;
  max-width: 880px;
  margin: 0 auto;
}
.featureATxt li,
.featureBTxt li,
.featureCTxt li{
  width: 33%;
}
.featureATxt li div,
.featureBTxt li div,
.featureCTxt li div{
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  height: 70px;
  border-radius: 10px;
  margin: 0 10px;
}
.featureATxt li div p,
.featureBTxt li div p,
.featureCTxt li div p{
  font-size: 20px;
  line-height: 1.2em;
}
.featureATxt li div p span{
  font-size: 10px;
  line-height: 1em;
}
.featureATxt li p.featureATxtNote{
  font-size: 11px;
  color: #0d3692;
  letter-spacing: 0;
}

@media screen and (max-width: 700px) {
  .featureATxt,
.featureBTxt,
.featureCTxt{
  flex-direction: column;
}
.featureATxt li,
.featureBTxt li,
.featureCTxt li{
  width: 100%;
  margin-bottom: 10px;
}
.featureATxt li div,
.featureBTxt li div,
.featureCTxt li div{
  height: 50px;
  border-radius: 10px;
  margin: 0 10px;
}
.featureATxt li div p,
.featureBTxt li div p,
.featureCTxt li div p{
  font-size: 20px;
}
}

.featureAItem,
.featureBItem,
.featureCItem{
  display: flex;
  justify-content: center;
  max-width: 880px;
  margin: 0 auto;
  padding: 60px 0;
}
.featureCItem2{
  display: flex;
  justify-content: center;
  max-width: 880px;
  margin: 0 auto;
  padding: 0 0 60px 0;
}

.featureAItem li,
.featureBItem li,
.featureCItem li{
  text-align: center;
  width: 50%;
}
.featureCItem2 li{
  text-align: center;
  width: 100%;
}



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

  .featureAItem,
.featureBItem,
.featureCItem{
  flex-direction: column;
  padding: 20px 0;
}
.featureCItem2{
  padding: 0 0 30px 0;
}

.featureAItem li,
.featureBItem li,
.featureCItem li{
  text-align: center;
  width: 100%;
  padding: 0 0 30px 0;
}
}

.featureAItem li h3,
.featureBItem li h3,
.featureCItem li h3{
  font-size: 24px;
}
.featureCItem2 li h4{
  font-size: 32px;
  line-height: 1.4em;
  color: #177e34;
}
.featureCItem2 li h4 span{
  font-size: 60px;
}
.featureAItem li h3.featureAItemP,
.featureCItem li h3.featureCItemP{
  color: #e72b8e;
}

@media screen and (max-width: 700px) {
.featureAItem li h3,
.featureBItem li h3,
.featureCItem li h3{
  font-size: 20px;
}
.featureCItem2 li h4{
  font-size: 20px;
}
.featureCItem2 li h4 span{
  font-size: 34px;
}
}

.featureAItem li figure,
.featureBItem li figure,
.featureCItem li figure,
.featureCItem2 li figure{
  position: relative;
  padding: 20px 0;
}
.featureAItem li p img,
.featureBItem li p img,
.featureCItem li p img,
.featureCItem2 li p img{
  border-radius: 30px;
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
}
.featureAItemIcon{
  position: absolute;
  top: 20px;
  right: -30px;
}

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

  .featureAItem li figure img,
.featureBItem li figure img,
.featureCItem li figure img{
  width: 100px;
}
.featureCItem2 li figure img{
  width: 230px;
}

  .featureAItem li p img,
.featureBItem li p img,
.featureCItem li p img,
.featureCItem2 li p img{
  width: 180px;
}

.featureAItemIcon{
  top: 20px;
  right: 10px;
  width: 60px;
  height: 60px;
}
}


.featureAVoice,
.featureBVoice,
.featureCVoice{
  padding: 0 0 60px 0;
  text-align: center;
}
.featureAVoice img,
.featureBVoice img,
.featureCVoice img{
  border-radius: 50px;
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
}

@media screen and (max-width: 700px) {
.featureAVoice,
.featureBVoice,
.featureCVoice{
  padding: 0 0 30px 0;
}
.featureAVoice img,
.featureBVoice img,
.featureCVoice img{
  width: 250px;
  border-radius: 50px;
}
}


@keyframes popLoop {
  0% { transform: scale(1); }
  20% { transform: scale(0.8); }
  40% { transform: scale(1.2); }
  60% { transform: scale(0.9); }
  80% { transform: scale(1.1); }
  100% { transform: scale(1); } /* ぽよん動作を完了 */
}

.featureAItemIcon {
  opacity: 1; /* 最初から表示 */
  transform: scale(1);
}

/* `.act` が追加されたらアニメーションを実行 */
.featureAItemIcon.on{
  animation: popLoop 1.5s ease-out 1 1s;
}

/*----応募概要----*/


.oubokiyaku{
  background-color: #ecf6ff;
  padding: 80px 5%;
  color: #0d3692;
}
.oubokiyaku h2{
  font-size: 40px;
  text-align: center;
  line-height: 1em;
  padding: 0 0 20px 0;
}
.oubokiyaku p.oubokiyakuTxt{
  font-size: 24px;
  text-align: center;
  line-height: 1em;
  padding: 0 0 40px 0;
}

.oubokiyakuBox{
  background-color: #fff;
  max-width: 880px;
  margin: 0 auto;
  padding: 60px;
  border-radius: 20px;
}

.oubokiyakuBox h3{
  background-color: #0d3692;
  color: #fff;
  font-size: 26px;
  text-align: center;
  padding: 10px 0;
  margin: 0 0 30px 0;
}

@media screen and (max-width: 700px) {
  .oubokiyaku{
    padding: 40px 5%;
  }
  .oubokiyaku h2{
    font-size: 26px;
    padding: 0 0 10px 0;
  }
  .oubokiyaku p.oubokiyakuTxt{
    font-size: 18px;
    padding: 0 0 20px 0;
  }
  .oubokiyakuBox{
    margin: 0 auto;
    padding: 20px;
    border-radius: 10px;
  }
  .oubokiyakuBox h3{
    font-size: 20px;
    padding: 5px 0;
    margin: 0 0 15px 0;
  }
}

.attent-watashimo .oubokiyakuGaiyouTxt{
  font-size: 18px;
  line-height: 1.6em;
  padding: 0 0 30px 0;
}
.oubokiyakuGaiyouList{
  padding: 0 0 30px 0;
}
.oubokiyakuGaiyouList li{
  font-size: 18px;
  line-height: 1.6em;
  text-indent: -1em;
  padding-left: 1em;
}
.oubokiyakuGaiyouTxt span,
.oubokiyakuGaiyouList li span{
  color: #e72b8e;
}

.oubokiyakuGaiyouPh{
  padding: 0 0 45px 0;
}

.attent-watashimo .oubokiyakuDate{
  font-size: 26px;
  padding: 0 0 50px 0;
  text-align: center;
}

@media screen and (max-width: 700px) {
  .attent-watashimo .oubokiyakuGaiyouTxt{
    font-size: 14px;
    padding: 0 0 15px 0;
  }
  .oubokiyakuGaiyouList{
    padding: 0 0 15px 0;
  }
  .oubokiyakuGaiyouList li{
    font-size: 14px;
  }
  .oubokiyakuGaiyouPh{
    padding: 0 0 25px 0;
  }
  .attent-watashimo .oubokiyakuDate{
    font-size: 18px;
    padding: 0 0 25px 0;
    text-align: center;
  }
}

.oubokiyakuHowto{
  display: flex;
  justify-content: space-between;
  padding: 50px 0 80px 0;
}

.oubokiyakuHowtoL,
.oubokiyakuHowtoR{
  position: relative;
  background-color: #eeeeee;
  border-radius: 10px;
  text-align: center;
  width: calc(49% - 40px);
  padding: 20px;
}

.oubokiyakuHowtoB{
  position: relative;
  background-color: #eeeeee;
  border-radius: 10px;
  text-align: center;
  padding: 20px;
}

.oubokiyakuHowtoL figure,
.oubokiyakuHowtoR figure,
.oubokiyakuHowtoB figure{
  position: absolute;
  top: -45px;
  left: 0;
  width: 100%;
}

@media screen and (max-width: 700px) {
  .oubokiyakuHowto{
    flex-direction: column;
    padding: 25px 0 40px 0;
  }
.oubokiyakuHowtoL,
.oubokiyakuHowtoR{
  width: calc(100% - 20px);
  padding: 10px;
  margin: 30px 0;
}
.oubokiyakuHowtoB{
  padding: 10px;
}

.oubokiyakuHowtoL figure,
.oubokiyakuHowtoR figure,
.oubokiyakuHowtoB figure{
  top: -30px;
}
.oubokiyakuHowtoL figure img,
.oubokiyakuHowtoR figure img,
.oubokiyakuHowtoB figure img{
  width: 60px;
}
}

.attent-watashimo .oubokiyakuHowtoTxt{
  padding: 40px 0 0 0;
  font-size: 18px;
  line-height: 1.6em;
}
.attent-watashimo .oubokiyakuHowtoDate{
  font-size: 20px;
  line-height: 1.6em;
  padding: 20px 0;
}
.attent-watashimo .oubokiyakuHowtoCopy{
  font-size: 20px;
  line-height: 1.6em;
  padding: 0 0 10px 0;
}
.attent-watashimo .oubokiyakuHowtoNote{
  font-size: 14px;
  line-height: 1.6em;
  padding: 20px 0 0 0;
  font-weight: 400;
}

.oubokiyakuHowtoL h4,
.oubokiyakuHowtoR h4,
.oubokiyakuHowtoB h4{
  font-size: 30px;
  border-bottom: solid 1px #0d3692;
  padding: 10px 0;
  line-height: 1em;
}

.oubokiyakuHowtoBt a img{
  border-radius: 50px;
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
}

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

  .attent-watashimo .oubokiyakuHowtoTxt{
    padding: 20px 0 0 0;
    font-size: 14px;
  }
  .attent-watashimo .oubokiyakuHowtoDate{
    font-size: 16px;
    padding: 10px 0;
  }
  .attent-watashimo .oubokiyakuHowtoCopy{
    font-size: 16px;
    padding: 0 0 5px 0;
  }
  .attent-watashimo .oubokiyakuHowtoNote{
    font-size: 12px;
    padding: 10px 0 0 0;
  }
  
  .oubokiyakuHowtoL h4,
  .oubokiyakuHowtoR h4,
  .oubokiyakuHowtoB h4{
    font-size: 20px;
    padding: 5px 0;
  }
  
  .oubokiyakuHowtoBt a img{
    width: 200px;
  }
}


.oubokiyakuHowtoTel{
  background-color: #fff;
}
.oubokiyakuHowtoTel h5{
  background-color: #0d3692;
  color: #fff;
  font-size: 18px;
  line-height: 1em;
  padding: 10px 0;
}
.attent-watashimo .oubokiyakuHowtoTelNum{
  font-size: 50px;
  line-height: 1em;
  font-family: "Roboto", sans-serif;
  padding: 20px 0 5px 0;
}
.attent-watashimo .oubokiyakuHowtoTelNum a{
  color: #0d3692;
}
@media (min-width: 700px) {
  .oubokiyakuHowtoTelNum a {
    pointer-events: none; /* PCではクリック不可に */
    text-decoration: none; /* 下線を消す */
    color: inherit; /* テキストと同じ色に */
  }
}
.attent-watashimo .oubokiyakuHowtoTelNote{
  font-size: 14px;
  padding: 0 0 15px 0;
}

@media screen and (max-width: 700px) {
  .oubokiyakuHowtoTel h5{
    font-size: 13px;
    padding: 5px 0;
  }
  .attent-watashimo .oubokiyakuHowtoTelNum{
    font-size: 30px;
    padding: 10px 0 3px 0;
  }
  .attent-watashimo .oubokiyakuHowtoTelNote{
    font-size: 12px;
    padding: 0 0 10px 0;
  }
}


.oubokiyakuHowtoBBox{
  display: flex;
  justify-content: space-between;
  padding: 40px 20px 20px 20px;
}

.oubokiyakuHowtoBBoxL,
.oubokiyakuHowtoBBoxR{
  width: 49%;
}

.attent-watashimo .oubokiyakuHowtoBBoxL p{
  font-size: 20px;
  line-height: 1.6em;
  text-align: left;
}

.oubokiyakuHowtoBBoxR{
  background-color: #fff;
}
.oubokiyakuHowtoBBoxR h5{
  background-color: #0d3692;
  color: #fff;
  font-size: 18px;
  line-height: 1em;
  padding: 10px 0;
}

.attent-watashimo .oubokiyakuHowtoBBoxR p{
  font-size: 20px;
  line-height: 1.6em;
  padding: 15px 20px 0 20px;
  text-align: left;
}
.attent-watashimo .oubokiyakuHowtoBBoxR ul{
  padding: 15px;
}
.attent-watashimo .oubokiyakuHowtoBBoxR ul li{
  text-indent: -1em;
  padding: 0 0 0 1em;
  font-size: 14px;
  line-height: 1.4em;
  text-align: left;
}

@media screen and (max-width: 700px) {
  .oubokiyakuHowtoBBox{
    flex-direction: column;
    padding: 20px 10px 10px 10px;
  }
  
  .oubokiyakuHowtoBBoxL,
  .oubokiyakuHowtoBBoxR{
    width: 100%;
  }
  .oubokiyakuHowtoBBoxL{
    padding-bottom: 15px;
  }
  .attent-watashimo .oubokiyakuHowtoBBoxL p{
    font-size: 15px;
  }
  .oubokiyakuHowtoBBoxR h5{
    font-size: 15px;
    padding: 5px 0;
  }
  
  .attent-watashimo .oubokiyakuHowtoBBoxR p{
    font-size: 15px;
    padding: 10px 10px 0 10px;
  }
  .attent-watashimo .oubokiyakuHowtoBBoxR ul{
    padding: 10px;
  }
  .attent-watashimo .oubokiyakuHowtoBBoxR ul li{
    font-size: 11px;
  }
}


.oubokiyakuPrivacy{
  border: solid 2px #0d3692;
  border-radius: 10px;
  margin: 40px 0 0 0;
}
.oubokiyakuPrivacy h4{
  background-color: #0d3692;
  color: #fff;
  font-size: 18px;
  line-height: 1em;
  padding: 10px 0;
  text-align: center;
}
.attent-watashimo .oubokiyakuPrivacy p{
  font-size: 14px;
  line-height: 1.6em;
  padding: 20px 25px;
  font-weight: 400;
}

.attent-watashimo .oubokiyakuPrivacy ul{
  padding: 20px 25px;
}
.attent-watashimo .oubokiyakuPrivacy li{
  font-size: 14px;
  line-height: 1.6em;
  text-indent: -1em;
  padding: 0 0 0 1em;
  font-weight: 400;
}

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

  .oubokiyakuPrivacy{
    border: solid 1px #0d3692;
    border-radius: 5px;
    margin: 20px 0 0 0;
  }
  .oubokiyakuPrivacy h4{
    font-size: 13px;
    line-height: 1em;
    padding: 5px 0;
  }
  .attent-watashimo .oubokiyakuPrivacy p{
    font-size: 12px;
    padding: 10px 15px;
  }
  
  .attent-watashimo .oubokiyakuPrivacy ul{
    padding: 10px 15px;
  }
  .attent-watashimo .oubokiyakuPrivacy li{
    font-size: 12px;
  }

}



.buyinfo{
  padding: 80px 0;
  text-align: center;
  color: #0d3692;
}
.buyinfo h2{
  font-size: 40px;
  line-height: 1em;
  padding: 0 0 20px 0;
}
.attent-watashimo .buyinfo p{
  font-size: 24px;
  line-height: 1.6em;
  padding: 0 0 60px 0;
}
.buyinfo ul{
  display: flex;
  justify-content: center;
}
.buyinfo ul li{
  margin: 0 10px;
}
.buyinfo ul li img{
  border-radius: 50px;
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
}


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

  .buyinfo{
    padding: 40px 0;
  }
  .buyinfo h2{
    font-size: 30px;
    padding: 0 0 10px 0;
  }
  .attent-watashimo .buyinfo p{
    font-size: 18px;
    padding: 0 0 30px 0;
  }
  .buyinfo ul{
    flex-direction: column;
  }
  .buyinfo ul li{
    margin: 10px 0;
  }
  .buyinfo ul li img{
    width: 300px;
  }

}


.modalon{
  cursor: pointer;
}



.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(160, 160, 160, 0.9);
  transform: scale(1);
  pointer-events: auto;
  z-index: 9999999;
  opacity: 0;
  transform: scale(1.1);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none; /* 非表示時にクリックを無効化 */
}
.modal.show {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto; /* 表示時にクリック可能にする */
}

.modal__links {
  display: flex;
  flex-wrap: wrap; /* 折り返し */
  justify-content: center; /* 水平方向中央 */
  align-items: center; /* 垂直方向中央 */
  gap: 2rem; /* 要素間の間隔 */
  max-width: 58rem; /* 幅を制限（2列に収まるように） */
}

.modal__link {
  background-color: #fff;
  border-radius: 1rem;
  padding: 3.0rem;
  text-align: center;
  width: calc(50% - 9.6rem); /* 2列に並べる */
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal__link > img {
  height: 9rem;
  max-width: 100%;
}

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

  .modal__link > img {
    height: auto;
    max-width: 100%;
  }

}


.floating-btn {
  position: fixed;
  bottom: 0px;
  right: 0px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  z-index: 100;
}
.floating-btn .inner{
  position: relative;
}
.floating-btn .inner .close{
  position: absolute;
  right: 5px;
  cursor: pointer;
  top: 0;
}

/* 表示時のスタイル */
.floating-btn.show {
  opacity: 1;
  transform: translateY(0);
}

@media screen and (max-width: 700px) {
  .floating-btn img{
    width: 100%;
  }
  .floating-btn .inner .close{
    width: 30px;
    right: 0px;
  }
}



.fadeUp{
  opacity: 0;
}
.fadeUp.act {
  animation: fadeUp 1s ease-out 0.3s forwards;
}
@keyframes fadeUp {
  0% {
    transform: translateY(60px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}