@charset "utf-8";

/* ***********************************
	Site Name:GLICODE
	Description:style for GLICODE_SP
	Version:20160704
	Author:9ye.jp
************************************ */

html
{
	font-size: 62.5%;
}

body
{
	width:100%;
	padding:0;
	margin:0;
	text-align:left;
	-webkit-text-size-adjust: 100%;
}

#contents_block
{
	width:100%;
	font-family:  Helvetica, "Helvetica Neue", Arial, Verdana, "Droid Sans", sans-serif;
	background:#f8bb31 url(../img/bg/bg_ocher.png);
}

#contents_block ul,
#contents_block li,
#contents_block dl,
#contents_block dt,
#contents_block dd,
#contents_block p
{
	max-height:100%;
}

#contents_block li
{
	list-style-type:none;
}

/* ****************************************************

	section

***************************************************** */

#movieSection
{
	position:relative;
	width:100%;
	height:880px;/* この高さは仮の高さ */
	background:url(../img/contents/bg_img_movie.jpg) no-repeat ;
}

#introSection
{
	width:100%;
}

#logicSection
{
	width:100%;
	background:#e60012 url(../img/bg/bg_red.png) 50% 0 repeat;
}

#micSection
{
	width:100%;
	background:#754b23 url(../img/bg/bg_brown.png) 50% 0 repeat;
}

#slideSection
{
	width:100%;
	background:url(../img/bg/bg_glc_map.png) 50% 100% repeat-x ;
}

#slideSection
{
	position:relative;
}

/* ****************************************************

	movieSection

***************************************************** */

.movieBox
{
	width:640px;
	height:556px;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}

.logoMain
{
	display:block;
	width: 640px;
	height: 312px;
	margin:0 0 34px;
	background: url(../img/contents/logo_main_en.png) 0 50% no-repeat;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
}

.playBtn
{
	width: 100px;
	height: 100px;
	margin:0 auto;
	background-color: rgb( 230, 0, 18 );
	background-image:url(../../img/contents/icon_play.png);
	background-position:50% 50%;
	background-repeat:no-repeat;
	border-radius: 50%;
	-webkit-box-shadow: 5px 5px 0px 0px rgba(6,0,1,0.2);
	-moz-box-shadow: 5px 5px 0px 0px rgba(6,0,1,0.2);
	box-shadow: 5px 5px 0px 0px rgba(6,0,1,0.2);
}

.playBtn a
{
	display:block;
	width: 100px;
	height: 100px;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
}

.bannerApp
{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 600px;
	height: 128px;
	margin:0 20px;
	padding:0;
}

.bannerApp li
{
	float:left;
	margin:0 0 0 20px;
}

.bannerApp li a,
.bannerApp li span
{
	display:block;
}

.bannerNews
{
	width:100%;
	padding:40px 0;
	background:#754c24;
}

.bannerNews p
{
	width: 580px;
	height: 162px;
	margin:0 auto;
	background-color:transparent;
	background-image:url(../img/contents/news_banner.png);
	background-position:50% 50%;
	background-repeat:no-repeat;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
	-webkit-appearance : none;
}

/* ****************************************************

	introSection

***************************************************** */

#introSection
{
	margin:0 auto;
	padding:104px 0 128px;
}

.introBox
{
	padding-bottom:266px;
	background: url(../img/contents/img_sweets.png) 50% 100% no-repeat;
}

.introBox p
{
/*	width:100%;*/
	padding:0 40px;
	margin:0 auto 2em;
	text-align:center;
	text-align:left;
	font-size:32px;
	font-size:3.2rem;
/*	font-size:16px;*/
	color:#fff;
	text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.15);
	line-height:1.8;
}

/* ****************************************************

	logicSection

***************************************************** */

.logicBox
{
	width:100%;
/*	margin-bottom:80px;*/
	padding:104px 0 64px;
}

.logicBox p
{
/*	width:100%;*/
	padding:0 40px;
	margin:0 auto 2em;
	text-align:center;
	text-align:left;
	font-size:32px;
	font-size:3.2rem;
	color:#fff;
	text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.15);
	line-height:1.8;
}

.logics,.logics li,.logics dl,.logics dt,.logics dd
{
	margin:0;
	padding:0;
}

.logics
{
	width:600px;
	margin:0 auto;
	overflow:hidden;
}

.logics li
{
	float:left;
	width:188px;
	margin: 0 6px 0 6px;
	list-style-type:none;
}

.logics dl
{
	margin:0;
	padding:0 0 30px;
}

.logics dt
{
	width:172px;
	height:172px;
	margin:0 auto 30px;
	background-image: url(../../img/contents/logic_icon_sequence.png);
	background-repeat: no-repeat;
	background-color:#fff;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
	border: 8px solid #ff7f6e;
	border-radius: 50%;
}

.logics .logic01 dt
{
	border-color:#ff7f6e;
	background-image: url(../../img/contents/logic_icon_sequence.png);
}

.logics .logic02 dt
{
	border-color:#26b7db;
	background-image: url(../../img/contents/logic_icon_loop.png);
}

.logics .logic03 dt
{
	border-color:#92d909;
	background-image: url(../../img/contents/logic_icon_if.png);
}

.logics .logic04 dt
{
	border-color:#faa2de;
	background-image: url(../../img/contents/logic_icon_random.png);
}

.logics dd
{
	width:100%;
	height:72px;
	text-align:center;
	line-height:72px;
}

.logics dd img
{
	display:inline-block;
	vertical-align:middle;
}

/* ****************************************************

	micSection

***************************************************** */

#micSection
{
	position:relative;
	width:100%;
	background:#754b23 url(../img/bg/bg_brown.png) 50% 0 repeat;
}

.micBox
{
	width:100%;
	padding:104px 0 180px;
	padding:104px 0 72px;
}

.micBox p
{
/*	width:100%;*/
	padding:0 40px;
	margin:0 auto 1.2em;
	text-align:center;
	text-align:left;
	font-size:32px;
	font-size:3.2rem;
	color:#fff;
	text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.15);
	line-height:1.8;
}

.buttonAbout
{
	margin:0 auto;
	padding:0;
	text-align:center;
	display:table;
	border-radius: 36px;
	background:#fff
}

.buttonAbout a
{
	display:table-cell;
	display:block;
	padding:0 4em;
	line-height:72px;
	font-size:18px;
	font-size:1.8rem;
	font-weight:normal;
	color:#000;
	text-decoration:none;
}

.micBox .buttonAbout
{
	width: 520px;
	margin:0 auto 4.0em;
}

.micBox .buttonAbout a
{
	padding:0 4em 0 3em;
	background:url(../img/contents/mark_window.png) 94% 50% no-repeat;
}


.aboutBox .buttonAbout
{
	margin:0 auto 1em;
}

.aboutBox .buttonAbout a
{
	padding:0 4em 0 3em;
	background:url(../img/contents/mark_window.png) 94% 50% no-repeat;
}

.manualBox .buttonAbout a
{
	padding:0 4em 0 3em;
	background:url(../img/contents/arrow_04.png) 94% 50% no-repeat;
}

.imgBox
{
	width:640px;
	height:660px;
	position:relative;
	margin-top:-330px;
	bottom:-330px;
	text-align:center;
	text-align:left;
	overflow:hidden;
}

.imgBox img
{
	width:660px;
	height:660px;
	margin:0 -10px;
	border-radius: 50%;
}

.aboutBox
{
	margin:0 50px 64px;
	padding:2em 20px;
	border-radius: 30px;
	border: 3px solid #fff;
	text-align:center;
	text-align:left;
}

.aboutBox dt
{
	margin:0 0 1em;
	padding:0;
	color: #fff;
	font-size:1.2rem;
	font-size:2.4rem;
	line-height:1.8;
}

.aboutBox .aboutTxt
{
	margin:0 0 2.4em;
	padding:0;
	color: #fff;
	font-size:1.2rem;
	font-size:2.4rem;
	line-height:1.8;
}

.micBox .hoc
{
	display:table;
	width:auto;
	height:96px;
	margin:0 40px 0 60px;
	padding:0;
	background:url(../img/contents/icon_hoc.png) 0 50% no-repeat;
}

.micBox .hoc a
{
	display:table-cell;
	padding:0 0 0 112px;
	font-size:26px;
	font-size:2.6rem;
	color:#1aadbb;
	text-shadow:none;
	text-align:left;
	line-height:1.4;
	vertical-align:middle;
	color:#1aadbb;
}

.micBox .hoc a:after
{
	content:url(../img/contents/mark_window_hoc.png);
}

/* ****************************************************

	navigation

***************************************************** */

.navbar
{
	width:100%;
	height:98px;
	background-color:#e60012;
}

.navbar a
{
	display:block;
	width:416px;
	height:98px;
	margin-left:20px;
	background: url(../img/contents/logo_menu.png) no-repeat;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
}

/* ****************************************************

	how to learn GLICODE

***************************************************** */

.howto
{
	position:relative;
}

.pageTitle
{
	height:250px;
	margin:0;
	background: url(../img/contents/img_pagetitle_howto.jpg) 50% 0 repeat-x;
	color:#fff;
	font-size:50px;
	font-size:4.5rem;
	font-weight:normal;
	text-align:center;
	line-height:250px;
}

.sectionTitle
{
	margin:0 auto 1em;
	padding:0 1em;
	color:#fff;
	line-height:72px;
	font-size:44px;
	font-size:4.4rem;
	font-weight:normal;
	text-align:center;
	letter-spacing:0.05em;
	display:inline-block;
	display:table;
	border-radius: 40px;
	border: 4px solid #fff;
}

.howto .bannerDl
{
	top: 110px;
}

/* ****************************************************

	learnfromSection

***************************************************** */

#learnfromSection
{
	width:100%;
	background:#f8bb31 url(../img/bg/bg_ocher.png) ;
}

#learnfromSection .sectionTitle
{
	margin:0 0.4em 1em;
	padding:0.2em 0.6em;
	line-height:1.1;
	letter-spacing:0;
}

.learnfromBox
{
	padding:104px 0 80px;
}

.learnfromBox p
{
/*	width:100%;*/
	padding:0 40px;
	margin:0 auto 2em;
	font-size:32px;
	font-size:3.2rem;
	color:#fff;
	text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.15);
	text-align:center;
	text-align:left;
	line-height:1.8;
}

.figHowto
{
	width:560px;
	margin:0 auto;
	padding:0;
}

.figHowto li
{
	width:560px;
	margin:0 0 40px;
	padding:0;
	text-align:center;
	list-style-type:none;
}

/* ****************************************************

	prepareSection

***************************************************** */

#prepareSection
{
	width:100%;
	background:#754b23 url(../img/bg/bg_brown.png) ;
}

.prepareBox
{
	padding:104px 0 120px;
}

.prepareBox .sectionTitle
{
	margin:0 auto 56px;
	padding:0 1em;
}

.prepareItems
{
	margin:0;
	padding:0;
}

.prepareItems dl,
.prepareItems dt,
.prepareItems dd,
.prepareItems ul,
.prepareItems li
{
	margin:0;
	padding:0;
}

.prepareItems li
{
	list-style-type:none;
}

.prepareItem01
{
	margin-bottom:100px;
}

.prepareItem02
{
}

.prepareItem03
{
}

.prepareItems dl
{
	padding-top:256px;
	padding-bottom:80px;
}

.prepareItem01 dl
{
	padding-top:360px;
	background: url(../img/contents/img_smartphone.png) 50% 0 no-repeat;
}

.prepareItem02 dl
{
	/*background: url(../img/contents/img_products.png) 50% 0 no-repeat;*/
}

.prepareItem03 dl
{
	background: url(../img/contents/img_kitchen_paper.png) 50% 0 no-repeat;
}

.prepareItems dt
{
	border-bottom:6px solid #fff;
	color:#fff;
	display:table;
	width:100%;
	width:92%;
	margin:0 auto;
	padding:1em 0;
	line-height:1.5;
}

.prepareItems dt span
{
	text-align:center;
	display:table-cell;
	height:88px;
	vertical-align:middle;
}

.prepareItem01 dt span
{
	font-size:3.2rem;
	font-size:4rem;
}

.prepareItem02 dt span
{
	font-size:3.2rem;
	font-size:4.0rem;
	letter-spacing:0.2em;
}

.prepareItem03 dt span
{
	font-size:3.2rem;
	font-size:4rem;
}

.prepareItems dd
{
	padding:30px 0;
}

.prepareItems dd p
{
	margin:0;
	text-align:center;
	color:#fff;
	line-height:2;
	font-size:2rem;
	font-size:20px;
}

.prepareItems dd span
{
	display:block;
	text-align:center;
	color:#fff;
	line-height:2;
	font-size:2rem;
}

.prepareItems .badges
{
	position: static;
	width: 600px;
	width: 94%;
	height: 128px;
	margin:0 auto;
}

.prepareItems .badges li
{
	float:left;
	margin:0 0 0 20px;
}

.prepareItems .badges li a,
.prepareItems .badges li span
{
	display:block;
}

.prepareItem01 .buttonAbout,
.prepareItem02 .buttonAbout
{
	margin:2em auto;
	overflow:hidden;
}

.prepareItem01 .buttonAbout a,
.prepareItem02 .buttonAbout a
{
	padding:0 4em 0 3em;
	background:url(../img/contents/arrow_01.png) 94% 50% no-repeat;
}

.prepareItems .swts
{
	padding:0 20px 1em;
}

.prepareItem02 .swts
{
	padding:0 80px 1em;
}

.swts li
{
	margin-bottom:0.8em;
	padding:0;
	text-indent:0;
	font-size:13px;
	font-size:2rem;
	color:#fff;
	line-height:1.5;
	text-align: center;
}

.remark
{
	width:560px;
/*	min-height:90px;*/
	margin:0 auto;
	padding:88px 0 20px;
	border-radius: 25px;
	background:#fff url(../../img/contents/mark_remark.png) 50% 26px no-repeat;
}

.remark p
{
	margin:0 30px;
	padding:0.5em 0 0em 1em;
	text-indent:-1em;
	color:#e60012;
	font-size:20px;
	font-size:2rem;
	line-height:1.6;
}

/* add 20161205 */
.prepareItem02
{
	position:relative;
}

.prepareItem02 #swtsList
{
	position:absolute;
	top:0;
	left:0;
}

.prepareItem02 #swtsList li
{
	position:absolute;
}

.prepareItem02 #swtsList li a
{
	display:block;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
}


.prepareItem02 #swtsList #swtsPocky
{
	top:20px;
	left:156px;
}

.prepareItem02 #swtsList #swtsPocky a
{
	width:133px;
	height:239px;
	background:url(../img/contents/img_product_pocky.png) left bottom no-repeat;
}

.prepareItem02 #swtsList #swtsPockyFamily
{
	top:-60px;
	left:304px;

}

.prepareItem02 #swtsList #swtsPockyFamily a
{
	width:180px;
	height:320px;
	background:url(../img/contents/img_product_pocky_f.png) left bottom no-repeat;
}

.prepareItems .prepareItem02 p
{
	margin:2em 20px 0.8em;
	padding:0 0 0 1em;
	text-indent:-1em;
	font-size:13px;
	font-size:2rem;
	color:#fff;
	line-height:1.5;
	text-align:left;
}

/* ****************************************************

	stepSection

***************************************************** */

#stepSection
{
	width:100%;
	background:#e60012 url(../img/bg/bg_red.png) 50% 0 repeat;
}

#stepSection .sectionTitle
{
	margin:0 auto 100px;
	padding:0 1em;
}

.stepBox
{
	width:100%;
	padding:74px 0 120px;
}
/*
.stepBox p
{
	width:100%;
	margin:0 auto 2.8em;
	font-size:20px;
	font-size:2rem;
	text-align:center;
	line-height:2.4;
}
*/
.steps,.steps li,.steps dl,.steps dt,.steps dd
{
	margin:0;
	padding:0;
}

.steps
{
	margin:0 auto;
	overflow:hidden;
}

.steps li
{
	padding-bottom:60px;
	margin-bottom:60px;
	list-style-type:none;
	text-align:center;
	position:relative;
	background-image: url(../img/contents/arrow_steps.png);
	background-position: 50% 100%;
	background-repeat: no-repeat;
}

.steps li:last-child
{
	padding-bottom:0px;
	margin-bottom:0px;
	background-image: none;
}

.steps dl
{
	padding-bottom:24px;
}

.steps .fig
{
	width:404px;
	height:404px;
	margin:0 auto 20px;
	background-color:#fff;
	border: 16px solid #fff;
	border-radius: 50%;
	-webkit-box-shadow: 12px 12px 0px 0px rgba(6,0,1,0.2);
	-moz-box-shadow: 12px 12px 0px 0px rgba(6,0,1,0.2);
	box-shadow: 12px 12px 0px 0px rgba(6,0,1,0.2);
	overflow:hidden;
}

.steps .fig img
{
	width:404px;
	height:auto;
}

.steps .msg
{
	padding-bottom:1em;
	padding:0 20px 1em;
	line-height:1.6em;
	font-size:14px;
	font-size:2.4rem;
	color:#fff;
}

.steps .act
{
	width:100%;
	line-height:64px;
	text-align:center;
	font-size:20px;
	font-size:4rem;
	color:#fff;
	display:inline-block;
	vertical-align:middle;
}

.stepNum
{
	position:absolute;
	top:8px;
	left:50%;
	display:block;
	width:120px;
	height:120px;
	margin-left:-210px;
	line-height:120px;
	font-size:86px;
	font-size:8.6rem;
	font-weight:bold;
	color:#e60012;
	text-align:center;
	background-color:#fff;
	border-radius: 50%;
}

/* ****************************************************

	report "to teachers" 2016.11.15

***************************************************** */

.report
{
	position:relative;
}

.report .pageTitle
{
	background: url(../img/contents/img_pagetitle_report.jpg) 50% 0 repeat-x;
}

.report .bannerDl
{
	top: 110px;
}

/* ****************************************************

	manualSection

***************************************************** */

#teacherSection
{
	width:100%;
	background:#f8bb31 url(../img/bg/bg_ocher.png) ;
}

.teacherBox
{
	padding:74px 0 10px;
}

#teacherSection .sectionTitle
{
	margin:0 30px 1em 30px;
	padding:0.3em 0.8em;
	line-height:1.1;
	letter-spacing:0;
	font-size: 4em;
}

.teacherBox>p
{
	padding:0 40px;
	margin:0 auto 1em;
	font-size:32px;
	font-size:3.2rem;
	color:#fff;
	text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.15);
	line-height:1.8;
	text-align: center;
}
div.teachers
{
	/*width: 820px;*/
	margin: 0 40px 80px 40px;
}
div.voice
{
	/*width:240px;*/
}

div.voice img
{
	display: block;
	width: 270px;
	height: 270px;
	border-radius: 50%;
	margin: 0 0 32px 0;
	-webkit-box-shadow: 5px 5px 0px 0px rgba(6,0,1,0.2);
	-moz-box-shadow: 5px 5px 0px 0px rgba(6,0,1,0.2);
	box-shadow: 5px 5px 0px 0px rgba(6,0,1,0.2);

	float: left;

	background-image: url(../../img/contents/fukidahi_serif.png);
	background-repeat: no-repeat;
	background-position: center bottom;
}





div.voice h2
{
	float: left;
	font-size: 1.8em;
	color:#754b23;
	margin: 70px 0 0 30px;
	padding-right: 20px;
	/*padding-bottom: 24px;*/
	/*background-color: #26b7db;*/
	/*background-image: url(../../img/contents/fukidahi_serif.png);
	background-repeat: no-repeat;
	background-position: center bottom;*/
}

div.voice h2 span
{
	font-size: 2.0em;
}

div.voice img.right,
div.voice h2.right
{
	float:right;
}


div.voice p
{
	position: relative;
	clear: both;
	margin: 0 0 60px 0;
	background-color: #FFFFFF;
	border-radius: 18px;
	padding: 30px;
	color:#754b23;
	font-size: 2.4em;
	-webkit-box-shadow: 5px 5px 0px 0px rgba(6,0,1,0.2);
	-moz-box-shadow: 5px 5px 0px 0px rgba(6,0,1,0.2);
	box-shadow: 5px 5px 0px 0px rgba(6,0,1,0.2);
}

div.voice p::before
{
	content: "";
	display: block;
	width: 27px;
	height: 14px;
	position: absolute;
	top: -13px;
	left: 122px;
	background-image: url(../../img/contents/fukidahi_serif.png);
	background-repeat: no-repeat;
	background-position: top center;
}

div.voice p.right::before
{
	left: auto;
	right: 122px;
}

br.clear
{
	clear: both;
}



/* ****************************************************

	manualDl

***************************************************** */

#manualDl
{
	margin:0 40px 2em;
	padding:3px 0;
	border-radius: 20px;
	background: #e60012;
}

#manualDl dl
{
	margin:0 3px;
	padding-top:334px;
	border:2px solid #fff;
	border-radius: 18px;
	background: #e60012 url(../img/contents/image_manual.jpg) 50% 40px no-repeat;
	overflow:hidden;
}

#manualDl dt
{
	float:left;
	width:290px;
	height:113px;
	margin:0;

	background: url(../img/contents/logo_manual.png) 79px 0 no-repeat;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
}

#manualDl dd
{
	float:right;
	width:246px;
	height:113px;
	margin:0;
}

#manualDl dd a
{
	display:block;
	width:163px;
	height:67px;
	margin:0;
	border-radius: 14px;
	background:#fff url(../img/contents/banner_dl_manual.png) 50% 50% no-repeat;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
}

.notePkz
{
	margin:0;
	padding:2em 40px;
}

.noteDl
{
	margin:0;
	padding:1em 40px;
}

.notePkz li,
.noteDl li,
.noteDl dt
{
	margin-bottom:0.8em;
	padding:0;
	text-indent:0;
	font-size:16px;
	font-size:2.4rem;
	color:#fff;
	line-height:1.4em;
}

.notePkz li
{
	font-size:2rem;
}

.manualBox ul.noteDl
{
	padding-bottom:40px;
}

/* ****************************************************

	purchaseBox

***************************************************** */

#purchaseBox
{
	height: auto;
	margin:0 40px 2em;
	border-radius: 10px;
	border:3px solid #fff;
}

#purchaseBox ul
{
	overflow:hidden;
	margin:0;
	padding-top:24px;
	padding-bottom:20px;
}

#purchaseBox li
{
	list-style-type:none;
	float:left;
	margin-right:30px;
}

#purchaseBox li#sweetsPocky
{
	margin-right:28px;
}

#purchaseBox li#sweetsGlico
{
	margin-right:0;
}

#purchaseBox li a
{
	display:block;
	height:180px;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
}

#purchaseBox li#sweetsBisco a
{
	width:80px;
	background: url(../img/contents/img_link_bisco.png) 50% 0 no-repeat;
}

#purchaseBox li#sweetsAlmond a
{
	width:142px;
	background: url(../img/contents/img_link_almond.png) 50% 0 no-repeat;
}

#purchaseBox li#sweetsPocky a
{
	width:80px;
	background: url(../img/contents/img_link_pocky.png) 50% 0 no-repeat;
}

#purchaseBox li#sweetsGlico a
{
	width:82px;
	background: url(../img/contents/img_link_glico.png) 50% 0 no-repeat;
}

#purchaseBox li a:hover
{
	opacity:0.8;
	filter:alpha(opacity=80);
}

#purchaseBox h3
{
	display:inline-block;
	display:table;
	margin:-0.55em auto 0;
	padding:0 0.5em;
	line-height:1;
	font-size:28px;
	font-size:2.8rem;
	font-weight:normal;
	letter-spacing:0.05em;
	color:#fff;
	background-color:#f8bb31;
	text-align:center;
}

/* ****************************************************

	casesSection

***************************************************** */

#casesSection
{
	width:100%;
	background:#754b23 url(../img/bg/bg_brown.png) ;
}

.casesBox
{
	padding:74px 0 120px;
	overflow:hidden;
}

.casesBox p
{
	padding:0 40px;
	margin:0 auto 1em;
	font-size:32px;
	font-size:3.2rem;
	color:#fff;
	text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.15);
	line-height:1.8;
}

.caseList
{
	width:90%;
	margin:0 auto 80px;
	position:relative;
	font-size:24px;
	font-size:2.3rem;
	color:#fff;
}

.caseList dt
{
	position:absolute;
	width:140px;
	padding:0.4em 0 0.4em 0;
	text-align:right;
	line-height:1.4;
	font-size:2.2rem;
}

.caseList dd
{
	margin:0;
	padding:0.4em 10px 0.4em 168px;
	background: url(../img/contents/line_dotted.png) 0 100% repeat-x;
	line-height:1.2;
}

.casesImage
{
	width:640px;
	height:1260px;
	margin:0 auto;
	padding:0;
	position:relative;
}

.casesImage li
{
	position:absolute;
	top:0;
	left:0;
	list-style-type:none;
	border-radius:16px;
	-moz-border-radius:16px;
	-webkit-border-radius:16px;
	box-shadow:10px 10px 0px 0px rgba(1,1,1,0.15);
	-moz-box-shadow:10px 10px 0px 0px rgba(1,1,1,0.15);
	-webkit-box-shadow:10px 10px 0px 0px rgba(1,1,1,0.15);
	overflow:hidden;
}

.casesImage li img
{
	vertical-align:bottom;
}

.casesImage .casesImage13,.casesImage .casesImage14,.casesImage .casesImage32{top:180px;}
.casesImage .casesImage13,.casesImage .casesImage14{top:360px;}
.casesImage .casesImage04,.casesImage .casesImage05,.casesImage .casesImage31{top:540px;}
.casesImage .casesImage07,.casesImage .casesImage08{top:720px;}
.casesImage .casesImage12,.casesImage .casesImage10,.casesImage .casesImage34{top:900px;}
.casesImage .casesImage01,.casesImage .casesImage06{top:1080px;}

.casesImage .casesImage01,
.casesImage .casesImage02,
.casesImage .casesImage04,
.casesImage .casesImage07,
.casesImage .casesImage12,
.casesImage .casesImage32{left:-30px;}

.casesImage .casesImage03,
.casesImage .casesImage06,
.casesImage .casesImage10,
.casesImage .casesImage31{left:150px;}

.casesImage .casesImage13,
.casesImage .casesImage33,
.casesImage .casesImage34{left:330px;}

.casesImage .casesImage05,
.casesImage .casesImage08,
.casesImage .casesImage14{left:510px;}

.bannerNews div.bannerGD
{
	width: 580px;
	height: 186px;
	margin:0 auto 20px auto;
	background-color:transparent;
	background-image:url(../img/contents/gooddesign_banner_en.png);
	background-position:50% 50%;
	background-repeat:no-repeat;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
	-webkit-appearance : none;
}