@charset "UTF-8";
/* CSS Document */
 body
 {
  font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
}
 #top{
     background-image: url(../image/top_slider3.jpg);
	   }
.hero {
    text-align: center;
	padding-top: 120px;
	padding-bottom: 120px;
}
.hero_header {
    font-size: 3rem;	/* 16px × 3          = 48px */
	text-align: center;
	color: #FFFFFF;
	margin: 0px;
-webkit-text-stroke: 1px #000;
  text-stroke: 1px #000;
}
.foot-logo {
	margin: 0 auto;
}
.foot-area{
text-align: center;
padding-top: 40px; 
       }  
.logo-area img{
  width: 100%;
margin: 0;
}
 
.copy-area {
display: flex;
height: 80px;
justify-content: center;
align-items: center;
width: 100%;
background-color: #0f6634;
}
.copy-ch {
    font-size: 0.875rem;
    color: #C4C4C4;
}


 .inner{
padding: 0 15px;
margin: 0 auto; 
       }
.movie-area{
min-width: 300px;
margin: 20px auto; 
width: 100%;
margin-top: 30px;
margin-bottom: 30px;
}
.movie-title{
    margin-bottom: 20px;      
    font-size: 1.375rem;	/* 16px × 1.375   = 22px */
	text-align: center;
	}
.movie-subtitle{
font-size: 1.125rem;
margin-bottom: 5px;
}
.movie-content{
  display:flex;
  flex-wrap: wrap;
  flex-direction: column;
box-shadow:1px 1px 3px #aaa;
}
.movie-info{
text-align: center;
padding: 50px;
}
.movie-txt{
font-size: 0.85rem;
padding: 0 10px;
}
.movie-tube{
  margin: 50px auto 0;
  width: 80%;
}
.tube-inner{
  position: relative;
  padding-bottom: calc(315 / 560 * 100%); /* 16:9の縦幅*/
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.tube >img{
border: 1px #ff0000 solid;
border-radius: 10px;
width: 120px;
margin: 10px;
padding: 10px;
}
.wrapper {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 4%; 		/*スマホ向け */
	display:flex;
  flex-wrap: wrap;
  flex-direction: column;
}
.title-cap {
display: flex;
align-items: center;
text-align: center;
margin-bottom: 40px;
}
.title-cap:before,
.title-cap:after {
content: "";
flex-grow: 1;
border-top: 2px solid #0f6634;
}
.title-cap:before {
margin-right: 3rem;
}
.title-cap:after {
margin-left: 3rem;
}
.sub-title{
    margin-bottom: 40px;      
    font-size: 1.375rem;	/* 16px × 1.375   = 22px */
    padding: 0 8px 8px;
    border-bottom: 2px #0bd solid;
    font-weight: bold;       
      
       }
.tagline {
	text-align: center;
	font-size: 1.5rem;	/* 16px × 1.5   = 24px */
	font-weight: bold;
	color: #FFFFFF;
	margin: 8px 0;
	letter-spacing: 1px;
    text-shadow:2px 2px 3px #000;
}
.button {
    font-size: 0.75rem;
	text-align: center;
	background-color: #0bd;
	padding: 9px 16px;
	vertical-align: middle;
	border-radius: 5px;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: #FFFFFF;
	transition: all 0.3s linear;
}
.button:hover {
	background-color: #0090aa;
	color: #C4C4C4;
	cursor: pointer;
}
       
.alpha:active,
.alpha:hover {
  opacity: 0.5;
  filter: alpha(opacity=50);
  -ms-filter: "alpha(opacity=50)";
}
       

/* プランリスト */
#plan .plan-area{
    display: flex;
    justify-content: space-between;
       }
.plan-area{
margin-top: 30px;
margin-bottom: 30px;
}
.plan-item{
background-color: #fff;
flex:1;
margin-top: 0 15px ;
}
.plan-content{
  display:flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.cardunit >.plan-item:nth-of-type(3n){
margin-right: 0;

}
.plan-info{
text-align: center;
padding: 15px;
}
.plan-info > :last-child{
margin-bottom: 0;
}
.plan-title{
font-size: 1.125rem;
font-weight: bold;
padding: 50px 0px;
margin-bottom: 40px;
}
.plan-txt{
font-size: 0.85rem;
padding: 0 60px;
}
.pict{
position: relative;
padding-top:56.25%;
}
.pict >img {
    border-radius: 50%;  /* (=円形) */
    width:  180px;       /* ※表示サイズ */
    height: 180px;       /* ※表示サイズ */
	object-fit:cover;	/* ※縦横比固定 */
	object-position:-20px 0px;	/* 画像表示位置 */
    display: block;          /* 複数の画像を横に並べたい場合 */
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

.row-area{
margin-bottom: 30px;
}

 /* keyaman */
.key-title{
font-size: 1.125rem;
font-weight: bold;
margin-bottom: 20px;
}
 /* patent re*/
 .row-title{
font-size: 1.125rem;
color:seagreen;
/*text-align: center;*/
font-weight: bold;
margin-left:16%;
margin-bottom: 8px;
}
 .bold-txt{
font-weight: bold;
font-size: 0.875rem;
margin-bottom:10px;
}
.intro >img {
	margin-top: 20px; 
    width:  100%;       /* ※表示サイズ */
	}
.row-fig >img {
	margin-top: 20px;  
	width: 100%		/* ※表示サイズ */
	}
 /* profile */
 table{
  margin: 0px auto;  
  width: 95%;
  border-collapse: collapse;/*一重線に変える*/
}
 .tbl-res th{
  width: 30%;
  background: #b8d221;
  padding : 10px;
}

 .tbl-res td{
  width: 70%;
  padding : 20px 30px;
}
 .tbl-res th,td{
 font-size: 0.85rem;
  border-bottom:solid 1px #aaaaaa;
}
 .tbl-res td:nth-child(2) {
  border-top: solid 1px #aaaaaa;
}

 /*--- map ---*/
#location{
           padding: 4% 0 0;
       }
#location .wrapper{
    display: flex;
    justify-content: space-between;
       }
 .location-info{
    width: 100%;
       }
  .location-map{
    width: 100%;
       } 
  .location-info p{
      padding: 0px 0px 12px;
       }
  .location-info ul li{
   font-size: 0.85rem;
      padding: 12px 0px 12px 4%;
       }
/* iframe */
       iframe{width: 100%;}
	   
.access-area{
  display:flex;
  flex-direction: column;
  margin: 2em auto;
  width: 90%;
}
.access-line {
 padding: 0 40px;
flex: 1;
}
 .access-item{
 font-size: 0.875rem;
 flex: 1;
 position: relative;
 margin: 2em auto;
padding-bottom: 20px;
 width: 90%;
 border: 1px solid #666 ;
 border-top: none;
  border-right: none;
 }
.access-item dl{
  display:flex;
  flex-flow: row nowrap;
}
.access-item dt{
  padding: 0 20px;
  font-size: 0.875rem;
}

.access-item dd{
  padding: 0 10px;
  font-size: 0.875rem;
  }

.box-title{
    margin-bottom: 10px;      
    font-size: 0.875rem;
    padding: 0 20px 2px;
    border-bottom: 2px #3063C0 solid;
    font-weight: bold;       
      
       }
.box-subtitle{
padding: 0 20px;
font-size: 0.875rem;
font-weight: bold;
color: #435E9A;
}
	   
.sp-only{
display: block;
}
hr.style1{
	width: 80%;
	border-top: 2px solid #BDD0EA;
	margin: 30px auto;
}
/*------------- メディアクエリ -----------------*/
@media screen and (min-width:768px) {

#contentBody {
  padding: 15px 0 40px;
  background-image: url(../image/bg-lside.png), url(../image/bg-rside.png);
  background-repeat: no-repeat;
  background-position: 50% 50px, 50% 2000px;
}
#plan .plan-area{
background: rgba(255,255,255,.5);
       }

 #top{
       max-width:  2100px;
	  	 background-size:cover;   
	   }
.hero {
    text-align: center;
	padding-top: 220px;
	padding-bottom: 220px;
}
.foot-area_copy {
	color: #C4C4C4;
  text-align: center;
    font-size: 0.875rem;
  width: 100%;
    display: inline-block;
	padding: 10px 0;
	background-color: #0f6634;
}
.movie-area{
max-width: 800px;
width: 60%;
}

.title-cap {
margin-bottom: 60px;
}
.title-cap:before {
margin-right: 6rem;
}
.title-cap:after {
margin-left: 6rem;
}
.wrapper {
  width: 80%;
  flex-wrap: wrap;
  flex-direction: row;
}
.inner{
  max-width: 1200px; 
}
.plan-area{
margin-top: 50px;
margin-bottom: 50px;
}
.plan-item{
flex:1;
margin-top: 0 15px;
}
.plan-content{
width: 80%;
  flex-direction: row;
    margin: 30px auto; 
}
 /* keyman */
.key-content{
margin: 0px auto;  
width: 80%;
display: flex;
flex-direction: row-reverse;	/* 並びを行-逆 */
align-items: center;
}
.key-txt{
flex: 1;	/* 大きさ揃える */
font-size: 0.85rem;
margin-left:40px;
}
 /* サブタイトル-画像-文字並び */
.row-area{
margin-bottom: 50px;
}
.row-content{
margin: 0px auto;  
width: 80%;
display: flex;
flex-direction: row-reverse;	/* 並びを行-逆 */
align-items: center;
}
.row-txt{
flex: 1;	/* 大きさ揃える */
font-size: 0.85rem;
margin-left:16%;
margin-bottom:28px;
}

.intro >img {
    width:  300px;       /* ※表示サイズ */
	}
.row-fig >img {
	margin-top: 0px;
    width:  200px;       /* ※表示サイズ */
	}
  /* profile */
 table{
  margin: 0px auto;  
  width: 70%;
  border-collapse: collapse;/*一重線に変える*/
}
.logo-area img{
  width: 400px;
margin-bottom: 65px;
}
 /*--- map ---*/
 .location-info{
    width: 64%;
       }
  .location-info ul li{
   font-size: 0.85rem;
      padding: 12px 0;
       }
  .location-map{
    width: 32%;
       }
.access-area {
flex-direction: row;
max-width: 60%;
}
	   
	   
.sp-only{
display: none;
}
hr.style1{
	width: 80%;
	border-top: 2px solid #BDD0EA;
	margin: 50px auto;
}
 }