@font-face{
	font-family:'apercu';
	src:url("../../font/apercu/apercu_regular_pro.woff") format("woff"),url("../../font/apercu/apercu_regular_pro.ttf") format("truetype");
	-webkit-font-smoothing:antialiased;
	-moz-font-smoothing:antialiased;
	font-smoothing:antialiased
}

/* reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  letter-spacing:1px;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

/* For modern browsers */
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

/* For IE 6/7 (trigger hasLayout) */
.clearfix {
  zoom: 1;
}

/* variable */
i {
  margin: auto 10px;
}

body {
/*  font-family: 'Noto Sans JP', sans-serif;*/
	font-family: "游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
  line-height:200%;
  color:#000;
  background:#fff;
}

#wrapper{
  width:100%;
  min-width: 960px;
  margin:0 auto;
  padding:0;
  overflow:hidden;
}


.fadeAnime {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1.5s;
 -ms-animation-duration:1.5s;
 animation-duration:1.5s;
 -webkit-animation-name: fadeAnime;
 -ms-animation-name: fadeAnime;
 animation-name: fadeAnime;
 visibility: visible !important;
}
@-webkit-keyframes fadeAnime {
 0% { opacity: 0; -webkit-transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeAnime {
 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}


/*---------------------------------------------------------------
 header
-------------------------------------------------------------- */
header{
    width:100%;
    margin:0;
    padding:15px 0 10px 0;
    text-align:center;
    background:color:#fff;
    border-bottom:solid 1px #e6e6e6;

}
header img{
    width:160px;
    margin:0;
    padding:0;
}


/*---------------------------------------------------------------
 main
-------------------------------------------------------------- */
#main {
  width: 100%;
  min-width:initial;
  height: auto;
  margin: 0 auto;
  padding: 0;
  text-align: center;
    position:relative;
    background:#f7f5f8;
  display: -webkit-flex; /* Safari */
  display: flex;
  -webkit-flex-direction: row; /* Safari */
  flex-direction:         row;
      background:url("../images/main_pc.jpg") center no-repeat #f7f5f8;
}
#main #image{
    width:50%;
    max-width:1000px;
    margin:0;
    padding:0;
}
#main #image img{
    display:none;
 }
#main #description{
    width:50%;
    margin:0;
    padding:100px 0;
        text-align:left;
}
#main #description h1{
    width:70%;
    margin:0 auto;
    padding:0 0 20px 0;
}
#main #description h1 img{
    width:100%;
    max-width:370px;
    margin:0;
    padding:0;
}
#main #description #read{
    width:70%;
    margin:0 auto;
    padding:20px 0 0 0;
    text-align:left;
    font-size:16px;
    border-top: solid 1px #333;
}
#main #description #small{
    width:70%;
    margin:0 auto;
    padding:20px 0 0 0;
    text-align:left;
    font-size:14px;
}
#main a{
    margin:15px 0 0 0;
    padding:5px 20px;
    background:#000;
    color:#fff;
    text-decoration:none;
    width:80px;
    text-align:center;
}
#main a:hover{
    background:#333;
}

/*---------------------------------------------------------------
 special point
-------------------------------------------------------------- */
#point {
  width: 1000px;
  height: auto;
  margin: 100px auto 0 auto;
  padding: 0;
  text-align:center;
}
#point h2{
    margin:0 auto 20px auto;
    padding:0 0 5px 0;
    text-align:center;
    font-size:24px;
     letter-spacing: 2px;
    font-family:apercu;
    border-bottom:solid 1px #333;
    display:inline-block;
}
#point #point_detail{
   margin:0;
   padding:0;
  display: -webkit-flex; /* Safari */
  display: flex;
  -webkit-flex-direction: row; /* Safari */
  flex-direction:         row;
  align-items: center;
   text-align:left;
    
}
#point #point_detail figure{
    width:340px;
    margin:0;
    padding:0;
}
#point #point_detail figure img{
    width:100%;
    margin:0;
    padding:0;
}
#point #point_detail p{
    width:660px;
    margin:0 0 0 40px;
    padding:0;
    font-size:15px;
}
#point #point_img{
   margin:20px 0 0 0;
  display: -webkit-flex; /* Safari */
  display: flex;
  -webkit-flex-direction: row; /* Safari */
  flex-direction:         row;
}
#point #point_img figure{
    width:50%;
    margin:0;
    padding:0;
}
#point #point_img figure img{
    width:100%;
    margin:0;
    padding:0;
}
/*---------------------------------------------------------------
 detail
-------------------------------------------------------------- */
#detail {
  width: 1000px;
  height: auto;
  margin: 100px auto 0 auto;
  padding: 0;
}
#detail ul{
  display: -webkit-flex; /* Safari */
  display: flex;
  -webkit-justify-content: space-between; /* Safari */
  justify-content:         space-between;
}
#detail li{
    width:30%;
    font-size:15px;
  line-height:180%;
}
#detail li img{
    width:100%;
	margin: 0 0 10px 0;
	padding: 0;
	vertical-align: bottom;
}
#detail h2{
	margin: 0 0 10px 0;
	padding: 0;
    font-size:20px;
     letter-spacing: 2px;
    font-family:apercu;
    text-align:center;
}
/*---------------------------------------------------------------
 information
-------------------------------------------------------------- */
#information {
  width: 500px;
  height: auto;
  margin: 100px auto 0 auto;
  padding: 0;
  text-align:center;
}
#information h2{
	margin: 0 0 10px 0;
	padding: 0;
    font-size:22px;
     letter-spacing: 2px;
    font-family:apercu;
    text-align:center;
}
#information dl{
    width:500px;
    margin:0;
    padding:0;
}
#information dl dt{
    margin:0;
    padding:10px 0 0 0;
    border-top:solid 1px #e6e6e6;
    font-size:14px;
}
#information dl dd{
    margin:0;
    padding:0 0 10px 0;
    font-size:16px;
}
#information a{
    margin:15px 0 0 0;
    padding:20px 0;
    font-size:16px;
    background:#000;
    color:#fff;
    display:block;
    text-decoration:none;
}
#information a:hover{
    background:#333;
}
#information #coming{
    margin:15px 0 0 0;
    padding:20px 0;
    font-size:16px;
    background:#bdbdbd;
    color:#fff;
    display:block;
    text-decoration:none;
}

/*---------------------------------------------------------------
 footer
-------------------------------------------------------------- */
footer {
  margin: 100px 0 0 0;
  padding:0;
  text-align:center;
}
footer #palcloset {
    margin:0 0 10px 0;
    padding:0;
}
footer #palcloset a {
    margin:0 auto;
}
footer #palcloset a img {
    width:150px;
}
footer p {
   margin: 0;
  padding:20px 0;
  line-height:180%;
  font-size:12px;
  letter-spacing:1px;
  color:#fff;
  background:#000;
}


/* ============================================================

	640px 

============================================================ */
@media screen and (max-width: 768px) {
/*@media screen and (max-width: 480px) {*/


#wrapper{
  width:100%;
  min-width: initial;
  max-width: initial;
}

/*---------------------------------------------------------------
 main
-------------------------------------------------------------- */
#main {
  width:100%;
  min-width: initial;
  display:inherit;
    background:none #f7f5f8;
 }
#main #image{
  width:100%;
   max-width:initial;
}
#main #image img{
    width:100%;
    display:inherit;
 }
#main #description{
  width:86%;
    margin:0 auto;
    padding:50px 0 100px 0;
    text-align:left;
}
#main #description h1{
  width:100%;
    margin:0 auto;
    padding:0 0 20px 0;
}
#main #description h1 img{
    width:100%;
    max-width:initial;
    margin:0;
    padding:0;
}
#main #description #read{
    width:100%;

}
#main #description #small{
    width:100%;

}
/*---------------------------------------------------------------
 special point
-------------------------------------------------------------- */
#point {
    width:86%;
}
#point #point_detail{
    width:100%;
    margin:10% 0 0 0;
    display:inherit;
}
#point #point_detail figure{
    width:80%;
    margin:0 auto;
    
}
#point #point_detail figure img{
    width:100%;

}

#point #point_detail p{
    width:100%;
    margin:5% 0 0 0;
}

#point #point_img figure{
    width:100%;
    margin:10% 0 0 0;
    padding:0;
}
/*---------------------------------------------------------------
 detail
-------------------------------------------------------------- */
#detail {
    width:86%;
}
#detail ul{
    width:100%;
    display:inherit;
}
#detail li{
    width:100%;
    margin:10% 0 0 0;
}
/*---------------------------------------------------------------
 information
-------------------------------------------------------------- */
#information {
  width: 86%;
}
#information dl{
    width:100%;
}
#information a{
    margin:0;
    padding:20px 0;
    font-size:16px;
    background:#000;
    color:#fff;
    display:block;
    text-decoration:none;
}


/*---------------------------------------------------------------
 footer
-------------------------------------------------------------- */

  .pc {
    display: none;
  }

  .sp {
    display: inherit;
  }
}