@charset "utf-8";

body{background:#fff;padding:0;margin:0;margin-bottom:0;
font-family: "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, sans-serif;
font-size:22px;overflow-x: hidden;font-weight: 500;
animation: bugfix infinite 1s;
  -webkit-animation: bugfix infinite 1s;
}
img {border: none;max-width: 100%;height: auto;vertical-align: middle;
  text-decoration: none;
}

.center{text-align:center;}

header{margin:0 auto;position: fixed;
    z-index: 3;left:0;background:#FFF;
    top: 0;height:80px;
    width: 100%;}

.p-header {
    color: white;
    transition: all, 0.5s;
}
.mt80{margin-top:80px;}
#container{margin: 0 auto;
	max-width: 100%;	/*最大幅。これ以上幅が広がらないように。*/
	min-height: calc(100dvh - 15px);
	position: relative;/*←相対位置*/
    padding-bottom: 15px;/*←footerの高さ*/margin-bottom:0;
    box-sizing: border-box;}

#container2{
margin-bottom:0;padding-bottom:0;
}

  
#video{width:100%;height:auto;padding-bottom:0;position:relative;}

.mv{position:relative;width:100%;height:auto;padding:0;margin:0;display:flex;align-items: end;}

.overray{position: absolute;z-index:2;left:0%;top:0%;
  width:100%;height:calc(100% - 0px);background:#000;opacity:0.3;}

.catch{font-size:65px;color:#FFF;position:absolute;right:10px;top:50%;font-weight:normal;display: flex;text-align:right;
    overflow: hidden;z-index: 2;font-family: "Yu Mincho", "YuMincho", "MS PMincho", serif;font-weight:normal;}



 
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}



@keyframes textanimation {
    0% {
        transform: translateY(2em);
    }

    100% {
        transform: translateY(0);
    }
}

#mokuji{max-width:3000px;margin:0;}

#mokuji .mokuji1{background:#EDEDED;}
#mokuji .mokuji2{background:#FFF;}

#mokuji .mokuji1 .kadomaru_left{border-radius:50px 0 0 50px;}
#mokuji .mokuji2 .kadomaru_right{border-radius:50px 0 0 50px;}

#mokuji a{text-decoration:none;}
#mokuji .gai{display: flex;		/*flexボックスを使う指定*/
	flex-wrap: wrap;	/*折り返す指定*/
	justify-content: space-between;	/*並びかたの種類の指定*/
	padding: 0px;		/*上下、左右へのボックス内の余白*/margin:0px;
	width:100%;}
	
.wd40{width:40%;
	background:;}
.wd40_2{width:40%;background:;}
.wd40_2 img{width:100%;}

.wd60{width:60%;overflow: hidden;
  position: relative;}
.wd60_2{width:60%;overflow: hidden;
  position: relative;}

.wd60 img{width:100%;height:auto;}
.wd60_2 img{width:100%;height:auto;}

.wd40 h1{margin-bottom:70px;margin-left:60px;color:#171C61;font-size:36px;padding: 0.5rem 1.5rem;
  border-left: 4px solid #171C61;}
.wd40 h2{margin-bottom:70px;margin-left:60px;color:#171C61;font-size:36px;padding: 0.5rem 1.5rem;
  border-left: 4px solid #171C61;}


.wd40 .mt20{margin-top:20%;}
.wd40 .mt30{margin-top:30%;}

#mokuji .wd50 img{display: block;
  transition-duration: .5s;
}
#mokuji .wd50 img:hover{
  transform:scale(1.2,1.2);
}

.ptn_pos{display: grid;
  justify-content: flex-end;margin-right:100px;}

.sample_btn {
  display: inline-block;margin-left:100px;
  width: 250px;font-weight:bold;
  text-align: center;
  text-decoration: none;
  line-height: 60px;
  outline: none;
  color:#000;
  background-color: #fff;
  position: relative;
  border: 1px solid #ccc;
  transition: color 0.5s ease;border-radius:3px;
}

.sample_btn i{color:#171C61;}
.sample_btn:hover i{color:#fff;}
.sample_btn:hover {
  color: #fff;
}


.sample_btn:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}
.sample_btn::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #171C61;
  transform: scaleX(0);
  transform-origin: right;
  transition: all 0.5s ease;
  transition-property: transform;
}
.text {
  position: relative;font-size:20px;
}
.next{margin-left:15px;}

.sample_btn2 {
  display: inline-block;margin-left:100px;
  width: 250px;font-weight:bold;
  text-align: center;
  text-decoration: none;
  line-height: 60px;
  outline: none;
  color: #000;
  background-color: #ededed;
  position: relative;
  border: 1px solid #ccc;
  transition: color 0.5s ease;border-radius:3px;
}
.sample_btn2:hover {
  color: #ededed;
}

.sample_btn2 i{color:#171C61;}
.sample_btn2:hover i{color:#fff;}

.sample_btn2:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}
.sample_btn2::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #171C61;
  transform: scaleX(0);
  transform-origin: right;
  transition: all 0.5s ease;
  transition-property: transform;
}

#mokuji .w_btn2{display:block;background:#19448e;padding:20px;font-size:30px;color:#FFF;width:200px;text-align:center;margin-left:60px;}
#mokuji .w_btn2 a{text-decoration:none;color:#FFF;}
#mokuji .w_btn2:hover{background:#5494d6;}

main{padding-top:0px;position:relative;height:auto;margin-bottom:0;}
.mt110{padding-top:110px;background:#CCC;}
.mt180{padding-top:180px;}
.mt150{padding-top:150px;}

.house{right:20px;bottom:-20px;position:absolute;}


footer{text-align:center;color:#FFF;border-top:solid 1px #171C61;
  width: 100%;margin:0;margin-bottom:0;
  bottom: 0;height:30px;position: absolute;margin-top:auto;
  padding:10px;background:#171C61;
  }

footer a{color:#FFF;font-weight:normal;text-decoration:none;}

/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {display: block;}

.pagetop a {
	display: block;text-decoration: none;text-align: center;
	width: 50px;		/*幅*/
	line-height: 50px;	/*高さ*/
	position: fixed;
	right: 0px;		/*右からの配置場所指定*/
	bottom: 0px;		/*下からの配置場所指定*/
	color: #fff;		/*文字色*/
	background: rgba(0,0,0,0.4);	/*背景色。0,0,0は黒色の指定で0.4は色が40%出た状態。*/	
	font-size: 1.4rem;z-index:10;
}

/*マウスオン時*/
.pagetop a:hover {
	background: rgba(0,0,0,0.8);	/*背景色。0,0,0は黒色の指定で0.8は色が80%出た状態。*/
}

.wrap_header{display: flex;		/*flexボックスを使う指定*/
	flex-wrap: wrap;	/*折り返す指定*/
	justify-content: space-between;
	width:90%;margin:0 auto;height:90px;
}
.wrap_header img{margin-top:20px;}

.wrap{display: flex;		/*flexボックスを使う指定*/
	flex-wrap: wrap;	/*折り返す指定*/
	justify-content: space-evenly;	/*並びかたの種類の指定*/
	padding: 5px;
  max-width:1500px;margin:0 auto;margin-top:50px;}

.fs14_min{font-size:16.5px;}
.fs16_min{font-size:16.5px;}
.fs16{font-size:18px;}
.shousaibun{line-height:1.2;margin-top:10px;padding-top:10px;}
.shousaibun2{line-height:1.2;}
.fs20{color:#19448e;}
.pdt30{padding-top30px;}

#gnav{text-align: center;padding:0;
margin:0 auto;color: #171C61;}

#gnav a{color:#171C61;}
#gnav a:hover{color:#333;}

#gnav .h_link{color:#171C61;}


#gnav ul{list-style-type:none;display: flex;		/*flexボックスを使う指定*/
	flex-wrap: wrap;	/*折り返す指定*/
	justify-content: space-between;}

#gnav ul li{list-style-type:none;display: block;font-size:18px;margin-right:50px;font-weight:bold;}

#gnav ul li span{display: block;
	font-size: 1rem;
	color: #171C61;
	letter-spacing: 0.1em;}
	

#gnav ul li a{color:#171C61;text-decoration:none;position: relative;padding-bottom: 4px;}

#gnav ul li a::after {
  background-color: #148bc9;
  bottom: 0;
  content: '';
  display: block;
  height: 2px;
  left: 0;
  position: absolute;
  transition: .5s all;
  width: 0;
}

#gnav ul li a:hover::after {
  width: 100%;
}

.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}



.img-wrap {
  overflow: hidden;
  position: relative;
}

.img-wrap::before {
  animation: img-wrap 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  background: #fff;
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

@keyframes img-wrap {
  100% {
    transform: translateX(100%);
  }
}

.img-wrap2 {
  overflow: hidden;
  position: relative;
}

.img-wrap2::before {
  animation: img-wrap2 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  background: #ededed;
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

@keyframes img-wrap2 {
  100% {
    transform: translateX(-100%);
  }
}


.img-wrap4 {
  overflow: hidden;
  position: relative;
}

.img-wrap4::before {
  animation: img-wrap4 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  background: #fff;
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

@keyframes img-wrap4 {
  100% {
    transform: translateY(100%);
  }
}

.anim-box {
  animation: zoomIn 2.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.name {
    opacity:0;
    animation-name:anime;
    animation-duration:3.5s; 
    animation-delay: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
   }
   @keyframes anime ​{
    ​0% {
     ​opacity: 0;
     ​transform: translateY(30px);
    ​}
      ​100%{
        ​opacity: 1;
         ​transform: translateY(0);
     ​} 
    ​}


 
@keyframes zoomIn {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.anim-box2 {
  animation: slideIn 2.5s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
 
@keyframes slideIn {
  0% {
    transform: translateY(200px);
    opacity: 0;
  }  
  100% {
    transform: translateY(0);opacity: 1;
  }
  
}

.anim-box3 {
  animation: slideIn2 2.5s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  
}

.anim-box4 {
  animation: slideIn2 2.5s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  
}

.anim-box5 {
  animation: slideIn3 2.5s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  
}

.anim-box6 {
  animation: slideIn4 2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  
}

 
@keyframes slideIn2 {
  0% {
    transform: translateY(200px);
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    transform: translateY(0);opacity: 1;
      
  }
  
}

@keyframes slideIn3 {
  0% {
    transform: translateX(-200px);
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    transform: translateX(0);opacity: 1;
      
  }
  
}

@keyframes slideIn4 {
  0% {
    transform: translateY(200px);
    
  }
  50% {
    
  }
  100% {
    transform: translateX(0);opacity: 1;
      
  }
  
}

@media screen and (max-width:1900px) {
.catch{left:20px;top:auto;bottom:20%;font-size:60px;} 
}


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

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

}

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

}
@media screen and (max-width:1500px) {
main{height:auto;}
.catch{left:20px;top:auto;bottom:20%;font-size:50px;}    

.wd40 .mt20{margin-top:15%;}
}

@media screen and (max-width:1400px) {
#gnav ul li{list-style-type:none;display: block;font-size:17px;margin-right:20px;font-weight:bold;}

.wd40 h1{margin-bottom:50px;padding-left:60px;color:#171C61;font-size:30px;padding: 0.5rem 1rem;
  }

.wd40 h2{margin-bottom:50px;padding-left:60px;color:#171C61;font-size:30px;padding: 0.5rem 1rem;
  }

}

@media screen and (max-width:1300px) {
.catch{left:20px;bottom:10%;font-size:40px;}
}
@media screen and (max-width:1250px) {


main{height:auto;}


}


@media screen and (max-width:1200px) {
#header{margin-top:0;padding:0;}

#gnav{display:none;}
#gnav > ul > li span{
display: block;
	font-size: 0.8rem;
	}
.mt80{margin-top:60px;}


/* ---------------------------------------------- */
/* ハンバーガーメニュー */
/* ------------------------- */
#header-hamburger {
    /* 見た目のCSS */
    background:rgba(30,23,75,1.0);
    cursor: pointer;
    width: 50px;
    aspect-ratio: 1/1;
    margin-left: auto;
    /* ボタンがハンバーガーウィンドウの下に隠れないようにする指定 */
    position: relative;
    z-index: 10;
}

/* ----------------- */
/* 三本線 */
/* ----------------- */
#header-hamburger span {
    /* 見た目のCSS */
    display: inline-block;
    background: #fff;
    width: 50%;
    height: 2px;
    /* バーガー線の太さ */
    /*アニメーションの設定*/
    transition: all .4s;
    position: absolute;
    left: 50%;
    /* バーガー線の位置 */
    transform: translateX(-50%);
}

/* １本目 */
#header-hamburger span:nth-of-type(1) {
    top: 30%;
}

/* ２本目 */
#header-hamburger span:nth-of-type(2) {
    top: 50%;
}

/* ３本目 */
#header-hamburger span:nth-of-type(3) {
    top: 70%;
}

/* ------------------ */
/* ×印 */
/* ------------------ */
/*activeクラスが付与されると線が回転して×になる*/
#header-hamburger.active span:nth-of-type(1) {
    top: 50%;
    left: 25%;
    transform: rotate(-45deg);
    width: 50%;
}

#header-hamburger.active span:nth-of-type(2) {
    opacity: 0;
}

#header-hamburger.active span:nth-of-type(3) {
    top: 50%;
    left: 25%;
    transform: rotate(45deg);
    width: 50%;
}

/* ----------------------------------------------- */
/* メニューウィンドウ */
/* -------------------------- */
#hamburger-window {
    transition: 0.3s;background:rgba(25,68,142,0.5); #19448e;
    text-align: center;
    /* 初期状態は非表示 */
    visibility: hidden;
    position: fixed;
    top: 0px;
    right: -100dvw;
    z-index: 1;
    /* 画面いっぱいに表示されるサイズに設定 */
    width: 105%;
    height: calc(100vh - 0px);
    /* 画面からはみ出したらスクロール可能にする */
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/*スクロールバー非表示（Chrome・Safari）*/
.content::-webkit-scrollbar{
    display:none;
}

#hamburger-window.open {
    visibility: visible;
    right: 0;
}

.hamburger-window__link {
    display: block;
    margin: 0 auto;
    width: 100%;
}

.hamburger-window__link:first-child .acordion-btn {
    border-top: 1px solid #ccc;
}


/* ----------------------------------
アコーディオン部分
--------------------- */
.acordion-menu-wrapper {
    background-color: rgba(25,68,142,0.7); #19448e;
}    

#hamburger-window ul li{list-style-type:none;padding-left:0px;margin-left:0px;text-indent:0px;}
.acordion{padding-left:0px;margin-left:0px;text-indent:0px;}

.acordion-btn {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ccc;
    padding-left: 5%;text-decoration:none;
}    

.acordion-btn:hover {
    background-color:  rgba(23,28,97,0.5);
}

.acordion-btn::after {
    /* fontawesomeアイコンを表示 */
    content: '\2b';
    font-weight: 900;
    font-family: "Font Awesome 6 Free";
    display: inline-block;
    position: absolute;
    right: 5%;
    width: 10px;
    aspect-ratio: 1/1;
    color: #fff;
}    

.acordion-btn.is-open::after {
    /* fontawesomeアイコンを表示 */
    content: '\f068';
}

.hamburger-window__title {
    color: #fff;
}

.hamburger-window__title span{display:inline-block;margin-left:10px;font-size:0.8em;}    

.acordion>.acordion__item {
    position: relative;
    text-align: left;
    width: 100%;
    background-color:gba(25,68,142,0.5);
    /* 閉じている状態 */
    border-top: 0 #ccc solid;
    line-height: 0;
    /* 閉じるアニメーション */
    transition:
        border-top .1s ease-out,
}

.acordion.is-open>.acordion__item {
    background-color:rgba(153,153,153,0.5);
    /* 開いている状態 */
    border-top: 1px #ccc solid;
    /* 開くアニメーション */
    transition:
        border-top .1s ease-out,
}

.acordion.is-open>.acordion__item:first-child {
    border-top: none;
}

.acordion.is-open>.acordion__item::after {
    /* fontawesomeアイコンを表示 */
    content: '\f054';
    font-weight: 900;
    font-family: "Font Awesome 6 Free";
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 10%;
    width: 10px;
    aspect-ratio: 1/1;
    color: #fff;
}

.acordion>.acordion__item>.acordion__link {
    color: #fff;
    display: block;
    padding-left: 7%;
    /* 閉じている状態 */
    padding-top: 0;
    padding-bottom: 0;
    line-height: 0;
    opacity: 0;
    visibility: hidden;
    /* 閉じるアニメーション */
    transition:
        padding-top .3s ease-out,
        padding-bottom .3s ease-out,
        line-height .3s ease-out,
        opacity .1s linear,
        visibility .1s linear;text-decoration:none;
}

.acordion.is-open>.acordion__item>.acordion__link {
    display: block;
    padding-left: 7%;
    /* 開いている状態 */
    padding-top: 23px;
    padding-bottom: 23px;
    line-height: 1.5;
    opacity: 1;list-style-type:none;
    visibility: visible;
    /* 開くアニメーション */
    transition:
        padding-top .3s ease-out,
        padding-bottom .3s ease-out,
        line-height .3s ease-out,
        opacity .1s linear,
        visibility .1s linear;
}

}

@media screen and (max-width:1100px) {
#gnav > ul > li {
  display: table-cell;width:20%;
  color: #fff;font-size:16px;
}

.catch{left:20px;bottom:20px;font-size:36px;}  


body{padding:0;margin:0}
#gnav{display:none;}

.mt80{margin-top:50px;}


main{padding-top:30px;height: auto;}
.mt110{padding-top:30px;}
.mt180{padding-top:60px;}
.mt150{padding-top:60px;}

.fs16_min{font-size:16px;}

.wd40 h1{margin-bottom:50px;margin-left:30px;color:#171C61;font-size:25px;
  }

.wd40 h2{margin-bottom:50px;margin-left:30px;color:#171C61;font-size:25px;
  }

#mokuji .w_btn{margin-left:30px;}
#mokuji .w_btn2{margin-left:30px;}

.anim-box4 {
  animation: slideIn3 2.5s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  
}

#container{margin: 0 auto;
	max-width: 100%;	/*最大幅。これ以上幅が広がらないように。*/
	min-height: calc(100dvh - 15px);
	position: relative;/*←相対位置*/
    padding-bottom: 15px;/*←footerの高さ*/margin-bottom:0;
    box-sizing: border-box;}


footer{position: absolute;
  width: 100%;margin:0 auto;
  bottom: 0;margin-top:auto;
  padding:10px;}

.house img{max-width: 150%;overflow:hidden;}
}
@media screen and (max-width:1000px) {

.wd40 h1{margin-bottom:50px;margin-left:30px;color:#171C61;font-size:25px;}

.wd40 h2{margin-bottom:50px;margin-left:30px;color:#171C61;font-size:25px;}


.ptn_pos{display: grid;
  justify-content: flex-end;margin-right:20px;}

#mokuji .w_btn{margin-left:20px;}
#mokuji .w_btn2{margin-left:20px;}
}
@media screen and (max-width:900px) {
.catch{left:20px;bottom:20px;font-size:30px;}

.wd40 h1{margin-bottom:20px;margin-left:20px;color:#171C61;font-size:24px;}

.wd40 h2{margin-bottom:20px;margin-left:20px;color:#171C61;font-size:24px;}

.wd40 .mt20{margin-top:10%;}
.wd40 .mt30{margin-top:20%;}

#mokuji .w_btn{margin-left:10px;}
#mokuji .w_btn2{margin-left:10px;}

.sample_btn {
  display: inline-block;margin-left:100px;
  width: 200px;font-weight:bold;
  text-align: center;
  text-decoration: none;
  line-height: 40px;
  outline: none;
  color: #171C61;
  background-color: #fff;
  position: relative;
  border: 1px solid #171C61;
  transition: color 0.5s ease;
}

.sample_btn2 {
  display: inline-block;margin-left:100px;
  width: 200px;font-weight:bold;
  text-align: center;
  text-decoration: none;
  line-height: 40px;
  outline: none;
  color: #171C61;
  background-color: #ededed;
  position: relative;
  border: 1px solid #171C61;
  transition: color 0.5s ease;
}


}

@media screen and (max-width:800px) {
.house img{max-width: 200%;overflow:hidden;}
.text {
 font-size:18px;
}

.sample_btn {
  display: inline-block;margin-left:10px;
  width: 180px;font-weight:bold;
  text-align: center;
  text-decoration: none;
  line-height: 40px;
  outline: none;font-size:20px;
  color: #171C61;
  background-color: #fff;
  position: relative;
  border: 1px solid #171C61;
  transition: color 0.5s ease;margin-bottom:10px;
}

.sample_btn2 {
  display: inline-block;margin-left:10px;
  width: 180px;font-weight:bold;
  text-align: center;
  text-decoration: none;
  line-height: 40px;
  outline: none;
  color: #171C61;
  background-color: #ededed;
  position: relative;
  border: 1px solid #171C61;
  transition: color 0.5s ease;margin-bottom:10px;
}

}
@media screen and (max-width:700px) {
body{padding:0;margin:0}
.catch{left:20px;bottom:20px;font-size:28px;}

.wd40 h1{margin-bottom:20px;margin-left:20px;color:#171C61;font-size:20px;margin-top:20px;}

.wd40 h2{margin-bottom:20px;margin-left:20px;color:#171C61;font-size:20px;margin-top:20px;}

.wd40 .mt20{margin-top:10px;}
.wd40 .mt30{margin-top:10px;}

#mokuji .w_btn{margin-left:10px;font-size:20px;width:130px;}
#mokuji .w_btn2{margin-left:10px;font-size:20px;width:130px;}

}

@media screen and (max-width:600px) {
body{padding:0;margin:0}
#hamburger-window {
width:110%;
}

.wd40{width:100%;}
.wd60{width:100%;}
.wd60_2{display:none;}
.hd_pic{width:80%;heiht:auto;}

.catch{left:20px;bottom:20px;font-size:24px;}

.anim-box3 {
  animation: slideIn3 2.5s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  
}

.wd40 h1{margin-bottom:20px;margin-left:20px;color:#171C61;font-size:25px;margin-top:20px;}

.wd40 h2{margin-bottom:20px;margin-left:20px;color:#171C61;font-size:25px;margin-top:20px;}






}

@media screen and (max-width:550px) {
.wd40 h1{margin-bottom:10px;padding-left:10px;font-size:22px;}
.wd40 h2{margin-bottom:10px;padding-left:10px;font-size:22px;}
.logo_pc{display:none;}
#mokuji .w_btn{margin-left:10px;font-size:18px;width:130px;}
#mokuji .w_btn2{margin-left:10px;font-size:18px;width:130px;}

}
@media screen and (max-width:500px) {
.mt80{margin-top:40px;}
.catch{left:10px;bottom:10px;font-size:24px;line-height:1.5;}

body{padding:0;margin:0}

header{height:70px;}
.wrap_header img{margin-top:15px;}

#container{overflow-x:hidden;min-height: calc(100dvh - 0px);}

footer{position: absolute;
  width: 100%;margin:0 auto;font-size:16px;
  bottom: 0;margin-top:auto;
  padding:10px;}

}

@media screen and (max-width:450px) {
.wd40 h1{margin-bottom:10px;padding-left:10px;font-size:20px;}
.wd40 h2{margin-bottom:10px;padding-left:10px;font-size:20px;}
.catch{left:10px;bottom:10px;font-size:22px;line-height:1.5;}
#mokuji .w_btn{margin-left:10px;font-size:16px;width:100px;}
#mokuji .w_btn2{margin-left:10px;font-size:16px;width:100px;}

}


@media screen and (max-width:400px) {
body{padding:0;margin:0}
.sp-none{display:none;
}

header{height:60px;}
.mt80{margin-top:30px;}
.logo_tb{display:none;}
.catch{left:10px;bottom:10px;font-size:18px;line-height:1.5;}

.wd40{width:100%;}
.wd40_2s{width:100%;}
.wd40_2{display:none;}
.wd60{width:100%;}
#mokuji .w_btn2{margin-bottom:15px;}
}

@media screen and (max-width:360px) {
#what_fj .list1 .subject2{
font-size:30px;line-height:1.3;
margin-top:10px;margin-left:10px;
}

}

@media screen and (min-width:1201px) {
#header{display:none;}
.under1200{display:none;}
}
@media screen and (min-width:601px) {
.wd60_2s{display:none;}
}
@media screen and (min-width:551px) {
.logo_tb{display:none;}
}

@media screen and (min-width:521px) {
.disp_n_520{display:none;}
}

@media screen and (min-width:401px) {
.disp_n_401{display:none;}
.wd40_2s{display:none;}
.logo_sp{display:none;}
}

@media print{
    #header{
        display: none;
    }
    .logo_sp,.logo_tb{display: none;}
    .img-wrap,.img-wrap2{overflow: visible;}
    .js-animation{opacity: 1;
    visibility: visible;
    transform: translateY(0px);}
}