@charset "utf-8"; 

* { margin: 0; padding: 0; box-sizing:border-box; }

@font-face { font-family: "YuGothic M"; src: local(Yu Gothic Medium); }
@import url(//fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700,700italic);

body { color:#123; font:14px/1.6 ; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; color: #565656 }

img, area { border: none; outline: none; vertical-align:bottom}

 /* html5未定義ブラウザ用 */
article, aside, details, figcaption, figure, main, menu, section, footer { display: block; }

 /* clearfixの代用 */
article, aside, main, section, footer { overflow:hidden; }

 /* グリッド */
.col_1  { width: 6.6666666666667%; }
.col_1_5  { width: 11.6666666666665%; }
.col_2  { width: 15%; }
.col_3  { width: 23.333333333333%; }
.col_3_2  { width: 23.333333333333%; }
.col_4  { width: 31.666666666667%; }
.col_5  { width: 40%; }
.col_6  { width: 48.333333333333%; }
.col_6_2  { width: 48.333333333333%; text-align:center;padding:10px 0;}
.col_7  { width: 56.666666666667%; }
.col_8  { width: 65%; }
.col_9  { width: 73.333333333333%; }
.col_10 { width: 81.666666666667%; }
.col_11 { width: 90%; }
.col_12 { width: 98.333333333333%; }

.col_6_2 a { color: #FFFFFF;}
.col_6_2 .icy { width:16px; margin:0 0 4px 4px}

.bgc01 { background-color:#fff; color:#444; border: 2px solid #777;
	border-radius:10px 10px 0 0;         /* CSS3 */
-moz-border-radius:10px 10px 0 0;    /* Firefox */
-webkit-border-radius:10px 10px 0 0; /* Safari,Chrome */}
.bgc02 { background-color:#fff; color:#444;border: 2px solid #777;
border-radius:10px 10px 0 0;         /* CSS3 */
-moz-border-radius:10px 10px 0 0;    /* Firefox */
-webkit-border-radius:10px 10px 0 0; /* Safari,Chrome */}

.bgc01 a {color:#444}
.bgc02 a {color:#444}

.bgc01:hover { background-color:#F1F1F1;}
.bgc02:hover { background-color:#F1F1F1;}


.w100 { width:100%; margin:0 auto;}
.w100 img { width:100%; margin:0 auto;}
.w90 { width:90%; margin:0 auto;}
.w80 { width:80%; margin:0 auto;}
.w70 { width:70%; margin:0 auto;}
.w60 { width:60%; margin:0 auto;}
.w50 { width:50%; margin:0 auto;}
.w40 { width:40%; margin:0 auto;}
.w30 { width:30%; margin:0 auto;}
.w20 { width:20%; margin:0 auto;}
.w10 { width:10%; margin:0 auto;}

.max1200 { width:100%; max-width:1200px; margin:0 auto; float:none;}
.max1100 { width:100%; max-width:1100px; margin:0 auto; float:none;}
.max1000 { width:100%; max-width:1000px; margin:0 auto; float:none;}
.max900 { width:100%; max-width:900px; margin:0 auto; float:none;}
.max800 { width:100%; max-width:800px; margin:0 auto; float:none;}
.max700 { width:100%; max-width:700px; margin:0 auto; float:none;}
.max600 { width:100%; max-width:600px; margin:0 auto; float:none;}


.coltop_sp { width:14.9999%; float:left;display: block;}
.coltop_4  { width: 31%; margin:2%; float:left;display: block;}
.coltop_4 img {width:100%; }


.col_1 img { width:100%; }
.col_2 img { width:100%; }
.col_3 img { width:100%; }
.col_3_2 img { width:100%; }
.col_4 img { width:100%; }
.col_5 img { width:100%; }
.col_6 img { width:100%; }
.col_6_2 img {width:11px;}
.col_7 img { width:100%; }
.col_8 img { width:100%; }
.col_9 img { width:100%; }
.col_10 img { width:100%; }
.col_11 img { width:100%; }
.col_12 img { width:100%; }

body .col_7 ul li .img_s {width: 20px; margin:  4px 2px 4px;}


*[class*="col_"]{
margin-left: 0.83333333333333%;
margin-right: 0.83333333333333%;
margin-top:0.5em;
margin-bottom:0.5em;
float: left;
display: block;
}

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
 
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.col, .col-sm, .col-md, .col-lg, .col-xl {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col {
  -ms-flex-preferred-size: 0;
      flex-basis: 0;
  -ms-flex-positive: 1;
      flex-grow: 1;
  max-width: 100%;
}

/* モニター幅576px以上 */
@media (min-width: 576px) {
  .col-sm {
    -ms-flex-preferred-size: 0;
        flex-basis: 0;
    -ms-flex-positive: 1;
        flex-grow: 1;
    max-width: 100%;}
  
}

@media (min-width: 768px) {
  .col-md {
    -ms-flex-preferred-size: 0;
        flex-basis: 0;
    -ms-flex-positive: 1;
        flex-grow: 1;
    max-width: 100%;
  }

}
@media (min-width: 992px) {
  .col-lg {
    -ms-flex-preferred-size: 0;
        flex-basis: 0;
    -ms-flex-positive: 1;
        flex-grow: 1;
    max-width: 100%;
  }
}
@media (min-width: 1200px) {
  .col-xl {
    -ms-flex-preferred-size: 0;
        flex-basis: 0;
    -ms-flex-positive: 1;
        flex-grow: 1;
    max-width: 100%;
  }
}


/* スマートフォン 横(ランドスケープ) タブレット*/
@media only screen and (max-width:576px) { 
.col_1  { width: 98.333333333333%; }
.col_1_5  { width: 98.333333333333%; }
.col_2  { width: 98.333333333333%; }
.col_3  { width: 98.333333333333%; }
.col_4  { width: 98.333333333333%; }
.col_5  { width: 98.333333333333%; }
.col_6  { width: 98.333333333333%; }
.col_7  { width: 98.333333333333%; }
.col_8  { width: 98.333333333333%; }
.col_9  { width: 98.333333333333%; }
.col_10 { width: 98.333333333333%; }
.col_11 { width: 98.333333333333%; }
.col_12 { width: 98.333333333333%; }



.coltop_4  {width: 94%;  float: none;}
}


/* スマートフォン 縦(ポートレート) */
@media only screen and (max-width:480px) { 

}


@media only screen and (max-width:751px) {
.col_3_2  { width: 48.333333333333%; }
}


/* スマートフォン 横(ランドスケープ) タブレット*/
@media only screen and (max-width:576px) {

}

/* スマートフォン 縦(ポートレート) */
@media only screen and (max-width:480px) {



#pano{
  max-width: 1200px;
  width: 98.3333%;
  margin: 0 0.83333333% 60px ;
  height: 400px;
}
.pano_area{
  background-color: #F4FFFF;
  padding: 0;
}
.pano_inn {
  max-width: 1200px;
  width: 98.3333%;
  margin: 0 0.83333333% 60px ;
}
.pano_let{
  letter-spacing: -2px;
}
.pano_let span{
  letter-spacing: -14px;
}
@media (min-width: 576px){
#pano{
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  height: 600px;
}
.pano_let{
  letter-spacing: 0px;
}
.pano_inn {
  max-width: 1200px;
  width: 100%;
  padding: 0 0.83333%;
  margin: 0 auto 60px ;
}
}