@charset "utf-8";
/* CSS Document */
body {
	background-color:#f9eee8;
	font-size: 62.5%;
	line-height:1.6;
	font-family: "Hiragino Maru Gothic W4 JIS2004", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif;
}


p {
	font-size:1rem;
}

ul {list-style-type:none;}

li {
	font-size:1rem;
}

li.two {  width : calc(100% / 2) ;display: inline-block;}

li.three {  width : calc(100% / 3) ;display: inline-block;}


img {width:100%; vertical-align:top;}



header {position: fixed; top:0; z-index:10; width:100%; padding-bottom:10px; }	


.drawer-hamburger {position:absolute !important;right:0; top:0; background:url(../images/header_menu.png) no-repeat !important;background-size: contain !important; padding:1rem;}

section:after {
	    content:" ";
	    display:block;
	    clear:both;
}

.drawer-nav {width:100%;padding:0;background:#fcfbf7 !important;  border-top-left-radius: 20px;}


.drawer-menu li {padding:0;margin:0;width:100%;}

.drawer-nav .menu_sns {margin:1em;}
.drawer-nav .menu_sns li {  width : calc(100% / 6) ;display: inline-block;}
.drawer-nav .menu_sns li img {width:100%;}

#movie_section {width:100%; text-align:center;margin-bottom:20px;}

#section01 {background:#cfd7eb;padding-bottom:1.2em;}

#section01 h1 {margin-bottom:20px;}

#section01_01 {text-align:center;width:100%;margin-bottom:20px;padding-bottom:20px;background:#f9eee8;}

#section01_01 video {width:80%;
	-webkit-border-radius:15px;
	-moz-border-radius:15px;
	border-radius:15px;
}

#section02 {background:#eef8f0; padding-bottom:5%;}

#section02 ul li p{font-family: 'Zen Maru Gothic', sans-serif; margin:0.6em; text-align:center; color:#ae8a7f;font-size:1.1em;}

#section03 {background:#f9eee8;}

#section03 .section03_tab {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto 0;
  background:#f9eee8;
}
#section03 .section03_tab :after {
  content: '';
  width: 100%;
  height: 3px;
  display: block;
  order: -1;
}
#section03 .tab_label {
  height: 80px;
  line-height: 60px;
  color:#fff;  
  text-align:center;
  background:url(../images/tab_off.png) center center;
  background-size:cover;
  font-family: 'Zen Maru Gothic', sans-serif; 
  font-weight: bold;
  font-size:1.8em;
  white-space: nowrap;
  order: -1;
  position: relative;
  z-index: 1;
  cursor: pointer;
  border-radius: 5px 5px 0 0;
  flex: 1;
}
#section03 .tab_label:not(:last-of-type) {
  margin-right: 5px;
}
#section03 .tab_content {
  width: 100%;
  height: 0;
  overflow: hidden;
  opacity: 0;
}

#section03 .tab_content ul li p {font-size:1.1em !important;}

#section03 .tab_content ul li {padding:.2em;}

#section03 .tab_content ul li span {color:#900 !important; font-weight:bold;}

/* アクティブタブ */
#section03 .tab_active:checked+.tab_label {
  color:#fff;
  background:url(../images/tab_on.png) center center;
  background-size:cover;
}
#section03 .tab_active:checked+.tab_label+.tab_content {
  height: auto;
  overflow: auto;
  padding: 20px;
  opacity: 1;
  transition: .5s opacity;
}
/* ラジオボタン非表示 */
#section03 .tab_active {
  display: none;
}

#section03 .tab_content p{font-family: 'Zen Maru Gothic', sans-serif; margin:0.6em; text-align:center; color:#ae8a7f;font-size:1.5em;}


#section04 {background:#efe9f3;}

#section04 .news {margin-top:-1.6rem;}

#section04 .news li a {text-decoration:none;}

#section04 .news li.news_article {background:#faf6ee;   border-radius: 1.2em; padding:0.8em; margin:0.6em;}

#section04 .news li.news_article img {border-radius: 0.6em; }

#section04 .news li.news_article p{font-family: 'Zen Maru Gothic', sans-serif; margin:0.6em; text-align:center; color:#ae8a7f;font-size:1em;}

#section05 {background:#FFFFFF;}


#section05 ul li.new_icon {
    display: inline-block;
}
.new_icon {
    position: relative;
}
.new_icon::after {
    content: " ";
    text-align: center;
    vertical-align: middle;
    width: 20%;
    height: 15.25%;
    font-size: 14px;
    font-weight: bold;
    background:url(../images/new_icon.png);
	background-size:cover;
    position: absolute;
    top: 10px;
    right: 10px;
}

.new_icon2 {
    position: relative;
}
.new_icon2::after {
    content: " ";
    text-align: center;
    vertical-align: middle;
    width: 24%;
    height: 18.3%;
    font-size: 14px;
    font-weight: bold;
    background:url(../images/new_icon.png);
	background-size:cover;
    position: absolute;
    top: 8%;
    left: 8%;
}

.new_icon3 {
    position: relative;
}
.new_icon3::after {
    content: " ";
    text-align: center;
    vertical-align: middle;
    width: 59px;
    height:45px ;
    font-size: 14px;
    font-weight: bold;
    background:url(../images/new_icon.png);
	background-size:cover;
    position: absolute;
    top: 10px;
    right: 10px;
}


#section06 {background:#8e8ea6;}


.items li {margin:10px;} 


#about_section01 {background:#cfd7eb;}

#about_section02 {padding-bottom:10em;background:#fff;}


.contents_about {background:#fff;}

.illustration {background:#cfd7eb; !important}

#illustration_section01 ul {margin:5% 0;}
#illustration_section01 ul li {width:46%;display:inline-block;margin:2%;}

.illustration_inner { background:#fff;padding-bottom:10em}

.illustration_slider{background:#cfd7eb;}

.illustration_slider {margin-bottom:0 !important;}

.illustration_slider li.slideimg {background:#fff; border-radius: 1.2em; padding:0.5em; margin:0.5em;}

.illustration_slider li.slideimg img {border-radius: 0.8em; 
}

.illust_list {background:#cfd7eb; margin-top:0.8em;}

.manga_slider li {margin:10px;}

#page_top{
  position: fixed;
  right: 0;
  bottom: -140px;
	z-index:2400;
}

#page_top a {
  position: relative;
  display: block;
}

#page_top a::before{
  position: absolute;
  top: -5px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

#page_top img {
    width: 140px;
    height: 110px;
}




@media screen and (min-width: 768px) {
	body {width:100%; max-width:604px;margin:0 auto;}
	h1 {width:100%; max-width:604px;margin:0 auto;}
	.contents {width:100%; max-width:604px;margin:0 auto; padding:0 24px 0;background:url(../images/background.png) repeat-y;}
	header {position: fixed; top:0; z-index:10; width:100%; max-width:556px;}	
	
	.drawer--right.drawer-open .drawer-hamburger{right:0 !important}


}

@media screen and (max-width: 767px) {
	#contents {width:100%;}
	.site-content {width:100%; }	

.illustration_slider li.slideimg img {border-radius: 0.8em; 
    height: 70vw;
	  object-fit: cover;
}
}