@charset "utf-8";

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

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

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

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

	section

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

#movieSection
{
	position:relative;
	width:100%;
	font-family: "Helvetica Neue", Helvetica, "Lucida Grande", "segoe UI", Arial, Verdana, "Droid Sans", 'Itim', cursive, sans-serif;
}

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

	movieSection

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

.movieBox
{
	width:680px;
	height:570px;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 109px;
	left: 0;
	margin: auto;
}

.logoMain
{
	display:block;
	width: 680px;
	height: 420px;
	margin:10px auto 10px;
	background: url(../img/contents/logo_main.png) center center no-repeat;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
}

.playBtn
{
	width: 88px;
	height: 88px;
	margin:0 auto;
	background-color: #e60012;
	border: 6px solid #e60012;
	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);
	overflow: hidden;
}

.playBtn a
{
	display:block;
	width: 88px;
	height: 88px;
	background-color: #e60012;
	background-image:url(../img/contents/icon_play.png);
	background-position:50% 50%;
	background-repeat:no-repeat;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
}

.playBtn a:hover
{
	background-color: #fff;
	background-image:url(../img/contents/icon_play_on.png);
}

.bannerNew
{
	position: absolute;
	bottom: 66px;
	right: 0;
	left: 0;
	width: 412px;
	height: 86px;
	margin:0 auto;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
	background-image:url(../img/contents/banner_2017_7_31.png);
	background-repeat:no-repeat;
}



/*
.bannerMic
{
	position: absolute;
	bottom: 70px;
	right: 26px;
	width: 268px;
	height: 76px;
	margin:0 auto;
	border-radius: 16px;
	border: 3px solid #fff;
	-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);
	overflow:hidden;
}

.bannerMic a
{
	display:block;
	width: 268px;
	height: 76px;
	background-color:#fff;
	background-image:url(../img/contents/banner_mic.png);
	background-position:50% -3px;
	background-repeat:no-repeat;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
}

.bannerMic a:hover
{
	background-position:50% -85px;
}
*/

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

	download banner

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

.bannerDl
{
	position: absolute;
	top: 16px;
	right: 30px;
	width: 128px;
	height: 128px;
	margin:0;
	background-color: rgb( 230, 0, 18 );
	background-image:url(../img/contents/bg_banner_dl.png);
	background-position:50% 50%;
	background-repeat:no-repeat;
	border: 2px solid #fff;
	border-radius: 50%;
	-webkit-box-shadow: 0 0 0 4px rgba(230, 0, 18,1),5px 5px 0px 4px rgba(6,0,1,0.2);
	-moz-box-shadow: 0 0 0 4px rgba(230, 0, 18,1),5px 5px 0px 4px rgba(6,0,1,0.2);
	box-shadow: 0 0 0 4px rgba(230, 0, 18,1),5px 5px 0px 4px rgba(6,0,1,0.2);
}

.bannerDl ul
{
	margin:0;
	padding:0;
	padding-top:78px;
}

.bannerDl ul li
{
	margin:0 auto 4px;
	padding:0;
	list-style-type:none;
}

.bannerDl ul li span,
.bannerDl ul li a
{
	display:block;
	height:12px;
	border:2px solid #fff;
	background-color:#fff;
	border-radius:8px;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
}

.bannerDl ul li a:hover
{
	background-color:#e60012;
}

.bannerDl ul li.dlPlay
{
	width:94px;
}

.bannerDl ul li.dlApp
{
	width:74px;
}

.bannerDl ul li.dlPlay a
{
	background-image:url(../img/contents/banner_dl_play.png);
	background-position:50% 50%;
	background-repeat:no-repeat;
}

.bannerDl ul li.dlApp a
{
	background-image:url(../img/contents/banner_dl_app.png);
	background-position:50% 50%;
	background-repeat:no-repeat;
}

.bannerDl ul li.dlPlay a:hover
{
	background-image:url(../img/contents/banner_dl_play_on.png);
}

.bannerDl ul li.dlApp a:hover
{
	background-image:url(../img/contents/banner_dl_app_on.png);
}

/*
fixed position adjusted
*/

.howto .bannerDl,
.report .bannerDl
{
	top: 110px;
}

.howto .bannerDl.fix,
.report .bannerDl.fix
{
	position: fixed;
	top: 56px;
/*	top: 58px;*/
}

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

	navigation

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

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

#movieSection .navbar
{
	position:absolute;
	bottom:0;
	left:0;
}

.navbar dl
{
	width:1024px;
	min-width: 768px;
	height:50px;
	margin:0 auto;
}

.navbar dt
{
	float:left;
	width:120px;
	margin-left:10px;
}

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

.navbar dt a:hover
{
	opacity:0.8;
}

.navbar dd
{
	float:right;
}

.navbar ul
{
	float:left;
	margin:0;
}

.navbar li
{
	float:left;
	list-style-type:none;
	position:relative;
}

.navbar .navItem
{
	margin-right:1em;
}

.navbar .lang
{
	margin-right:22px;
	padding:10px 13px;
}

.lang li a,
.lang li span,
.navItem li a,
.navItem li span
{
	display:block;
/*	line-height:50px;*/
	padding:0 0.8em;
	font-size:20px;
	color:#fff;
	text-decoration:none;

}

.navItem li
{
	padding:9px 0;
}

.navItem li a,
.navItem li span
{
/*	letter-spacing:0.1em;*/
}

.navItem li span
{
	position:relative;
	color: rgba(255,255,255,0.5);
}

.navItem li a
{
	display:block;
	line-height:28px;
	background-color:#e60012;
	border: 2px solid #e60012;
	border-radius: 16px;

	font-size: 20px;

}

.navItem li a:hover
{
	border-color:#fff;
}

.navItem li span.comingsoon
{
	position:absolute;
	bottom:-12px;
	left:50%;
	width:112px;
	height:32px;
	margin-left:-56px;
	padding:0;
	background: url(../img/contents/icon_comingsoon_lwr.png) no-repeat;
	line-height:1;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
}

#movieSection .navItem li span.comingsoon
{
	top:-12px;
	bottom:auto;
	background: url(../img/contents/icon_comingsoon_upr.png) no-repeat;
}

.navItem li:last-child
{
	margin-left:12px;
	padding:12px 0;
}

.navItem li:nth-child(2)
{
	margin-left:12px;
}

.navItem li:last-child a
{
	font-size:14px;
	line-height:22px;
	border-radius: 13px;
}

.howto .navItem li:first-child a
{
	border-color:#fff;
	background-color:#fff;
	color:#e60012;
}

.report .navItem li:nth-child(2) a
{
	border-color:#fff;
	background-color:#fff;
	color:#e60012;
}

.lang li
{
	padding:0px 2px;
}

.lang li span,
.lang li a
{
	line-height:26px;
	width:26px;
	padding:0;
	font-size:14px;
	font-weight:bold;
	background-color:#e60012;
	border: 2px solid #e60012;
	border-radius: 15px;
	color:#fff;
	text-align:center;
}

.lang li span
{
	background-color:#fff;
	color:#e60012;
	border: 2px solid #fff;
}

.lang li a:hover
{
	background-color:#e60012;
	color:#fff;
	border-color:#fff;
}

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

	introSection

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

#introSection
{
	width:100%;
}

.introBox
{
	width:100%;
	margin-bottom:96px;
	padding:104px 0 288px;
	background: url(../img/contents/image_sweets.png) 50% 100% no-repeat;
}

.introBox p
{
	width:100%;
	margin:0 auto 1em;
	font-size:24px;
	color:#fff;
	text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.15);
	text-align:center;
	line-height:2;
}

/* adjust text width */
.introBox p
{
	width:80%;
}

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

	logicSection

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

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

.logicBox
{
	width:100%;
	padding:104px 0 120px;
}

.logicBox p
{
	width:100%;
	margin:0 auto 2.8em;
	font-size:20px;
	color:#fff;
	text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.15);
	text-align:center;
	line-height:2.4;
}

/* adjust text width */
.logicBox p
{
	width:80%;
}

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

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

.logics li
{
	float:left;
	width:210px;
	list-style-type:none;
}

.logics dl
{
	margin:0;
}

.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;
}

.logics .logic02 dd img
{
	margin:0 -5px 0 -5px;
}

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

	micSection

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

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

.micWrapper
{
	position:relative;
	width:100%;
	max-width:1024px;
	min-height:612px;
	margin:0 auto;
}

.micBox
{
	padding:120px 0 120px;
	padding-left:460px;
}

.micBox p
{
	width:100%;
	margin:0 auto 1em;
	font-size:20px;
	color:#fff;
	text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.15);
	text-align:center;
	line-height: 1.85;
}

.buttonAbout
{
	width:440px;
	margin:0 auto;
	text-align:center;
	border: 3px solid #fff;
	background-color:#fff;
	border-radius: 18px;
	-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);
	overflow:hidden;
}

.buttonAbout a
{
	display:block;
	font-size:12px;
	background:#fff url(../img/contents/arrow_01.png) 97% 50% no-repeat;
	color:#000;
	text-decoration:none;
	line-height:30px;
}

.buttonAbout a:hover
{
	background-color:#754b23;
	background-image:url(../img/contents/arrow_01_on.png);
	color:#fff;
}

.micBox .buttonAbout a
{
	background:#fff url(../img/contents/mark_window.png) 97% 50% no-repeat;
}

.micBox .buttonAbout a:hover
{
	background-color:#754b23;
	background-image:url(../img/contents/mark_window_on.png);
	color:#fff;
}



.imgBox
{
	position:absolute;
	top:50%;
	left:-58px;
	width:550px;
	height:550px;
	margin-top:-275px;
	border-radius: 50%;
	overflow:hidden;
}

/* adjust img position */
.imgBox
{
	left:-96px;
}

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

.aboutBox dt
{
	margin:0 0 1em;
	padding:0;
	color: #fff;
	font-size:12px;
	line-height:2;
}

.aboutBox .buttonAbout
{
	width:auto;
	width:11em;
	width:20em;
}

.aboutBox .buttonAbout a
{
	padding:0;
	background:#fff;
	position:relative;
}

.aboutBox .buttonAbout a:after
{
	content:url(../img/contents/mark_window.png);
	position:absolute;
	top:50%;
	right:1.2em;
	margin-top:-12px;
}

.aboutBox .buttonAbout a:hover
{
	background-color:#754b23;
}

.aboutBox .buttonAbout a:hover:after
{
	content:url(../img/contents/mark_window_on.png);
}

/*
.manualBox .buttonAbout
{
	width:auto;
	width:14em;
}

.manualBox .buttonAbout a
{
	background:#fff url(../img/contents/arrow_02.png) 97% 50% no-repeat;
}


.manualBox .buttonAbout a:hover
{
	background-color:#f8bb31;
	background-image:url(../img/contents/arrow_02_on.png);
}
*/

.micBox p.hoc
{
	display:table;
	width:auto;
	margin:45px 0 0 59px;
	padding:0;
	color:#1aadbb;
	text-shadow:none;
	text-align:left;
/*	line-height:64px;*/
	background:url(../img/contents/icon_hoc.png) 0 50% no-repeat;
}

.micBox p.hoc a
{
	display:table-cell;
	height:64px;
	padding:0 0 0 76px;
	line-height: 1.86;
	font-size: 14px;
	text-decoration:none;
	color:#1aadbb;
	vertical-align:middle;
}

.micBox p.hoc a:hover
{
	text-decoration:underline;
}

.micBox p.hoc a:after
{
	content:url(../img/contents/mark_window_hoc.png);
	/*margin-left:4px;*/
}

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

	how to learn GLICODE

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

.howto
{
	position:relative;
}

.pageTitle
{
	width:100%;
	height:160px;
	margin:0;
	background: url(../img/contents/img_pagetitle_howto.jpg) 50% 0 repeat-x;
	color:#fff;
	font-size:50px;
	font-weight:normal;
	text-align:center;
	letter-spacing:0.04em;
	line-height:160px;
}

.sectionTitle
{
	margin:0 auto 1em;
	padding: 0 1em;
	color:#fff;
	line-height:52px;
	font-size:30px;
	font-weight:normal;
	text-align:center;
	display:inline-block;
	display:table;
	border-radius: 30px;
	border: 4px solid #fff;
}

.howto .bannerDl
{
	top: 110px;
}

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

	learnfromSection

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

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

.learnfromBox
{
	padding:74px 0 120px;
}

.learnfromBox p
{
	width:100%;
	margin:0 auto 2em;
	font-size:24px;
	color:#fff;
	text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.15);
	text-align:center;
	line-height:2;
}

/* adjust text width */
.learnfromBox p
{
	width:80%;
}

.learnfromBox p span
{
	font-size:14px;
}

.figHowto
{
	width:810px;
	margin:0 auto;
	padding:0;
	overflow:hidden;
}

.figHowto li
{
	float:left;
	width:240px;
	margin:0 15px 0 15px;
	padding:0;
	text-align:center;
	list-style-type:none;
}

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

	prepareSection

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

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

.prepareBox
{
	padding:74px 0 100px;
}

.prepareBox .sectionTitle
{
	margin: 0 auto 8px;
}

.prepareItems
{
	width:980px;
	margin:0 auto;
	padding:20px 0 56px;
	overflow:hidden;
}

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

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

.prepareItems .prepareItem01
{
	margin-right:40px;
}

.prepareItem01
{
	float:left;
	width:240px;
}

.prepareItem02
{
	float:left;
	width:360px;
}

.prepareItem03
{
	float:right;
	width:300px;
}

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

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

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

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

.prepareItems dt
{
	border-bottom:2px solid #fff;
	color:#fff;
	display:table;
	width:100%;
}

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

.prepareItem01 dt,
.prepareItem02 dt,
.prepareItem03 dt
{
	font-size: 20px;
}

.prepareItems dd
{
	padding:1em 0;
}

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

.prepareItems .badges
{
/*	padding-bottom:1em;*/
}

.badges li
{
	padding-top:10px;
	text-align:center;
}
.badges li a
{
	display:block;
}
.badges li img
{
	vertical-align:bottom;
}
.badges li span
{
	padding:0;
	font-size:12px;
	color:#fff;
	line-height:1.8;
}

.prepareItem01 dd,
.prepareItem02 dd
{
	position:relative;
	padding-bottom:3em;
}
.prepareItem01 .buttonAbout,
.prepareItem02 .buttonAbout
{
	position:absolute;
	bottom:0;
	left:50%;
	width:220px;
	margin-left:-110px;
/*	margin-top:1em;*/
}
.prepareItem01 dd ul
{
	min-height: 118px;
}
.prepareItem02 dd ul
{
	min-height:4em;
}

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

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

.swts li
{
	margin-bottom:0.4em;
	font-size: 15px;
	color:#fff;
	line-height: 1.67;
}

.swts li:last-child
{
	margin-bottom:0;
}

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

.remark p
{
	margin:0 0 0 112px;
	padding:0.4em 0;
	color:#e60012;
	font-size: 13px;
	text-align: center;
}

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

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

.prepareItem02 #swtsList li
{
	position:absolute;
}

.prepareItem02 #swtsList li a
{
	display:block;
}

.prepareItem02 #swtsList #swtsPockyFamily
{
	top:11px;
	left:170px;
}

.prepareItem02 #swtsList #swtsPockyFamily a
{
	width:68px;
	height:108px;
}

.prepareItem02 #swtsList #swtsPocky
{
	top:66px;
	left:60px;
}

.prepareItem02 #swtsList #swtsPocky a
{
	width:98px;
	height:176px;
}


.prepareItem02 #swtsList img {
	-webkit-transition:0.1s ease-in-out;
	transition:0.1s ease-in-out;
}

.prepareItem02 #swtsList img:hover {
	-webkit-transform:scale(1.05,1.05);
	transform:scale(1.05,1.05);
	-webkit-backface-visibility: hidden;
	z-index:100;
}

.prepareItem02 p
{
	margin:2em 20px 0;
	padding:0 0 0 0.7em;
	text-indent:-0.7em;
	font-size:13px;
	color:#fff;
	line-height:1.8;
}

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

	stepSection

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

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

.stepBox
{
	width:100%;
/*	margin-bottom:80px;*/
	padding:74px 0 100px;
}

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

.steps
{
	width:1016px;
	margin:0 auto;
	padding-bottom: 20px;
	overflow:hidden;
	background-image: url(../img/contents/arrow_steps.png);
	background-position: 50% 150px;
	background-repeat: no-repeat;
}

.steps li
{
	float:left;
	width:254px;
	list-style-type:none;
	text-align:center;
	position:relative;
}

.steps dl
{
	margin:0;
}

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

.steps .msg
{
	padding:0 20px;/* english only */
	line-height:1.6em;
	font-size:14px;
	color:#fff;
}

.steps dt
{
	width:100%;
	min-height:44px;
	text-align:center;
	font-size:20px;
	color:#fff;
}

.steps dt
{
	display:inline-block;
	vertical-align:middle;
}

.stepNum
{
	position:absolute;
	top:48px;
	left:22px;
	display:block;
	width:60px;
	height:60px;
	line-height:60px;
	font-size:43px;
	font-weight:bold;
	color:#e60012;
	text-align:center;
	background-color:#fff;
	border-radius: 50%;
}

#stepSection .answers
{
	width: 303px;
	min-height: 89px;
	padding: 50px 0 59px 303px;
	margin: 0 auto 23px;
	background: url(../img/contents/image_answers.png) no-repeat 8px 50%;
	text-align: center;
}

#stepSection .answers dt
{
	margin-bottom: 22px;
	color: #fff;
	font-size: 26px;
	line-height: 1.5;
}

#stepSection .answers dd a
{
	display: inline-block;
	border-radius: 14px;
	overflow: hidden;
	padding: 0 1em 0 1.5em;
	margin: 0 auto;
	background: #f8bb31;
	color: #fff;
	font-size: 12.5px;
	line-height: 28px;
	text-decoration: none;
}

#stepSection .answers dd a::after
{
	content: url(../img/contents/arrow_dl_white.png);
	padding: 0 0 0 1em;
}

#stepSection .answers dd a span
{
	font-size: 13.7px;
}

#stepSection .answers dd a:hover
{
	background-color: #e7b035;
}

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

	report "to teachers" 2016.11.15

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

.report
{
	position:relative;
}

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

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

	manualSection

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

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

/*
.manualBox
{
	padding:74px 0 10px;
}

.manualBox .sectionTitle
{
	padding:0 2em;
}
.manualBox p
{
	width:100%;
	margin:0 auto 2em;
	font-size:24px;
	color:#fff;
	text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.15);
	text-align:center;
	line-height:2;
}

.manualBox p
{
	width:80%;
}
*/

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

.teacherBox .sectionTitle
{
	font-size: 26px;
}

.teacherBox > p
{
	width:100%;
	margin:0 auto 2em;
	font-size: 20px;
	color:#fff;
	text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.15);
	text-align:center;
	line-height:2;
}

div.teachers
{
	width: 820px;
	margin: 0 auto 80px auto;
}

div.voice
{
	width:240px;
	float: left;
	margin: 0 50px 0 0;
}

div.rightVoice
{
	margin: 0;
}

div.voice img
{
	border-radius: 50%;
	margin: 0 0 20px 20px;
	-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 h2
{
	font-size: 13px;
	color:#754b23;
	text-align: center;
	font-weight: normal;
	line-height: 1.5;
	margin-bottom: 0;
	padding-bottom: 24px;
}

div.voice h2 span
{
	font-size: 20px;
}


div.voice p
{
	position: relative;
	margin: 0 0 0 0;
	background-color: #FFFFFF;
	border-radius: 18px;
	padding: 20px;
	color:#754b23;
	font-size: 13px;
	line-height: 1.69;
	-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: "";
	position: absolute;
	display: block;
	width: 27px;
	height: 14px;

	top: -13px;
	left: 107px;
	background-image: url(../img/contents/fukidahi_serif.png);
	background-repeat: no-repeat;
	background-position: top center;
}








br.clear
{
	clear: both;
}








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

	manualDl

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

/*
#manualDl
{
	width: 656px;
	height: auto;
	margin:0 auto;
	border-radius: 10px;
	box-shadow: 4px 4px 0 0 rgba(0,0,0,0.2);
	background: #e60012;
	overflow:hidden;
}

#manualDl dl
{
	margin:3px;
	border:2px solid #fff;
	border-radius: 8px;
	background: #e60012 url(../img/contents/image_manual.jpg) 307px 34px no-repeat;
}

#manualDl dl dt
{
	width:300px;
	height:164px;
	background: url(../img/contents/logo_manual.png) 60px 82px no-repeat;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
}

#manualDl dl dd
{
	width:300px;
	height:102px;
	margin:0;
}

#manualDl dl dd a
{
	display:block;
	width:199px;
	height:24px;
	margin-left:61px;
	border:2px solid #fff;
	background-color:#fff;
	background-image:url(../img/contents/banner_dl_manual.png);
	background-position:0 -2px;
	background-repeat:no-repeat;
	border-radius:14px;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
}

#manualDl dl dd a:hover
{
	background-color:#e60012;
	background-position:0 -30px;
}
*/

.noteDl
{
	margin:1.4em auto;
	padding:0;
}

.notePkz
{
	margin:1.8em auto 3em;
	padding:0 2em;
}

.notePkz li,
.noteDl li,
.noteDl dt
{
	list-style-type:none;
	padding:0;
	line-height:1.8;
	font-size:16px;
	color:#fff;
	text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.15);
	text-align:center;
}

.noteDl dt
{
	margin-bottom:1.4em;
}

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

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

	purchaseBox

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

#purchaseBox
{
	width: 610px;
	height: auto;
	margin:0 auto;
	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;
	padding:0 18px;
}

#purchaseBox li#sweetsGlico
{
	padding:0 20px;
}

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

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

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

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

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

#purchaseBox li#sweetsBisco a:hover
{
	background-position:-81px 4px;
}

#purchaseBox li#sweetsAlmond a:hover
{
	background-position:-144px 30px;
}

#purchaseBox li#sweetsPocky a:hover
{
	background-position:-80px 0;
}

#purchaseBox li#sweetsGlico a:hover
{
	background-position:-91px 4px;
}

#purchaseBox h3
{
	display:inline-block;
	display:table;
	margin:-0.55em auto 0;
	padding:0 0.5em;
	line-height:1;
	font-size:24px;
	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 .sectionTitle
{
	padding:0 2em;
}

.casesBox p
{
	width:100%;
	margin:0 auto 2em;
	font-size: 21px;
	color:#fff;
	text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.15);
	text-align:center;
	line-height: 1.71;
}

/* adjust text width */
.casesBox p
{
	width:80%;
}

.caseList
{
	width:580px;
	margin:0 auto 88px;
	position:relative;
	color:#fff;
}

.caseList dt
{
	position:absolute;
	width:110px;
	text-align:right;
	font-size: 17px;
	line-height: 36px;
}

.caseList dt span.year
{
	font-size: 15px;
}

.caseList dd
{
	margin:0;
	padding: 7.5px 10px 7.5px 140px;
	background: url(../img/contents/line_dotted.png) 0 100% repeat-x;
	font-size: 14px;
	line-height: 1.5
}

.casesImage
{
	width:520px;
	height:520px;
	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:5px 5px 0px 0px rgba(1,1,1,0.15);
	-moz-box-shadow:5px 5px 0px 0px rgba(1,1,1,0.15);
	-webkit-box-shadow:5px 5px 0px 0px rgba(1,1,1,0.15);
	overflow:hidden;
}

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

.casesImage .casesImage06,.casesImage .casesImage07,.casesImage .casesImage08,.casesImage .casesImage32{top:180px;}
.casesImage .casesImage09,.casesImage .casesImage10,.casesImage .casesImage11,.casesImage .casesImage12,.casesImage .casesImage13,.casesImage .casesImage14,.casesImage .casesImage15{top:360px;}

.casesImage .casesImage01{left:-540px;}
.casesImage .casesImage02{left:0;}
.casesImage .casesImage03{left:180px;}
.casesImage .casesImage04{left:360px;}
.casesImage .casesImage05{left:900px;}

.casesImage .casesImage06{left:-540px;}
.casesImage .casesImage07{left:360px;}
.casesImage .casesImage08{left:900px;}

.casesImage .casesImage09{left:-540px;}
.casesImage .casesImage10{left:-360px;}
.casesImage .casesImage11{left:-180px;}

.casesImage .casesImage12{left:360px;}
.casesImage .casesImage13{left:540px;}
.casesImage .casesImage14{left:720px;}
.casesImage .casesImage15{left:900px;}

.casesImage .casesImage31{left:-360px;}
.casesImage .casesImage32{left:0;}
.casesImage .casesImage33{left:540px;}



.bannerGD
{
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;

	position: absolute;

	bottom: 80px;
	left: 30px;

	width: 186px;
	height: 54px;

	background-image:url(../img/contents/gooddesign_banner_en.png);
	background-position:50% 50%;
	background-repeat:no-repeat;

}