@charset "utf-8";

/* ===================================================================

2018
 
=================================================================== */

/*----------------------------------------------------
	全体
----------------------------------------------------*/

html, body {
	padding: 0;
	margin: 0;
	height: 100%;
}
body {
	font-family:-apple-system, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", YuGothic, Avenir, Verdana, Arial, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Roboto, Meiryo, sans-serif;
	font-weight:500;
	font-size: 16px;
	line-height: 2.0em;
	color: #759989;
	position: relative;
	-webkit-text-size-adjust: none;
	/* word-break:break-all; */
}

/* clerfix */
.clearfix { /zoom : 1; }
.clearfix:after{ content : ''; display : block; clear : both; }

ul, li { list-style:none; }

body *{ text-shadow: none;}
h1, h2, h3, h4, h5, h6 {
	line-height: 1.5em;
	font-weight: 500;
	margin: 10px 0;
}

img { max-width:100%;}

.tC { text-align: center;}
.tL { text-align: left;}
.tR { text-align: right;}

.f_left { float:left;}
.f_right { float:right;}

*{
	-webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

/*----------------------------------------------------
	テキスト
----------------------------------------------------*/

h1 {
	padding: 0;
	margin:0;
}
h2{
	font-family: "游明朝", "Yu Mincho", "游明朝体", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", sans-serif;
	font-size: 28px;
	font-weight: bold;
	margin-bottom: 2em;
	letter-spacing: 2px; 
    position: relative;
	text-align: center;
}
h2::after {
    content: "";
    position: absolute;
    left: 50%;
    right: 0;
    bottom: 0;
	width: 200px;
	margin-left: -100px;
    border-bottom: 2px dashed #759989;
}
h2::after,
h2.w::after{
   bottom: -15px;
}
h2.w::after {
    border-bottom: 2px dashed #FFF;
}
h3{
	font-size: 24px;
	letter-spacing: 1.5px;
	text-align: center;
	margin-bottom: 1em;
}
h4{
	font-size: 18px;
	padding:0 0 0.5em 0;
}
h5{
	font-size: 15px;
}
p{ margin: 10px 0;}

a, a:link, a:active, a:hover{
	color: inherit;
	text-decoration: underline;
	-webkit-tap-highlight-color: rgba(255,255,255,0.6);
}

a, a:link{
	color: #000;
	text-decoration: none;
}
a:hover{
	color: #4D4D4D;
	text-decoration: none;
}

.icon-icon_link { padding-left: 3px;}


/*----------------------------------------------------
	共通
----------------------------------------------------*/
#wrapper{
	width: 100%;
	margin:0;
}
#container{
	width: 100%;
}
.contents {
	width: 100%;
}
article {
	max-width: 1024px;
	padding: 8em 2em 10em 2em;
	margin: 0 auto;
}
section {
	padding: 0.5em 0;
	margin-bottom: 1.5em;
	/zoom : 1;
}
section:after{ content : ''; display : block; clear : both; }

.sp-head,.sp-text,.sp-img {
    display: none !important ;
}
.pc-head,.pc-text,.pc-img {
    display: inherit !important;
}

.sp-title {
    display: none !important ;
}
.pc-title  {
    display: flex !important;
	display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
	display: flex;
}

/*	カラム
----------------------------------------------------*/

.row { /zoom : 1; }
.row:after{ content : ''; display : block; clear : both; }
.col-3,.col-4,.col-5,.col-6, .col-10 { float:left;}
.col-2{ width: 50%;}
.col-2a{ width: 40%;}
.col-2b{ width: 56%;}
.col-3{ width: 33.3333333%;}
.col-4{ width: 25%;}
.col-5{ width: 20%;}
.col-6{ width: 16.6666667%;}
.col-10{ width: 10%;}


/*	余白
----------------------------------------------------*/

.m10 { margin: 1em;}
.m05b { margin-bottom: 0.5em;}
.m10b { margin-bottom: 1em;}
.m15b { margin-bottom: 1.5em;}
.m20b { margin-bottom: 2em;}
.p10 { padding: 0 1em;}
.p15t { padding-top: 1.5em;}
.p20 { padding: 2em;}


/*	リスト
----------------------------------------------------*/

ul.def_type, ol.def_type{
	margin-left: 20px;
	margin-bottom: 20px;
}
ul.def_type li {
	margin: 5px 0;
	padding-left: 5px;
	list-style-type: disc;
	border:none;
}
ol.def_type li {
	margin: 5px 0;
	padding-left: 5px;
	list-style-type: decimal;
	border:none;
}

/*	ボタン
----------------------------------------------------*/

.btn_waku {
	width: 280px;
	margin: 1.5em auto;
	display: block;
	text-align: center;
}
.btn_waku a {
	display: block;
	padding: 0.5em 1em;
	text-decoration:none;
	color:#FFF;
	background: #d68992;
}
.btn_waku a:hover {
	text-decoration:none;
	background: #d65e6a;
}

.btn_waku.tR {
	margin: 1.5em 0 1.5em auto;
}

/*	table
----------------------------------------------------*/
.table_block table {
	border-collapse: collapse;
	width: 100%;
}
.table_block table th,
.table_block table td {
	padding: 15px 10px;
	border-top: 1px dotted #666;
	border-bottom: 1px dotted #666;
}
.table_block table th {
	text-align: left;
	vertical-align: top;
	width: 30%;
	color:#d65e6a;
	font-weight: normal;
}
.table_block table td {
	font-size: 90%;
	color: #333;
}

hr {
	border-top: 1px dotted #666;
	margin: 2em 0;
}

/*----------------------------------------------------
	header
----------------------------------------------------*/

/*----------------------------------------------------
	footer
----------------------------------------------------*/
footer {
	width: 100%;
	padding: 0.5em;
	text-align: center;
	background: #FFF;
}

footer .copyright{
	font-size: 85%;
	line-height: 1.7em;
	text-align: center;
	padding: 10px;
	color:#759989;
}

footer .col-2 { float: left;}

/* page-top */

#page-top {
	position: relative;
	text-align: center;
	font-size: 77%;
	margin: 1em auto;
}
#page-top a {
	margin: 0 auto;
}
#page-top a {
	text-decoration: none;
	width: 50px;
	padding: 5px;
	text-align: center;
	display: block;
	color: #759989;
}
#page-top a:hover {
	text-decoration: none;
	color: #000;
}
.icon-i_pt { font-size: 45px;}

/*----------------------------------------------------
	トップページ
----------------------------------------------------*/
#home-img{
	position: relative;
	padding: 0;
	margin: 0;
	height: 100%;
}
#home-img .bn-ns,
#home-img .bn-social,
#home-img .bn-app{
	position: absolute;
	z-index: 9999;
}
#home-img .bn-ns{
	top: 2em;
	left: 2em;
}
#home-img .bn-social{
	top: 2em;
	right: 2em;
}
#home-img .bn-app{
	bottom: 2em;
	right: 2.5em;
	width: 100%;
	text-align: right;
}
.icon-sally-i01, .icon-sally-i02, .icon-sally-i03 { font-size: 40px; padding: 0 10px; }
.bn-social a {
	text-decoration: none;
	color: #b7c6ab;
}
.bn-social a:hover {
	text-decoration: none;
	color: #000;
}

.bx-viewport {
  left: 0;
  box-shadow: none;
  border: none;
}
#slider { width: 100%;}
#slider li {
  width: auto;
  height: 100vh;
  background: center bottom no-repeat;
  background-size: cover;
  position: relative;
}
#slider li.slide-bg01 { background-image:url(../../img/home-img01.jpg);}
#slider li.slide-bg02 { background-image:url(../../img/home-img02.jpg);}

#concept .swiper-container,
#art .swiper-container{ 
   height: auto;
   margin-left: auto;
   margin-right: auto;
}
#concept .swiper-slide,
#art .swiper-slide{
    position: relative;
    width: 100%;
}
#concept .swiper-slide:before,
#art .swiper-slide:before{
    content:"";
    display: block;
    padding-top: 75%; /* 高さを幅の75%に固定 */
}
#concept .swiper-slide div,
#art .swiper-slide div{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.story .swiper-wrapper {
  align-items: stretch;
}

.story .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  padding-bottom: 25px;
}

.story .story-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}


.gallery-top,
.gallery-top2{
	max-width: 640px;
	padding-bottom: 1em;
	background: #FFF;
	box-shadow:0px 0px 10px;
}
.gallery-thumbs,
.gallery-thumbs2{
	width: 100%;
	box-sizing: border-box;
}
.gallery-thumbs .swiper-slide,
.gallery-thumbs2 .swiper-slide{
   opacity: 0.8;
   margin: 0.5em 0;
   margin-top: 4em;
}
.gallery-thumbs .swiper-slide-active,
.gallery-thumbs2 .swiper-slide-active{
   opacity: 1;
}

#story { background: #FFF;}
#art { background: url(../../img/art-bg.jpg) repeat-x center center #e9efe6;}
#concept { background: url(../../img/concept-bg.jpg) repeat-x center center  #abc1a9; color:#FFF;}
#award { background: #759989; color:#FFF;}
#costume { background: #598571; color:#FFF;}
#book { background: #FFF;}
#social { background: #e9efe6;}

#award .col-3,
#book .col-3{
	padding: 1em;
	margin-bottom: 0.5em;
	text-align: center;
}
#award .col-3 img{
	border: 0px solid #d8e3d2;
}
#costume .col-10{
	padding: 0.5em;
}
#social .contents{ 
	padding: 2em;
	margin: 0 auto;
}


/*----------------------------------------------------
	背景動画用
----------------------------------------------------*/

#home-img .logo{
	position: absolute;
	z-index: 9999;
}
#home-img .logo{
	bottom: 2em;
	left: 2em;
	width: 40%;
	max-width: 400px;
}

.mainvisual {
	width: 100%;
    height: 100vh;
    position: relative;
}
.mainvisual__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	z-index: -1;
}
.mainvisual__video_mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	
	background:  url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFUlEQVQImWNgQAKzZ89uIJXDwMAAADv9CUXMgxrFAAAAAElFTkSuQmCC) repeat top left;
}

/* 2018.3.13 修正 */
#video{
  position: fixed;
  z-index: -1;
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
}
/* 2018.3.13 修正ここまで */
.bn-yt {
	width: 160px;
	margin: 0.5em;
}