@charset "utf-8";
/* @group reset */
 *{margin: 0;padding: 0}
a { text-decoration : none}
ul, ol { list-style : none}
img { vertical-align : middle}
/* @end */

/*画像 */
img{ max-width : 100%}
/* @end */
/* @group HTML */
html {
color:#555555;
font-family : verdana,"ヒラギノ丸ゴ ProN W4","Hiragino Maru Gothic ProN","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic", sans-serif;
font-size :100%;
line-height : 1.3
}
/* @end */
/*見出しの指定 */
h1,h2,h3,h4,h5,h6 { margin-bottom : 24px}
h1 {
font-size: 48px; 
line-height: 1} /* 48px */
h2 {
font-size : 36px;
line-height : 1.3333} /* 48px */
h3{
font-size : 24px;
line-height : 1} /* 24px */ 
hgroup h2,h4,h5,h6 { 
font-size : 16px;
line-height : 1.5} /* 24px */
/* @end */
/*ヘッダー部分の指定 */
header { text-align : center;padding-top : 36px}
header h1 { margin-bottom : 24px}
header h2 { color : #555}
/*call部分の指定 */
#call_area {
position:absolute;
right:0px;
top:10px;
width:100px;
padding-right:5px;
text-align:right;
}
/* @end */
/*ナビゲーションバー */
nav {
margin-bottom : 24px;
background-color: #2c72dc;
background: -moz-linear-gradient(top, rgba(44,114,220,0.71) 0%, rgba(26,81,162,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(44,114,220,0.71)), color-stop(100%,rgba(26,81,162,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(44,114,220,0.71) 0%,rgba(26,81,162,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(44,114,220,0.71) 0%,rgba(26,81,162,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(44,114,220,0.71) 0%,rgba(26,81,162,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(44,114,220,0.71) 0%,rgba(26,81,162,1) 100%); /* W3C */
}
nav ul { overflow : hidden}
nav ul li { width : 20%; float : left}
nav ul li a {
display : block;
color : #d5dadd;
padding : 10px 0}
nav ul li a:hover {
color : white;
background-color : #00214f}
/* @end */
/*メインコンテンツ指定 */
#contents {
width : 90%;
max-width: 1200px;
margin : 0 auto;
text-align : center}
#contents p { 
margin-bottom : 24px;
text-align : left}
#contents img { 
margin-bottom : 24px; 
box-shadow : none}
/* @end */

#main img {
box-shadow : 0 0 12px #000}
/* @end */

/**** 注意書き ****/
.memo{
font-size:70%;
}
/* @end */
/*マウスオーバーエフェクト */
.a {
    outline:none;
}
.a img{
    position:relative;
    -webkit-transition:opacity 0.5s; /*Safari,Chrome*/
    -o-transition       :opacity 0.5s; /*Opera*/
    -moz-transition   :opacity 0.5s; /*Firefox*/
    transition           :opacity 0.5s; /*CSS3 Real Property*/
}
.a:focus img,
a:hover img {
    filter:alpha(opacity=50); /*IE*/
    -moz-opacity:0.5; /*Older Firefox*/
    opacity:0.5; /* Modern Browsers*/
}
/* 押したとき */
a:active img {
    top:1px;
    left:1px;
}
/* @end */
/**** 推薦 ****/


.h_bordee {
background-color:#1b674c;
border-top:1px solid #1b674c;
border-right:1px solid #1b674c;
border-bottom:1px solid none;
border-left:1px solid #1b674c;
padding:20px 10px 2px 0px;
border-radius: 8px 8px 0px 0px;	
-moz-border-radius: 0px; /* FireFox */
-webkit-border-radius:8px 8px 0px 0px;/* Chrome & Safari */
font-size:120%;
font-weight: bold;
color:#ffffff;
line-height: 5px;
}	

.h_bordee2 {
border-top:1px solid none;
border-right:1px solid #1b674c;
border-bottom:1px dashed #8a4828;
border-left:1px solid #1b674c;
padding: 10px 15px 0px 15px;
border-radius: 0px;	
-moz-border-radius: 0px; /* FireFox */
-webkit-border-radius: 0px;/* Chrome & Safari */
font-size:100%;
font-weight: normal;
color:#555;}	

.h_bordee3 {
border-top:1px solid none;
border-right:1px solid #1b674c;
border-bottom:1px solid #1b674c;
border-left:1px solid #1b674c;
padding: 10px 15px 0px 15px;
border-radius: 0px 0 8px 8px;	
-moz-border-radius: 8px; /* FireFox */
-webkit-border-radius: 0px 0 8px 8px;/* Chrome & Safari */
font-size:100%;
font-weight: normal;
color:#555;}	
/* @end */
.h_bordee4 {
background-color:#5d8cde;
border-top:1px solid #5d8cde;
border-right:1px solid #5d8cde;
border-bottom:1px solid none;
border-left:1px solid #5d8cde;
padding:20px 10px 2px 0px;
border-radius: 8px 8px 0px 0px;	
-moz-border-radius: 0px; /* FireFox */
-webkit-border-radius:8px 8px 0px 0px;/* Chrome & Safari */
font-size:120%;
font-weight: bold;
color:#ffffff;
line-height: 5px;
}	

.h_bordee5 {
border-top:1px solid none;
border-right:1px solid #5d8cde;
border-bottom:1px solid #5d8cde;
border-left:1px solid #5d8cde;
padding: 10px 15px 0px 15px;
border-radius: 0px 0 8px 8px;	
-moz-border-radius: 8px; /* FireFox */
-webkit-border-radius: 0px 0 8px 8px;/* Chrome & Safari */
font-size:100%;
font-weight: normal;
color:#555;}	

/* @end */


<style>
.sample {
line-height: 1.5;
}
</style>



/**** ボーダー　取り決め ****/

#frame2
{
border-style: solid;
border-width: 24px;
-moz-border-image:url(../images/border.png) 40 40 round; /* Firefox */
-webkit-border-image:url(../images/border.png) 40 40 round; /* Safari and Chrome */
-o-border-image:url(../images/border.png) 40 40 round; /* Opera */
border-image:url(../images/border.png) 40 40 fill repeat;
box-shadow : 0 0 12px #000;
}

.frame
{
border-style: solid;
border-width: 32px 43px 29px 38px;
-moz-border-image: url(http://b-bull.backdrop.jp/m-hanatani/images/border.png) 32 43 29 38 repeat;
-webkit-border-image: url(http://b-bull.backdrop.jp/m-hanatani/images/border.png) 32 43 29 38 repeat;
-o-border-image: url(http://b-bull.backdrop.jp/m-hanatani/images/border.png) 32 43 29 38 repeat;
border-image: url(http://b-bull.backdrop.jp/m-hanatani/images/border.png) 32 43 29 38 fill repeat;
box-shadow : 0 0 12px #000;
}

.torikime{
border-top:3px double#9b7042;
border-right:3px  double #9b7042;  
border-bottom:3px  double#9b7042;
border-left:3px double #9b7042;
padding: 20px 10px 5px 15px;
background: #fff;
background: -moz-linear-gradient(top,  #e5d9c2,  #f1eade); /* FireFox */
background: -webkit-gradient(linear, left top, left bottom, from(#e5d9c2), to(#f1eade));/* Chrome & Safari */
border-radius: 3px;
-moz-border-radius: 3px; /* FireFox */
-webkit-border-radius: 3px;/* Chrome & Safari */
font-size:100%;
box-shadow : 0 0 12px #000;
}

.indent{
         padding-left: 1em;         
         text-indent: -1em;
}

.indent2{text-indent: 1em;
}

/* @end */


/**** 見出しグリン ****/
.t_soft{
border-top:1px solid #4e7e5e;
border-right:1px solid #4e7e5e;  
border-bottom:1px solid #4e7e5e ;
border-left:1px solid #4e7e5e ;
padding: 5px 5px 5px 15px;
background: #fff;
background: -moz-linear-gradient(top,  #f3f8f5,  #c7dcce); /* FireFox */
background: -webkit-gradient(linear, left top, left bottom, from(#f3f8f5), to(#c7dcce ));/* Chrome & Safari */
border-radius: 7px;
-moz-border-radius: 7px; /* FireFox */
-webkit-border-radius: 7px;/* Chrome & Safari */
font-size:100%;
font-weight: bold;
color:#555;}
/* @end */
/**** 見出しレッド ****/
.t_soft2{
border-top:1px solid #910c2c;
border-right:1px solid #910c2c;  
border-bottom:1px solid #910c2c ;
border-left:1px solid #910c2c ;
padding: 5px 5px 5px 15px;
background: #fff;
background: -moz-linear-gradient(top,  #f5f3f8,  #ffb5d8); /* FireFox */
background: -webkit-gradient(linear, left top, left bottom, from(#f5f3f8), to(#ffb5d8 ));/* Chrome & Safari */
border-radius: 7px;
-moz-border-radius: 7px; /* FireFox */
-webkit-border-radius: 7px;/* Chrome & Safari */
font-size:100%;
font-weight: bold;
color:#555;}
/* @end */
/**** ボーダー初志 ****/
.t_bordee2{
border-top:3px double #fff;
border-right:3px  double #fff;  
border-bottom:3px  double #f5edfb;
border-left:3px double #fff;
padding: 5px 15px 5px 15px;
background: #fff;
background: -moz-linear-gradient(top,  #f6ecfc,  #f4f4f4); /* FireFox */
background: -webkit-gradient(linear, left top, left bottom, from(#f6ecfc), to(#f4f4f4 ));/* Chrome & Safari */
border-radius: 3px;
-moz-border-radius: 3px; /* FireFox */
-webkit-border-radius: 3px;/* Chrome & Safari */
font-size:120%;
font-weight: bolder;
color:#8e1337;
}
/* @end */
/**** ボーダーpolicy Mblue ****/
.policy{
border-top:4px ridge #1b1b89;
border-right:4px ridge #1b1b89;  
border-bottom:4px ridge #1b1b89;
border-left:4px ridge #1b1b89;
padding: 5px 5px 5px 15px;
background: ##f2f2fc;
background: -moz-linear-gradient(top,  #9d9deb,  #f2f2fc); /* FireFox */
background: -webkit-gradient(linear, left top, left bottom, from(#9d9deb), to(#f2f2fc ));/* Chrome & Safari */
border-radius: 20px;
-moz-border-radius: 20px; /* FireFox */
-webkit-border-radius: 20px;/* Chrome & Safari */
font-size:120%;
font-weight: bold;
color:#000;
}
/* @end */
/**** ボーダーBrown ****/
.h_kantetsu{
border-top:1px solid #871c40;
border-right:1px solid #871c40;  
border-bottom:1px solid #871c40 ;
border-left:1px solid #871c40 ;
padding: 5px 5px 5px 20px;
background: #fff;
background: -moz-linear-gradient(top,  #c28d9f,  #f8f3f5); /* FireFox */
background: -webkit-gradient(linear, left top, left bottom, from(#c28d9f), to(#f8f3f5 ));/* Chrome & Safari */
border-radius: 10px;
-moz-border-radius: 10px; /* FireFox */
-webkit-border-radius: 10px;/* Chrome & Safari */
font-size:150%;
font-weight: bold;
color:#470e21;
box-shadow : 0 0 12px #000;
}
/* @end */
/* form kyakutyuu */
.must{
font-size:60%;
color : #ff0000;
}
/* @end */
/* scrolボタン */
#scrol {
width : 90%;
margin : 0 auto;
margin-bottom : 10px;
}
/* @end */

.button4 {
  background: #5b9507 ;
  background: -moz-linear-gradient(top, #ce3fea, #880795);
  background: -webkit-gradient(linear,
    left top,
    left bottom,
    from(#ce3fea  ),
    to(#880795));
  border: 1px solid #6c0676;
  border-radius: 28px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 0 1px #fff;
  color: #fff;
  display: inline-block;
  font-family: "Jun 501", sans-serif;
  font-size: 12px;
  height: 36px;
  line-height: 36px;
  overflow: hidden;  
  text-align: center;
  text-decoration: none;
  text-shadow: 0 -1px 1px #6c0676;
  width: 100px;
}
 
.button4_inner {
  display: block;
  height: 36px;
  line-height: 36px;
  opacity: 0.9;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

/* フッター */
footer {
padding : 24px 30px 48px 0px ;
color : white;
text-align : center;
background : url(../images/footer_bg.png)}
/* @end */
/*320pxi以上の設定*/
@media screen and (max-width : 480px){
nav {font-size:60%;}
}
/*768px以上の設定*/
@media screen and (min-width : 768px){
#contents { text-align : left}
#call_area{visibility:hidden}
}

/* 1024pxの設定 */
@media screen and (min-width : 1024px) {
/* @group nav */
nav ul {
width : 93.75%; /* 960/1024 */
margin : 0 auto}
/* @end */
/*コンテンツ*/
#contents {
overflow : hidden;
width : 93.75%} /* 960/1024 */
#contents #main,
#contents #sub {
float : left;
margin : 0 1.0416667% } /*10/960*/
#contents #main { width : 64.5833333% } /*620/960*/
#contents #sub { width : 31.25% } /*300/960*/
/* @end */
/* フッター幅 */
footer {
width : 91.796875; /*940/1024*/
margin : 0 auto}
/* @end */
}
/* ------------------------------
   Hero Video (Aspect Safe)
------------------------------ */

/* 表示枠：ここで「見せたい比率」を決める */
.hero-video-wrapper {
  aspect-ratio: 9 / 16;     /* ← 基本を縦動画想定に */
  max-width: 260px;
  width: 100%;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}

/* 横動画を想定する場合（切替用クラス） */
.hero-video-wrapper.is-landscape {
  aspect-ratio: 16 / 9;
  max-width: 420px;
}

/* video本体 */
.hero-video {
  width: 100%;
  height: 100%;
  object-fit: contain; /* ← 黒帯ありで全体表示（安全） */
  background: #000;
}

/* 黒帯を出したくない場合（任意） */
.hero-video.is-cover {
  object-fit: cover;   /* ← 枠いっぱい（一部切れる） */
}