/**
 * main css
 * 
 * http://www.idangero.us/swiper/
 * 
 */

@charset "utf-8";

#global_nav .dropdown>li {
	width: 16.66%;
	color:#7a7a7a;
	font-size: 14px;
	font-weight: normal;
	border-left: 1px solid #e2e0dc;
	border-bottom: 3px solid #fff;
	box-sizing: border-box;
	text-align: center;
	height: 41px;
	display: table-cell;
	vertical-align: middle;
	padding: 11px 0;
}
#global_nav .dropdown>li.line2 {
	border-bottom: 3px solid #fff;
	padding: 0;
}
#global_nav .dropdown>li:first-child {
	border-left: none;
}
#global_nav .dropdown>li a {
	display: block;
	color:#7a7a7a;
	padding: 0;
}
#global_nav .dropdown>li:hover {
	border-bottom: 3px solid #1a3e7e;
}
#global_nav .dropdown>li a:hover {
	opacity: 0.5;
}

#sp_nav a {
	display: none;
}

/* base */
html,body,h1,h2,h3,h4,h5,h6,h7,h8,p,div,
ul,ol,li,dl,dt,dd,img {
  	margin:0;
  	padding:0;
}

figure,article{
    display: block;
    margin: 1em 40px;
    margin-top: 0;
    margin-bottom: 20px;
}

*{
font-family: Times New Roman, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', 'Hiragino Mincho ProN', "Yu Mincho", YuMincho, "HG明朝B", sans-serif;
}

body {
	color:#312626;
	font-size:13px;
    *font-size:small;
    *font:x-small;
	line-height:1;
	text-align:center;
	letter-spacing:0.2em;
}

h1,h2,h3,h4,h5,h6,h7 {
    font-size:100%;
    
	font-weight:normal;
}

ol,ul {
	list-style:none;
}

p.lead{
    letter-spacing: 1px;
}

img {
	border:0;
}

a:hover img {
	border:0;
	filter: alpha(opacity=50);
	-ms-filter: "alpha(opacity=50)";
	opacity: 0.5;
	-moz-opacity: 0.5;
	-khtml-opacity: 0.5;
}


a:link,
a:visited {
	color: #1a3e7e;
	text-decoration:none;
}

a:hover {
	color:#26ccff;
	text-decoration:none;
}

.clearfix:after{
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}

.clearfix{
	zoom:1;
}


/* header */

#header {
	max-width: 1026px;
	background: #fff;
	margin: 0 auto;
	text-align: left;
	position: relative;
}

#header p.logo {
	 float:left;
	 width:272px;
	 margin:13px 0 24px 30px;
	 display:inline;
}

#header p.links {
	float:right;
	margin:20px 26px 0 0;
	display:inline;
}

#header p.links a {
	background:url(../images/arrow03.png) no-repeat left top;
	padding-left:22px;
	margin-left:15px;
	line-height: 14px;
	display: inline-block;
}

#header div.sns_parts {
	position: absolute;
	right: 26px;
	bottom: 26px;
}
#header div.sns_parts p{
	display:inline-block;
	float:left;
	width:45%;
    padding-left: 3px;
	margin:0px;
} 


/* main_img */

p#main_img {
	width:100%;
}

p#main_img img {
	width:1024px;
	margin:0 auto;
}


/* lower_main_img */

p#lower_main_img {
	width:100%;
	margin-bottom:12px;
}

p#lower_main_img img {
	width:1039px;
	margin:0 auto;
	margin-left:-15px;
}

/* slider */
.swiper-container{
    text-align: center;
}

.swiper-container .swiper-slide img{
    max-width: 1014px;
    width: 100%;
	height: auto;
    padding-top: 5px;
    padding-bottom: 5px;
}

.swiper-slide {
     background-position: center;
     background-size: cover;
    }



h1#page_ttl {
	color: #383838;
	font-size: 108%;
	font-weight: bold;
	line-height: 1.0;
	padding: 0 0 8px 22px;
	margin: 22px auto 15px;
	max-width: 982px;
	text-align: left;
}
h1#page_ttl_item {
	color: #383838;
	font-size: 100%;
	font-weight: normal;
	line-height: 1.0;
	padding: 0 0 8px 22px;
	margin: 30px auto 15px;
	max-width: 982px;
	text-align: left;
}

h7#collection_name {
	color: #808080;
	font-size: 100%;
	font-weight: normal;
	/*padding: 0 0 8px 22px;*/
	margin: 22px auto 15px;
	max-width: 350px;
	text-align: center;
}

h7#item_name {
	color: #383838;
	font-size: 120%;
	font-weight: bold;
	margin: 22px auto 15px;
	max-width: 982px;
	text-align: center;
    text-decoration: underline;

}

h7#item_price {
	color: #383838;
	font-size: 110%;
	font-weight: normal;
	margin: 22px auto 15px;
	max-width: 982px;
	text-align: center;

}

h7#collection_name_2 {
	color: #808080;
	font-size: 150%;
	font-weight: normal;
	/*padding: 0 0 8px 22px;*/
	margin: 22px auto 15px;
	max-width: 350px;
	text-align: left;
}

h7#item_name_2 {
	color: #383838;
	font-size: 200%;
	font-weight: normal;
	/*padding: 0 0 8px 22px;*/
	margin: 22px auto 15px;
	max-width: 350px;
	text-align: left;
}
h7#price_2 {
	color: #383838;
	font-size: 120%;
	font-weight: normal;
	/*padding: 0 0 8px 22px;*/
	margin: 22px auto 15px;
	max-width: 350px;
	text-align: left;
}

h7#info {
	color: #808080;
	font-size: 110%;
	font-weight: bold;
	/*padding: 0 0 8px 22px;*/
	margin: 22px auto 15px;
	max-width: 350px;
	text-align: left;
}
h7#info_2 {
	color: #808080;
	font-size: 80%;
	font-weight: normal;
	/*padding: 0 0 8px 22px;*/
	margin: 22px auto 15px;
	max-width: 350px;
	text-align: left;
}


/* contents */

#contents {
	max-width:1004px;
	width: 99%;
	margin:0 auto;
	text-align:left;
	padding: 0 0.5%;
}


/* mainarea */

#contents #mainarea {
	float:right;
	max-width:790px;
	width: 75%;
}

#mainarea .left {
	float: left;
	width: 60%;
	padding: 5px 0 5px;
}




#mainarea .right {
	float: right;
	width: 38%;
}
#mainarea .right img {
	width: 100%;
	height: auto;
}

#mainarea1 .item_right {
	float: right;
	width: 48%;
    padding: 5px 0 50px 20px;
}

/* mainarea1 */

#contents #mainarea1 {
	float:left;
	max-width:1000px;
	width: 100%;
}

#mainarea1 .left {
	float: left;
	width: 60%;
	padding: 5px 0 5px;
}

#mainarea1 .right {
	float: right;
	width: 38%;
}
#mainarea1 .right img {
	width: 100%;
	height: auto;
}

#mainarea1 .item_left {
	float: left;
	width: 45%;
 	margin: 0 0 20px 2.531%;
}

#mainarea1 .item_left img {
	width: 100%;
	height: auto;
}

/*box*/
#mainarea1 .box05 h6 {
	font-size: 108%;
	font-weight: normal;
	line-height: 1.7;
	margin-bottom:20px;
}


#mainarea1 .box05 {
	padding: 0 0 15px 20px;
	margin-bottom: 15px;
	/*background:url(../images/studio/bg_02.jpg) no-repeat right top;*/
	padding-bottom:50px;
}

#mainarea1 .box05 img {
	padding: 0 0 15px 20px;
	margin-bottom: 15px;
	padding-bottom:0px;
    width: 50%;
	height: auto;
}

#mainarea1 .amazon {
	padding-left: 24px;
	margin-left:0px;
	line-height: 25px;
	display: inline-block;
    text-decoration: underline;
    color: #26ccff;
}

#mainarea1 .item_right img {
	padding: 0 0 15px 20px;
	margin-bottom: 0px;
	padding-bottom:0px;
    width: 50%;
	height: auto;
}
/* pagetop */

#contents #mainarea .pagetop {
	background:url(../images/arrow05.gif) no-repeat right top;
	padding-right:24px;
	text-align:right;
	margin:27px 0 32px;
	line-height: 14px;
}
#contents #mainarea .pagetop a{
	color: #ffa422;
}


/* bnr */

#contents #mainarea .bnr {
	margin-top:15px;
}

#contents #mainarea .trial_lesson {
	position:relative;
	left:-10px;
}
#contents #mainarea .allBnr {
	clear:both;
	padding-top:20px;
}
#contents #mainarea .allBnr img{
	float:left;
	padding:0 10px 0 0;
}
#contents #mainarea .allBnr img.right{
	padding:0;
}

.bnr01 {
	margin: 20px auto 0;
}
.bnr01 img {
	width: 100%;
	height: auto;
}
.bnr01 ul {
	overflow: hidden;
	margin: 20px auto 0;
}
.bnr01 li {
	float: left;
	margin: 0 0 20px 2.531%;
	width: 48%;
}
.bnr01 li img {
	width: 100%;
	height: auto;
}
.bnr01 li:nth-child(1),
.bnr01 li:nth-child(4) {
	margin: 0 0 20px;
} 
 
.bnr02 {
	margin: 20px auto 0;
}
.bnr02 img {
	width: 100%;
	height: auto;
}
.bnr02 ul {
	overflow: hidden;
	margin: 20px auto 0;
}
.bnr02 li {
	float: left;
	margin: 0 0 20px 2.531%;
	width: 31.646%;
}
.bnr02 li img {
	width: 100%;
	height: auto;
}
.bnr02 li:nth-child(1),
.bnr02 li:nth-child(4) {
	margin: 0 0 20px;
} 

.bnr03 {
	margin: 20px auto 0;
}
.bnr03 img {
	width: 100%;
	height: auto;
}
.bnr03 ul {
	overflow: hidden;
	margin: 20px auto 0;
}
.bnr03 li {
	float: left;
	margin: 0 0 20px 2.531%;
	width: 31.646%;
}
.bnr03 li img {
	width: 100%;
	height: auto;
}
.bnr03 li:nth-child(1),
.bnr03 li:nth-child(4) {
	margin: 0 0 20px;
} 


.bnr04 {
	margin: 20px auto 0;
}
.bnr04 img {
	width: 100%;
	height: auto;
}
.bnr04 ul {
	overflow: hidden;
	margin: 20px auto 0;
}
.bnr04 li {
	float: left;
	margin: 0 0 20px 2.531%;
	width: 23%;
}
.bnr04 li img {
	width: 100%;
	height: auto;
}
.bnr04 li:nth-child(1),
.bnr04 li:nth-child(5) {
	margin: 0 0 20px;
} 

.bnr04 figure {
	float: left;
	margin: 0 0 20px 2.531%;
	width: 22%;
}
.bnr04 article {
	margin: 20px auto 0;
}

.bnr05 {
	margin: 20px auto 0;
}
.bnr05 img {
	width: 100%;
	height: auto;
}
.bnr05 ul {
	overflow: hidden;
	margin: 20px auto 0;
}
.bnr05 li {
	float: left;
	margin: 0 0 20px 2.531%;
	width: 50%;
}
.bnr05 li img {
	width: 100%;
	height: auto;
}
.bnr05 li:nth-child(1),
.bnr05 li:nth-child(4) {
	margin: 0 0 20px;
} 

.bnr06 {
	margin: 20px auto 0;
    background: #f9fcff
}
.bnr06 img {
	width: 100%;
	height: auto;
}
.bnr06 ul {
	overflow: hidden;
	margin: 20px auto 0;
}
.bnr06 li {
	float: left;
	margin: 0 0 20px 2.531%;
	width: 30%;
}
.bnr06 li img {
	width: 100%;
	height: auto;
}
.bnr06 li:nth-child(1),
.bnr06 li:nth-child(4) {
	margin: 0 10px 20px;
} 
.bnr07 {
	margin: 20px auto 0;
}
.bnr07 img {
	width: 100%;
	height: auto;
}
.bnr07 ul {
	overflow: hidden;
	margin: 20px auto 0;
}
.bnr07 li {
	float: left;
	margin: 0 0 20px 2.531%;
	width: 48%;
}
.bnr07 li img {
	width: 100%;
	height: auto;
}
.bnr07 li:nth-child(1),
.bnr07 li:nth-child(4) {
	margin: 0 0 20px;
} 

/* sidebar */

/*#sidebar {
	float:left;
	width:220px;
}*/

#sidebar .banner {
	margin-bottom:10px;
}

#sidebar .banner a:hover img {
	opacity:0.50;
/*	filter:alpha(opacity=50);
	-ms-filter: "alpha( opacity=50 )";*/
}

#sidebar .twitter_area {
	height:630px;
	background:#fff;
	width: 100%;
    padding-bottom: 10px;
    border-bottom: dotted 1px #7f7f7f;
    margin-bottom: 10px;
}

#sidebar . {
	margin: 15px 0 35px;
}

#sidebar .contact01 {
	margin-top:6px;
}

.sidemenu ul{
padding: 0 0 5px 24px;
border-bottom: dotted 1px #7f7f7f;
margin-bottom: 15px;
}

.sidemenu li{
margin: 0 0 15px 0;
list-style: none;
padding-left: 18px;
}

#sidebar li a:hover{
background-position: 3px 50%;
}

/* footer */

#footer {
	border-top: dotted 1px #7f7f7f;
	margin:20px auto 0;
	letter-spacing:1px;
	line-height:130%;
}

#footer ul {
	width:1004px;
	margin:0 auto;
}

#footer ul li {
	float:left;
	margin:20px 9px 0 0;
}

#footer ul li.last {
	margin-right:0;
}

#footer p.copyright {
	padding:20px 0;
	text-align: center;
}

/*************
サイド（左側）コンテンツ
*************/
#sidebar {
float: left;
max-width: 240px;
padding: 0;
margin: 7px 0 0;
width: 24%;
}

#sidebar p{
    margin-bottom: 20px;
}

#sidebar p.contact {
	margin-top:10px;
	margin-bottom:0;
}

#sidebar h3 {
color: #383838;
margin: 20px 0 15px 24px;
line-height: 1.0;
font-size: 108%;
font-weight: bold;
}

#sidebar ul{
padding: 0 0 5px 0px;
border-bottom: dotted 1px #7f7f7f;
margin-bottom: 0px;
}

#sidebar li{
margin: 0 0 0 0;
list-style: none;
}

#sidebar li a{
display: block;
padding:0 0 0 0px;
margin: 0px;
}

.contact li a{
font-size: 93%;
background: none;
display: block;
padding:0 0 0 20px;
margin-bottom:5px;
}

#sidebar li a{
font-size: 93%;
display: block;
padding:0 0 0 0px;
margin-bottom:5px;
}

#sidebar li a:hover{
background-position: 3px 50%;
}

h5 {
margin: 1px 0 20px 0;
padding:20px;
line-height: 25px;
font-size: 18px;
font-weight: bold;
color: #252525;
border-bottom: 2px dotted #1a3e7e;
}

/* sitemap */
#mainarea .ttl_icon03{
	background:url(../images/icon02.png) no-repeat left top;
	font-size: 108%;
	font-weight: bold;
	line-height: 21px;
	padding: 0 0 8px 30px;
	margin: 0 25px 10px;	
}

#mainarea .list{
	font-size: 100%;
	font-weight: normal;
	line-height: 10px;
	padding: 0 0 8px 30px;
	margin: 0 25px 10px;	
}
#mainarea1 .ttl_icon03{
	background:url(../images/icon02.png) no-repeat left top;
	font-size: 108%;
	font-weight: bold;
	line-height: 21px;
	padding: 0 0 8px 30px;
	margin: 0 25px 10px;	
}

#mainarea1 .list{
	font-size: 100%;
	font-weight: normal;
	line-height: 10px;
	padding: 0 0 8px 30px;
	margin: 0 25px 10px;	
}


/* goto top */
#page-top{
  display: block;
  position: fixed;
  z-index: 9999;
  bottom: 1rem;
  right: 2rem;
  width: 45px;
  padding: 15px 10px;
  background: rgba(26,62,126,.7);
  color: #fff;
  text-align: center;
  text-decoration: none;
/*  transition: all 0.2s linear;    */
}
#page-top:hover{
  background: rgba(38,204,255,.8);
}

#sidebar img {
	width: 100%;
	height: auto;
}
#sidebar .tel ul {
	padding: 5px 0 0;
	border-bottom: none;
}
#sidebar .tel li {
	margin: 8px auto 0;
}
#sidebar .tel li:first-child {
	margin: 0;
}

.leadarea img{
    float: right;
    width: 250px;
    padding-top: 5px;
    padding-left: 10px;
}

@media screen and (min-width: 768px) {
    
/* mask */

.maskarea {
	overflow:		hidden;
	position:		relative;
}
.maskarea .caption {
	font-size:		2.5vh;
	color:			#fff;
    text-align: center;
    line-height: 172px;
}
.maskarea .mask {
	width:			100%;
	height:			100%;
	position:		absolute;
	bottom:			-100%;	/* 枠の上に置いて表示させない */
	left:			0;
	background-color:	rgba(0,0,0,0.4);
	-webkit-transition:	all 0.6s ease;
	transition:		all 0.6s ease;
}
.maskarea:hover .mask {
	bottom:			0;	/* 下に降りてくるように見せる */
}    
 
.maskareasm {
	overflow:		hidden;
	position:		relative;
}
.maskareasm .captionsm {
	font-size: 1.4vw;
    line-height: normal;
	color:		 #fff;
    padding-top: 70px;
    margin-left: 10px;
}

.maskareasm .captionsm_l {
	font-size: 1.4vw;
    line-height: normal;
	color:		 #fff;
    padding-top: 55px;
    margin-left: 10px;
}

/*item追加*/ 
.item {
    padding-bottom: 40px
}    
  
.item_a {
    position: relative;
    text-align: center;
    margin-left: 0;
    margin-right: 0;
    overflow: visible
}
.item_a_link {
    position: relative;
    display: block;
    width: 100%;
    padding-bottom: 100%;
    text-decoration: underline
}

.item_name_link {
    position: relative;
    display: block;
    width: 100%;
    padding-bottom: auto;
    text-decoration: underline
}

.item_a_img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto auto 0;
    max-height: 100%
}    
    
    
.collection_name {
	overflow:		hidden;
    text-align: center;
    margin-left: 0;
    margin-right: 0;
	position:		relative;
}


        

    
.maskareasm .masksm {
	width:			100%;
	height:			100%;
	position:		absolute;
	bottom:			-100%;	 枠の上に置いて表示させない 
	left:			0;
	background-color:	rgba(0,0,0,0.4);
	-webkit-transition:	all 0.6s ease;
	transition:		all 0.6s ease;
}
.maskareasm:hover .masksm {
	bottom:			0;	/* 下に降りてくるように見せる */
}

.maskareasm a:hover img {
	filter:none;
}
}

/******* 768px **************************************************/
@media screen and (max-width: 768px) {

#header div.sns_parts {
	display:none;
}


/* base */
img {
	max-width: 100%;
	height: auto;
}

#header p.logo {
    float: none;
    width: auto;
    margin: 13px 20px 24px;
    display: block;
    text-align: left;
}
#header p.links {
    display: none;
}

#sp_nav>a {
	display: block;
	border-top: 1px dotted #ddd;
	border-bottom: 1px dotted #ddd;
    center;
	background-size: 18px auto;
	text-align: left;
	padding: 18px 18px 18px 36px;
	font-size: 18px;
	font-weight: bold;
	box-sizing:border-box;
	margin: 0 20px;
	position: relative;
}
#sp_menu {
	position: absolute;
	z-index: 5;
	background: #1a3e7e;
	width: 100%;
	display: none;
}
#sp_menu li a {
	display: block;
	color: #fff;
	font-size: 14px;
	padding: 18px;
	border-top: 1px solid #fff;
}
#sp_menu li a:hover {
	color: #26ccff;
}


/* contents */
#contents {
	margin: 0 20px;
	width: auto;
}

/* mainarea */
#contents #mainarea {
	float: none;
	width: auto;
}
#mainarea .left {
    width: 60%;
}
#mainarea .right {
    width: 38%;
}
#contents #mainarea1 {
	float: none;
	width: auto;
}
#mainarea1 .left {
    width: 60%;
}
#mainarea1 .right {
    width: 38%;
}

#sidebar {
	float: none;
	width: auto;
	overflow: hidden;
	margin: 20px auto 0;
	max-width: none;
}
#sidebar .twitter_area {
	width:auto;
}

#sidebar .banner {
    width: 31%;
    float: left;
    margin: 0 2% 0 0;
}
#sidebar .banner.mb10 {
	margin-bottom: 10px;
}
#sidebar .banner.mb20 {
	margin-bottom: 10px;
}
    
#sidebar .banner.last {
    margin: 0 0 2% 0;
}

#sidebar img {
	max-width: 100%;
	width: 100%;
	height: auto;
}
.bnr01 li {
	width: 47.5%;
	margin: 0 0 10px 5%;
}
.bnr01 li:nth-child(1),
.bnr01 li:nth-child(3),
.bnr01 li:nth-child(5) {
	margin: 0 0 10px;
}
.bnr01 li:nth-child(3) {
	margin: 0 0 10px 5%;
}
    
.bnr02 li {
	width: 47.5%;
	margin: 0 0 10px 5%;
}
.bnr02 li:nth-child(1),
.bnr02 li:nth-child(3),
.bnr02 li:nth-child(5) {
	margin: 0 0 10px;
}
.bnr02 li:nth-child(3) {
	margin: 0 0 10px ;
}
.bnr02 li:nth-child(4) {
	margin: 0 0 10px 5%;
}

.bnr03 li {
	width: 47.5%;
	margin: 0 0 10px 5%;
}
.bnr03 li:nth-child(1),
.bnr03 li:nth-child(3),
.bnr03 li:nth-child(5) {
	margin: 0 0 10px;
}
.bnr03 li:nth-child(3) {
	margin: 0 0 10px;
}
    
    
 .bnr04 figure {
	width: 45.5%;
	margin: 0 0 10px 3%;
}
.bnr04 figure:nth-child(1),
.bnr04 figure:nth-child(3),
.bnr04 figure:nth-child(5),
.bnr04 figure:nth-child(7),
.bnr04 figure:nth-child(9),    
.bnr04 figure:nth-child(11),
.bnr04 figure:nth-child(13),
.bnr04 figure:nth-child(15),
.bnr04 figure:nth-child(17),
.bnr04 figure:nth-child(19),
    {
	margin: 0 0 10px;
}
.bnr04 figure:nth-child(3),{
	margin: 0 0 10px ;
}

.bnr05 li {
	width: 47.5%;
	margin: 0 0 10px 5%;
}
.bnr05 li:nth-child(1),
.bnr05 li:nth-child(3),
.bnr05 li:nth-child(5) {
	margin: 0 0 10px;
}
.bnr05 li:nth-child(3) {
	margin: 0 0 10px 5%;
}
    
.bnr06 li {
	width: 100%;
	margin: 0 0 10px 5%;
}
.bnr06 li:nth-child(1),
.bnr06 li:nth-child(3),
.bnr06 li:nth-child(5) {
	margin: 0 0 10px;
}
.bnr06 li:nth-child(3) {
	margin: 0 0 10px 5%;
}
 .bnr07 li {
	width: 100%;
	margin: 0 0 10px 5%;
}
.bnr07 li:nth-child(1),
.bnr07 li:nth-child(2) {
	margin: 0 0 10px;
}
.bnr07 li:nth-child(2) {
	margin: 0 0 10px;
}
   
  .swiper-container{
    flex-wrap:wrap;
  }
  .swiper-slide{
    width: 33.3%;
  }    
    

/******* 414px **************************************************/
@media screen and (max-width: 414px) {

#sidebar .banner,
#sidebar .banner.mb10,
#sidebar .banner.mb20,
#sidebar .banner.last {
	float: left;
    width: 48%;
    text-align: center;
    margin: 0 1% 10px;
}
#mainarea .left,
#mainarea .right {
	float: none;
    width: 100%;
}

#mainarea1 .item_left,
#mainarea1 .item_right {
	float: none;
    width: 100%;
}

.maskarea .caption {
	font-size: 0.85em;
    text-align: center;
}
    
.captionsm{
    /**font-size: 0.5em;**/
    display: none;
}
    
.captionsm_l {
	font-size: 0.5em;
}
    
.leadarea img{
    width: 100%;
    padding: 0;
    margin-bottom: 10px;
}
    
#page-top{
  bottom: 1rem;
  right: 1rem;
}

}