@charset "UTF-8";

/* ==================================================
  リセット
================================================== */
/*

HTML5 CSS Reset
Based on Eric Meyer's CSS Reset
and html5doctor.com HTML5 Reset

Copyright (c) 2011 736 Computing Services Limited
Released under the MIT license. http://opensource.736cs.com/licenses/mit

*/
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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, audio, canvas, details, figcaption,
figure, footer, header, hgroup, mark, menu, meter, nav,
output, progress, section, summary, time, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

article, aside, dialog, figure, footer, header,
hgroup, nav, section, blockquote {
  display: block;
}

nav ul, ol, ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

ins {
  text-decoration: underline;
}

del {
  text-decoration: line-through;
}

mark {
  background: none;
}

abbr[title], dfn[title] {
  border-bottom: 1px dotted #000;
  cursor: help;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

input[type="submit"], input[type="button"], button {
  padding: 0 !important;
  margin: 0 !important;
}

input, select, a img {
  vertical-align: middle;
}

/* ==================================================
  基本設定
================================================== */

* {
  box-sizing: border-box;
  font-style: normal;
}

html {
  height: 100%;
  font-size: 75%;
  overflow-x: hidden;
}

body {
  color: #333333;
  font-size: 1rem;
  width: 100%;
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  padding: 0;
  line-height: 1;
  background: #fff;
  letter-spacing: 2px;
  font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", "MS Gothic", sans-serif;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  line-height: 1.3;
}

p, i {
  line-height: 1.6;
}

input, textarea, select, button {
  font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", "MS Gothic", sans-serif;
  font-size: 1.08333rem;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

@media only screen and (max-width: 768px) {
  input, textarea, select, button {
    font-size: 1.33333rem;
  }
}

input[type="submit"], input[type="button"], button {
  cursor: pointer;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

a {
  color: #495057;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

a:hover {
  color: #495057;
  opacity: .5;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

/* ==================================================
  共通レイアウト
================================================== */


@media only screen and (min-width: 769px) {
/* =================================================================================================================
  PCレイアウト
================================================================================================================ */

.sp {
display: none;
}


section.itempage {
width: 100%;
position: relative;
}


section.itempage {
width: 100%;
max-width: 100vw;
overflow-x: hidden;
}

section.itempage h1 {
position: fixed;
left: 0;
right: 0;
top:69px;
text-align: center;
}

section.itempage h1.stopmode {
position: absolute;
}

section.itempage h2 {
position: absolute;
left: 49px;
top:48px;
text-align: center;
}

section.itempage .keyv {
width: 100%;
margin: 0px auto 0 auto;
padding: 180px 0;
text-align: center;
}

section.itempage .fullimagebox {
width: 100%;
}

section.itempage .fullimagebox img {
width: 100%;
object-fit: cover;
}

section.itempage h3 {
text-align: left;
width: 915px;
margin: 0px auto 63px auto;
}

section.itempage .umbrellaimg {
margin: 0px auto 155px auto;
text-align: center;
}

section.itempage .umbrellaimg a:hover {
  opacity: 1.0;
}
section.itempage .detail {
width: 743px;
margin: 0px auto 100px auto;
text-align: center;
}

section.itempage .detail .detail_mainimg {
margin: 0 0 40px 84px;
}
section.itempage footer {
margin: 0 auto 80px auto;
}
section.itempage footer .seriesname {
text-align: center;
margin: 0px auto 40px auto;
}

section.itempage footer nav ul {
text-align: center;
}

section.itempage footer nav ul li {
display: inline;
margin: 0 57px 0 0;
}
section.itempage footer nav ul li:last-child {
margin: 0;
}

section.itempage footer nav ul li a img {
vertical-align: top;
}

section.itempage footer nav ul li {
position: relative;
}

section.itempage footer nav ul li a:hover {
opacity:1.0;
}

section.itempage footer nav ul li#she a:hover:after,
section.itempage footer nav ul li#she a.current:after{
    content: url(../../img/common/flnav_she_online.png);
    position: absolute;
    top: 36px;
	left: -8px;
}
section.itempage footer nav ul li#him a:hover:after,
section.itempage footer nav ul li#him a.current:after{
    content: url(../../img/common/flnav_him_online.png);
    position: absolute;
    top: 36px;
	left: -3px;
}

section.itempage footer nav ul li#chorus a:hover:after,
section.itempage footer nav ul li#chorus a.current:after{
    content: url(../../img/common/flnav_chorus_online.png);
    position: absolute;
    top: 36px;
	left: 6px;
}

section.itempage footer nav ul li#winnie a:hover:after,
section.itempage footer nav ul li#winnie a.current:after {
    content: url(../../img/common/flnav_winnie_online.png);
    position: absolute;
    top: 36px;
	left: 11px;
}

section.itempage footer nav ul li#eatme a:hover:after,
section.itempage footer nav ul li#eatme a.current:after {
    content: url(../../img/common/flnav_eatme_online.png);
    position: absolute;
    top: 36px;
	left: 2px;
}

section.itempage footer nav ul li#time a:hover:after,
section.itempage footer nav ul li#time a.current:after {
    content: url(../../img/common/flnav_time_online.png);
    position: absolute;
    top: 36px;
	left: 5px;
}

section.itempage footer nav ul li#cattleya a:hover:after,
section.itempage footer nav ul li#cattleya a.current:after {
    content: url(../../img/common/flnav_cattleya_online.png);
    position: absolute;
    top: 36px;
	left: 14px;
}


/* ==================================================
  トップページ
================================================== */
body#top {
  /* 画像ファイルの指定 */
  background-image: url(../../img/top/main.jpg);
   
  /* 画像を常に天地左右の中央に配置 */
  background-position: center center;
   
  /* 画像をタイル状に繰り返し表示しない */
  background-repeat: no-repeat;
   
  /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
  background-attachment: fixed;
   
  /* 表示するコンテナの大きさに基づいて、背景画像を調整 */
  background-size: cover;
   
  /* 背景画像が読み込まれる前に表示される背景のカラー */
  background-color: #ffffff;
 
}

body#top #topbox {

text-align: center;
height: 100%;
width: 100%;
}

body#top #topbox #topbox-inner {
position: absolute;
width: 100%;
bottom: 8%;
}
body#top #topbox #topbox-inner h1 {
margin: 0 auto 23px auto;
}

body#top #topbox #topbox-inner h2 {
margin: 0 auto 36px auto;
}

body#top #topbox #topbox-inner ul li {
display: inline;
margin: 0 57px 0 0;
position: relative;
}

body#top #topbox #topbox-inner ul li a img {
vertical-align: top;
}

body#top #topbox #topbox-inner ul li a:hover {
opacity: 1.0;
}
body#top #topbox #topbox-inner ul li:last-child {
margin: 0;
}

body#top #topbox #topbox-inner ul li#she a:hover:after {
    content: url(../../img/top/gnav_she_online.png);
    position: absolute;
    top: 36px;
	left: -8px;
}

body#top #topbox #topbox-inner ul li#him a:hover:after {
    content: url(../../img/top/gnav_him_online.png);
    position: absolute;
    top: 36px;
	left: -3px;
}

body#top #topbox #topbox-inner ul li#chorus a:hover:after {
    content: url(../../img/top/gnav_chorus_online.png);
    position: absolute;
    top: 36px;
	left: 6px;
}

body#top #topbox #topbox-inner ul li#winnie a:hover:after {
    content: url(../../img/top/gnav_winnie_online.png);
    position: absolute;
    top: 36px;
	left: 11px;
}

body#top #topbox #topbox-inner ul li#eatme a:hover:after {
    content: url(../../img/top/gnav_eatme_online.png);
    position: absolute;
    top: 36px;
	left: 2px;
}

body#top #topbox #topbox-inner ul li#time a:hover:after {
    content: url(../../img/top/gnav_time_online.png);
    position: absolute;
    top: 36px;
	left: 5px;
}

body#top #topbox #topbox-inner ul li#cattleya a:hover:after {
    content: url(../../img/top/gnav_cattleya_online.png);
    position: absolute;
    top: 36px;
	left: 14px;
}


/* ==================================================
  01-She
================================================== */
body#she .itempage .keyv {

}

body#she .keyv p img {
width: 64%;
}

body#she .fullimagebox {
margin: 0 auto 180px auto;
}

#imgShe2 {
width: 34.6%;
margin: 0 auto 180px auto;
}
#imgShe2 img {
width: 100%;
}

#imgShe3 {
width: 64.8%;
margin: 0 auto 180px auto;
}
#imgShe3 img {
width: 100%;
}

#imgShe4 {
width: 100%;
margin: 0 auto 180px auto;
}

#imgShe4 img {
width: 100%;
}

/* ==================================================
  02-Him
================================================== */

#imgHim1,
#imgHim2{
margin: 0 0 180px 0;
}

#imgHim3{
margin: 0 0 360px 0;
}

#imgHim1 img,
#imgHim2 img,
#imgHim3 img {
width: 100%;
}

/* ==================================================
  03-Chorus
================================================== */
body#chorus .itempage .keyv {

}

body#chorus .keyv p img {
width: 64.8%;
}

#imgChorus1  {
margin: 0 0 180px 0;
}

#imgChorus1 img {
width: 100%;
}

#imgChorus2  {
margin: 0 0 180px 0;
}

#imgChorus3 {
text-align: center;
}
#imgChorus3 img {
width: 64.8%;
margin: 0 auto 180px auto;
}


/* ==================================================
  04-Winnie
================================================== */
body#winnie .itempage .keyv {
  
  }
  
  body#winnie .keyv p img {
  width: 60.3%;
  }
  
  #imgWinnie1  {
  margin: 0 0 180px 0;
  }
  
  #imgWinnie1 img {
  width: 100%;
  }
  
  #imgWinnie2  {
  text-align: center;
  margin: 0 0 180px 0;
  }
  
  #imgWinnie2 img {
    width: 38.6%;
  }

  
  
/* ==================================================
  05-Eatme
================================================== */
body#eatme .itempage .keyv {
  padding-bottom: 0 !important;
  }
  
  body#eatme .keyv p img {
  width: 100%;
  }
  
  body#eatme .keyv p {
    line-height: 0;
  }
  #imgEatme1  {
  margin: 0;
  }
  
  #imgEatme1 img {
  width: 100%;
  }

  #imgEatme2 img {
    width: 100%;
    }
  
  #imgEatme2  {
  text-align: center;
  margin: 0 0 360px 0;
  }
  
  #imgWinnie2 img {
    width: 38.6%;
  }

  #imgEatme3 {
    text-align: center;
    margin: 0 0 360px 0;
  } 
#imgEatme3 img {
  width:39.9% ;
}

/* ==================================================
  06-Time
================================================== */
body#time .itempage .keyv {
  width: 100%;
  }
  
  body#time .keyv p img {
    width: 100%;
    object-fit: cover;
  }
 
  #imgTime1  {
  margin: 0 0 180px 0;
  }
  
  #imgTime1 img {
  width: 100%;
  }

  #imgTime2  {
    margin: 0 0 180px 0;
    }
  #imgTime2 img {
    width: 100%;
    }
    #imgTime3  {
      margin: 0 0 180px 0;
      }
    #imgTime3 img {
      width: 100%;
      }

      #imgTime4  {
        margin: 0 0 180px 0;
        }
      #imgTime4 img {
        width: 100%;
        }


/* ==================================================
  07-Cattleya
================================================== */
body#cattleya .itempage .keyv {

  }
  body#cattleya .keyv p img {
    width: 60%;
  }
 
  #imgCattleya1  {
  margin: 0 0 180px 0;
  }
  
 
  #imgCattleya2  {
    margin: 0 0 180px 0;
    }
  #imgCattleya2 img {
    width: 100%;
}
    #imgCattleya3  {
      text-align: center;
      margin: 0 0 180px 0;
      }
    #imgCattleya3 img {
      width: 39.8%;
      }

/* PC用CSS終了
================================================== */
}


@media only screen and (max-width: 768px) {
/* =================================================================================================================
  SPレイアウト
================================================================================================================ */
.pc {
display: none;
}

body.sec footer .sec_spnavbox {
width: 100%;
margin: 0;
padding: 0 0 35px 0;
}


body.sec footer .sec_spnavbox ul {
text-align: center;
}

body.sec footer .sec_spnavbox ul.top_spnav_1 {
margin: 0 0 2.623% 0;
}
body.sec footer .sec_spnavbox ul li {
display: inline-block;
margin: 0;
vertical-align: top;
}


body.sec footer .sec_spnavbox ul li::after {
    content:url(../../img/common/fnav_separater_sp.png);
    display: inline-block;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
	margin: 0px 10px;
	vertical-align: -71%;
}

body.sec footer .sec_spnavbox ul li:last-child::after {
content:"";
margin: 0;
}

body.sec footer .sec_spnavbox ul li:last-child {
margin: 0;
}

body.sec footer .sec_spnavbox ul li a img {
margin: 0;
zoom: .5;
}
	@media screen and (max-width:320px){
		body.sec footer .sec_spnavbox ul li a img {
		margin: 0;
		zoom: 0.425;
		}
	}

section.itempage h1 {
position: fixed;
left: 0;
right: 0;
top:20px;
text-align: center;
z-index: 100;
}

section.itempage h1 img {
zoom:0.5;
}
section.itempage h1.stopmode {
position: absolute;
}

section.itempage h2 {
position: absolute;
left: 10px;
top:20px;
}

section.itempage h2 img {
zoom:0.4;
}


section.itempage .keyv {
width: 100%;
margin: 0px auto 0 auto;
padding: 90px 0;
text-align: center;
}

section.itempage .fullimagebox {
width: 100%;
}

section.itempage .fullimagebox img {
width: 100%;
object-fit: cover;
}

section.itempage h3 {
text-align: left;
margin: 0px auto 30px 10px;
}

section.itempage h3 img {
zoom:0.4;
}

section.itempage .umbrellaimg {
margin: 0px auto 30px auto;
text-align: center;
}

section.itempage .umbrellaimg img {
zoom:0.45;
}

h3#logoMelaDatail img {
width: 135px;
}

section.itempage .detail {
width: calc(100% - 20px);
margin: 0px 10px 50px 10px;
text-align: center;
box-sizing: border-box;
}

section.itempage .detail .detail_mainimg {
margin: 0 0 20px 0;
}

section.itempage footer .seriesname {
text-align: center;
margin: 0px auto 30px auto;
}

section.itempage footer .seriesname img {
zoom:0.6;
}

/* ==================================================
  トップページ
================================================== */
body#top {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  /* 画像ファイルの指定 */
  background-image: url(../../img/top/main_sp.jpg);
   
  /* 画像を常に天地左右の中央に配置 */
  background-position: center center;
   
  /* 画像をタイル状に繰り返し表示しない */
  background-repeat: no-repeat;
   
  /* モバイルでは背景を固定せず描画崩れを防ぐ */
  background-attachment: scroll;
   
  /* 表示するコンテナの大きさに基づいて、背景画像を調整 */
  background-size: cover;
   
  /* 背景画像が読み込まれる前に表示される背景のカラー */
  background-color: #ffffff;
 
}
body#top #topbox {
width: 100%;
height: 100%;
overflow: hidden;
}
body#top #topbox #topbox-inner {
position: relative;
width: 100%;
max-width: 100vw;
height: 100%;
overflow: hidden;


}

body#top #topbox #topbox-inner h1 {
position: absolute;
top: 60%;
left: 0;
right: 0;
width: 43%;
margin: 0px auto;
text-align: center;
}

body#top #topbox #topbox-inner h1 img {
zoom:0.8;
}
body#top #topbox #topbox-inner h2 {
position: absolute;
top: 4.5%;
left: 0;
right: 0;
width: 82%;
margin: 0px auto;
text-align: center;
}

body#top #topbox #topbox-inner .top_spnavbox {
width: 100%;
position: absolute;
top: 84%;
}


body#top #topbox #topbox-inner .top_spnavbox ul {
text-align: center;
}

body#top #topbox #topbox-inner .top_spnavbox ul.top_spnav_1 {
margin: 0 0 2.623% 0;
}
body#top #topbox #topbox-inner .top_spnavbox ul li {
display: inline-block;
margin: 0;
vertical-align: top;
}


body#top #topbox #topbox-inner .top_spnavbox ul li::after {
    content:url(../../img/top/nav_separater_sp.png);
    display: inline-block;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
	margin: 0px 10px;
	vertical-align: -71%;
}

body#top #topbox #topbox-inner .top_spnavbox ul li:last-child::after {
content:"";
margin: 0;
}

body#top #topbox #topbox-inner .top_spnavbox ul li:last-child {
margin: 0;
}

body#top #topbox #topbox-inner .top_spnavbox ul li a img {
margin: 0;
zoom: .5;
}
	@media screen and (max-width:320px){
		body#top #topbox #topbox-inner .top_spnavbox ul li a img {
		margin: 0;
		zoom: 0.425;
		}
	}

/* ==================================================
  01-She
================================================== */
body#she .itempage .keyv {

}

body#she .keyv p img {
width: 64%;
}

body#she .fullimagebox {
margin: 0 auto 70px auto;
}

#imgShe2 {
width: 54.6%;
margin: 0 auto 70px auto;
}
#imgShe2 img {
width: 100%;
}

#imgShe3 {
width: 64.8%;
margin: 0 auto 70px auto;
}
#imgShe3 img {
width: 100%;
}

#imgShe4 {
width: 100%;
margin: 0 auto 70px auto;
}

#imgShe4 img {
width: 100%;
}

/* ==================================================
  02-Him
================================================== */
body#him .keyv p img {
width: 64%;
}

#imgHim1,
#imgHim2{
margin: 0 0 70px 0;
}

#imgHim3{
margin: 0 0 140px 0;
}

/* ==================================================
  03-Chorus
================================================== */
body#chorus .keyv p img {
width: 64%;
}

#imgChorus1,
#imgChorus2,
#imgChorus3{
margin: 0 0 70px 0;
}

#imgChorus3 {
text-align: center;
}
#imgChorus3 img {
width: 64.8%;
}
#imgHim3{
margin: 0 0 140px 0;
}



/* ==================================================
  04-Winnie
================================================== */
body#winnie .itempage .keyv {
  
  }
  
  body#winnie .keyv p img {
  width: 60.3%;
  }
  
  #imgWinnie1  {
  margin: 0 0 70px 0;
  }
  
  #imgWinnie1 img {
  width: 100%;
  }
  
  #imgWinnie2  {
  text-align: center;
  margin: 0 0 70px 0;
  }
  
  #imgWinnie2 img {
    width: 38.6%;
  }

 
/* ==================================================
  05-Eatme
================================================== */
body#eatme .itempage .keyv {
  padding-bottom: 0 !important;
  }
  
  body#eatme .keyv p img {
  width: 100%;
  }
  
  body#eatme .keyv p {
    line-height: 0;
  }
  #imgEatme1  {
  margin: 0;
  }
  
  #imgEatme1 img {
  width: 100%;
  }

  #imgEatme2 img {
    width: 100%;
    }
  
  #imgEatme2  {
  text-align: center;
  margin: 0 0 140px 0;
  }
  
  #imgWinnie2 img {
    width: 38.6%;
  }

  #imgEatme3 {
    text-align: center;
    margin: 0 0 140px 0;
  } 
#imgEatme3 img {
  width:39.9% ;
}


/* ==================================================
  06-Time
================================================== */
body#time .itempage .keyv {
  width: 100%;
  }
  
  body#time .keyv p img {
    width: 100%;
    object-fit: cover;
  }
 
  #imgTime1  {
  margin: 0 0 70px 0;
  }
  
  #imgTime1 img {
  width: 100%;
  }

  #imgTime2  {
    margin: 0 0 70px 0;
    }
  #imgTime2 img {
    width: 100%;
    }
    #imgTime3  {
      margin: 0 0 70px 0;
      }
    #imgTime3 img {
      width: 100%;
      }

      #imgTime4  {
        margin: 0 0 70px 0;
        }
      #imgTime4 img {
        width: 100%;
        }


/* ==================================================
  07-Cattleya
================================================== */
body#cattleya .itempage .keyv {

  }
  body#cattleya .keyv p img {
    width: 60%;
  }
 
  #imgCattleya1  {
  margin: 0 0 70px 0;
  }
  
 
  #imgCattleya2  {
    margin: 0 0 70px 0;
    }
  #imgCattleya2 img {
    width: 100%;
}
    #imgCattleya3  {
      text-align: center;
      margin: 0 0 70px 0;
      }
    #imgCattleya3 img {
      width: 39.8%;
      }


/* SP用CSS終了
================================================== */

}
/* ==================================================
  Cocilaelle site logo link
================================================== */
a.cocilaelle-site-logo {
  position: fixed;
  top: 32px;
  right: 44px;
  display: block;
  width: 92px;
  height: auto;
  z-index: 300;
}
a.cocilaelle-site-logo img {
  display: block;
  width: 100%;
  height: auto;
}
@media screen and (max-width: 767px) {
  a.cocilaelle-site-logo {
    top: 10px;
    right: 10px;
    width: 40px;
  }
}