/* ----------------------------------------------- */
body {
	font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
	width: 100%;
	min-width: 320px;
	margin:0 auto;
	background-image: url(../img/bg.gif);
    background-repeat: repeat;
}
li {
list-style-type: none;
}
	.pc {display: block;}
	.sp {display: none;}

html{word-break: break-all;}
img {
    width: 100%;
    height: auto;
}

.Imggray{filter: grayscale(1);}

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

.MB100{margin-bottom: 100px!important;}

#top_btn2 {cursor:pointer; background: #000000; margin: 0 auto; text-align: center;width: 100%; padding: 4% 0;}

#top_btn2 img{width:100%; max-width: 576px;}

#top_btn2:hover {cursor:pointer;  opacity:0.8; transition: 0.3s;}

.menu{
font-size: 100%;
    text-align: center;
    margin-top: 15px;
    margin-right: 0;
	color: #ffffff;
}

.global-nav {
  position: fixed;
  right: -720px; /* これで隠れる */
  top: 0;
  width: 700px; /* スマホに収まるくらい */
  height: 100vh;
  padding-top: 58px;
  background-color:#2A0000;
  transition: all .6s;
  z-index: 200;
  overflow-y: auto; /* メニューが多くなったらスクロールできるように */
}
.hamburger {
  right: 0;
  top: 0;
  width: 55px; /* クリックしやすいようにちゃんと幅を指定する */
  height: 50px; /* クリックしやすいようにちゃんと高さを指定する */
  cursor: pointer;
  z-index: 300;
background: #2A0000;
}

.nav-open .hamburger {
	transition: 0.5s ;
    background-color: #2A0000;
}

.global-nav__list {
  margin: 13px 0 0 0;
  padding: 0;
  list-style: none;
}
.global-nav__item01 {
  text-align: center;
  padding: 0;
background-color: #cfb035;
}
.global-nav__item01 a {
  display: block;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
  text-decoration: none;
  color: #fff;
}
.global-nav__item01 a:hover {
  background-color: #8d7427;
}
.global-nav__item02 {
  text-align: center;
  padding: 0;
}
.global-nav__item02 a {
  display: block;
  text-decoration: none;
}
.global-nav__item03 {
  text-align: center;
  padding: 0;
	font-size:80%;
}
.global-nav__item03 a {
  display: block;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
  text-decoration: none;
  color: #6b6b6b;
}
.global-nav__item03 a:hover {
  background-color: #eee;
}
.hamburger__line {
  position: absolute;
  left: 10px;
  width: 35px;
  height: 2px;
  background-color: #fff;
  transition: all .6s;
}
.hamburger__line--1 {
  top: 14px;
}
.hamburger__line--2 {
  top: 24px;
}
.hamburger__line--3 {
  top: 34px;
}
.black-bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  background-color: #000;
  opacity: 0;
  visibility: hidden;
  transition: all .6s;
  cursor: pointer;
}
/* 表示された時用のCSS */
.nav-open .global-nav {
  right: 0;
}
.nav-open .black-bg {
  opacity: .8;
  visibility: visible;
}
.nav-open .hamburger__line--1 {
  transform: rotate(45deg);
  top: 26px;
left: 10px;
  background-color: #fff;
}
.nav-open .hamburger__line--2 {
  width: 0;
  left: 50%;
}
.nav-open .hamburger__line--3 {
  transform: rotate(-45deg);
  top: 26px;
left: 10px;
  background-color: #fff;
}
.nav-open .menu{ display: none;}

.otherBtn {
  position: relative;
  width: 432px;
height:55px;
  padding: 2px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
color:#000;
	margin: 0 20px;
	display: inline-block;
}
.otherBtn::before,
.otherBtn::after {
  position: absolute;
  top: 0;
  content: '';
  width: 20px;
  height: 100%;
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.otherBtn::before {
  left: 0;
  border-left: 2px solid #000;
}
.otherBtn::after {
  right: 0;
  border-right: 2px solid #000;
}

.contents {
	width:100%;
	margin:0 auto;
}

.under {
  background: linear-gradient(transparent 16%, #FFF500 0%);
}

.txt_large{font-size: 130%;}

/*メインイメージ--------------------------------- */

footer{color:#000;text-align:center;line-height:1em;padding:2em 0%;font-size:small; background: #FFFFFF; border-top: 3px solid #B3B3B3; width: 100%;min-width: 1024px;}
footer p{ margin-top: 10px;}
footer p a{ text-decoration: none; color: #000000;}
.mt{ margin-top: 15px;}

.coming{margin: 0 auto 4% auto; width: 90%;}
.coming img{width: 100%;}

.snsBox{
	float: right;
    width: auto;height: 52px;
    vertical-align: top;}
.snsBox a{width: 52px; height: 52px; display: inline-block;}
.hamburger{position: fixed; right:0;}

.sakuhin .LinkList2{width: 100%; margin-top: 0px;}
.sakuhin .LinkList2 li{display: inline-block;margin-right: 1%;width: 32.6%;}
.sakuhin .LinkList2 li:nth-child(3){margin-right: 0px;}

.slide-items{width: 100%; background: #ffff00;}
.slide-items li{width: 100%;}

.slick-list{width: 100%;}

.slick-dotted.slick-slider {
    padding-bottom: 30px;
   margin-bottom: 0px!important;
}

.campaignBtns{display: flex;width: 95%; max-width: 1000px; margin: 0 auto 20px auto;}
.campaignBtns li{flex-grow: 1; margin-left: 25px;}
.campaignBtns li:first-child{margin-left:0px;}

.summerCam{background: #0075c1;width:99.7%; max-width: 1000px; margin: 0 auto; padding: 25px 0; border-bottom: 3px solid #fff100; border-top: 3px solid #fff100;}
.summerCam img{    width: 50%;
    display: block;
    text-align: center;
    margin: 0 auto;}

.small02{color: #fff!important; font-size: 80%!important; font-weight: 100!important;}

@media screen and (min-width:1024px) {
	
.youtube2 {
	width: 99.9%;
}
	
.txtmini{ font-size: 85%;}

#mainCont {
	background-image:url(../img/mainBg.png);
	background-repeat:no-repeat;
    background-size: 100%;
    background-position:top;
    position: relative;
	display: block;
	min-width: 1024px;
    width: 100%;
}

.movie{background: rgba(255,255,255,0.90); padding:28px; width:944px; margin: 0 auto; margin-top: -7px; margin-bottom: 65px;}
	
.application{background: rgba(255,255,255,0.90); padding:28px; width:944px; margin: 0 auto;}
.application2{background: rgba(255,255,255,0.90); padding:8px 28px 28px 28px; width:944px; margin: 0 auto;}
	
.step{ width: 761px; margin: 20px auto 40px auto;}
.step2{ width: 600px; margin: 20px auto 65px auto;}
.steptxt{ margin: 0 auto;width: 829px;}
.txt01{ padding: 33px 15px 65px 15px; font-size: 20px;line-height: 2rem;}

.listContents{list-style-type:none; padding: 40px 15px 30px 15px;}
.listContents li{background:url(../img/txtIcon.png) no-repeat 0% 7px; padding-left:19px; margin: 10px 0px 30px 0px; font-size:20px; line-height: 1.6rem}

.sBtn{ width: 100%; max-width: 920px; padding: 40px 15px 30px 15px;}
.sBtn li{ display: inline-block; margin: 0px 5px 25px 5px; width:442px; }
	.txt02{text-align: center; padding: 30px 30px; background: #0066cc; border: 3px solid #529fed; font-size: 21px; line-height: 1.7rem; color: #FFFFFF; width: 840px; margin: 0 auto 50px auto;}
	.txt02 span{color: #FFF500; font-weight: bold; font-size: 110%;}
	
.lead{background:#0066cc; padding: 30px 0px; width: 100%; margin: 0 auto 30px auto;min-width: 1024px;}
.lead p{ font-size: 17px;line-height: 1.8rem; text-align: center; color: #FFFFFF;}
.lead p .bold{ font-size:120%; font-weight: bold; color: #fff000;}

#allcontents {
	height: auto;
    position: relative;
	margin: 0 auto;
	width: 100%;
	padding: 40px 0px;
	min-width: 1024px;
}
	

	
.midashi_Main{width: 1040px; margin: 0 auto 2% auto;}
.midashi_Main img{ width: 100%;}

.title{ width: 100%; min-width: 1000px; text-align: center; margin: 0 auto; padding: 7% 0 4% 0;}
.title img{ width: 100%; max-width: 1200px;}

	
.sakuhin{ width: 100%; max-width: 1000px; margin: 70px auto;}
.sakuhin h3{position: relative; background: rgba(255,255,255,0.90);}
.sakuhin h3 .Sho{position: absolute;z-index: 10;width: 16%;left: -0.4%;top: 11%;}
.sakuhin h3 .Sho img{width: 100%;}
.contents{background: rgba(255,255,255,0.90); padding:28px; width:944px; margin: 0 auto;}

.mainIllust{margin-bottom: 28px;}

.about{ display: inline-block; vertical-align: top; margin-right: 23px; margin-bottom: 18px;}
.story{width:653px;}
.story p{padding: 20px 10px; font-size: 20px ; line-height: 2.1rem; margin-bottom: 10px;}
.comment{width:653px;}
.comment p{padding: 20px 10px; font-size: 20px ; line-height: 2.1rem;}
.syoei{width: 27%; display: inline-block; vertical-align: top;}
.syoei img{width: 100%;}

.SPonly{display:none!important;}

/*ナビゲーション--------------------------------- */
#header {
	height:50px;
	background-color:#FFFFFF;
	-moz-box-shadow: 0px 2px 11px -4px rgba(0, 7, 64, 0.67);
-webkit-box-shadow: 0px 2px 11px -4px rgba(0, 7, 64, 0.67);
-ms-box-shadow: 0px 2px 11px -4px rgba(0, 7, 64, 0.67);
box-shadow: 0px 2px 11px -4px rgba(0, 7, 64, 0.67);
	position: relative;
	z-index: 30;
	min-width: 1024px;
}

#obi {
	height:50px;
	margin:0 auto;
}
.snsWrapper {
	height:50px;
	float:right;
}
.snsWrapper li {
margin-top: 4px;
margin-right: 15px;
}

h1 {
	width:242px;
	height:50px;
	float: left;
	padding-left: 1%;
}

.facebtn {
}
#twitterbtn {
}
	
.obi{background-image:url(../img/obi.gif); background-repeat: repeat-x , no-repeat; width: 100%;  text-align: center; margin-top: 20px;}
.obi img{}
	
/*ページトップへボタン--------------------------- */
#top_btn {cursor:pointer; background: #000000; margin: 0 auto; text-align: center; width: 100%; padding: 1% 0; min-width: 1024px;}

#top_btn img{width:100%; max-width: 576px;}

#top_btn:hover {cursor:pointer;  opacity:0.8; transition: 0.3s;
}
}

@media screen and (min-width:767px) and ( max-width:1024px) {
.SPonly{display:block!important;}
img{width: 100%;}

.txtmini{ font-size: 85%;}

#mainCont {
	padding-bottom: 30px;
	min-width: 0;
    width: 100%;
}

#mainCont {
	background-image:url(../img/mainBg.png);
	background-repeat:no-repeat;
    background-size:100%;
    background-position:top;
    position: relative;
	display: block;
	padding-bottom: 0px;
}

.snsBox{
	float: right;
    width: auto;height: 52px;
    vertical-align: top;}
.snsBox a{width: 52px; height: 52px; display: inline-block;}

.midashi_Main{width: 100%; margin: 0 auto 2% auto;}
.midashi_Main img{ width: 100%;}
	
.movie{background: rgba(255,255,255,0.90); padding:5%; width:90%; margin: 0 auto; margin-bottom: 35px;}
.youtube2 {
    width: 100%;
	height: 450px
}
.youtube2 iframe {
  width: 100% !important;
  height: 100% !important;
}
	
.application{background: rgba(255,255,255,0.90); padding:5%; width:90%; margin: 0 auto;}
.application2{background: rgba(255,255,255,0.90); padding:1% 5% 5% 5%; width:90%; margin: 0 auto;}
	
.step{ width: 100%; margin: 10px auto 45px auto;}
.step2{ width: 100%; margin: 30px auto 45px auto;}
.steptxt{ margin: 0 auto;width: 100%;}
.txt01{ padding: 20px 15px 45px 15px; font-size: 16px;line-height: 1.4rem;}

.listContents{list-style-type:none; padding: 20px 15px 10px 15px;}
.listContents li{background:url(../img/txtIcon.png) no-repeat 0% 7px; padding-left:19px; margin: 10px 0px 30px 0px; font-size:16px; line-height: 1.4rem}

.sBtn{ width: 100%; max-width: 920px; padding: 30px 0px 20px 0px;}
.sBtn li{ display: inline-block; margin: 0px 0.6% 2% 0%;width: 49%; }
.txt02{text-align: center; padding: 20px 3%; background: #0066cc; border: 3px solid #529fed; font-size: 15px; line-height: 1.6rem; color: #FFFFFF; width: 94%; margin: 0 auto 40px auto;}
.txt02 span{color: #FFF500; font-weight: bold; font-size: 110%;}

#allcontents {
	background-image:url(../img/bg.gif);
	height: auto;
	background-repeat:repeat;
    position: relative;
	margin: 0 auto;
	width: 94%;
	padding: 25px 3%;
	min-width: auto;
}
	

.PConly{display:none!important;}

.lead{background: #0066cc; padding:4%; width:92%; margin: 0 auto 30px auto; margin-top: 0px;min-width: auto;}
.lead p{ font-size: 15px;line-height: 1.6rem; text-align: center;color: #FFFFFF;}
.lead p .bold{ font-size:120%; font-weight: bold; color: #fff000;}

.title{ width: 95%; text-align: center; margin: 0 auto; padding: 6% 0 3% 0;}
.title img{ width: 100%;}

.sakuhin{ width: 100%; margin: 40px auto;}
.contents{background: rgba(255,255,255,0.90); padding:5%; width:90%; margin: 0 auto;}

.mainIllust{margin-bottom: 28px;}

.about{margin-bottom: 10px; margin-right: 0;}
.story{width:100%;}
.story p{padding: 15px 10px; font-size: 16px ; line-height: 1.7rem; margin-bottom: 10px;}
.comment{width:100%;}
.comment p{padding: 15px 10px; font-size: 16px ; line-height: 1.7rem;}
.syoei{ text-align: center; width: 40%;  margin: 0px auto 42px; display: block;}
	
.sakuhin h3{position: relative; background: rgba(255,255,255,0.90);}
.sakuhin h3 .Sho{position: absolute;z-index: 10;width: 16%;left: -0.4%;top: 11%;}
.sakuhin h3 .Sho img{width: 100%;}

/*ナビゲーション--------------------------------- */
	#header {background-color:#FFFFFF;
	-moz-box-shadow: 0px 2px 11px -4px rgba(0, 7, 64, 0.67);
-webkit-box-shadow: 0px 2px 11px -4px rgba(0, 7, 64, 0.67);
-ms-box-shadow: 0px 2px 11px -4px rgba(0, 7, 64, 0.67);
box-shadow: 0px 2px 11px -4px rgba(0, 7, 64, 0.67);
	position: relative;
	z-index: 30;}
	#obi { width:100%; max-height: 50px;}
	.snsWrapper {margin-right: 0%; margin-top: 1%; display: inline-block;float: right;}
	.snsWrapper li { margin-left:10px; }
	h1 {display:inline-block; margin-left: 2%; max-width: 64%;}
	
.obi{background-image:url(../img/obi.gif); background-repeat: repeat-x , no-repeat; width: 100%;  text-align: center; margin-top: 20px; background-size: contain;}
.obi img{width: 50%;}
	
/*ページトップへボタン--------------------------- */
#top_btn {cursor:pointer; background: #000000; margin: 0 auto; text-align: center;width: 100%; padding: 4% 0;}

#top_btn img{width:100%; max-width: 576px;}

#top_btn:hover {cursor:pointer;  opacity:0.8; transition: 0.3s;
}
	
footer{color:#000;text-align:center;line-height:1em;padding:2em 3%;font-size:small; background: #FFFFFF; border-top: 3px solid #B3B3B3; width: 94%;min-width:0;}
	
.sakuhin .LinkList2{width: 100%; margin-top: 0px;}
.sakuhin .LinkList2 li{display: inline-block;margin-right: 1%;width: 32.6%;}
.sakuhin .LinkList2 li:nth-child(3){margin-right: 0px;}

}

.slick-slide{position: relative;}
.slick-slide a:hover{opacity: 1!important;}
.slide-items-about{position: absolute;display: none;width: 100%;}
.slick-active .slide-items-about{display: block; animation: fadein-about 0.5s ease forwards; animation-delay: 3s; bottom: -70%;}

@keyframes fadein-about {
    100% {bottom: 0%;}
}

#allcontents a:hover,.campaignBtns a:hover{opacity: 0.7; transition: 0.3s;}

.sakuhin-List2{display: flex; margin-top: 5px;}
.sakuhin-List2 li{margin: 0 0 0 0; width: 49%;}
.sakuhin-List2 li:first-child{ margin-right: 2%;}

@media screen and (max-width:769px) {
	
.slick-prev,
.slick-next
{
    top: 40%!important;
    width: 23px!important;
    height: 31px!important;
}
	
.campaignBtns{flex-wrap: wrap;margin:30px auto 10px auto; width: 80%;}
.campaignBtns li{flex-grow: 1; margin-left:0; margin-bottom: 20px;}
	
.summerCam img {
    width: 70%;
}
	
.global-nav {
  position: fixed;
  right: -320px; /* これで隠れる */
  top: 0;
  width: 300px; /* スマホに収まるくらい */
  height: 100vh;
  padding-top: 58px;
  background-color:#2A0000;
  transition: all .6s;
  z-index: 200;
  overflow-y: auto; /* メニューが多くなったらスクロールできるように */
}

.SPonly{display:block!important;}

img{width: 100%;}

.txtmini{ font-size: 85%;}

#mainCont {
	padding-bottom: 30px;
	min-width: 0;
    width: 100%;
}

#mainCont {
	background-image:url(../img/mainBg.png);
	background-repeat:no-repeat;
    background-size:100%;
    background-position:top;
    position: relative;
	display: block;
	padding-bottom: 0px;
}

.midashi_Main{width: 100%; margin: 0 auto 2% auto;}
.midashi_Main img{ width: 100%;}
	
.movie{background: rgba(255,255,255,0.90); padding:5%; width:90%; margin: 0 auto; margin-bottom: 35px;}
.youtube2 {
    width: 100%;
	height: 250px
}
.youtube2 iframe {
  width: 100% !important;
  height: 100% !important;
}

.application{background: rgba(255,255,255,0.90); padding:5%; width:90%; margin: 0 auto;}
.application2{background: rgba(255,255,255,0.90); padding:1% 5% 5% 5%; width:90%; margin: 0 auto;}
	
.step{ width: 100%; margin: 10px auto 30px auto;}
.step2{ width: 100%; margin: 10px auto 45px auto;}
.steptxt{ margin: 0 auto;width: 100%;}
.txt01{ padding: 20px 15px 45px 15px; font-size: 16px;line-height: 1.4rem;}

.listContents{list-style-type:none; padding: 20px 15px 10px 15px;}
.listContents li{background:url(../img/txtIcon.png) no-repeat 0% 7px; padding-left:19px; margin: 10px 0px 30px 0px; font-size:16px; line-height: 1.4rem}

.sBtn{ width: 100%; max-width: 920px; padding: 30px 0px 20px 0px;}
.sBtn li{ display: inline-block; margin: 0px 0% 2% 0%;width: 100%; }
.txt02{text-align: center; padding: 20px 3%; background: #0066cc; border: 3px solid #529fed; font-size: 15px; line-height:1.3rem; color: #FFFFFF; width: 94%; margin: 0 auto 40px auto;}
.txt02 span{color: #FFF500; font-weight: bold; font-size: 110%;}

#allcontents {
	background-image:url(../img/bg.gif);
	height: auto;
	background-repeat:repeat;
    position: relative;
	margin: 0 auto;
	width: 94%;
	padding: 25px 3%;
	
}

.PConly{display:none!important;}

.lead{background:#0066cc; padding:4%; width:92%; margin: 0 auto; margin-top: 0px;}
.lead p{ font-size: 14px;line-height: 1.5rem; text-align:left; color: #FFFFFF;}
.lead p .bold{ font-size:120%; font-weight: bold; color: #fff000;}

.title{ width: 95%; text-align: center; margin: 0 auto; padding:7% 0 4% 0;}
.title img{ width: 100%;}

.sakuhin{ width: 100%; margin: 40px auto;}
.contents{background: rgba(255,255,255,0.90); padding:5%; width:90%; margin: 0 auto;}

.mainIllust{margin-bottom: 28px;}

.about{margin-bottom: 10px; margin-right: 0;}
.story{width:100%;}
.story p{padding: 15px 10px; font-size: 16px ; line-height: 1.7rem; margin-bottom: 10px;}
.comment{width:100%;}
.comment p{padding: 15px 10px; font-size: 16px ; line-height: 1.7rem;}
.syoei{ text-align: center; width: 85%;  margin: 0px auto 42px; display: block;}
	
.sakuhin h3{position: relative; background: rgba(255,255,255,0.90);}
.sakuhin h3 .Sho{position: absolute;z-index: 10;width: 16%;left: -0.4%;top: 11%;}
.sakuhin h3 .Sho img{width: 100%;}

/*ナビゲーション--------------------------------- */
	#header {background-color:#FFFFFF;
	-moz-box-shadow: 0px 2px 11px -4px rgba(0, 7, 64, 0.67);
-webkit-box-shadow: 0px 2px 11px -4px rgba(0, 7, 64, 0.67);
-ms-box-shadow: 0px 2px 11px -4px rgba(0, 7, 64, 0.67);
box-shadow: 0px 2px 11px -4px rgba(0, 7, 64, 0.67);
	position: relative;
	z-index: 30;}
	#obi { width:100%;max-height: 50px;height: 52px;}
	.snsWrapper {margin-right: 0%; margin-top: 1%; display: inline-block;float: right;}
	.snsWrapper li { margin-left:10px; }
	h1 {display:inline-block; margin-left: 2%; max-width: 48%;}
	
.obi{background-image:url(../img/obi.gif); background-repeat: repeat-x , no-repeat; width: 100%;  text-align: center; margin-top: 20px; background-size: contain;}
.obi img{width: 50%;}
	
/*ページトップへボタン--------------------------- */
#top_btn {cursor:pointer; background: #000000; margin: 0 auto; text-align: center;width: 100%; padding: 4% 0;}

#top_btn img{width:100%; max-width: 576px;}

#top_btn:hover {cursor:pointer;  opacity:0.8; transition: 0.3s;
}
	
footer{color:#000;text-align:center;line-height:1em;padding:2em 3%;font-size:small; background: #FFFFFF; border-top: 3px solid #B3B3B3; width: 94%;min-width:0;}

.hamburger{position: fixed; right:0;}
	
.sakuhin .LinkList2{width: 100%; margin-top: 0px;}
.sakuhin .LinkList2 li{display: inline-block; width: 100%;margin-bottom: 1.5%;}
.sakuhin .LinkList2 li:nth-child(3){margin-right: 0px;margin-bottom: 0;}
	
}