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

/* PC */
@media only screen and (min-width: 481px) {

div.CoverPictures{
 width: 100%;
 text-align: center;
}
div.CoverPictures img{
 max-width: 1850px;
}

div.notice{
 position: relative;
 width: 951px;
 height: 207px;
 margin: 100px auto 0;
 border: #303030 solid 1px;
}
div.notice-title{
 position: absolute;
 left: 0;
 right: 0;
 top: -38px;
 text-align: center;
}
div.notice-info{
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 -webkit-transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%);
 width: 900px;
 text-align: center;
}
div.notice-outlink{
 position: absolute;
 bottom: -23px;
 left: 50%;
 transform: translateX(-50%);
}
div.notice-outlink a{
  color: #FFFFFF!important;
  text-decoration: none;
  background: #303030;
  padding: 10px 60px;
  outline: 1px solid;
  outline-color: #303030;
  outline-offset: 0px;
  display: inline-block;
  transition: .3s;
}
div.notice-outlink a:hover{
  animation: light .8s infinite!important;
  background: #ffffff;
  color: #303030!important;
}

div.news{
 position: relative;
 display: flex;
 margin: 200px auto 0;
}
div.news-title,
div.news-title img {
 width: 147px;
 min-width: 147px;
}
div.news-info{
 margin: auto;
}
div.news-info div.pt-cv-ifield{
 display: flex;
}
div.news-info p.pt-cv-title{
 order: 2;
 margin-left: 2em;
}
div.news-info span.entry-date{
 order: 1;
}
div.news-info .col-sm-6{
 width: 100%!important;
}
div.news-outlink{
 position: absolute;
 bottom: 0px;
 right: 0px;
}
div.news-outlink a{
  color: #FFFFFF!important;
  text-decoration: none;
  background: #303030;
  padding: 10px 60px;
  outline: 1px solid;
  outline-color: #303030;
  outline-offset: 0px;
  display: inline-block;
  transition: .3s;
}
div.news-outlink a:hover{
  animation: light .8s infinite!important;
  background: #ffffff;
  color: #303030!important;
}

div.concept{
 position: relative;
 display: flex;
 justify-content: space-between;
 margin: 200px auto 0;
}
div.concept-title,
div.concept-title img {
 width: 185px;
 min-width: 185px;
}
div.concept-img,
div.concept-img img{
 width: 701px;
 min-width: 701px;
}
div.concept-subtitle{
 padding-top: 40px;
}
div.concept-subtitle img{
 width: 495px;
 min-width: 495px;
}
div.concept-subtitle p{
 line-height: 2em;
 font-weight: 600;
}

div.onlineshop{
margin: 153px auto 0;
}
div.onlineshop-box{
 position: relative;
 background: url("/img/index/onlineshop-wall.jpg") no-repeat top left;
 width: 100%;
 height: 351px;
}
div.onlineshop-left{
 position: absolute;
 top: 70px;
 left: 0;
 width: 840px;
}
div.onlineshop-left span.onlineshop-logo{
 display: block;
 width: 100%;
 text-align: center;
}
div.onlineshop-left p{
 color: #ffffff;
 text-align: center;
}
div.onlineshop-outlink{
 position: absolute;
 bottom: 75px;
 left: 0px;
 width: 840px;
 text-align: center;
}
div.onlineshop-outlink a{
  color: #303030!important;
  text-decoration: none;
  background: #FFFFFF;
  padding: 10px 60px;
  outline: 1px solid;
  outline-color: #FFFFFF;
  outline-offset: 0px;
  display: inline-block;
  transition: .3s;
}
div.onlineshop-outlink a:hover{
  animation: light .8s infinite!important;
  background: #303030;
  color: #FFFFFF!important;
}

div.banner{
 position: relative;
 display: flex;
 justify-content: space-around;
 flex-wrap: wrap;
 margin: 200px auto 0;
}
div.banner-01,
div.banner-02{
 max-width: 840px;
 text-align: center;
}
div.banner-01 img,
div.banner-02 img{
 width: 700px;
 max-height: 700px;
}
@media only screen and (max-width: 1416px) {
div.banner-01{ margin-bottom: 50px;}
}

div.o2box{
 position: relative;
 margin: 300px auto 0;
}
div.o2box-title{
 text-align: center;
 width: 100%;
}
div.o2box-sub01,
div.o2box-sub02{
 display: flex;
 justify-content: space-around;
 flex-wrap: wrap;
}
div.o2box-sub01{
 margin-top: 100px;
}
div.o2box-sub02{
 margin-top: 200px;
}
div.o2box-sub01-left,
div.o2box-sub01-right,
div.o2box-sub02-left,
div.o2box-sub02-right{
 max-width: 840px;
}
div.o2box-sub01-right,
div.o2box-sub02-left{
 position: relative;
}
div.o2box-sub01-left{
 text-align: left;
}
div.o2box-sub02-right{
 text-align: center;
}
span.o2box-sub01-t{
 position: absolute;
 top: -40px;
 left: 190px;
 z-index: -1;
}
span.o2box-sub02-t{
 position: absolute;
 top: -40px;
 left: 190px;
 z-index: -1;
}
@media only screen and (max-width: 1308px) {
div.o2box-sub01{ align-items: center; justify-content: center!important;}
div.o2box-sub01-left{ margin-bottom: 50px; text-align: center}
}
@media only screen and (max-width: 1220px) {
div.o2box-sub02{ align-items: center; justify-content: center!important;}
div.o2box-sub02-left{ margin-bottom: 50px;}
div.o2box-sub02-right{ text-align: center;}
}
div.o2box-outlink{
 width: 100%;
 text-align: center;
 margin-top: 120px;
}
div.o2box-outlink a{
  color: #FFFFFF!important;
  text-decoration: none;
  background: #303030;
  padding: 10px 20px 10px 60px;
  outline: 1px solid;
  outline-color: #303030;
  outline-offset: 0px;
  display: inline-block;
  transition: .3s;
}
div.o2box-outlink a:hover{
  animation: light .8s infinite!important;
  background: #ffffff;
  color: #303030!important;
}
div.o2box-outlink i{
 display: inline-block;
 border-top: solid 3px #FFFFFF;
 border-right: solid 3px #FFFFFF;
 width: 12px;
 height: 12px;
 transform: rotate(45deg);
 margin-left: 30px;
}

div.o2box-cal{
 position: relative;
 margin: 200px auto 0;
}
div.o2box-cal-title{
 text-align: center;
 width: 100%;
 margin-bottom:80px; 
}
div.g-cal{
 width: 100%;
 text-align: center;
}
div.g-cal iframe{
 width: 1100px;
 height: 750px;
}
div.o2box-cal-book{
 display: flex;
 justify-content: space-around;
 flex-wrap: wrap;
 width: 800px;
 margin: 150px auto 320px;
}
div.o2box-outlink01 a,
div.o2box-outlink02 a{
  color: #FFFFFF!important;
  text-decoration: none;
  background: #303030;
  padding: 10px 60px 10px 60px;
  outline: 1px solid;
  outline-color: #303030;
  outline-offset: 0px;
  display: inline-block;
  transition: .3s;
}
div.o2box-outlink01 a:hover,
div.o2box-outlink02 a:hover{
  animation: light .8s infinite!important;
  background: #ffffff;
  color: #303030!important;
}

}/* PC */


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

div.CoverPictures{
 width: 100%;
 text-align: center;
}
div.CoverPictures img{
 max-width: 360px;
}

div.notice{
 position: relative;
 width: 340px;
 height: 155px;
 margin: 100px auto 0;
 border: #303030 solid 1px;
}
div.notice-title{
 position: absolute;
 left: 0;
 right: 0;
 top: -38px;
 text-align: center;
}
div.notice-title img{
 max-width: 178px;
}
div.notice-info{
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 -webkit-transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%);
 width: 300px;
 text-align: center;
}
div.notice-info h4{
 font-size: 0.8em!important;
 text-align: left!important;
}
div.notice-outlink{
 position: absolute;
 bottom: -18px;
 left: 50%;
 transform: translateX(-50%);
}
div.notice-outlink a{
  color: #FFFFFF!important;
  text-decoration: none;
  background: #303030;
  padding: 5px 20px;
  display: inline-block;
}

div.news{
 position: relative;
 margin: 70px auto 0;
}
div.news-title,
div.news-title img {
 width: 78px;
 min-width: 78px;
}
div.news-title{
 margin-bottom: 20px;
}

div.news-info{
 margin: auto;
}
div.news-info div.pt-cv-ifield{
 display: flex;
}
div.news-info p.pt-cv-title{
 order: 2;
 margin-left: 2em;
 font-size: 0.8em;
}
div.news-info span.entry-date{
 order: 1;
}
div.news-info .pt-cv-meta-fields{
 font-size: 0.7em;
 width: 100px;
}
div.news-info .col-sm-6{
 width: 100%!important;
}
div.news-outlink{
 width: 100%;
 text-align: center;
}
div.news-outlink a{
  color: #FFFFFF!important;
  text-decoration: none;
  background: #303030;
  padding: 5px 20px;
  display: inline-block;
}

div.concept{
 position: relative;
 margin: 70px auto 0;
}
div.concept-title,
div.concept-title img {
 width: 120px;
 min-width: 120px;
}
div.concept-img,
div.concept-img img{
 width: 350px;
 min-width: 350px;
}
div.concept-subtitle{
 padding-top: 30px;
 text-align: center;
}
div.concept-subtitle img{
 width: 273px;
 min-width: 273px;
}
div.concept-subtitle p{
 line-height: 2em;
 font-size: 0.8em;
 font-weight: 600;
 text-align: left;
}
div.concept-subtitle p br{
 display: none;
}

div.onlineshop{
margin: 100px auto 0;
}
div.onlineshop-box{
 position: relative;
 background: url("/img/sp_index/sp_onlineshop-wall.png") no-repeat top center;
 background-size: contain;
 width: 380px;
 height: 676px;
 margin: auto;
}
div.onlineshop-title{
 position: absolute;
 top: 30px;
 left: 20px;
 width: 100%;
}
div.onlineshop-title img{
 max-width: 281px;
}
div.onlineshop-left{
 position: absolute;
 top: 150px;
 left: 30px;
 width: 312px;
 text-align: left;
}
div.onlineshop-left span.onlineshop-logo{
 display: block;
 width: 100%;
 text-align: center;
}
div.onlineshop-left span.onlineshop-logo img{
 max-width: 180px;
}
div.onlineshop-left p{
 color: #ffffff;
 text-align: center;
}
div.onlineshop-outlink{
 position: absolute;
 bottom: 110px;
 left: 0px;
 width: 100%;
 text-align: center;
}
div.onlineshop-outlink a{
  color: #303030!important;
  text-decoration: none;
  background: #FFFFFF;
  padding: 10px 60px;
  outline: 1px solid;
  outline-color: #FFFFFF;
  outline-offset: 0px;
  display: inline-block;
}

div.banner{
 position: relative;
 margin: 35px auto 0;
}
div.banner-01,
div.banner-02{
 max-width: 340px;
 text-align: center;
 margin-bottom: 15px;
}
div.banner-01 img,
div.banner-02 img{
 width: 340px;
 max-height: 340px;
}

div.o2box{
 position: relative;
 margin: 85px auto 0;
}
div.o2box-title{
 text-align: center;
 width: 100%;
}
div.o2box-title img{
 width: 290px;
 max-width: 290px;
}
div.o2box-sub01,
div.o2box-sub02{
 max-width: 360px;
}
div.o2box-sub01{
 margin-top: 30px;
}
div.o2box-sub02{
 display: flex;
 flex-direction: column;
 margin-top: 65px;
}
div.o2box-sub01-left,
div.o2box-sub01-right,
div.o2box-sub02-left,
div.o2box-sub02-right{
 max-width: 340px;
 font-size: 0.8em;
}
div.o2box-sub01-left img{
 width: 340px;
 max-width: 340px;
}
div.o2box-sub01-right{
 margin-bottom: 15px;
}
div.o2box-sub02-right{
 order: 4;
}
div.o2box-sub02-right img{
 width: 340px;
 max-width: 340px;
}
div.o2box-sub02-left{
 order: 5;
}
div.o2box-outlink{
 width: 100%;
 text-align: center;
 margin-top: 70px;
}
div.o2box-outlink a{
  color: #FFFFFF!important;
  text-decoration: none;
  background: #303030;
  padding: 10px 20px 10px 60px;
  outline: 1px solid;
  outline-color: #303030;
  outline-offset: 0px;
  display: inline-block;
  transition: .3s;
}
div.o2box-outlink i{
 display: inline-block;
 border-top: solid 3px #FFFFFF;
 border-right: solid 3px #FFFFFF;
 width: 12px;
 height: 12px;
 transform: rotate(45deg);
 margin-left: 30px;
}

div.o2box-cal{
 position: relative;
 margin: 100px auto 0;
}
div.o2box-cal-title{
 text-align: center;
 width: 100%;
 margin-bottom:20px; 
}
div.o2box-cal-title img{
 width: 200px;
 max-width: 200px;
}
div.g-cal{
 width: 100%;
 text-align: center;
}
div.g-cal iframe{
 width: 340px;
 height: 300px;
}
div.o2box-cal-book{
 width: 340px;
 margin: 40px auto 90px;
 text-align: center;
}
div.o2box-outlink01 a,
div.o2box-outlink02 a{
  color: #FFFFFF!important;
  text-decoration: none;
  background: #303030;
  padding: 10px 60px 10px 60px;
  outline: 1px solid;
  outline-color: #303030;
  outline-offset: 0px;
  display: inline-block;
  margin-bottom: 30px;
}
div.o2box-outlink02 a{
  padding: 10px 70px 10px 70px!important;
}

}/* スマートフォン */