@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Noto+Serif+JP:wght@300;400;500;600;700&family=Zen+Kaku+Gothic+Antique:wght@400;500;700&family=Zen+Kurenaido&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;600&family=Zen+Kaku+Gothic+Antique:wght@400;500;700&family=Zen+Kurenaido&display=swap');


/*===============================================
●PCレイアウト設定 
===============================================*/
@media print, screen and  (min-width: 651px){
/*メイン画像ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

.index #video-area{
    position: fixed;
    z-index: -1;/*最背面に設定*/
    top: 0;
    right:0;
    left:0;
    bottom:0;
    overflow: hidden;
}
.index #video-area .pattern{

}

.index #video {
    /*天地中央配置*/
    position: absolute;
    z-index: -1;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    /*縦横幅指定*/
    width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
    height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
    min-height: 100%;
    min-width: 100%;
}

.index .main {
position: relative;
padding-top: 100vh;
}

.main .catch{
position: absolute;
top:25%;
left: 10%;
width: 50%;
max-width: 565px
}
.main img{
width: 100%
}

.index .box1{
background-image: url("../images/index/bg_box1.png");
padding: 40px 0
}
.index .box1 .flex_box1{
width: 1200px;
max-width: 95%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.index .box1 .flex_box1 .inner{
width: 33%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.index .box1 .flex_box1 .inner .merit{
width: 5%
}
.index .box1 .flex_box1 .inner .merit img{
width: 100%
}
.index .box1 .flex_box1 .inner .com{
box-sizing: border-box;
border-left: #0e3376 1px solid;
padding-left: 5%;
width: 90%;
color: #0e3376;
font-size: clamp(1.2rem, 1.2vw, 1.8rem);
font-weight: 500;
letter-spacing: 0.2rem;
line-height: 180%
}
.index .box1 .flex_box1 .inner .com .num{
font-size: clamp(1.6rem, 1.8vw, 2.5rem);
letter-spacing: 0.1rem;
font-style: italic
}
/* スクロールで出現 */
.fadeRight{
animation-name:fadeRightAnime;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeRightAnime{
  from {
    opacity: 0;
  transform: translateY(30px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeLeftTrigger,
.fadeRightTrigger{
    opacity: 0;
}

.index .box2{
background-image: url("../images/index/bg_box2.jpg");
background-position: center;
background-repeat: no-repeat;
padding: 150px 0;
background-color: #FFF;
color: #0e3376;
}
.index .box2 .text_information{
font-family: 'Noto Sans JP';
font-size: 1.5rem;
letter-spacing: 0.7rem;
text-align: center;
padding: 30px
}
.index .box2 .news{
width: 1000px;
max-width: 90%;
margin: 0 auto
}
.index .box2 .news li{
display: block;
border-bottom: #666 1px dotted;
margin-bottom: 20px;
font-size: 1.6rem;
}
.index .box2 .news li .date{
font-size: 1.3rem;
margin-bottom: 5px
}
.index .box2 .text1_box2{
font-size: 3.0rem;
padding-top: 60px;
text-align: center
}
.index .box2 .text2_box2{
font-size: 1.4rem;
padding-top:30px;
text-align: center
}
.index .box2 .bt_box2{
padding-top: 50px;
width: 800px;
max-width: 90%;
margin: 0 auto
}
.index .box2 .bt_box2 a{
display: block
}
.index .btn{
    /*アニメーションの起点とするためrelativeを指定*/
    position: relative;
  overflow: hidden;
    /*ボタンの形状*/
  text-decoration: none;
  display: inline-block;
    border: 1px solid #0e3376;
	color: #FFF;
	background-color: #0e3376;
    padding: 15px 30px;
    text-align: center;
    outline: none;
    /*アニメーションの指定*/   
    transition: ease .2s;
}

/*ボタン内spanの形状*/
.index .btn span {
  position: relative;
  z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
 color: #FFF;
 font-size: 1.6rem
}
.index .btn:hover span{
  color:#fff;
}
/*== 背景が流れる（左から右） */
.index .bgleft:before {
  content: '';
    /*絶対配置で位置を指定*/
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
    /*色や形状*/
  background-color: #365895;
  width: 100%;
  height: 100%;
    /*アニメーション*/
  transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
  transform: scale(0, 1);
  transform-origin: right top;
}
/*hoverした際の形状*/
.index .bgleft:hover:before{
  transform-origin:left top;
  transform:scale(1, 1);
}
.index .box2 .box_information{
width: 800px;
max-width: 80%;
border: #0e3376 1px solid;
padding: 3%;
font-size: 1.8rem;
text-align: center;
margin: 50px auto 150px auto;
line-height: 180%
}
.index .box2 .box_information .tel{
font-size: 3.5rem;
padding: 30px 0;
letter-spacing: 0.4rem
}
.index .box2 .box_information .time{
font-size: 1.4rem
}

.index .box3{
background-image: url("../images/index/bg_box3.jpg");
padding: 150px 0;
color: #0e3376;
}
.index .box3 .text1_box3{
font-family: 'Noto Sans JP';
font-size: 1.5rem;
letter-spacing: 0.7rem;
text-align: center;
padding: 30px
}
.index .box3 .text2_box3{
font-size: 3.0rem;
padding-top: 60px;
text-align: center;
line-height: 160%
}
.index .box3 .text3_box3{
font-size: 2.0rem;
letter-spacing: 0.2rem;
padding-top:50px;
text-align: center;
line-height: 200%;
width: 1000px;
max-width: 90%;
margin: 0 auto
}

.index .box4 .box_subtitle{
background-image: url("../images/index/bg_box_subtitle.jpg");
background-repeat:repeat-y;
background-color: #FFF;
padding-top: 150px;
padding-bottom: 15px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
color: #0e3376;
}
.index .box4 .box_subtitle .box_left{
width: 25%;
padding-left: 3%;
font-size: 2.0rem;
padding-top: 60px;
line-height: 130%
}
.index .box4 .box_subtitle .box_left .text_subtitle{
font-size: 5.3rem;
letter-spacing: 0.3rem;
font-family: "Times New Roman", Times, "serif";
padding-bottom: 10px
}
.index .box4 .box_subtitle .box_right{
width: 70%;
border-left: #0e3376 1px solid;
font-size: 3.0rem;
line-height: 150%
}
.index .box4 .box_subtitle .box_right .com{
border-left: #0e3376 1px solid;
padding: 50px
}
.index .box4 .photo{
width: 100%;
padding-top: 30%;
position: relative;
overflow: hidden
}
.index .box4 .photo img{
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
transition: 0.8s
}
.index .box4 .photo:hover img{
width: 110%;
height: auto;
}
.index .box4 .photo a{
display: block;
position: absolute;
font-size: 2.2rem;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
background-color: #036;
width: 200px;
height: 80px;
padding-top: 40px;
text-align: center;
color: #FFF;
transition: 0.5s
}
.index .box4 .photo a:hover{
 opacity:0.8;
}
.btnripple3:hover::before {
    content: '';
    /*絶対配置で波形の位置を決める*/
    position: absolute;
    left:0%;
    top:0%;
    /*波形の形状*/
    border: 2px solid #036;
    width: 200px;
    height: 200px;
    /*はじめは不透明*/
  opacity:1;
    /*アニメーションの設定*/
    animation:1s circleanime2 forwards;
}

/*波形が広がるアニメーション*/
@keyframes circleanime2{
  0%{
    transform: scale(0);
  }
  100%{
    transform:scale(2);
    opacity: 0;
  }
}

/*矢印の設定*/
.btnripple3::after {
    content: '';
    /*絶対配置で矢印の位置を決める*/
    position: absolute;
    top: 30%;
    right: -20px;
    /*矢印の形状*/
    width: 5px;
    height: 5px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    transform: rotate(45deg);
}
.index .box5{
padding: 100px 0;
background-color: #FFF;
}
.index .box5 ul{
width: 1100px;
margin: 0 auto;
}
.index .box5 ul li{
list-style: disc;
font-size: 1.0rem;
margin-bottom: 10px;
line-height: 120%
}
/*ロケーション--------------------------------------------------------------------------*/
.location{
font-family: 'Noto Serif JP';
}
.location .box_pagetitle{
width: 90%;
margin: 0 auto
}
.location .box_pagetitle img{
width: 100%;
}
.location .box1{
padding:100px 0 100px 0
}
.location .box1 .text_box1{
text-align: center;
color: #0e3376;
font-size: clamp(2.0rem, 1.8vw , 2.8rem);
padding-bottom: 80px
}
.location .box1 .map{
width: 70%;
max-width: 1160px;
margin: 0 auto;
border: #999 1px solid;
border-radius: 15px;
overflow: hidden
}
.location .box1 .map img{
width: 100%;
}
/* スクロールで出現 */

.fadeTop{
animation-name:fadeLeftAnime;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeLeftAnime{
  from {
    opacity: 0;
  transform: translateY(-50px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}


.fadeBottom{
animation-name:fadeRightAnime;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeRightAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeLeftTrigger,
.fadeRightTrigger{
    opacity: 0;
}
.location .box2{
background-image: url("../images/index/bg_box3.jpg");
padding: 150px 0;
color: #0e3376;
}
.location .box2 .text1_box2{
text-align: center;
color: #0e3376;
font-size: clamp(2.0rem, 1.8vw , 2.8rem);
padding-bottom: 40px
}
.location .box2 .text2_box2{
text-align: center;
color: #0e3376;
font-size: 1.8rem;
padding-bottom: 80px
}
.location .box2 .text3_box2{
text-align: center;
color: #0e3376;
font-size: 1.8rem;
padding-bottom: 30px
}
.location .box2 .flex_box2{
width: 1200px;
max-width: 90%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.location .box2 .flex_box2 .inner{
width: 32.8%;
border: #0e3376 1px solid;
background-color: #FFF;
margin-bottom: 5px;
position: relative;
height: 100px;
}
.location .box2 .flex_box2 .inner .com{
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 2.0rem;
padding: 0 10%
}

.location .box2 .text4_box2{
padding-top: 50px;
font-size: 1.2rem;
width: 1200px;
max-width: 90%;
margin: 0 auto;
}
.location .box2 .text4_box2 li{
margin-bottom: 10px
}
.location .box3{
padding: 150px 0;
}
.location .box3 .text1_box3{
width: 1000px;
margin: 0 auto;
display: flex;
align-items: center;
color:#0e3376;
font-size: 3.0rem
}
.location .box3 .text1_box3::before,
.location .box3 .text1_box3::after {
content: "";
height:1px;
flex-grow: 1;
background-color:#0e3376;
}
.location .box3 .text1_box3:before {
margin-right: 10px;
}
.location .box3 .text1_box3:after {
margin-left: 10px;
}
.location .box3 .photo{
width: 80%;
max-width: 1260px;
margin: 0 auto;
padding-top: 50px
}
.location .box3 .photo img{
width: 100%
}
.location .box4{
padding-bottom: 150px;
}
.location .box4 .box_nav_location{
padding: 25px 0;
border-bottom: #0e3376 1px solid;
border-top: #0e3376 1px solid;
margin-top: 100px
}
.location .box4 .nav_location{
width: 1200px;
max-width: 95%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.location .box4 .nav_location a{
display: block;
width: 24%;
text-align: center;
padding: 5px 0;
color: #0e3376;
font-size: 2.0rem;
line-height: 120%;
}
.location .box4 .nav_location a .text_jp{
font-size: 1.4rem
}
.location .box4 .nav_location .carent{
background-color: #0e3376;
color: #FFF
}
.location .btn{
    /*アニメーションの起点とするためrelativeを指定*/
    position: relative;
  overflow: hidden;
    /*ボタンの形状*/
  text-decoration: none;
  display: inline-block;
    outline: none;
    /*アニメーションの指定*/   
    transition: ease .2s;
	background-color: #FFF;
	border: none
}

/*ボタン内spanの形状*/
.location .btn span {
  position: relative;
  z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
  color:#333;
}

.location .btn:hover span{
  color:#fff;
}

/*== 背景が流れる（左から右） */
.location .bgleft:before {
  content: '';
    /*絶対配置で位置を指定*/
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
    /*色や形状*/
  background:#0e3376;/*背景色*/
  width: 100%;
  height: 100%;
    /*アニメーション*/
  transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
  transform: scale(0, 1);
  transform-origin: right top;
}

/*hoverした際の形状*/
.location .bgleft:hover:before{
  transform-origin:left top;
  transform:scale(1, 1);
}
.location .box4 .box_location{
padding: 100px 0
}
.location .box4 .box_location .catname{
width: 500px;
margin: 0 auto;
display: flex;
align-items: center;
color:#0e3376;
font-size: 3.0rem
}
.location .box4 .box_location .catname::before,
.location .box4 .box_location .catname::after {
content: "";
height:1px;
flex-grow: 1;
background-color:#0e3376;
}
.location .box4 .box_location .catname:before {
margin-right: 20px;
}
.location .box4 .box_location .catname:after {
margin-left: 20px
}
.location .box4 .box_location .text_cat{
font-size: 2.0rem;
text-align: center;
color:#0e3376;
padding: 50px 0;
line-height: 150%
}
.location .box4 .box_location .photo1{
width: 1600px;
max-width: 90%;
margin: 0 auto;
padding-top: 50px
}
.location .box4 .box_location .photo1 img{
width: 100%
}
.location .box4 .box_location2{
width: 1200px;
max-width: 90%;
background-color: #DDD;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 150px auto 0 auto;
}
.location .box4 .box_location2 .left{
width: 50%;
position: relative
}
.location .box4 .box_location2 .left img{
width: 100%;
margin-top: -60px;
margin-bottom: 30px
}
.location .box4 .box_location2 .left .text_left{
width: 80%;
padding: 2%;
position: absolute;
left: 5%;
top:80%;
background-color: #DDD;
}
.location .box4 .box_location2 .right{
padding: 50px 3%;
width: 44%;
color:#0e3376;
}
.location .box4 .text_right1{
font-size: 2.0rem;
padding-bottom: 10px;

}
.location .box4 .text_right2{
font-size: 1.2rem;
padding-bottom: 3px;
}
.location .box4  .flex_location2 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.location .box4  .flex_location2 .inner{
width: 48%;
margin-bottom: 15px;
}
.location .box4  .flex_location2 .inner img{
width: 100%
}
.location .box4 .text_right3{
font-size: 1.4rem;
padding-bottom: 3px;
}
.location .box4 .text_right3 span{
display: inline-block
}
.location .box4 .box_location3{
padding: 50px 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 1200px;
max-width: 90%;
margin: 0 auto
}
.location .box4 .box_location3 .inner{
width: 48%;
margin-bottom: 50px;
color:#0e3376;
text-align: center;
font-size: 2.0rem
}
.location .box4 .box_location3 .photo{
padding-bottom: 20px;
}
.location .box4 .box_location3 .photo img{
width: 100%
}
.location .box5{
width: 1000px;
max-width: 90%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 auto
}
.location .box5 .left{
width: 35%;
}
.location .box5 .left img{
width: 100%;
}
.location .box5 .right{
width: 60%;
padding: 150px 2.5%;
}
.location .box5 .right .text1_box5{
background-color: #745D3B;
color: #FFF;
font-size: 2.0rem;
font-weight: 500;
padding: 10px;
border-radius: 0 20px 20px 0;
margin-bottom: 30px;
}
.location .box5 .right .text2_box5{
font-size: 1.8rem;
padding-bottom: 40px
}
.location .box5 .right .text3_box5{
line-height: 160%
}
.location .box6{
width: 1100px;
max-width: 90%;
margin: 0 auto;
padding: 100px 0
}
.location .box6 li{
list-style: disc;
margin-bottom: 7px;
font-size: 1.2rem
}
/*設備--------------------------------------------------------------------------*/
.equipment{
font-family: 'Noto Serif JP';
}
.equipment .box_pagetitle{
width: 90%;
margin: 0 auto
}
.equipment .box_pagetitle img{
width: 100%;
}
.equipment .box1{
padding:100px 0 50px 0
}
.equipment .box1 .text_box1{
text-align: center;
color: #0e3376;
font-size: clamp(2.0rem, 1.8vw , 2.8rem);
padding-bottom: 80px
}

.equipment .exterior a .box_style {
background: linear-gradient(#067298, #024560);
color: #efefef;
margin: 20px auto;
padding-bottom: 20px;
padding-top: 20px;
width: 1200px;
max-width: 90%;
}
.equipment .exterior a:hover .box_style {
color: #bda37d;
 }
.equipment .exterior .box_style .flex_style {
display: flex;
flex-wrap: wrap;
justify-content: space-between
}
.equipment .exterior .box_style .flex_style .photo{
width: 31%;
padding: 0 2%
}
.equipment .exterior .box_style .flex_style .photo img {
width: 100%;
}  
.equipment .exterior .box_style .flex_style .com{
width: 56%;
padding: 0 2%
}

.equipment .exterior .box_style .flex_style .com .title_stylelist {
font-size: 3.5rem;
text-align: center;
font-family: "Times New Roman", Times, "serif"
}
.equipment .exterior .box_style .flex_style .com .subtitle_stlelist {
border-bottom: #efefef 1px solid;
font-size: 1.8rem;
font-weight: 500;
margin-bottom: 15px;
padding-bottom: 15px;
padding-top: 15px;

}
.equipment .exterior .box_style .flex_style .com .gaiyo {
font-size: 1.4rem;
line-height: 170%;
text-align: left;
}

.equipment .box_lead{
width: 1200px;
max-width: 90%;
border: #0e3376 1px solid;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.equipment .box_lead .com{
padding: 4%;
width: 42%
}
.equipment .box_lead .com .text_lead1{
font-size: clamp(2.0rem, 1.5vw , 2.5rem);
padding-bottom: 30px;
}
.equipment .box_lead .com .text_lead2{
font-size: clamp(2.0rem, 1.5vw , 2.5rem);
padding-bottom: 50px;
}
.equipment .box_lead .com .text_lead3{
font-size: 1.4rem;
padding-bottom: 50px;
}
.equipment .box_lead .photo{
padding: 4%;
width: 38%
}
.equipment .box_lead .photo img{
width: 100%
}
.location .box1 .map img{
width: 100%;
}
/* スクロールで出現 */

.fadeTop{
animation-name:fadeLeftAnime;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeLeftAnime{
  from {
    opacity: 0;
  transform: translateY(-50px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}


.fadeBottom{
animation-name:fadeRightAnime;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeRightAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeLeftTrigger,
.fadeRightTrigger{
    opacity: 0;
}

.equipment .box4{
padding-bottom: 90px;
}
.equipment .box4 .box_nav_equipment{
padding: 25px 0;
border-bottom: #0e3376 1px solid;
border-top: #0e3376 1px solid;
margin-top: 100px
}
.equipment .box4 .nav_equipment{
width: 1200px;
max-width: 95%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.equipment .box4 .nav_equipment a{
display: block;
width: 19%;
text-align: center;
padding: 5px 0;
color: #0e3376;
font-size: 2.0rem;
line-height: 120%;
}
.equipment .box4 .nav_equipment a .text_jp{
font-size: 1.4rem
}
.equipment .box4 .nav_equipment .carent{
background-color: #0e3376;
color: #FFF
}
.equipment .btn{
    /*アニメーションの起点とするためrelativeを指定*/
    position: relative;
  overflow: hidden;
    /*ボタンの形状*/
  text-decoration: none;
  display: inline-block;
    outline: none;
    /*アニメーションの指定*/   
    transition: ease .2s;
	background-color: #FFF;
	border: none
}

/*ボタン内spanの形状*/
.equipment .btn span {
  position: relative;
  z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
  color:#333;
}

.equipment .btn:hover span{
  color:#fff;
}

/*== 背景が流れる（左から右） */
.equipment .bgleft:before {
  content: '';
    /*絶対配置で位置を指定*/
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
    /*色や形状*/
  background:#0e3376;/*背景色*/
  width: 100%;
  height: 100%;
    /*アニメーション*/
  transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
  transform: scale(0, 1);
  transform-origin: right top;
}

/*hoverした際の形状*/
.equipment .bgleft:hover:before{
  transform-origin:left top;
  transform:scale(1, 1);
}
.equipment .box4 .box_equipment{
padding: 100px 0;
background-image: url("../images/index/bg_box2.jpg");
background-repeat: no-repeat;
background-position: bottom
}
.equipment .box4 .box_equipment .catname{
width: 500px;
margin: 0 auto;
display: flex;
align-items: center;
color:#0e3376;
font-size: 3.0rem
}
.equipment .box4 .box_equipment .catname::before,
.equipment .box4 .box_equipment .catname::after {
content: "";
height:1px;
flex-grow: 1;
background-color:#0e3376;
}
.equipment .box4 .box_equipment .catname:before {
margin-right: 20px;
}
.equipment .box4 .box_equipment .catname:after {
margin-left: 20px
}
.equipment .box4 .box_equipment .text_cat{
font-size: 2.0rem;
text-align: center;
color:#0e3376;
padding: 50px 0;
line-height: 150%
}
.equipment .box4 .box_equipment2{
width: 1300px;
max-width: 90%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 90px auto 0 auto;
}
.equipment .box4 .box_equipment2 .left{
width: 65%;
position: relative;
}
.equipment .box4 .box_equipment2 .eco{
background-color: #F4FBE9;
padding: 3%
}
.equipment .box4 .box_equipment2 .left img{
width: 100%;
}
.equipment .box4 .box_equipment2 .right{
width: 33%;
color:#0e3376;
}
.equipment .box4 .box_equipment2 .right .inner{
padding-bottom: 40px;
}
.equipment .box4 .box_equipment2 .right .photo{
padding-bottom: 20px;
}
.equipment .box4 .box_equipment2 .right .photo img{
width: 100%
}
.equipment .box_cost{
width: 950px;
max-width: 90%;
margin: 50px auto
}
.equipment .cost img{
width: 100%
}
.equipment .box4 .text_right1{
font-size: 1.8rem;
padding-bottom: 3px;
text-align: center
}
.equipment .box4 .text_right2{
font-size: 1.2rem;
padding-bottom: 3px;
}
.equipment .box4  .flex_equipment2 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.equipment .box4  .flex_equipment2 .inner{
width: 48%;
margin-bottom: 15px;
}
.location .box4  .flex_equipment2 .inner img{
width: 100%
}
.equipment .box4 .text_right3{
font-size: 1.4rem;
padding-bottom: 3px;
}

.equipment .box4 .box_equipment3{
padding: 50px 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 1200px;
max-width: 90%;
margin: 0 auto
}
.equipment .box4 .box_equipment3 .inner{
width: 32%;
margin-bottom: 50px;
color:#0e3376;
}
.equipment .box4 .box_equipment3 .photo{
padding-bottom: 20px;
}
.equipment .box4 .box_lequipment3 .photo img{
width: 100%
}
.equipment .box4 .box_equipment4{
background-color: #f4f4f4;
padding: 100px 0
}
.equipment .box4 .box_equipment4 .flex_equipment{
display: flex;
flex-wrap: wrap;
justify-content:space-between;
width: 1300px;
max-width: 90%;
margin: 0 auto
}
.equipment .box4 .box_equipment4 .flex_equipment .inner{
width: 48%;
}
.equipment .box4 .box_equipment4 .flex_equipment .inner img{
width: 100%;
}
/*プラン--------------------------------------------------------------------------*/
.plan{
font-family: 'Noto Serif JP';
}
.plan .box_pagetitle{
width: 90%;
margin: 0 auto
}
.plan .box_pagetitle img{
width: 100%;
}
.plan .box1{
padding:100px 0 100px 0
}
.plan .box1 .text_box1{
text-align: center;
color: #0e3376;
font-size: clamp(2.0rem, 1.8vw , 2.8rem);
padding-bottom: 80px;
line-height: 160%
}


.fadeTop{
animation-name:fadeLeftAnime;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeLeftAnime{
  from {
    opacity: 0;
  transform: translateY(-50px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}


.fadeBottom{
animation-name:fadeRightAnime;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeRightAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeLeftTrigger,
.fadeRightTrigger{
    opacity: 0;
}

.plan .parth{
width: 100%;
padding-bottom: 100px;
}
.plan .parth  #video-area{
	position: relative;
}
.plan .parth  #video {
   width: 100%;
}
.plan .parth  img {
    width: 100%
}
.plan .box2{
width: 1300px;
max-width: 90%;
background-color: #f4f4f4;
margin: 80px auto;
padding: 50px 0
}
.plan .box2 .text_box2{
text-align: center;
color: #0e3376;
font-size: clamp(2.0rem, 1.8vw , 2.8rem);
padding-bottom: 40px;
line-height: 160%;
width: 80%;
margin: 0 auto
}
.plan .box2 .text2_box2{
text-align: center;
color: #0e3376;
font-size: 1.6rem;
padding-bottom: 30px;
line-height: 160%;
width: 80%;
margin: 0 auto
}
.plan .box2 .flex_box2{
width: 70%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.plan .box2 .flex_box2 .inner{
width: 48%;
background-color: #FFF;
color: #0e3376;
padding: 40px 0
}
.plan .box2 .flex_box2 .inner .com{
width: 80%;
margin: 0 auto;
color: #0e3376;
font-size: 2.0rem;
line-height: 200%;;
text-align: center
}
.plan .box2 .flex_box2 .inner .photo{
width: 60%;
margin: 0 auto;
padding-top: 30px;
}
.plan .box2 .flex_box2 .inner .photo img{
width: 100%;
}
.plan .box3{
width: 1400px;
max-width: 90%;
margin: 100px auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.plan .box3 .left{
width: 65%;
}
.plan .box3 .left img{
width: 100%;
}
.plan .box3 .right{
width: 33%;
position: relative
}
.plan .box3 .right .com{
background-color: #e4dbc4;
border-radius: 25px;
padding: 60px 7%;
width: 86%;
position: absolute;
top:50%;
transform: translateY(-50%);
color: #6a5f40;
}
.plan .box3 .right .com .text_box3{
font-size: 2.2rem;
line-height: 180%;
padding-bottom: 10px;
} 
.plan .box3 .right .com .text2_box3{
font-size: 1.4rem;
line-height: 160%;
}
.plan .box3_small{
width: 1200px;
max-width: 90%;
margin: 100px auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.plan .box3_small .inner{
width: 60%;
border: #666 1px solid;
padding: 1%;
margin-bottom: 15px
}
.plan .box3_small .inner img{
width: 100%
}
.plan .box4{
background-color: #000;
padding: 50px 0
}
.plan .box4_in{
width: 1300px;
max-width: 98%;
margin: 50px auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 50px

}
.plan .box4_in .inner_left{
width: 41%;
margin: 0.5%
}
.plan .box4_in .inner_right{
width: 57%;
margin: 0.5%
}
.plan .box4_in img{
width: 100%
}
.plan .box4 .bt_3d a{
display: block;
width: 650px;
max-width: 90%;
margin: 80px auto 40px auto;
box-sizing: border-box;
border: #FFF 2px solid
}
.plan .box4 .bt_3d a img{
width: 100%
}
.plan .subtitle{
width: 1000px;
max-width: 90%;
margin: 0 auto;
font-size: 2.5rem;
font-weight: 800;
text-align: center;
color: #0e3376;
border-bottom: #0e3376 2px solid;
padding-bottom: 10px
}
.plan .box5{
padding-top: 50px;
margin-bottom: 100px
}
.plan .box5 .photo{
width: 100%;
}
.plan .box5 .photo img{
width: 100%
}
.plan .box5  .img_madori{
padding-top: 50px;
padding-bottom: 50px
}
.plan .box5  .img_madori a{
display: block;
width: 80%;
margin-left: 20%;
}
.plan .box5  .img_madori a img{
width: 100%
}
.plan .box5  .img_madori a img:hover{
opacity: 1.0
}
.plan .box5 .bt_madori{
padding-top: 40px;
}
.plan .box5 .bt_madori a{
display: block;
width: 500px;
max-width: 90%;
margin: 0 auto;
background-color: #0e3376;
color: #FFF;
text-align: center;
font-size: 2.0rem;
padding: 70px 0
}
.plan .box6{
width: 1100px;
max-width: 90%;
margin: 0 auto;
padding: 100px 0;
font-size: 1.2rem
}
.plan .box6 li{
list-style: disc;
margin-bottom: 7px;
}

.plan .box7{
padding: 100px 0;
text-align: center;
color: #C1A339;
font-size: clamp(1.4rem, 1.6vw , 2.5rem);
font-weight: 600;
  background-image: radial-gradient(circle, rgba(57, 99, 252, 1), rgba(1, 18, 61, 1));

}
/*アクセス--------------------------------------------------------------------------*/
.access{
font-family: 'Noto Serif JP';
color: #0e3376;
}
.access .box_pagetitle{
width: 90%;
margin: 0 auto;
}
.access .box_pagetitle img{
width: 100%;
}
.access .box1{
padding:100px 0 100px 0;
width: 1000px;
max-width: 80%;
margin: 0 auto;
color: #0e3376;
text-align: center;
}
.access .box1 .text_box1{
text-align: center;
color: #0e3376;
font-size: clamp(2.0rem, 1.8vw , 2.8rem);
padding-bottom: 80px;
line-height: 160%
}
.access .box2{
padding-bottom: 100px;
}
.access .catname{
width: 500px;
margin: 0 auto;
display: flex;
align-items: center;
color:#0e3376;
font-size: 3.0rem
}
.access .catname::before,
.access .catname::after {
content: "";
height:1px;
flex-grow: 1;
background-color:#0e3376;
}
.access .catname:before {
margin-right: 20px;
}
.access .catname:after {
margin-left: 20px
}
.access .box2 .rosen{
width: 1100px;
max-width: 90%;
margin: 0 auto;
padding-top: 50px
}
.access .box2 .rosen img{
width: 100%
}
.access .box3{
padding: 100px 0;
background-image: url("../images/index/bg_box3.jpg");
}
.access .box3 .flex_box3{
width: 1000px;
max-width: 90%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.access .box3 .flex_box3 .inner{
width: 50%;
position: relative
}
.access .box3 .flex_box3 .inner .com{
position: absolute;
top:50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
width: 100%;
}
.access .box3 .flex_box3 .inner .com .title_box3{
font-size: 3.0rem;
padding-bottom: 30px;
text-align: center
}
.access .box3 .flex_box3 .inner .com .title_box3 p{
font-size: 2.0rem;
line-height: 180%
}
.access .box3 .flex_box3 .inner .photo{
width: 100%
}
.access .box3 .flex_box3 .inner .photo img{
width: 100%
}
.access .box4{
padding-bottom: 100px;
}
.access .box4 .flex_box4{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.access .box4 .flex_box4 .inner{
width: calc(100% / 5);
position: relative
}
.access .box4 .flex_box4 .inner img{
width: 100%;
}
.access .box4 .flex_box4 .inner .com{
width: 100%;
text-align: center;
position: absolute;
top:50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
color: #FFF;
font-size: 2.5vw;
font-weight: 300;
font-family: 'Noto Sans JP';
text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
}
.access .box4 .flex_box4 .inner .com .title_box4{
font-size: 1.5vw;
padding-bottom: 1.5vw;
letter-spacing: 0.1em
}
.access .box4 .flex_box4 .inner .com .min{
font-size: 1.3vw;
padding-bottom: 20px;
}
.access .box6{
padding: 100px 0;
background-color: #f4f4f4;
margin-bottom: 50px
}
.access .box6 .text_access1{
font-size: 3.5rem;
text-align: center;
padding: 50px 0;
line-height: 200%
}
.access .box6 .text_access2{
font-size: 2.0rem;
text-align: center;
line-height: 200%
}
.access .box6 .photo_box6{
margin: 40px 0;
position: relative
}
.access .box6 .photo_box6 img{
width: 100%;
}
.access .box6 .text_box6{
font-size: 1.6rem;
width: 1200px;
max-width: 90%;
margin: 0 auto;
}
.access .box6 .map_trafic{
width: 90%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 50px 0
}
.access .box6 .map_trafic .map{
width: 720px;
max-width:46%;
padding-right: 4%
}
.access .box6 .map_trafic .map img{
width: 100%
}
.access .box6 .map_trafic .guide{
width: 650px;
max-width:42%;
border: #999 1px solid;
padding: 2%;
font-size: 1.3rem
}
.access .box6 .map_trafic .guide dt{
font-size: 2.3rem;
font-weight: 600;
padding-bottom: 20px;
}
.access .box6 .map_trafic .guide dt i{
font-size:4.0rem;
color: #666
}
.access .box6 .map_trafic .guide dd{
font-size: 1.6rem;
font-weight: 400;
line-height: 180%;
padding-bottom: 5px;
border-bottom: #666 1px dotted;
margin-bottom: 30px;
margin-left: 0
}
/*物件概要--------------------------------------------------------------------------*/
.outline{
font-family: 'Noto Serif JP';
color: #0e3376;
}
.outline .box_pagetitle{
width: 90%;
margin: 0 auto;
}
.outline .box_pagetitle img{
width: 100%;
}
.outline .title_outline{
font-size: 2.0rem;
font-weight: 600;
padding-bottom: 40px
}
.outline .box1{
border: #666 1px solid;
width: 1100px;
max-width: 80%;
margin: 50px auto;
padding: 5%
}
.outline .box1 table{
width: 100%;
}
.outline .box1 td{
padding: 15px 0;
border-top: #666 1px dotted;
line-height: 140%
}
.outline .box1 td:nth-child(1){
width: 25%;
font-weight: 600
}
/*現地案内図--------------------------------------------------------------------------*/
.map{
font-family: 'Noto Serif JP';
color: #0e3376;
}
.map .box_pagetitle{
width: 90%;
margin: 0 auto;
}
.map .box_pagetitle img{
width: 100%;
}
.map .box1{
width: 1100px;
max-width: 90%;
margin: 100px auto;
}
.map .box1 img{
width: 100%
}
.map .box2{
width: 1300px;
margin: 50px auto;
border: #0e3376 1px solid;
}
.map .box2 .title_route{
background-color: #0e3376;
color: #FFF;
font-size: 2.2rem;
text-align: center;
padding: 10px 0
}
.map .box2 .flex_route{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 5%;
}
.map .box2 .flex_route .inner{
width: 30%;
margin-bottom: 30px;
}
.map .box2 .flex_route .inner .photo{
padding-bottom: 10px;
}
.map .box2 .flex_route .inner .photo img{
width: 100%
}
.map .box2 .flex_route .inner .com{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.map .box2 .flex_route .inner .com .num{
width: 10%;
color:  #0e3376;
font-weight: 600;
text-align: center;
font-size: 2.0em;
border-radius: 20px;
}
.map .box2 .flex_route .inner .com .text_route{
width: 88%
}
.map .box3{
width: 1100px;
max-width: 90%;
margin: 50px auto;
}
.map .box3 img{
width: 100%
}
.map .box3 .box4{
border: #0e3376 1px solid;
text-align: center;
padding: 50px 0;
margin: 50px 0
}
.map .box3 .box4 .text_box4{
font-size: 1.6rem;
line-height: 160%
}
.map .box3 .box4 .tel{
font-size: 2.5rem;
padding: 30px 0
}
.map .box3 .box4 .time{
font-size: 1.2rem
}
.map .box_google{
height: 150px;
background-color: #f4f4f4;
position: relative;
margin: 150px 0 150px 0
}
.map .box_google .box_circle{
background-color: rgba(255,255,255,0.9);
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.35);
width: 250px;
height: 250px;
position: absolute;
border-radius: 200px;
top:50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}
.map .box_google .box_circle .a{
position: relative;
display: block;
color: #000;
}
.map .box_google .box_circle a .point{
position: absolute;
width: 100%;
top:50%;
transform: translateY(-50%);
text-align: center;
font-size: 1.8rem;
line-height: 200%
}
.map .box_google .box_circle a .point i{
font-size: 6.5rem;
color: #666;
transition: 0.5s
}
.map .box_google .box_circle a:hover .point i{
color: #C8898A
}
/*お問い合わせ-----------------------------------------*/
.contact{
font-family: 'Noto Sans JP';
}
.contact .box1{
width: 1000px;
max-width: 90%;
margin: 0 auto;
font-size: 1.7rem;
line-height: 220%;
padding: 50px 0 100px 0
}
.contact .box1 .text_red{
color: #C00
}
.contact .box_form{
width: 1000px;
max-width: 90%;
padding-top: 20px;
border-top:#97215e 1px solid;
margin: 0 auto
}
.contact table{
	width:100%;
	border-collapse:collapse;
	margin:0;
}
.contact table td{
	border-bottom:#97215e 1px solid;
	padding:1%;
	padding-bottom: 20px;
	padding-top: 20px;
}
.contact table td:nth-child(1){
width: 25%;
}
.contact table td .flex_komoku{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.contact table td .flex_komoku .left{
width: 60%
}
.contact table td .flex_komoku .right{
width: 40%;
box-sizing: border-box;
border: #C00 1px solid;
text-align: center;
color: #C00;
border-radius: 3px
}
.contact table textarea {
width: 80%;
height: 10em;
	border:none;
	background-color: #f4f4f4;
}
.contact table label{
	display:block;
}
.contact table input[type="text"]{
	width:90%;
	background-color: #f4f4f4;
	height: 35px;
	border: none
}
.contact table .num input[type="text"]{
	width:10%;
}
.contact table input[type="email"]{
	width:50%;
	border:#CCC 1px solid;
}
.contact .check{
padding-top: 20px;
text-align: center
}
.contact .check a{
color: #97215e;
text-decoration: underline
}
.contact input[type="submit"]{
	width:400px;
	text-align:center;
	font-size:1.6rem;
	margin-top:30px;
	margin-bottom:30px;
	display:block;
	cursor:pointer;
	margin-left:auto;
	margin-right:auto;
display: block;
background-color: #9C1846;
color: #FFF;
text-align: center;
font-weight: 600;
border-radius: 25px;
padding: 10px 0;
transition: 0.8s;

}
.contact input[type="submit"]:hover{
background-color: #c8084c
}
.contact .box2{
padding: 30px 0;
text-align: center;
}
/*個人情報-----------------------------------------*/
.privacy .box_privacy{
width: 800px;
max-width: 95%;
margin: 0 ;
}
.privacy dl{
 padding: 20px 0;
 border-top: #CCC 1px solid;
 margin-top: 40px;
}
.privacy dt{
 font-weight: 500;
 padding-bottom: 10px;
}
.privacy dd{
margin-left: 0;
margin-bottom: 30px;
}

}
/*===============================================
●スマホれいあうと設定 画面の横幅が650px以下
===============================================*/
@media screen and  (max-width: 650px){
#video-area{

    overflow: hidden;
}
#video-area .pattern{

}

#video {
   width: 100%
}

.index .main {
position: relative;
width: 100%
}

.main .catch{
width: 100%
}
.main img{
width: 100%
}

.index .box1{
background-image: url("../images/index/bg_box1.png");
padding: 40px 0
}
.index .box1 .flex_box1{
width: 90%;
margin: 0 auto;
}
.index .box1 .flex_box1 .inner{
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.index .box1 .flex_box1 .inner .merit{
width: 7%;
padding-top: 10px
}
.index .box1 .flex_box1 .inner .merit img{
width: 100%
}
.index .box1 .flex_box1 .inner .com{
box-sizing: border-box;
width: 85%;
border-top: #0e3376 1px solid;
color: #0e3376;
font-size: 2.0rem;
font-weight: 500;
letter-spacing: 0.1rem;
line-height: 160%;
padding: 10px 0;
margin-bottom: 20px
}
.index .box1 .flex_box1 .inner .com .num{
font-size: 2.8rem;
letter-spacing: 0.1rem;
font-style: italic
}
/* スクロールで出現 */

.fadeLeft{
animation-name:fadeLeftAnime;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeLeftAnime{
  from {
    opacity: 0;
  transform: translateX(-100px);
  }

  to {
    opacity: 1;
  transform: translateX(0);
  }
}


.fadeRight{
animation-name:fadeRightAnime;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeRightAnime{
  from {
    opacity: 0;
  transform: translateX(100px);
  }

  to {
    opacity: 1;
  transform: translateX(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeLeftTrigger,
.fadeRightTrigger{
    opacity: 0;
}

.index .box2{
background-image: url("../images/index/bg_box2.jpg");
background-position: center;
background-repeat: no-repeat;
padding: 80px 0;
background-color: #FFF;
color: #0e3376;
}
.index .box2 .text_information{
font-family: 'Noto Sans JP';
font-size: 1.7rem;
letter-spacing: 0.7rem;
text-align: center;
}
.index .box2 .news{
width: 90%;
margin: 0 auto;
padding-top: 40px
}
.index .box2 .news li{
display: block;
border-bottom: #666 1px dotted;
margin-bottom: 20px;
font-size: 1.6rem;
}
.index .box2 .news li .date{
font-size: 1.3rem;
margin-bottom: 5px
}
.index .box2 .text1_box2{
font-size: 2.5rem;
padding-top: 30px;
line-height: 160%;
text-align: center
}
.index .box2 .text2_box2{
font-size: 1.4rem;
padding-top:30px;
text-align: center
}
.index .box2 .bt_box2{
padding-top: 50px;
width: 800px;
max-width: 90%;
margin: 0 auto
}
.index .box2 .bt_box2 a{
display: block
}
.btn{
    /*アニメーションの起点とするためrelativeを指定*/
    position: relative;
  overflow: hidden;
    /*ボタンの形状*/
  text-decoration: none;
  display: inline-block;
    border: 1px solid #0e3376;
	color: #FFF;
	background-color: #0e3376;
    padding: 15px 30px;
    text-align: center;
    outline: none;
    /*アニメーションの指定*/   
    transition: ease .2s;
}

/*ボタン内spanの形状*/
.btn span {
  position: relative;
  z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
 color: #FFF;
 font-size: 1.6rem
}
.btn:hover span{
  color:#fff;
}
/*== 背景が流れる（左から右） */
.bgleft:before {
  content: '';
    /*絶対配置で位置を指定*/
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
    /*色や形状*/
  background-color: #365895;
  width: 100%;
  height: 100%;
    /*アニメーション*/
  transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
  transform: scale(0, 1);
  transform-origin: right top;
}
/*hoverした際の形状*/
.bgleft:hover:before{
  transform-origin:left top;
  transform:scale(1, 1);
}
.index .box2 .box_information{
width: 800px;
max-width: 80%;
border: #0e3376 1px solid;
padding: 3%;
font-size: 1.8rem;
text-align: center;
margin: 50px auto 150px auto;
line-height: 180%
}
.index .box2 .box_information .tel{
font-size: 3.5rem;

padding: 30px 0;
letter-spacing: 0.4rem
}
.index .box2 .box_information .time{
font-size: 1.4rem
}
.index .box2 .flex_limitted{
width: 80%;
margin: 50px auto
}
.index .box2 .flex_limitted .inner{
padding-bottom: 10px
}
.index .box2 .flex_limitted .inner img{
width: 100%
}
.index .box3{
background-image: url("../images/index/bg_box3.jpg");
padding: 80px 0;
color: #0e3376;
}
.index .box3 .text1_box3{
font-family: 'Noto Sans JP';
font-size: 1.7rem;
letter-spacing: 0.7rem;
text-align: center;
padding: 30px
}
.index .box3 .text2_box3{
font-size: 2.2rem;
padding-top: 30px;
text-align: center;
width: 80%;
margin: 0 auto;
line-height: 160%
}
.index .box3 .text3_box3{
font-size: 1.8rem;
padding-top:50px;
line-height: 150%;
width: 80%;
margin: 0 auto
}
.index .box3 .text4_box3{
font-size: 1.1rem;
width: 800px;
max-width: 90%;
margin: 0 auto;
padding-top: 50px
}

.index .box4 .box_subtitle{
background-image: url("../images/index/bg_box_subtitle.jpg");
background-repeat:repeat-y;
background-color: #FFF;
padding-top: 50px;
padding-bottom: 15px;
padding-left: 10%;
color: #0e3376;
}
.index .box4 .box_subtitle .box_left{
padding-left: 5%;
font-size: 2.0rem;
padding-top: 30px;
line-height: 130%;
border-left: #0e3376 1px solid;
}
.index .box4 .box_subtitle .box_left .text_subtitle{
font-size:3.8rem;
letter-spacing: 0.3rem;
font-family: "Times New Roman", Times, "serif";
padding-bottom: 10px
}
.index .box4 .box_subtitle .box_right{
font-size: 2.0rem;
line-height: 150%;
padding-left: 5%;
border-left: #0e3376 1px solid;
}
.index .box4 .box_subtitle .box_right .com{
padding: 20px 0
}
.index .box4 .photo{
width: 100%;
padding-top: 60%;
position: relative;
overflow: hidden
}
.index .box4 .photo img{
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
transition: 0.8s
}
.index .box4 .photo:hover img{
width: 110%;
height: auto;
}
.index .box4 .photo a{
display: block;
position: absolute;
font-size: 2.2rem;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
background-color: #036;
width: 200px;
height: 80px;
padding-top: 40px;
text-align: center;
color: #FFF;
transition: 0.5s
}
.index .box4 .photo a:hover{
 opacity:0.8;
}
.btnripple3:hover::before {
    content: '';
    /*絶対配置で波形の位置を決める*/
    position: absolute;
    left:0%;
    top:0%;
    /*波形の形状*/
    border: 2px solid #036;
    width: 200px;
    height: 200px;
    /*はじめは不透明*/
  opacity:1;
    /*アニメーションの設定*/
    animation:1s circleanime2 forwards;
}

/*波形が広がるアニメーション*/
@keyframes circleanime2{
  0%{
    transform: scale(0);
  }
  100%{
    transform:scale(2);
    opacity: 0;
  }
}

/*矢印の設定*/
.btnripple3::after {
    content: '';
    /*絶対配置で矢印の位置を決める*/
    position: absolute;
    top: 30%;
    right: -20px;
    /*矢印の形状*/
    width: 5px;
    height: 5px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    transform: rotate(45deg);
}
.index .box5{
padding: 100px 0;
background-color: #FFF;
margin: 0 auto
}
.index .box5 ul{
width: 80%;
margin: 0 auto;
line-height: 140%
}
.index .box5 ul li{
list-style: disc;
font-size: 1.3rem;
margin-bottom: 10px;
line-height: 120%
}
/*ロケーション--------------------------------------------------------------------------*/
.location{
font-family: 'Noto Serif JP';
}
.location .box_pagetitle{
width: 90%;
margin: 0 auto
}
.location .box_pagetitle img{
width: 100%;
}
.location .box1{
padding:40px 0
}
.location .box1 .text_box1{
text-align: center;
color: #0e3376;
font-size: clamp(2.0rem, 1.8vw , 2.8rem);
padding-bottom: 80px
}
.location .box1 .map{
width: 80%;
margin: 0 auto
}
.location .box1 .map img{
width: 100%;
}
/* スクロールで出現 */

.fadeTop{
animation-name:fadeLeftAnime;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeLeftAnime{
  from {
    opacity: 0;
  transform: translateY(-50px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}


.fadeBottom{
animation-name:fadeRightAnime;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeRightAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeLeftTrigger,
.fadeRightTrigger{
    opacity: 0;
}

.location .box4{

}
.location .box4 .box_nav_location{
padding: 25px 0;
border-bottom: #0e3376 1px solid;
border-top: #0e3376 1px solid;
margin-top: 50px
}
.location .box4 .nav_location{
width: 90%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.location .box4 .nav_location a{
display: block;
width: 50%;
text-align: center;
padding: 5px 0;
color: #0e3376;
font-size: 2.0rem;
line-height: 120%;
border: #0e3376 1px solid;
box-sizing: border-box;
border-collapse: collapse
}
.location .box4 .nav_location a .text_jp{
font-size: 1.4rem
}
.location .box4 .nav_location .carent{
background-color: #0e3376;
color: #FFF
}
.location .btn{
    /*アニメーションの起点とするためrelativeを指定*/
    position: relative;
  overflow: hidden;
    /*ボタンの形状*/
  text-decoration: none;
  display: inline-block;
    outline: none;
    /*アニメーションの指定*/   
    transition: ease .2s;
	background-color: #FFF;
	border: none
}

/*ボタン内spanの形状*/
.location .btn span {
  position: relative;
  z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
  color:#333;
}

.location .btn:hover span{
  color:#fff;
}

/*== 背景が流れる（左から右） */
.location .bgleft:before {
  content: '';
    /*絶対配置で位置を指定*/
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
    /*色や形状*/
  background:#0e3376;/*背景色*/
  width: 100%;
  height: 100%;
    /*アニメーション*/
  transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
  transform: scale(0, 1);
  transform-origin: right top;
}

/*hoverした際の形状*/
.location .bgleft:hover:before{
  transform-origin:left top;
  transform:scale(1, 1);
}
.location .box4 .box_location{
padding: 50px 0
}
.location .box4 .box_location .catname{
width: 80%;
margin: 0 auto;
display: flex;
align-items: center;
color:#0e3376;
font-size: 3.0rem
}
.location .box4 .box_location .catname::before,
.location .box4 .box_location .catname::after {
content: "";
height:1px;
flex-grow: 1;
background-color:#0e3376;
}
.location .box4 .box_location .catname:before {
margin-right: 20px;
}
.location .box4 .box_location .catname:after {
margin-left: 20px
}
.location .box4 .box_location .text_cat{
font-size: 2.0rem;
text-align: center;
color:#0e3376;
padding: 50px 0;
line-height: 150%
}
.location .box4 .box_location .photo1{
width: 90%;
margin: 0 auto;
padding-top: 50px
}
.location .box4 .box_location .photo1 img{
width: 100%
}
.location .box4 .box_location2{
width: 90%;
background-color: #DDD;
margin: 100px auto 0 auto;
}
.location .box4 .box_location2 .left{
width: 70%;
position: relative
}
.location .box4 .box_location2 .left img{
width: 100%;
margin-top: -60px;
margin-bottom: 30px
}
.location .box4 .box_location2 .left .text_left{
padding: 2% 5%;
}
.location .box4 .box_location2 .right{
padding: 20px 5%;
color:#0e3376;
}
.location .box4 .text_right1{
font-size: 1.6rem;
padding-bottom: 10px;
font-weight: 600

}
.location .box4 .text_right2{
font-size: 1.2rem;
padding-bottom: 3px;
}
.location .box4  .flex_location2 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.location .box4  .flex_location2 .inner{
width: 48%;
margin-bottom: 15px;
}
.location .box4  .flex_location2 .inner img{
width: 100%
}
.location .box4 .text_right3{
font-size: 1.4rem;
padding-bottom: 3px;
}
.location .box4 .box_location3{
padding: 50px 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 1200px;
max-width: 90%;
margin: 0 auto
}
.location .box4 .box_location3 .inner{
width: 48%;
margin-bottom: 50px;
color:#0e3376;
text-align: center;
font-size: 2.0rem
}
.location .box4 .box_location3 .photo{
padding-bottom: 20px;
}
.location .box4 .box_location3 .photo img{
width: 100%
}

.location .box6{
width: 80%;
margin: 0 auto;
}
.location .box6 li{
list-style: disc;
margin-bottom: 7px;
font-size: 1.2rem
}
/*設備--------------------------------------------------------------------------*/
.equipment{
font-family: 'Noto Serif JP';
}
.equipment .box_pagetitle{
width: 90%;
margin: 0 auto
}
.equipment .box_pagetitle img{
width: 100%;
}
.equipment .box1{
padding:50px 0 0 0
}
.equipment .box1 .text_box1{
text-align: center;
color: #0e3376;
font-size: clamp(2.0rem, 1.8vw , 2.8rem);
padding-bottom: 80px
}
.equipment .exterior a .box_style {
background: linear-gradient(#067298, #024560);
color: #efefef;
margin: 20px auto;
padding-bottom: 20px;
padding-top: 20px;
width: 90%
}
.equipment .exterior a:hover .box_style {
color: #bda37d;
 }
.equipment .exterior .box_style .flex_style {
display: flex;
flex-wrap: wrap;
justify-content: center
}
.equipment .exterior .box_style .flex_style .photo{
width: 90%;
padding: 0 2%;
margin-bottom: 25px
}
.equipment .exterior .box_style .flex_style .photo img {
width: 100%;
}  
.equipment .exterior .box_style .flex_style .com{
width: 90%;
padding: 0 2%
}

.equipment .exterior .box_style .flex_style .com .title_stylelist {
font-size: 3.0rem;
text-align: center;
font-family: "Times New Roman", Times, "serif"
}
.equipment .exterior .box_style .flex_style .com .subtitle_stlelist {
border-bottom: #efefef 1px solid;
font-size: 1.8rem;
font-weight: 500;
margin-bottom: 15px;
padding-bottom: 15px;
padding-top: 15px;
text-align: center;
}
.equipment .exterior .box_style .flex_style .com .gaiyo {
font-size: 1.4rem;
line-height: 170%;
text-align: left;
} 



.equipment .box_lead{
width: 90%;
margin: 0 auto;
padding: 5%
}
.equipment .box_lead .com{
padding: 4%;
}
.equipment .box_lead .com .text_lead1{
font-size: 1.8rem;
padding-bottom: 30px;
}
.equipment .box_lead .com .text_lead2{
font-size: clamp(2.0rem, 1.5vw , 2.5rem);
padding-bottom: 50px;
}
.equipment .box_lead .com .text_lead3{
font-size: 1.4rem;
padding-bottom: 50px;
}
.equipment .box_lead .photo{
margin: 0 auto;
width: 80%
}
.equipment .box_lead .photo img{
width: 100%
}
.location .box1 .map img{
width: 100%;
}
/* スクロールで出現 */

.fadeTop{
animation-name:fadeLeftAnime;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeLeftAnime{
  from {
    opacity: 0;
  transform: translateY(-50px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}


.fadeBottom{
animation-name:fadeRightAnime;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeRightAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeLeftTrigger,
.fadeRightTrigger{
    opacity: 0;
}

.equipment .box4{
padding-bottom: 90px;
}
.equipment .box4 .box_nav_equipment{
padding: 25px 0;
border-bottom: #0e3376 1px solid;
border-top: #0e3376 1px solid;
margin-top: 50px
}
.equipment .box4 .nav_equipment{
width: 95%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.equipment .box4 .nav_equipment a{
display: block;
width: 50%;
text-align: center;
padding: 5px 0;
color: #0e3376;
font-size: 2.0rem;
line-height: 120%;
box-sizing: border-box;
border-collapse: collapse;
border: #0e3376 1px solid
}
.equipment .box4 .nav_equipment a .text_jp{
font-size: 1.4rem
}
.equipment .box4 .nav_equipment .carent{
background-color: #0e3376;
color: #FFF
}
.equipment .btn{
    /*アニメーションの起点とするためrelativeを指定*/
    position: relative;
  overflow: hidden;
    /*ボタンの形状*/
  text-decoration: none;
  display: inline-block;
    outline: none;
    /*アニメーションの指定*/   
    transition: ease .2s;
	background-color: #FFF;
	border: none
}

/*ボタン内spanの形状*/
.equipment .btn span {
  position: relative;
  z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
  color:#333;
}

.equipment .btn:hover span{
  color:#fff;
}

/*== 背景が流れる（左から右） */
.equipment .bgleft:before {
  content: '';
    /*絶対配置で位置を指定*/
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
    /*色や形状*/
  background:#0e3376;/*背景色*/
  width: 100%;
  height: 100%;
    /*アニメーション*/
  transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
  transform: scale(0, 1);
  transform-origin: right top;
}

/*hoverした際の形状*/
.equipment .bgleft:hover:before{
  transform-origin:left top;
  transform:scale(1, 1);
}
.equipment .box4 .box_equipment{
padding: 50px 0;
background-image: url("../images/index/bg_box2.jpg");
background-repeat: no-repeat;
background-position: bottom
}
.equipment .box4 .box_equipment .catname{
width:80%;
margin: 0 auto;
display: flex;
align-items: center;
color:#0e3376;
font-size: 3.0rem
}
.equipment .box4 .box_equipment .catname::before,
.equipment .box4 .box_equipment .catname::after {
content: "";
height:1px;
flex-grow: 1;
background-color:#0e3376;
}
.equipment .box4 .box_equipment .catname:before {
margin-right: 20px;
}
.equipment .box4 .box_equipment .catname:after {
margin-left: 20px
}
.equipment .box4 .box_equipment .text_cat{
font-size: 2.0rem;
text-align: center;
color:#0e3376;
padding: 50px 0;
line-height: 150%
}
.equipment .box4 .box_equipment2{
width: 85%;
margin: 0 auto;
}
.equipment .box4 .box_equipment2 .left{
position: relative;
padding-bottom: 20px
}
.equipment .box4 .box_equipment2 .eco{
background-color: #F4FBE9;
padding: 3%
}
.equipment .box4 .box_equipment2 .left img{
width: 100%;
}
.equipment .box4 .box_equipment2 .right{
color:#0e3376;
}
.equipment .box4 .box_equipment2 .right .inner{
padding-bottom: 40px;
}
.equipment .box4 .box_equipment2 .right .photo{
padding-bottom: 20px;
width: 70%
}
.equipment .box4 .box_equipment2 .right .photo img{
width: 100%
}
.equipment .box_cost{
width: 950px;
max-width: 90%;
margin: 50px auto
}
.equipment .cost img{
width: 100%
}
.equipment .box4 .text_right1{
font-size: 1.8rem;
padding-bottom: 3px;
}
.equipment .box4 .text_right2{
font-size: 1.2rem;
padding-bottom: 3px;
}
.equipment .box4  .flex_equipment2 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.equipment .box4  .flex_equipment2 .inner{
width: 48%;
margin-bottom: 15px;
}
.location .box4  .flex_equipment2 .inner img{
width: 100%
}
.equipment .box4 .text_right3{
font-size: 1.4rem;
padding-bottom: 3px;
}

.equipment .box4 .box_equipment3{
padding: 50px 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 90%;
margin: 0 auto
}
.equipment .box4 .box_equipment3 .inner{
width: 48%;
margin-bottom: 50px;
color:#0e3376;
}
.equipment .box4 .box_equipment3 .photo{
padding-bottom: 20px;
}
.equipment .box4 .box_lequipment3 .photo img{
width: 100%
}
.equipment .box4 .box_equipment4{
background-color: #f4f4f4;
padding: 100px 0
}
.equipment .box4 .box_equipment4 .flex_equipment{
display: flex;
flex-wrap: wrap;
justify-content:space-between;
width: 1300px;
max-width: 90%;
margin: 0 auto
}
.equipment .box4 .box_equipment4 .flex_equipment .inner{
width: 48%;
}
.equipment .box4 .box_equipment4 .flex_equipment .inner img{
width: 100%;
}
/*プラン--------------------------------------------------------------------------*/
.plan{
font-family: 'Noto Serif JP';
}
.plan .box_pagetitle{
width: 90%;
margin: 0 auto
}
.plan .box_pagetitle img{
width: 100%;
}
.plan .box1{
padding:50px 0 50px 0
}
.plan .box1 .text_box1{
text-align: center;
color: #0e3376;
font-size: clamp(2.0rem, 1.8vw , 2.8rem);
padding-bottom: 80px;
line-height: 160%
}


.fadeTop{
animation-name:fadeLeftAnime;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeLeftAnime{
  from {
    opacity: 0;
  transform: translateY(-50px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}


.fadeBottom{
animation-name:fadeRightAnime;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeRightAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeLeftTrigger,
.fadeRightTrigger{
    opacity: 0;
}

.plan .parth{
width: 100%;
margin-bottom: 40px
}

.plan .parth  .video {
    width: 100%
}
.plan .parth  img {
    width: 100%
}
.plan .box2{
width: 90%;
background-color: #f4f4f4;
margin: 40px auto;
padding: 50px 0
}
.plan .box2 .text_box2{
color: #0e3376;
font-size: clamp(2.0rem, 1.0vw , 2.4rem);
padding-bottom: 40px;
line-height: 160%;
width: 80%;
margin: 0 auto
}
.plan .box2 .text2_box2{
color: #0e3376;
font-size: 1.5rem;
padding-bottom: 30px;
line-height: 160%;
width: 80%;
margin: 0 auto
}
.plan .box2 .flex_box2{
width: 70%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.plan .box2 .flex_box2 .inner{
width: 100%;
background-color: #FFF;
color: #0e3376;
padding: 40px 0
}
.plan .box2 .flex_box2 .inner .com{
width: 80%;
margin: 0 auto;
color: #0e3376;
font-size: 2.0rem;
line-height: 200%;;
text-align: center
}
.plan .box2 .flex_box2 .inner .photo{
width: 60%;
margin: 0 auto;
padding-top: 30px;
}
.plan .box2 .flex_box2 .inner .photo img{
width: 100%;
}
.plan .box3{
width: 80%;
margin: 50px auto;
}
.plan .box3 .left{
width: 100%;
}
.plan .box3 .left img{
width: 100%;
}
.plan .box3 .right{
padding-top: 30px
}
.plan .box3 .right .com{
background-color: #e4dbc4;
border-radius: 25px;
padding: 60px 7%;
color: #6a5f40;
}
.plan .box3 .right .com .text_box3{
font-size: 1.8rem;
line-height: 180%;
padding-bottom: 10px;
} 
.plan .box3 .right .com .text2_box3{
font-size: 1.4rem;
line-height: 160%;
}
.plan .box3_small{
margin: 50px auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.plan .box3_small .inner{
border: #666 1px solid;
padding: 1%;
width: 90%;
margin-bottom: 20px
}
.plan .box3_small .inner img{
width: 100%
}
.plan .box4{
background-color: #000;
padding: 50px 0
}
.plan .box4_in{
width: 1300px;
max-width: 98%;
margin: 50px auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 50px

}
.plan .box4_in .inner_left{
width: 95%;
margin-bottom: 15px
}
.plan .box4_in .inner_right{
width: 95%;
margin-bottom: 15px
}
.plan .box4_in .inner img{
width: 100%
}
.plan .box4 .bt_3d a{
display: block;
width: 90%;
margin: 80px auto 40px auto;
box-sizing: border-box;
border: #FFF 2px solid
}
.plan .box4 .bt_3d a img{
width: 100%
}
.plan .subtitle{
width: 90%;
margin: 0 auto;
font-size: 2.0rem;
font-weight: 800;
text-align: center;
color: #0e3376;
border-bottom: #0e3376 2px solid;
padding-bottom: 10px;
padding-top: 30px
}
.plan .box5{
padding-top: 40px;
}
.plan .box5 .photo{

}
.plan .box5 .photo img{
width: 100%
}
.plan .box5  .img_madori{
padding: 30px 0
}
.plan .box5  .img_madori a{
display: block;
}
.plan .box5  .img_madori a img{
width: 100%
}
.plan .box5 .bt_madori{
padding-bottom: 50px
}
.plan .box5 .bt_madori a{
display: block;
width:90%;
margin: 0 auto;
background-color: #0e3376;
color: #FFF;
text-align: center;
font-size: 1.8rem;
padding: 40px 0
}
.plan .box6{
width: 80%;
margin: 0 auto;
padding: 20px 0;
font-size: 1.2rem
}
.plan .box6 li{
list-style: disc;
margin-bottom: 7px;
}

.plan .box7{
padding: 50px 0;
text-align: center;
color: #C1A339;
font-size: 1.6rem;
font-weight: 600;
  background-image: radial-gradient(circle, rgba(57, 99, 252, 1), rgba(1, 18, 61, 1));
margin-bottom: 50px
}
/*アクセス--------------------------------------------------------------------------*/
.access{
font-family: 'Noto Serif JP';
color: #0e3376;
}
.access .box_pagetitle{
width: 90%;
margin: 0 auto;
}
.access .box_pagetitle img{
width: 100%;
}
.access .box1{
padding:100px 0 100px 0;
width: 80%;
margin: 0 auto;
color: #0e3376;
}
.access .box1 .text_box1{
text-align: center;
color: #0e3376;
font-size: clamp(2.0rem, 1.8vw , 2.8rem);
padding-bottom: 50px
}
.access .box2{
padding-bottom: 100px;
}
.access .catname{
width: 80%;
margin: 0 auto;
display: flex;
align-items: center;
color:#0e3376;
font-size: 3.0rem
}
.access .catname::before,
.access .catname::after {
content: "";
height:1px;
flex-grow: 1;
background-color:#0e3376;
}
.access .catname:before {
margin-right: 20px;
}
.access .catname:after {
margin-left: 20px
}
.access .box2 .rosen{
width: 90%;
margin: 0 auto;
position: relative;
height: 60vw;
overflow:hidden;
border: #999 1px solid;
}
.access .box2 .rosen img{
width: 150%;
position: absolute;
margin-left:-25%;
display: block;
}
.access .box3{
padding: 100px 0 50px 0;
background-image: url("../images/index/bg_box3.jpg");
}
.access .box3 .flex_box3{
width: 1000px;
max-width: 90%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.access .box3 .flex_box3 .inner{
width: 80%;
position: relative;
margin-bottom: 30px
}
.access .box3 .flex_box3 .inner .com{
text-align: center;
font-size: 1.6rem
}
.access .box3 .flex_box3 .inner .com .title_box3{
font-size: 2.0rem;
padding-bottom: 30px;
line-height: 150%;
}
.access .box3 .flex_box3 .inner .photo{
width: 100%
}
.access .box3 .flex_box3 .inner .photo img{
width: 100%
}
.access .box4{
padding-bottom: 30px;
}
.access .box4 .flex_box4{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.access .box4 .flex_box4 .inner{
width: calc(100% / 5);
position: relative
}
.access .box4 .flex_box4 .inner img{
width: 100%;
}
.access .box4 .flex_box4 .inner .com{
width: 100%;
text-align: center;
position: absolute;
top:50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
color: #FFF;
font-size: 2.5vw;
font-weight: 300;
font-family: 'Noto Sans JP';
}
.access .box4 .flex_box4 .inner .com .title_box4{
font-size: 1.5vw;
padding-bottom: 1.5vw;
letter-spacing: 0.1em
}
.access .box4 .flex_box4 .inner .com .min{
font-size: 1.5vw;
padding-bottom: 20px;
}
.access .box6{
padding: 100px 0;
background-color: #f4f4f4;
margin-bottom: 50px
}
.access .box6 .text_access1{
padding: 50px 5% 0 5%
}
.access .box6 .text_access2{
padding: 20px 5% 0 5%
}
.access .box6 .photo_box6{
margin: 40px 0;
position: relative
}
.access .box6 .photo_box6 img{
width: 100%;
}
.access .box6 .photo_box6 .com{
position: absolute;
color: #FFF;
text-align: center;
top: 0%;
transform: translateY(-50%);
font-size: 2.2rem
}
.access .box6 .text_box6{
font-size: 1.6rem;
width: 85%;
margin: 0 auto;
}
.access .box6 .map_trafic{
width: 90%;
margin: 0 auto;
padding: 50px 0
}
.access .box6 .map_trafic .map{
width: 100%;
margin-bottom: 30px
}
.access .box6 .map_trafic .map img{
width: 100%
}
.access .box6 .map_trafic .guide{
width: 100%;
border: #999 1px solid;
padding: 2%;
font-size: 1.3rem
}
.access .box6 .map_trafic .guide dt{
font-size: 1.8rem;
font-weight: 600;
padding-bottom: 20px;
}
.access .box6 .map_trafic .guide dt i{
font-size:3.5rem;
color: #666
}
.access .box6 .map_trafic .guide dd{
font-size: 1.6rem;
font-weight: 400;
line-height: 180%;
padding-bottom: 5px;
border-bottom: #666 1px dotted;
margin-bottom: 30px;
margin-left: 0
}

/*物件概要--------------------------------------------------------------------------*/
.outline{
font-family: 'Noto Serif JP';
color: #0e3376;
}
.outline .box_pagetitle{
width: 90%;
margin: 0 auto;
}
.outline .box_pagetitle img{
width: 100%;
}
.outline .title_outline{
font-size: 2.0rem;
font-weight: 600;
padding-bottom: 40px
}
.outline .box1{
border: #666 1px solid;
width: 1100px;
max-width: 80%;
margin: 40px auto;
padding: 5%
}
.outline .box1 table{
width: 100%;
}
.outline .box1 td{
padding: 2%;
line-height: 140%;
display: block
}
.outline .box1 td:nth-child(1){
font-weight: 600
}
.outline .box1 td:nth-child(2){
border-bottom: #666 1px dotted;
margin-bottom: 20px
}
/*現地案内図--------------------------------------------------------------------------*/
.map{
font-family: 'Noto Serif JP';
color: #0e3376;
}
.map .box_pagetitle{
width: 90%;
margin: 0 auto;
}
.map .box_pagetitle img{
width: 100%;
}
.map .box1{
width: 90%;
margin: 100px auto;
}
.map .box1 img{
width: 100%
}
.map .box2{
margin: 50px auto;
border: #0e3376 1px solid;
}
.map .box2 .title_route{
background-color: #0e3376;
color: #FFF;
font-size: 1.8rem;
padding: 10px 0
}
.map .box2 .flex_route{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 5%;
}
.map .box2 .flex_route .inner{
width: 30%;
margin-bottom: 30px;
}
.map .box2 .flex_route .inner .photo{
padding-bottom: 10px;
}
.map .box2 .flex_route .inner .photo img{
width: 100%
}
.map .box2 .flex_route .inner .com{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.map .box2 .flex_route .inner .com .num{
width: 10%;
color:  #0e3376;
font-weight: 600;
text-align: center;
font-size: 2.0em;
border-radius: 20px;
}
.map .box2 .flex_route .inner .com .text_route{
width: 88%
}
.map .box3{
width: 1100px;
max-width: 90%;
margin: 50px auto;
}
.map .box3 img{
width: 100%
}
.map .box3 .box4{
border: #0e3376 1px solid;
text-align: center;
padding: 50px 0;
margin: 50px 0
}
.map .box3 .box4 .text_box4{
font-size: 1.6rem;
line-height: 160%
}
.map .box3 .box4 .tel{
font-size: 2.5rem;
padding: 30px 0
}
.map .box3 .box4 .time{
font-size: 1.2rem
}
.map .box_google{
height: 150px;
background-color: #f4f4f4;
position: relative;
margin: 150px 0 150px 0
}
.map .box_google .box_circle{
background-color: rgba(255,255,255,0.9);
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.35);
width: 250px;
height: 250px;
position: absolute;
border-radius: 200px;
top:50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}
.map .box_google .box_circle .a{
position: relative;
display: block;
color: #000;
}
.map .box_google .box_circle a .point{
position: absolute;
width: 100%;
top:50%;
transform: translateY(-50%);
text-align: center;
font-size: 1.8rem;
line-height: 200%
}
.map .box_google .box_circle a .point i{
font-size: 6.5rem;
color: #666;
transition: 0.5s
}
.map .box_google .box_circle a:hover .point i{
color: #C8898A
}
/*お問い合わせ-----------------------------------------*/
.contact{
font-family: 'Noto Sans JP';
}
.contact .box1{
width: 1000px;
max-width: 90%;
margin: 0 auto;
font-size: 1.7rem;
line-height: 220%;
padding: 50px 0 100px 0
}
.contact .box1 .text_red{
color: #C00
}
.contact .box_form{
width: 1000px;
max-width: 90%;
padding-top: 20px;
border-top:#97215e 1px solid;
margin: 0 auto
}
.contact table{
	width:100%;
	border-collapse:collapse;
	margin:0;
}
.contact table td{
	border-bottom:#97215e 1px solid;
	padding:1%;
	padding-bottom: 20px;
	padding-top: 20px;
}
.contact table td:nth-child(1){
width: 25%;
}
.contact table td .flex_komoku{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.contact table td .flex_komoku .left{
width: 60%
}
.contact table td .flex_komoku .right{
width: 40%;
box-sizing: border-box;
border: #C00 1px solid;
text-align: center;
color: #C00;
border-radius: 3px
}
.contact table textarea {
width: 80%;
height: 10em;
	border:none;
	background-color: #f4f4f4;
}
.contact table label{
	display:block;
}
.contact table input[type="text"]{
	width:90%;
	background-color: #f4f4f4;
	height: 35px;
	border: none
}
.contact table .num input[type="text"]{
	width:10%;
}
.contact table input[type="email"]{
	width:50%;
	border:#CCC 1px solid;
}
.contact .check{
padding-top: 20px;
text-align: center
}
.contact .check a{
color: #97215e;
text-decoration: underline
}
.contact input[type="submit"]{
	width:400px;
	text-align:center;
	font-size:1.6rem;
	margin-top:30px;
	margin-bottom:30px;
	display:block;
	cursor:pointer;
	margin-left:auto;
	margin-right:auto;
display: block;
background-color: #9C1846;
color: #FFF;
text-align: center;
font-weight: 600;
border-radius: 25px;
padding: 10px 0;
transition: 0.8s;

}
.contact input[type="submit"]:hover{
background-color: #c8084c
}
.contact .box2{
padding: 30px 0;
text-align: center;
}
}