@charset "utf-8";
/* CSS Document */


  .video-container {
    position: relative;
    /* PC: 最大960px、それ以下は横幅80% */
    width: 98%;
    max-width: 990px;
    /* 16:9のアスペクト比を維持 */
    aspect-ratio: 16 / 9;
    margin: 5% auto 5%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
  }

  .video-thumb,
  video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-shadow: 0 4px 24px rgba(0,0,0,0.5);
    transition: opacity 0.6s cubic-bezier(.4,0,.2,1);
    cursor: pointer;
    z-index: 2;
  }

  video {
    opacity: 0;
    z-index: 1;
    pointer-events: none;
  }

  .show-video video {
    opacity: 1;
    pointer-events: auto;
    z-index: 3;
  }

  .fadeout {
    opacity: 0;
    pointer-events: none;
  }

  /* スマホ用の余白調整のみ（幅はPC共通の80%が適用されます） */
  @media (max-width: 750px) {
    .video-container {
      margin: 20px auto 20px;
		    width: 98%;
    /* 16:9のアスペクト比を維持 */
    aspect-ratio: 16 / 9;
    }
  }

  
/*スマホ*/
@media screen and (max-width:750px){
	
.font3{padding:20px 0% 10px 0%;margin: 0px auto 0px auto;font-size:100%; color:#000;line-height: 160%;font-weight: 400;color:#002b62}
.mapbtnmodel {
  margin: 0px auto 50px auto;
  display: inline-block;
  width: 400px;
  text-align: center;
  text-decoration: none;
  line-height: 60px;
  outline: none;
  -webkit-transition: all .3s;
  transition: all .3s;
  font-size: 150%;
  background: #002b62;
  font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  color: #fff;
  border-radius: 5px; /* ボタンらしい見た目のため */
}

.mapbtnmodel:hover {
  color: #fff;
  background-color: #ccc;
}
	
.genteititle{background-color:#1b3663;text-align:center;padding:20px 0% 20px 0%;color:#fff;margin: 0px auto 0px auto ;height: auto;}
.topobivideo{max-width:880px;width:90%;text-align:center;padding:0px 0% 0px 0%;color:#000;margin: 0px auto 0px auto ;height: auto;}
.video3 {width:100%;margin:0% auto 30px auto; padding: 0% 0px 0px 0px;text-align:center;}
.topfontvideo{font-size:120%;color:#000;lfont-weight:700;text-align:center;;line-height: 140%;padding: 30px 0px 0px 0px;}
	
.model2 {width: 100%;margin: 20px auto 0px auto; padding: 0px 0px 0px 0px;text-align:center;}
	
.maintop{width:100%;text-align: center;padding: 40px 0px 0px 0px; margin:0px 0px 0px 0px;}

.maintopbg {width: 100%;margin: 60px auto 0px auto; padding: 0px 0px 0px 0px;background-image: url("../modelroom/img/model/topbg.jpg");
background-repeat: no-repeat;text-align:center;padding-top:20.6%;background-size:100%;position:relative}

.title{margin:0px auto 0px auto; padding: 0px 0px 0px 0px;font-size:150%;color:#fff;letter-spacing:2px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;font-weight: 400;font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝","ＭＳ 明朝", serif;}
	
.modelcap{width: 90%;margin:0px auto 30px auto; padding: 20px 0px 0px 0px;font-size:70%;color:#000;font-weight: 400;text-align:left}
	

	
.font2{width:90%;text-align:center;color:#00a95f;font-weight:normal;line-height:1.5;font-size:1.3rem;letter-spacing:.2rem;margin:0 auto 30px}
.font22{width:90%;text-align:center;color:#000;font-weight:normal;line-height:1.5;font-size:1.2rem;letter-spacing:.2rem;margin:35px auto 20px}
.font4{max-width:1200px;width:80%;text-align:center;font-size:1.3rem;margin:0 auto 40px;color: #FF0000}
.c-plan-subheading{text-align:center;font-weight:normal;letter-spacing:.3rem;margin:0 0 30px;font-size:1.2rem}
.c-lead{width:90%;text-align:left;font-size:0.95rem;margin:0 auto 40px}
.sp { display: block !important; }
.pc { display: none !important; }
}


@media print, screen and (min-width:751px){
	

.mapbtnmodel {
  margin: 0px auto 50px auto;
  display: inline-block;
  width: 400px;
  text-align: center;
  text-decoration: none;
  line-height: 60px;
  outline: none;
  -webkit-transition: all .3s;
  transition: all .3s;
  font-size: 150%;
  background: #002b62;
  font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  color: #fff;
  border-radius: 5px; /* ボタンらしい見た目のため */
}

.mapbtnmodel:hover {
  color: #fff;
  background-color: #ccc;
}
	
.item-top {background-color: #002b62;}
.item-model {background-color: #004385;}
.model{margin: 0px auto 0px auto; width:1170px;height: auto;}
.model ul{list-style: none; margin: 20px auto 0px auto; padding: 20px 0px 0px 0px; }
.model li{float:left; margin: 20px 15px 0px auto; padding: 0px 0px 0px 0px; }
.model2 {width: 100%;margin: 70px auto 0px auto; padding: 0px 0px 0px 0px;text-align:center;}
	
.maintopbg {width: 100%;margin: 120px auto 0px auto; padding: 0px 0px 0px 0px;background-image: url("../modelroom/img/model/topbg.jpg");background-repeat: no-repeat;text-align:center;padding-top:15.0%;background-size:100%;position:relative}
.maintop{width:100%;text-align: center;padding: 50px 0px 0px 0px; margin:0px 0px 0px 0px;}
.title{margin:0px auto 0px auto; padding: 0px 0px 0px 0px;font-size:200%;color:#fff;letter-spacing:2px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;font-weight: 400;}
.modelcap{width: 70%;margin:0px auto 30px auto; padding: 0px 0px 20px 0px;font-size:70%;color:#000;font-weight: 400;text-align:left}

	
.font2{max-width:1200px;width:80%;text-align:center;color:#00a95f;font-weight:normal;line-height:1.4;font-size:2.4rem;letter-spacing:.2rem;margin:30px auto 50px}
.font22{max-width:1200px;width:80%;text-align:center;color:#000;font-weight:normal;font-size:2.1rem;line-height: 130%;letter-spacing:.2rem;margin:0px auto 25px; padding: 0px 0px 0px 0px;}
.c-plan-subheading{text-align:center;font-weight:normal;letter-spacing:.3rem;margin:0 0 50px;font-size:2.2rem}
.c-lead{max-width:1200px;width:80%;text-align:left;font-size:1.4rem;margin:0 auto 40px}
	
.font3{padding:30px 0% 10px 0%;margin: 0px auto 0px auto;font-size:140%; color:#000;line-height: 160%;font-weight: 400;color:#002b62}
.font4{max-width:1200px;width:80%;text-align:center;font-size:2.0rem;margin:0 auto 40px;color: #FF0000}
.sp { display: none ; }
.pc { display: block ; }
}

@media only screen and (min-width:751px) and (max-width:1300px) {
.font1{padding:0px 0% 0px 0%;margin: 0px auto 0px auto;font-size:100%;line-height: 180%;font-weight: 400;color:#002b62;font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝","ＭＳ 明朝", serif;}
	
.font2{max-width:1200px;width:80%;text-align:center;color:#00a95f;font-weight:normal;line-height:1.4;font-size:2.4rem;letter-spacing:.2rem;margin:0 auto 40px}
.c-plan-subheading{text-align:center;font-weight:normal;letter-spacing:.3rem;margin:0 0 50px;font-size:2.2rem}
.modelcap{width: 70%;margin:0px auto 30px auto; padding: 0px 0px 0px 0px;font-size:70%;color:#000;font-weight: 400;text-align:left}
}