/*　画面幅が768px未満の時、「pc」classは非表示、「sp」classは表示する　*/
@media only screen and (max-width:768px){
    .left-logo { display: none; }
    .right-logo01,.right-logo02,.right-logo03 { display: none; }
    .sp { display: block; }
}


@media (width < 768px) {
/* 画面サイズが768px以下の場合の設定 */
body {
width: 100%;
margin: 0;
font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
}
.main {
position: relative;
overflow: hidden;
margin: 0 auto;
background-color: #e5f4fc;
background-image: url(../../common/images/back-ground.png),url(../../common/images/back-ground.png);
background-size: 100vw, 100vw;
background-repeat: no-repeat, no-repeat;
background-position: center top, center 15%;
}

.logo img {
padding-top: 15px;
width: 80%;
margin: auto;
display: block;
}
.mv img {
padding-top: 15px;
width: 100%;
margin: auto;
display: block;
}

.comment-1 {
  position: absolute;
  width: 50%;
  top: 33vw;
  right: 15vw;
  animation: poyo1 6s linear infinite;
  transform-origin: 30% 30%;
}

.comment-2 {
  position: absolute;
  width: 35%;
  top: 55vw;
  left: 5vw;
  animation: poyo2 6s linear infinite;
  transform-origin: 30% 30%;
}

.comment-3 {
  position: absolute;
  width: 35%;
  top: 72vw;
  right: 7vw;
  animation: poyo3 6s linear infinite;
  transform-origin: 30% 30%;
}

/* アニメーションの動きは同じだが、タイミングだけずらす */

@keyframes poyo1 {
  0%, 5%   { transform: scale(1); }
  10%      { transform: scale(1.1); }
  15%      { transform: scale(1); }
  20%      { transform: scale(1.1); }
  25%, 100%{ transform: scale(1); }
}

@keyframes poyo2 {
  0%, 35%  { transform: scale(1); } /* ←ここが遅らせポイント！ */
  40%      { transform: scale(1.1); }
  45%      { transform: scale(1); }
  50%      { transform: scale(1.1); }
  55%, 100%{ transform: scale(1); }
}

@keyframes poyo3 {
  0%, 65%  { transform: scale(1); }
  70%      { transform: scale(1.1); }
  75%      { transform: scale(1); }
  80%      { transform: scale(1.1); }
  85%, 100%{ transform: scale(1); }
}


/* 二重線 */
.block {
line-height: 1.2em;
margin: 0 auto; /* 外側の余白（上下と中央配置） */
padding: 1.2em; /* 内側余白 */
border: double 13px #000001; /* 線の種類・太さ・色 */
background-color: #fff;
font-weight: bolder;
width: 70%;
}
.block-myrule {
line-height: 1.2em;
margin: 0 auto 0.5em; /* 外側の余白（上下と中央配置） */
padding: 1.2em; /* 内側余白 */
border: double 13px #000001; /* 線の種類・太さ・色 */
background-color: #fff;
font-weight: bolder;
width: 70%;
}
/* pタグの余白 */
.block p {
margin: 15px 0;
font-size: 20px;
line-height: 1.2em;
}
ul.block01,
ul.block02,
ul.kome {
  list-style: none;
  padding: 0;
  margin: 0;
}

.block span {
text-align: center;
}

ul.block02 li,
ul.kome li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 0.5em;
  font-size:  15px;
  line-height: 1.2em;
}

.marker {
  flex: 0 0 1.2em; /* 1文字分固定幅 */
  display: inline-block;
  text-align: right;
  padding-right: 0.3em;
}

.text {
  flex: 1;
}



.myrule-drive {
margin-top:20px;
margin-bottom: 20px;
text-align: center;
height: 60px;
border-color: #1274bd;
background-color: #1274bd;
color:#fff;
}
.myrule-drive h2 {
font-size: 24px;
padding-top: 15px;
}

.myrule h3 {
padding-top: 50px;
font-size: 24px;
color: #1274bd;
background-color: #e5f4fc;
text-align: center;
}

.movie-1 {
  padding-top: 20xp;
}

.movie-1,.movie-2 {
  text-align: center;
  margin: 20px, 0;
}

.movie-1, .movie-2 {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 の比率 (360 ÷ 640 = 0.5625) */
  height: 0;
  overflow: hidden;
  max-width: 100%;       /* 親要素の幅に収める */
  margin: 0 auto 20px;     /* 上下余白＋中央寄せ */
}

.movie-1 iframe,
.movie-2 iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.senior {
margin-top: 30px;
text-align: center;
height: 30px;
background-color: #fff;
color:#1274bd;
}
.senior h2 {
font-size: 24px;
padding-top: 15px;
}
.senior-btn img {
margin-top: 45px;
max-width: 100%;
height: auto;
display: inline-block;
width: 300px;
box-shadow: 0px 4px #535353;
}
.senior-btn img:active {
-webkit-transform: translateY(5px);
transform: translateY(5px);
border-bottom: none;
box-shadow: none;
}
.senior-btn img:hover {
opacity: 0.7;
}
.senior-btn {
background-color: #ffffff;
text-align: center;
padding: 20px 0;
}

.family-top img {
margin-top: 30px;
width: 100%;
}
.family h2 {
line-height: 1.2em;
font-size: 24px;
color: #1274bd;
background-color: #fff;
}
.family {
line-height: 1.2em;
text-align: center;
border:white;
background-color: #fff;
margin-top: -5px;
margin-bottom: -5px;
padding-top: 20px;
padding-bottom: 20px;
font-weight: bolder;
}
.family-bottom img {
width: 100%;
}
.sheet img {
padding-top: 25px;
width: 300px;
}
.sheet {
text-align: center;
}
.btn img {
padding-top: 25px;
width: 300px;
box-shadow: 0px 4px #535353;
}
.btn img:active {
-webkit-transform: translateY(5px);
transform: translateY(5px);
border-bottom: none;
box-shadow: none;
}
.btn img:hover {
opacity: 0.7;
}
.btn {
text-align: center;
}

.last {
background-color: #e5f4fc;
background-image: url(../../common/images/footer-back-top-noboy.png);
background-size: 100%;
background-repeat: no-repeat;
background-position: center bottom;
}
.last {
width: 100%;
height: auto;
position: relative;
}
.last img {
width:100%;
height: auto;
padding-top: 15px;
  animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { 
    transform: translateY(0);
  }
  40% { 
    transform: translateY(-25px);
  }
  60% {
    transform: translateY(-20px);
  }
}
.last h3 {
position: absolute;
        top:43%;
        left:50%;
        transform: translate(-50%,-50%);
        padding:0;
        margin:0;
        font-size: 17px;
        color: #35a9e4;
        text-align: center;
        line-height: 1.2em;
}

.footer {
text-align: center;
font-size: 15px;
background-color: #fff;
padding: 1px 0;
}
.footer-bottom img {
width: 100%;
}
}

.footer img{
	width: 200px;
	margin-bottom: 10px;
}
.footer p {
	padding-bottom: 5px;
}
.privacy main {
padding: 0 40px;
box-sizing: border-box;
}
.privacy {
background-color: #fff;

}
.privacy h2 {
font-size: 24px;
padding-top: 50px;
margin: 0 20px;
}
.privacy .text1 {
display: block;
font-size:15px;
line-height: 2em;
padding: 30px;
margin: 0 auto;
}
.privacy .text2{
display: block;
font-size:15px;
line-height: 2em;
padding: 30px;
margin: 0 auto;
}






@media (768px <= width) {
/* 画面サイズが768px以上の場合の設定 */
html {
scroll-behavior: smooth;
}

body {
font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
background-color:#b7e4fb;
}
/* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
} */
.wrap{
margin: 0 auto;
display: flex;
max-width: 1000px;
}

.left-logo {
margin: 5vw;
width: 15vw;
order: 1;
height: 1000px;
/* background-color: #c5c3c3; */
}

.left-logo {
  position: fixed;
  top: 25%; /*画面上から00%*/
  left: -2vw;/*画面左から00%*/
}
.right-logo {
  position: fixed;
  top: 21%; /*画面上から00%*/
  right: -3vw;/*画面右から00%*/
}

.right-logo {
margin: 5vw;
width: 20vw;
order: 2;
height: 1000px;
/* background-color: rgb(214, 173, 173); */
}
.right-logo-all {
list-style: none;
}
.right-logo01,.right-logo02,.right-logo03{
  padding: 5px 0;
}

.right-logo01 img:hover {
opacity: 0.7;
}
.right-logo02 img:hover {
opacity: 0.7;
}
.right-logo03 img:hover {
opacity: 0.7;
}

.main {
margin: 0 auto;
background-color: #e5f4fc;
width: 55vw;
background-image: url(../../common/images/back-ground.png),url(../../common/images/back-ground.png);
background-size: 100%, 100%;
background-repeat: no-repeat, no-repeat;
background-position: center top, center 14%;
object-fit: cover;
order: 2;
position: relative;
}

.logo img {
padding-top: 15px;
width: 80%;
margin: auto;
display: block;
}
.mv {
  position:relative;
  width: 100%;
}
.mv img {
padding-top: 15px;
width: 100%;
margin: auto;
display: block;
}


.comment-1 {
  position: absolute;
  width: 45%;
  top: 0%;
  right: 20%;
  animation: poyo1 6s linear infinite;
  transform-origin: 30% 30%;
}

.comment-2 {
  position: absolute;
  width: 33%;
  top: 25%;
  left: 5%;
  animation: poyo2 6s linear infinite;
  transform-origin: 30% 30%;
}

.comment-3 {
  position: absolute;
  width: 33%;
  top: 44%;
  right: 10%;
  animation: poyo3 6s linear infinite;
  transform-origin: 30% 30%;
}

/* アニメーションの動きは同じだが、タイミングだけずらす */

@keyframes poyo1 {
  0%, 5%   { transform: scale(1); }
  10%      { transform: scale(1.1); }
  15%      { transform: scale(1); }
  20%      { transform: scale(1.1); }
  25%, 100%{ transform: scale(1); }
}

@keyframes poyo2 {
  0%, 35%  { transform: scale(1); } /* ←ここが遅らせポイント！ */
  40%      { transform: scale(1.1); }
  45%      { transform: scale(1); }
  50%      { transform: scale(1.1); }
  55%, 100%{ transform: scale(1); }
}

@keyframes poyo3 {
  0%, 65%  { transform: scale(1); }
  70%      { transform: scale(1.1); }
  75%      { transform: scale(1); }
  80%      { transform: scale(1.1); }
  85%, 100%{ transform: scale(1); }
}

/* 二重線 */
.block {
line-height: 1.2em;
margin: 0 auto 0.5em; /* 外側の余白（上下と中央配置） */
padding: 0.5em; /* 内側余白 */
border: double 13px #000001; /* 線の種類・太さ・色 */
background-color: #fff;
font-weight: bolder;
width: 70%;
}
.block-myrule {
line-height: 1.2em;
margin: 0 auto 0.5em; /* 外側の余白（上下と中央配置） */
padding: 0.5em; /* 内側余白 */
border: double 13px #000001; /* 線の種類・太さ・色 */
background-color: #fff;
font-weight: bolder;
width: 70%;
}
.block01 {
font-size: 1.5vw;
line-height: 1.2em;
list-style-position: inside;
}
ul.block01 {
margin-left: -15px;
}
/* pタグの余白 */
.block p {
margin: 15px 0;
font-size: 2vw;
line-height: 1.2em;
}
.block li {
  font-size:  1.5vw;
  line-height: 1.2em;
}
.block span {
text-align: center;
}

ul.block01,
ul.block02,
ul.kome {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul.block02 li,
ul.kome li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 0.5em;
  font-size:  1.5vw;
  line-height: 1.2em;
}

.marker {
  flex: 0 0 1.2em; /* 1文字分固定幅 */
  display: inline-block;
  text-align: right;
  padding-right: 0.3em;
}

.text {
  flex: 1;
}


.myrule-drive {
  margin-top: 20px;
  margin-bottom: 40px;
  display: flex;
  justify-content: center;  /* 横中央 */
  align-items: center;      /* 縦中央 */
  height: 7vw;              /* ← 高さを使いたいなら */
  background-color: #1274bd;
  color: #fff;
}
.myrule-drive h2 {
  margin: 0; /* 中央揃えのずれ防止 */
font-size: 2vw
}

.myrule h3 {
padding-top: 50px;
padding-bottom: 50px;
font-size: 2vw;
color: #1274bd;
background-color: #e5f4fc;
text-align: center;
}

.movie-1,.movie-2 {
  text-align: center;
  margin: 20px, 0;
}

.movie-1, .movie-2 {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 の比率 (360 ÷ 640 = 0.5625) */
  height: 0;
  overflow: hidden;
  max-width: 100%;       /* 親要素の幅に収める */
  margin: 0 auto 40px;     /* 上下余白＋中央寄せ */
}

.movie-1 iframe,
.movie-2 iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.senior {
margin-top: 30px;
text-align: center;
padding: 1em 0;
background-color: #fff;
color:#1274bd;
}
.senior h2 {
font-size: 2vw;
padding-top: 5px;
}
.senior-btn img {
max-width: 100%;
height: auto;
display: inline-block;
width: 300px;
box-shadow: 0px 4px #535353;
}
.senior-btn img:active {
-webkit-transform: translateY(5px);
transform: translateY(5px);
border-bottom: none;
box-shadow: none;
}
.senior-btn img:hover {
opacity: 0.7;
}
.senior-btn {
background-color: #ffffff;
text-align: center;
padding-bottom: 30px;
}

.family-top img {
margin-top: 30px;
width: 100%;
}
.family h2 {
line-height: 1.2em;
font-size: 2vw;
color: #1274bd;
background-color: #fff;
}
.family p {
  font-size:1.5vw;
  line-height: 1.2em;
}
.family {
line-height: 1.2em;
text-align: center;
border:white;
background-color: #fff;
margin-top: -5px;
margin-bottom: -5px;
padding-top: 20px;
padding-bottom: 20px;
font-weight: bolder;
}
.family-bottom img {
width: 100%;
}
.sheet img {
padding-top: 25px;
width: 400px;
}
.sheet {
text-align: center;
}
.btn img {
padding-top: 25px;
width: 300px;
box-shadow: 0px 4px #535353;
}
.btn img:active {
-webkit-transform: translateY(5px);
transform: translateY(5px);
border-bottom: none;
box-shadow: none;
}
.btn img:hover {
opacity: 0.7;
}
.btn {
text-align: center;
}

.last {
background-color: #e5f4fc;
background-image: url(../../common/images/footer-back-top-noboy.png);
background-size: 100%;
background-repeat: no-repeat;
background-position: center bottom;
}
.last {
width: 100%;
height: auto;
position: relative;
}
.last img {
width:100%;
height: auto;
padding-top: 15px;
  animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { 
    transform: translateY(0);
  }
  40% { 
    transform: translateY(-25px);
  }
  60% {
    transform: translateY(-20px);
  }
}
.last h3 {
position: absolute;
        top:43%;
        left:50%;
        transform: translate(-50%,-50%);
        padding:0;
        margin:0;
        font-size: 2vw;
        color: #35a9e4;
        text-align: center;
        line-height: 1.2em;
}
.footer {
text-align: center;
font-size: 1.2vw;
background-color: #fff;
width: 100%;

margin: 0 auto;
padding: 3px 0;
}
.footer-bottom img {
width: 100%;
}
.footer-bottom {
text-align: center;
}



.privacy main {
padding: 0 40px;
box-sizing: border-box;
}
.privacy {
background-color: #fff;

}
.privacy h2 {
font-size: 2vw;
padding-top: 50px;
margin: 0 20px;
}
.privacy .text1 {
display: block;
font-size:1.5vw;
line-height: 2em;
padding: 30px;
margin: 0 auto;
}
.privacy .text2{
display: block;
font-size:1.5vw;
line-height: 2em;
padding: 30px;
margin: 0 auto;
}