@charset "utf-8";
/* CSS Document */

body {
  margin:0;
  color:#3e3a39;
  background-color: #eefbf9;
  background-image: url(images/gp-back_img.gif);
  font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI","Noto Sans Japanese","Meiryo","ヒラギノ角ゴ ProN W3", sans-serif;
}

#wrapper {
 width: 100%;
 margin: 0 auto;
}


header {
  background-color: #111c2c;
  height:52px;
}

h1{ 
  margin:0;
  font-size: 14px; 
  color:#ffffff;
  text-align:left;
  padding:15px 20px;
}

.main {
  width: 960px;
  margin: 0 auto;
  background-color: #ffffff;
  font-size: 0px; 
}

.main-image img {
  vertical-align: bottom;
  display: block;
}

.alpha a:hover img {
  opacity: 0.9;
  filter: alpha(opacity=90);
  -ms-filter: "alpha(opacity=90)";
}

.cart {
  border: none;
  padding: 0;
  vertical-align: bottom;
  display: block;
  width: 100%;
}

.pc_cart img{
  padding-bottom: 10px;
}

.movie_area{
  background-color:#fff;
  display:inline-block;
  width: 100%;
  text-align: center;
  position: relative;
  padding-bottom: 40px; 
  text-align: center;
}
h2{
  margin: 30px 0;
  text-align: center;
  color: #61aea8;
  font-size: 40px;
  letter-spacing: 0.15em;
}
.movie_area img{
  max-width: 100%;
}

/*--- ▼ここからモーダル▼ ---*/
/* movie size */
.movie-wrap {
     position: relative;
     padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
     height: 0;
     overflow: hidden;
}
.movie-wrap iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}

/* modal */
#my_modal1{
    display: none;
}
.my_modal_body1{    
    display: none;
    position: fixed;
    z-index: 100000;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    display: none;
    background-color: #FFF;
    overflow-y: auto;
    /* スマホ用スクロール */
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
    width: 90%;
    max-height: 80%;
    max-width: 700px;
}

.my_modal_header{
    padding: 15px;
    background-color: #a2d8da;
    color: #FFF;
    font-weight: bold;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1;
    text-align: center;
}
.my_modal_close{
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    cursor: pointer;
}
.my_modal_close_icon{
    display: inline-block;
    width: 20px;
    height: 20px;
    position: relative;
    cursor: pointer;
}
.my_modal_close_icon span::before,
.my_modal_close_icon span::after{
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 84%;
    height: 16%;
    margin: -8% 0 0 -42%;
    background: #FFF;
}
.my_modal_close_icon span::before{
    transform: rotate(-45deg);
}
.my_modal_close_icon span::after{
    transform: rotate(45deg);
}
.my_modal_content{
    padding: none;
}

/* 背景を暗く */
.my_modal_overlay{
    display: none;
    position: fixed;
    z-index: 90000;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    background-color: #111;
    opacity: 0.3;
    cursor: pointer;
}

/* チェック時 overlay content 表示 */
#my_modal1:checked ~ .my_modal_body1, #my_modal1:checked ~ .my_modal_overlay{
    display: block;
}
/*--- ▲ここまでモーダル▲ ---*/

.about{
  color: #000;
  font-size: 25px;
  margin: 0;
  padding: 15px 0;
 }
.note{
  color: #777;
  font-size: 16px;
  margin: 0;
 }


/*.clearText {
text-indent:100%;
white-space:nowrap;
overflow:hidden;
margin: 0;
font-size: 0;
}*/

.footer {
    clear: both;
    width: 960px;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
	font-size:12px;
}

address {
	width: 960px;
    clear: both;
    line-height: 1.6em;
	color:#0b151b;
	background-color: #5eafa9;
	text-align:center;
    display: table-cell; /* IE8から使用可能 */
    vertical-align: middle;
	font-size:100%;
}

address a {
	text-decoration:none;
	color:#0b151b;
	}

.page-back {
 position: fixed;
 bottom: 10px;
 right: 10px;
 border: 0;
}

.table_seibun {
    width: 960;
    margin: 10px 0;
	padding:20px 40px 30px;
    border: 10px #a49149 solid;
	background-color:#ffffff;
	font-size:120%;
}

.info {
	width: 960px;
	clear: both;
    line-height: 1.6em;
	color:#0b151b;
	background-color: #5eafa9;
	text-align:center;
    display: table-cell; /* IE8から使用可能 */
    vertical-align: middle;
	font-size:120%;
	padding: 30px 0;
}

.info a {
	text-decoration:none;
	color:#0b151b;
}

.info a:hover {
	color:#ffffff;
}


@media screen and (min-width:681px){
.sp {
	display: none!important;	
}
	
}

/*===============================================
●tablet.css  画面の横幅が800pxまで
===============================================*/
    

@media screen and (max-width:800px){

img{
max-width: 100%;
height: auto;
width /***/:auto;　
}

.main {
  width:auto;
}

h1{ 
  font-size: 13px; 
  text-align: center;
}

.about{
  font-size: 20px;
 }
.note{
  font-size: 14px;
 }

.footer {
    width:auto;
}  
  
}
	
/*===============================================
●smart.css  画面の横幅が640pxまで
===============================================*/

@media screen and (max-width:680px){

img{
max-width: 100%;
height: auto;
width /***/:auto;　
}

.main {
  width:100%;
}

.header {
  height:48px;
}

h1{ 
  font-size: 12px; 
  text-align: center;
  padding: 10px 5px;
  font-weight: normal;
  line-height:1.2em;
}


.info {
    clear: both;
    line-height: 1.6em;
	color:#0b151b;
	background-color: #5eafa9;
	text-align:center;
    display: table-cell; /* IE8から使用可能 */
    vertical-align: middle;
	font-size:120%;
	padding: 30px 0;
}

.info a {
	text-decoration:none;
	color:#0b151b;
	}

h2{
  font-size: 20px;
 }
.about{
  font-size: 11px;
 }
.note{
  font-size: 6px;
 }

.table_seibun {
	padding:20px 30px 30px;
}

.footer {
    width:auto;
}

.pc { 
  display: none!important;
}
 
}

@media print{
.sp{
	display:none;
	}
}