@charset "UTF-8";
html{
	box-sizing:border-box;
}
body{
	margin:0;	/*background:url(..images/bg.png);*/
	font-family:sans-serif;
	font-size:16px;
}

.header-nav-wrapper{
	position:fixed;
	z-index:10;
	left:0;
	top:0;
	width:100%;
	background:#3554EC;
	/*	background:#b6b2b2;*/
}

.main-container{
	display:flex;
	max-width:1000px;
	margin:0 auto;
	padding:0 0 40px 0;
	/*background:#fff;*/
}
header{
	background:#3554EC;
    /*background:#b6b2b2;*/
	
}
.header-container{
	margin:0 auto;
	padding:0px 20px 0px 10px;
	/*max-width:1000px;*/

}
.header-container h1{
	font-size:14px;
}
.header-container a{
	text-decoration: none;
	/*color:#fff;*/
}
.header-logo{
	/*color:#414141;*/
	color:#fff;
}

nav{
		background:#3554EC;
	border-bottom:5px solid #FFA842;
	/*border-bottom:5px solid #3554EC;*/
	color:#414141;;
}
.nav-container{
	margin:0 auto;
	padding:0 10px 0 10px;
	max-width:1000px;

}
nav ul{
	list-style:none;
	display:flex;
	margin:0;
	padding:0px 10px 0 10px;
	
}
nav li{
	flex:1 0 auto;
  background: #FFA842;

	border-radius:10px 10px 0 0;
	}
nav li a{
	display:block;
	padding:5px 20px;
	text-align:center;
	font-size:14px;
color: #414141 !important;
	text-decoration: none;
}
nav li a:hover{
  background: #788df3;
  color:#fff!important;
	text-decoration: none;
	border-radius:10px 10px 0 0;

}
nav li a:active{
  background: #788df3;
	/*color:#414141;*/
		color:#fff;
	border-radius:10px 10px 0 0;
}

/*
.article-base{
	background-color:#91DFFF;
}*/
#article {
	clear: both;
	padding: 0 !important;
	margin: 0 !important;
		/*background-color:#91DFFF;*/


background-size:800px;
background-repeat:repeat;

background-image:url("../images/back_img_blue.png" );
	/*background-color:rgba(255,255,255,0.3);*/

}

h1 a {
  color: #1a1a1a;
  font-size: 30px;
  text-decoration: none;
}
ul {
  list-style: none;
  display: flex;
}
ul li a {
  padding: 10px 15px 6px 15px;
  color: #1a1a1a;
  text-decoration: none;
  font-weight: bold;
}
ul li a:hover {
  text-decoration: underline;
}
#page_top{
  width: 90px;
  height: 90px;
  position: fixed;
  right: 0;
  bottom: 0;
  background: #ef3f98;
  opacity: 0.6;
  border-radius: 50%;
	z-index:100;
}
#page_top a{
  position: relative;
  display: block;
  width: 90px;
  height: 90px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -40px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
#page_top a::after{
  content: 'うえにもどる';
  font-size: 13px;
	font-weight:bold;
  color: #fff;
  position: absolute;
  top: 45px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;

}
.option-area {
	padding: 0 !important;
	margin: 0 !important;
	background-image: url("");
	background-repeat: repeat-x;
	background-position: center 0px;
	background-size: 100% auto;
}
video:hover {
   /*opacity: 0.75; /* 25％ほど透明にする */
		border: solid 2px #fff;
	margin-bottom:-4px;
}
.heading-section {
	position: relative;
	z-index: 2;
	color: #fff;
	text-align:center;
	margin: 50px 0 -60px -10px;
}
.heading-section img{
	width: 90%;
	max-width: 450px;
	margin: 0px 0 -14px 12px;
}

.option-area .main{
	margin: 0 !important;
	padding: 0 !important;
}
.option-area .main:first-child {
	margin: 0 !important;
	padding: 0 !important;
}
.option-area .main:last-child {
	margin: 0 !important;
	padding: 0 !important;
}
.option-area .option-media {
	padding: 0 !important;
	margin: 0 !important;
}
.option-area .option-media .option-media-row {
	padding: 0 !important;
	margin: 0 !important;
}

/*base*/
.exp {
	margin-bottom: 0 !important;
		text-align:center;
	color:#fff;
}
.exp_lead{
	text-align:left;
	
}
.exp_model{
		color:#fff;
		padding-top:30px;
	width:60%;
	margin:0 auto;
}

.btn1 img{
	display:block;
    width: 99.27267748%;
    max-width: 200px;
    margin: 0 auto;
    font-size: 10px;
		line-height: 1;
	}
.btn-tonton-dowmload-2 img{
			display:block;
    width: 99.27267748%;
    max-width: 138px;
    margin: 0 auto;
    font-size: 10px;
		line-height: 1;
	}

.article-base {
	max-width: 980px !important;
	margin-right: auto;
	margin-left: auto;
}
.article-heading {
	position: relative;
	z-index: 2;
	padding-top: 25px;
	margin: 0 0 45px 0;
}
.article-heading img{
	width: 100%;
}
.article-body {
	position: relative;
	z-index: 1;
	padding-bottom:30px;
}

.box-section {
	position: relative;
	z-index: 1;
	border-radius: 10px;
	border: solid 4px #fff;
	/*background-size: 101px auto;*/

	padding: 50px 16px 10px 16px;
}

/*


/*about*/
.about-lead {
	padding: 30px 15px 8px 15px;
	color: #fff;
    width: 95%;
    margin: 30px 0;
    
}
.exp_lead{
	 line-height: 2;
}
.exp_mov{
	padding:5px 0 5px 0 !important;
	/*background:#d7d2d2;*/
	
}
.btn1{
	text-align:center;
}
/*archive*/
.archive-list{
margin-top:70px;
}

.archive-list-item {
    margin-left: -40px;
	margin-bottom: 35px;
    padding: 0 20px;
    padding-bottom: 10px;
    list-style: none;
    text-align: center;
}

/*wallpaper*/
.wallpaper-set {
	margin: 0 -6px;
	text-align:center;
}
/*
.wallpaper-list-item a {
	display: block;
	max-width: 396px;
	margin-right: auto;
	margin-left: auto;
}*/
.heading-wallpaper img{
	width: 50%;
	max-width: 204px;
	margin: 0 auto 16px auto;
}
.thumb-wallpaper img{
	width:80%;
	margin: 0 auto 8px auto;
}
.btn-wallpaper img{
	width: 47.7165701%;
	max-width: 138px;
	margin: 0 auto 16px auto;
		font-size: 10px;
	line-height: 1;
}

.sample-video{
	margin-top:70px;
	text-align:center;
}
#footer{
    width: 100%;
    height: 100px;
    background-color: #3554EC;
	/*background:#b6b2b2;*/
    margin: -30px auto 0 auto;
	text-align:center;
}

.copyright{
	padding-top:1em;
	color: #FFFFFF;
}
.fade {
  transition: all 2000ms;
  opacity: 0;
  visibility: hidden;
  transform: translate(0px, 50px);
}

.fadein {
  opacity: 1;
  visibility: visible;
  transform: translate(0px, 0px);
} 
@media (max-width: 640px) {
	.header-container{
		text-align:center;
	}
.nav-container{
	margin:0 auto;
	padding:0;
	width:100%;
}
nav ul{
	padding:0;
}
nav li a{
	padding:5px 0 0 0;
}
	.article-heading {
    margin-top: 65px ;
}
	
	.how-mov{
		width:300px;
		margin-left:-20px;
	}
ul.archive-list {
display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
	}

.box-section {

	border: none;

}
}

@media (min-width: 641px) {

.section-about, .section-archive, .section-wallpaper {
	padding: 0 20px;
	}
.article-heading {
	position: relative;
	z-index: 2;
	padding-top: 120px;
	margin: 0 0 45px 0;
}
	/*
.about-lead {
	padding: 24px 15px 8px 15px;
	color: #fff;
	display: flex;
	flex-wrap: wrap;
    justify-content: space-around;
    width: 100%;
    margin: 30px 0 0 0;
    padding-top: 30px;	
}
.exp{
	width: calc(100% / 2 - 30px);
    margin-bottom: 30px;
    padding: 10px 10px;
}
	.exp_mov{
	padding-top:30px;
}*/
	/*
.how_video{
	padding-inline-start: 10px;
	}*/
.archive-list{
   list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
	
} 
}
@media screen and (min-width:641px) and ( max-width:809px) {
	.how-mov{
		width:260px;
	}
}
/*
@media (min-width: 861px) {
.section-about {
		margin-bottom: 32px;
	}
.section-archive {
		margin-bottom: 48px;
	}
.heading-about {
		margin: 0 0 -16px 12px;
	}
.heading-archive {
		margin: 0 0 -3px 12px;
	}
	/*
.box-section {
		border: solid 6px #fff;
	}*/
/*
.box-wallpaper {
		padding: 8px 10px 4px 10px;
	}
.about-lead {
		padding: 20px 33px 16px 36px;
	}

.movie-caption {
	font-size:medium;
}
	.btn1 img{
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    max-width: 138px;
	}
*/
@media (min-width: 981px) {
	.option-area {
		background-size: auto 216px;
	}
}


@media (min-width: 769px) {
	.about-lead {
		min-height: 168px;
		margin-right: 383px;
		padding: 20px 3.829787234% 16px 3.829787234%;
	}
}
@media (min-width: 641px) {
	.about-lead {
	padding: 24px 15px 8px 15px;
	color: #fff;
	display: flex;
	flex-wrap: wrap;
    justify-content: space-around;
    width: 100%;
    margin: 30px 0 0 0;
    padding-top: 30px;	
}
.exp{
	width: calc(100% / 2 - 30px);
    margin-bottom: 30px;
    padding: 10px 10px;
}
	.exp_model{
	padding-top:50px;
			 line-height: 2;
}
}

.btn5 img:hover{
	opacity:0.5;
}


.btn5 img:active {
    background-image:url(../images/button004.png);  
    background-repeat:  no-repeat;             
    width:auto; 
}
/*
.btn5.change {
  background-image: url("../images/button004.png");
}*/
a.btn_03 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 120px;
	margin: auto;
	padding: 0.5rem 4rem;
	font-weight: bold;
	border: 2px solid #27acd9;
	color: #27acd9;
	border-radius: 100vh;
	transition: 0.5s;
	background: #fff;
}
a.btn_03::before{
	content:"\025c0";
}
a.btn_03:hover {
	color: #fff;
	background: #27acd9;
}