@charset "utf-8";


/* --------------------------------------------

#main_visual

---------------------------------------------- */ 
.main-visual {
  position: relative;
  width: 100%;
  margin: 0 auto 12em;
}
@media screen and (max-width:768px){
.main-visual {
  margin: 0 auto 6em;
}
}


.main-inner {
  position: relative;
  width: 90%;
  margin: auto;
}
@media screen and (max-width:768px){
.main-inner {
  width: 100%;
}
}

.main-logo {
  position: absolute; top: 2%; left: -2em; z-index: 500;
  width: 22%; max-width: 280px;
}
@media screen and (max-width:768px){
.main-logo {
  position: absolute; top: 0%; left: auto; right: 0.6em;
  width: 25%; max-width: 280px;
}
}

.main-logo img {
  display: block;
  width: 100%;
}


.main-catch {
  position: absolute; top: 34%; left: -1em; z-index: 500;
  width: 30%; max-width: 351px;
}
@media screen and (max-width:768px){
.main-catch {
  position: absolute; top: 0em; left: 0em;
  width: 65%; max-width: 410px;
}
}

.main-catch .main-catch-pc {
  display: block;
  width: 100%;
}
.main-catch .main-catch-sp {
  display: none;
  width: 100%;
}
@media screen and (max-width:768px){
.main-catch .main-catch-pc {
  display: none;
}
.main-catch .main-catch-sp {
  display: block;
}
}

.main-image {
  position: relative;
  width: 100%;
}
@media screen and (max-width:768px){
.main-image {
  padding-top: 1em;
}
}

.main-image .main-image-pc {
  display: block;
  width: 95%;
  margin: 0 0 0 auto;
}
.main-image .main-image-pc img {
  display: block; width: 100%;
}
.main-image .main-image-sp {
  display: none;
  width: 95%;
  margin: auto;
}
.main-image .main-image-sp img {
  display: block; width: 100%;
}
@media screen and (max-width:768px){
.main-image .main-image-pc {
  display: none;
}
.main-image .main-image-sp {
  display: block;
}
}

.main-image::after {
  display: block;
  content: "";
  position: absolute; bottom: -7%; left: 0;
  width: 100%;
  height: 350px;
  background: url("../img/index/main_ornament.png") bottom center no-repeat;
  background-size: contain;
}
@media screen and (max-width:768px){
.main-image::after {
  height: 100px;
}
}


/* --------------------------------------------

#message

---------------------------------------------- */ 
.message {
  margin-bottom: 8em;
}
@media screen and (max-width:768px){
.message {
  margin-bottom: 4em;
}
}

.message-heading {
  width: 100%; max-width: 450px;
  margin: 0 auto 5em;
}
@media screen and (max-width:768px){
.message-heading {
  margin: 0 auto 2em;
}
}

.message-heading img {
  display: block;
  width: 100%;
}

.message-inner {
  display: flex;
  justify-content: space-between;
  width: 90%; max-width: 900px;
  margin: auto;
}
@media screen and (max-width:980px){
.message-inner {
  display: block;
}
}

.message-image {
  width: 45%; max-width: 350px;
}
@media screen and (max-width:980px){
.message-image {
  width: 80%; max-width: 280px;
  margin: 0 auto 2em;
}
}
@media screen and (max-width:768px){
.message-image {
  width: 80%; max-width: 200px;
}
}

.message-image img {
  display: block;
  width: 100%;
}

.message-text p {
  line-height: 2;
  margin-bottom: 1.5em;
}
@media screen and (max-width:980px){
.message-text {
  width: 100%; max-width: 550px;
  margin: auto;
}
.message-text br {
  display: none;
}
}
@media screen and (max-width:768px){
.message-text {
  width: 90%; max-width: 350px;
  margin: auto;
}
}

.message-text p:nth-of-type(2) {
  margin-bottom: 2.5em;
}

.message-name {
  font-weight: bold;
}
.message-name span {
  display: inline-block;
  margin-left: 1em;
  font-size: 20px; font-size: 2rem;
}


/* --------------------------------------------

#movie

---------------------------------------------- */ 
.movie {
  margin-bottom: 10em;
  padding: 5em 0;
  background-color: #ebe260;
}
@media screen and (max-width:768px){
.movie {
  margin-bottom: 5em;
}
}

.movie a {
  display: block;
  width: 90%; max-width: 550px;
  margin: 0 auto;
}

.movie img {
  display: block;
  width: 100%;
}



/* --------------------------------------------

#detail

---------------------------------------------- */ 
.detail { margin-bottom: 10em;}
.detail:nth-last-of-type(1) { margin-bottom: 15em;}
@media screen and (max-width:980px){
.detail {
  margin-bottom: 5em;
}
.detail:nth-last-of-type(1) {
  margin-bottom: 8em;
}
}

.detail-inner {
  display: flex;
  justify-content: space-between;
  width: 90%; max-width: 1100px;
  margin: auto;
}
@media screen and (max-width:1100px){
.detail-inner {
 padding-bottom: 8em;
}
}
@media screen and (max-width:980px){
.detail-inner {
 display: block;
}
}
@media screen and (max-width:768px){
.detail-inner {
 padding-bottom: 150px;
}
}

.detail-image {
  width: 54%;
}
@media screen and (max-width:1100px){
.detail-image {
  width: 50%;
}
}
@media screen and (max-width:980px){
.detail-image {
  width: 100%; max-width: 450px;
  margin: 0 auto 2em;
}
}
@media screen and (max-width:768px){
.detail-image {
  margin: 0 auto 1em;
}
}

.detail-image img {
  display: block;
  width: 100%;
}

.detail-textbox {
  width: 42%;
  padding-top: 1em;
}
@media screen and (max-width:1100px){
.detail-textbox {
  width: 48%;
}
}
@media screen and (max-width:980px){
.detail-textbox {
  width: 100%; max-width: 500px;
  margin: auto;
}
}

.detail-heading {
  width: 100%; max-width: 360px;
  margin-bottom: 2.5em;
}
@media screen and (max-width:980px){
.detail-heading {
  width: 90%; max-width: 300px;
}
}
@media screen and (max-width:768px){
.detail-heading {
  width: 90%; max-width: 280px;
  margin-bottom: 1.5em;
}
}

.detail-heading img {
  display: block;
  width: 100%;
}

.detail-textbox p {
  width: 90%;
  margin: 0 0 0 auto;
}
@media screen and (max-width:980px){
.detail-textbox p {
  margin: 0 auto;
}
}


/* 個別指定 */

/*-- endeavor --*/
.detail-inner-endeavor {
  background: url("../img/index/endeavor_illust.png") bottom right no-repeat;
  background-size: 221px auto;
}
@media screen and (max-width:768px){
.detail-inner-endeavor {
  background-size: 160px auto;
}
}

/*-- delivery --*/
.detail-inner-delivery .detail-image {
  order: 1;
}

.detail-inner-delivery {
  background: url("../img/index/delivery_illust.png") bottom left no-repeat;
  background-size: 183px auto;
}
@media screen and (max-width:768px){
.detail-inner-delivery {
  background-size: 110px auto;
  background-position: right bottom;
}
}

/*-- purchase --*/
.detail-inner-purchase {
  background: url("../img/index/purchase_illust.png") bottom right no-repeat;
  background-size: 303px auto;
}
@media screen and (max-width:768px){
.detail-inner-purchase {
  padding-bottom: 100px;
  background-size: 200px auto;
}
}



/* --------------------------------------------

#company

---------------------------------------------- */ 
.company {
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width:980px){
.company {
  display: block;
}
}

.company-information {
  order: 1;
  width: 50%;
  padding: 3em 0 1em;
  background-color: #bc5eac;
}
@media screen and (max-width:980px){
.company-information {
  width: 100%;
}
}
@media screen and (max-width:768px){
.company-information {
  padding: 3em 0 2em;
}
}

.company-heaidng {
  width: 80%; max-width: 320px;
  margin: 0 auto 1.5em;
}
@media screen and (max-width:980px){
.company-heaidng {
  width: 80%; max-width: 250px;
}
}
@media screen and (max-width:768px){
.company-heaidng {
  width: 80%; max-width: 220px;
}
}

.company-heaidng img {
  display: block;
  width: 100%;
}

.company-textbox p {
  width: 80%;
  margin: auto;
  text-align: center;
  color: #fff;
}

.company-map {
  order: 2;
  width: 50%;
  height: 450px;
}
@media screen and (max-width:980px){
.company-map {
  width: 100%;
}
}
@media screen and (max-width:768px){
.company-map {
  height: 250px;
}
}

.company-map iframe {
  display: block;
  width: 100%;
  height: 100%;
}

/* --------------------------------------------

外部リンク

---------------------------------------------- */ 

.outlink { max-width: 500px; margin: 0 auto 10em;}
.outlink h3 { text-align: center; padding: 0 0 1em; position: relative;}
.outlink a { display: block; max-width: 350px; width: 80%; margin: 0 auto; text-align: center;}
.outlink img { width: 100%;  transition: .3;}
.outlink img:hover { opacity: .7;}
/*.outlink a { display: block; max-width: 350px; width: 80%; margin: 0 auto; text-align: center; padding: 1.2em; background: #ebe260; font-size: 20px; font-size: 2rem; font-weight: bold; transition: .2s;}
.outlink a:hover { background: #b348a1; color: #fff;}*/