@charset "UTF-8";

body{
    margin: 0;
    padding: 0;
    width: 100vw;
    text-align: center;
    font-size: 75%;
    font-family: 'メイリオ' ,Meiryo, 'ヒラギノ角ゴ Pro W3' , 'Hiragino Kaku Gothic Pro' , 'ＭＳ Ｐゴシック' , 'Osaka' ,sans-serif;
    color: #666666; /* 標準文字色 */
    background: #fff;
    overflow-x: hidden !important;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%; /* スマホで文字サイズが大きくなる対策 */
}

a img { transition: opacity 0.4s linear; }/* リンク画像変化時間(追加) */

a:hover img { opacity: 0.65; }/* リンク画像変化(追加) */

/* Safari用ハック 文字サイズ調整 */
/*\*/
html:\66irst-child body{
    font-size: 70%;
}
/* end */

img{
    border: 0;
}

/*--------------------------------------------------------
  レイアウト設定
--------------------------------------------------------*/
#header,#header_sub{
    width: 100vw;
    text-align: center;
    border-top: 0.2vw solid #000080;
}

#header_sub{
    text-align: left;
}

#header img,#header_sub img{
    width: 30vw;
    height: auto;
    margin-top: 0.7vw;
    margin-left: 2.5vw;
}

#container {
  display: flex;
  gap: 0px 0px;
    width: 100vw;
    margin-bottom: 0;
    text-align: center;
    background: #eef7ff;
    background: #f7eeff;
    background: #e1e1f0;
}

#inner{
    text-align: center; 
    margin-top: 0vw; 
    padding-top: 0 ;
    width: 100vw;
    display: block;
}

/* トップページ デザイン定義 */

/*--------------------------------------------------------
  デザイン設定
--------------------------------------------------------*/


/* 写真 */
#cover,#cover_low{
    display: block;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center;
    width: 94vw;
    height: 70vw;
    background-image : url(../images/himokakeki_kogu.JPG);
    background-size :contain;
}

#cover_low{
    height: 20vw;
    background-size: 94vw;
    background-position: 50% 60%;
}

#cover b{
    display: block;
    margin: 0vw 0vw 0vw 80vw;
    padding-top: 4vw;
    font-size: 3.5vw;
    font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
    font-weight: bold;
    color: #0080ff;
    text-shadow: 0.1vw 0.1vw #fff; 
}

#cover i,#cover_low i{
    display: block;
    padding: 31vw 10vw 0vw 10vw;
    font-size: 5vw;
    font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
    font-weight: bold;
    color: #ff0000;
    text-shadow: 0.2vw 0.2vw #fff; 
}

#cover_low i{
    padding: 0vw 0vw 0vw 60vw ;
    padding-top: 13vw ;
    font-size: 2.5vw;
}

#cover p,#cover_low p{
    display: block;
    margin: 0.5vw 17vw 0vw 41vw;
    font-size: 2.7vw;
    font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
    font-weight: bold;
    line-height: 3.5vw;
    color: #ff8040;
    text-shadow: 0.05vw 0.05vw #fff; 
}

#cover_low p{
    margin: 0vw 0vw 0vw 69vw ;
    font-size: 1.7vw;
}

table{
    margin: 2vw auto;
    padding: 0 ;
    width: 94vw;
    text-align: left;
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
    border-collapse:collapse;
}

table tr{
    border-bottom: 1px solid #ccc;
}

table tr:nth-of-type(1){
    width: 94vw !important;
    background : #0080ff;
    font-size: 1.5vw;
    color: #fff;
    border-right: none;
}

table tr:nth-of-type(n+2) {
    background : #fffff2;
    font-size: 1.7vw;
    color: #333;
}

table tr:nth-of-type(n+2) a{
    color: #0000ff;
}

table tr.separat{
    border-bottom: 2px solid #400000;
}


table tr td{
    padding: 0vw 1.0vw ;
    font-weight: bold;
    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-bottom: none;
}

table tr td:nth-of-type(1){
    border-right: none;
}

table.kamikomi tr td{
    font-size: 1.6vw;
    font-weight: normal;
}

table.kamikomi tr:nth-of-type(-n+2) td{
    font-weight: bold;
}

table.kamikomi tr td:nth-of-type(1){
    width: 13.0vw;
}

table.kamikomi tr td:nth-of-type(n+2){
    width: 40.5vw;
}

table tr td b{
    padding-left: 1.0vw ;
    color: #ff8040;
    font-size: 2.2vw;
    line-height: 5.5vw;
}

table tr td .attention{
    margin-top: 1vw; 
    font-size: 1.6vw;
    color: red;
}

table tr:nth-of-type(2) td i{
    color: #333;
    font-size: 2.0vw;
    font-weight: bold;
}

table tr td i a{
    font-weight: normal;
    font-size: 1.7vw !important;
    line-height: 3.9vw !important;
    margin-left: 5vw; 
}

table tr td p{
    display: block;
    margin: 1vw 3vw;
    width: 86vw;
    color: #333;
    font-size: 1.6vw;
    line-height: 3.0vw;
    font-weight: normal;
}

table.caution,table.caution td{
    border:none;
}

table.caution tr{
    background : none;
    font-size: 1.5vw;
}

table.caution tr{
    color: #333;
}

table.caution tr b{
    color: #ff0000;
}

table.copyright tr{
    background : #9f9fff;
    font-size: 1.5vw;
}

table.copyright tr td{
    text-align: center;
    font-size: 1.3vw;
}

.movement tr td:nth-of-type(1){
    text-align: center;
    width: 58vw;
}

.movement tr td:nth-of-type(1) img{
    display: none;
}

.movement tr td:nth-of-type(1) img.arw{
    display: block; 
    margin: 1vw auto;
    width: 5vw;
    height: auto;
}

.movement tr td:nth-of-type(2){
    text-align: center;
    width: 36vw;
    padding: 0 !important ;
}

.movement tr td:nth-of-type(2) img{
    display: block; /* これがないと下に隙間ができる */
    width: 36vw;
    height: auto;
}

.tychigai{
    width: 94vw;
    padding: 0;
    border: 0.1vw solid #aaa;
}

.tychigai tbody{
}

.tychigai tr:nth-of-type(1){
    text-align: center;
    background : #00cc00;
    font-size: 1.4vw ;
}

.tychigai tr:nth-of-type(n+2){
    background : #fff;
    font-size: 1.4vw ;
}

.tychigai tr:nth-of-type(n+2) a{
    font-size: 1.4vw ;
}

.tychigai tr td:nth-of-type(1){
    background : #ffffcf;
}

.tychigai tr:nth-of-type(1) td{
    background : #00cc00;
}

.tychigai tr td:nth-of-type(n+2){
    text-align: center;
    padding-left: 0 !important ;
}

table tr td.video{
    display: block;
    width: 40vw;
    padding: 0 !important ;
}

table tr td video{
    display: block;
  width: 100%;
  max-width: 800px;
}

table tr td.point{
    padding: 0.5vw 1vw !important ;
    width: 54vw;
    vertical-align:top;
    color: #333;
    font-size: 1.6vw;
    font-weight: normal;
}

table tr td.point b{
    font-size: 1.8vw;
    line-height: 3.5vw;
}

table tr td.point i{
    display: block;
    margin-top: 1vw; 
    margin-bottom: 0.5vw !important ; 
    font-size: 1.8vw;
    color: #008000;
}

table tr td.picture{
    display: block;
    width: 40vw;
    padding: 0 0 !important ;
}

table tr.tenken{
    background : #008040;
}

table tr td.picture_big{
    padding-left: 0 !important ;
    padding-right: 0 !important ;
}

table tr td.picture img{
    display: block;
    width: 40vw;
    height: auto;
}

table tr td.picture_big img{
    display: block;
    width: auto;
    max-width: 100vw;
    height: auto;
}

input.button{
    padding: 0.2vw 2vw;
    margin-bottom: 4vw; 
    font-size: 1.5vw;
    font-weight: bold;
    background : #fff;
    border: 1px solid #777;
    border-radius: 0.7vw;
    cursor : pointer;
}

small{
    clear: both; 
    display: block;
    width: 100vw;
    height: 2.3vw;
    text-align: center;
    margin-top: 0vw;
    padding-bottom: 3vw;
    background: #e1e1f0;
}

small i{
    display: block;
    margin: 0vw auto;
    width: 100vw;
    padding 0.2vw auto;
    font-size: 1.2vw;
    background-color : #555;
    color: #fff;
}



/*--------------------------------------------------------
  基本パーツデザイン設定
--------------------------------------------------------*/

/* リンク文字色 */
a:link{
    color: #9B9185;
    text-decoration: underline;
}
a:visited{
    color: #9B9185;
    text-decoration: underline;
}
a:hover{
    color: #9B9185;
    text-decoration: none;
}
a:active{
    color: #9B9185;
    text-decoration: none;
}

h2 span.en{
    font-size: 0.9em;
    color: #B7CAE6;/* 見出し帯　英字の色(変更) */
}

h3.hpb-c-index{
    height: 1px;/* メニューバー全体の上調整 */
    margin: 0;
    padding: 0;
    overflow: hidden;
    text-indent: -9999px;
    background: none;
}

h4{
    margin: 0 0 0 0px;
    padding: 5px 10px 2px 2px;
    text-align: left;
    font-size: 1.1em;
    line-height: 1.2;
    color: #62584C;
}

h5{
    display: inline;
    margin: 0 0 0 0px;
    padding: 4px 10px 2px 25px;
    text-align: left;
    background-image : url(../point_1Ab.png);
    background-position: 6px 8px;
    background-repeat: no-repeat;
    font-size: 1.1em;
    line-height: 1.2;
    color: #62584C;
}

/* 折りたたみメニュー */
.wrap {
  padding: 0;
}

.wrap label {
  display: inline-block;
  padding : 0;
  color: #0000ff;
  cursor: pointer;
}

.wrap input[type="checkbox"] {
  display: none;
}

.wrap .content {
  height: 0vw;
  margin-left: 4.5vw;
  padding: 0;
  overflow: hidden;
    transition: height 0.8s ;
}

.wrap .spot {
  margin-left: 0vw;
}


.switch:checked + .content {
  width: 40vw;
  height: 30vw;
}

/*ページ内ウィンドウ*/ 
.top_line{
    padding-top: 20px ;
    border-top : solid 1px #ccc;
}

#modal div[id^="open"]{ /* セレクタ名の前方一致「id=open**」 */
    visibility: collapse;
}

 .close_lay{
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    position:fixed;
    background: #000;
    opacity: 0.6;
    z-index: 5;
}

.mod_win{
    top: 3%;
    left: 30vw;
    margin: 0px ;
    width: 42vw;
    height: 35vw;
    text-align: center;
    display: block;
    background: #fff;
    position:fixed;
    z-index: 10;
}

.middle{
    height: 40vw;
}

.big{
    height: 47vw;
}

.mod_win iframe{
    width:40vw;
    height: 33vw;
    margin: 0px ;
    padding: 0px auto;   
    text-align: center;
  border: none;
}

.middle iframe{
    height: 38vw;
}

.big iframe{
    height: 45vw;
}

.mod_win a{
    clear: both;
    display: block;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    padding-top: 0px;   
    margin-top: -43px;
    color: #fff;
}

.mod_win a:after{
    content: "ウィンドウを閉じる";
    background-color: #0080ff;
    border-radius: 1.2vw;
    padding: 0.2vw 0.9vw;

    color: #fff;
    font-size:min(3.3vw,18px);
    cursor :pointer;
    border: 0px solid #fff;
}

.mod_win b{
    font-size: 18px;
    margin-right: 7px;
}

/* 結び目トラブル別タブ閉じるマーク */ 
body{
    text-align :center;
}

#bkwindow input{
    margin: 0px auto;
    text-align :center;
    margin: 5px 0px;   
}

/* CSS3 ModalWindow SET
-------------------------- */
#modal div:target{
    visibility: visible;
    opacity: 1;
    transition:  1s;    
}

a.linkImg:hover {
    position: relative;
    text-decoration: none;
}
a.linkImg span {
    display: none;
    position: absolute;
    top: 2.5vw;
    left: 0px;
    width: 35vw;
    background: #fff;
    border: 2px solid #000;
}
a.linkImg span img{
    width: 35vw;
    height: auto;
    border: 0.2vw solid #ccc;
    opacity: 10;
}
a.linkImg:hover span {
    border: none;
    display: block;
}

table tr td a .pic{
    color: #008000;
}

table tr td a .vid{
    color: #ff0000;
}


.arrow_box{
  display: none;
  position: absolute;
  left: 55.5vw;
  width: 6vw;
  padding: 0.1vw 0.5vw !important ;
  border-radius: 1vw;
  background: #333;
  font-size: 1.5vw;
  color: #fff;
}

.arrow_box:after {
  position: absolute;
  bottom: 100%;
  left: 10%;
  width: 0;
  height: 0;
  margin-left: 1.2vw;
  border: solid transparent;
  border-color: rgba(51, 51, 51, 0);
  border-bottom-color: #333;
  border-width: 1vw;
  pointer-events: none;
  content: " ";
}

table tr td a i.winpic:hover + p.arrow_box {
  display: block;
}